fix: better ux voice messages

.changeset/improved_voice_message_recording_ui_it_should_now_feel_a_lot_more_intergrated_.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+# Improved voice message recording UI, it should now feel a lot more integrated.

package.json

@@ -36,6 +36,7 @@
     "@fontsource-variable/nunito": "5.2.7",
     "@sentry/react": "^10.43.0",
     "@fontsource/space-mono": "5.2.9",
+    "@phosphor-icons/react": "^2.1.10",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-query-devtools": "^5.91.3",
     "@tanstack/react-virtual": "^3.13.19",

pnpm-workspace.yaml

@@ -1,4 +1,5 @@
 allowBuilds:
+  '@sentry/cli': true
   '@swc/core': true
   esbuild: true
   sharp: true

src/app/components/message/content/AudioContent.tsx

@@ -104,34 +104,41 @@ export function AudioContent({
         max={duration || 1}
         values={[currentTime]}
         onChange={(values) => seek(values[0])}
-        renderTrack={(params) => (
-          <div {...params.props}>
-            {params.children}
-            <ProgressBar
-              as="div"
-              variant="Secondary"
+        renderTrack={(params) => {
+          const { key, ...restProps } = params.props as any;
+          return (
+            <div key={key} {...restProps}>
+              {params.children}
+              <ProgressBar
+                as="div"
+                variant="Secondary"
+                size="300"
+                min={0}
+                max={duration}
+                value={currentTime}
+                radii="300"
+              />
+            </div>
+          );
+        }}
+        renderThumb={(params) => {
+          const { key, style, ...restProps } = params.props as any;
+          return (
+            <Badge
+              key={key}
               size="300"
-              min={0}
-              max={duration}
-              value={currentTime}
-              radii="300"
+              variant="Secondary"
+              fill="Solid"
+              radii="Pill"
+              outlined
+              {...restProps}
+              style={{
+                ...style,
+                zIndex: 0,
+              }}
             />
-          </div>
-        )}
-        renderThumb={(params) => (
-          <Badge
-            size="300"
-            variant="Secondary"
-            fill="Solid"
-            radii="Pill"
-            outlined
-            {...params.props}
-            style={{
-              ...params.props.style,
-              zIndex: 0,
-            }}
-          />
-        )}
+          );
+        }}
       />
     ),
     leftControl: (
@@ -174,34 +181,41 @@ export function AudioContent({
           max={1}
           values={[volume]}
           onChange={(values) => setVolume(values[0])}
-          renderTrack={(params) => (
-            <div {...params.props}>
-              {params.children}
-              <ProgressBar
-                style={{ width: toRem(48) }}
-                variant="Secondary"
+          renderTrack={(params) => {
+            const { key, ...restProps } = params.props as any;
+            return (
+              <div key={key} {...restProps}>
+                {params.children}
+                <ProgressBar
+                  style={{ width: toRem(48) }}
+                  variant="Secondary"
+                  size="300"
+                  min={0}
+                  max={1}
+                  value={volume}
+                  radii="300"
+                />
+              </div>
+            );
+          }}
+          renderThumb={(params) => {
+            const { key, style, ...restProps } = params.props as any;
+            return (
+              <Badge
+                key={key}
                 size="300"
-                min={0}
-                max={1}
-                value={volume}
-                radii="300"
+                variant="Secondary"
+                fill="Solid"
+                radii="Pill"
+                outlined
+                {...restProps}
+                style={{
+                  ...style,
+                  zIndex: 0,
+                }}
               />
-            </div>
-          )}
-          renderThumb={(params) => (
-            <Badge
-              size="300"
-              variant="Secondary"
-              fill="Solid"
-              radii="Pill"
-              outlined
-              {...params.props}
-              style={{
-                ...params.props.style,
-                zIndex: 0,
-              }}
-            />
-          )}
+            );
+          }}
         />
       </>
     ),

src/app/components/upload-card/UploadCard.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { RadiiVariant, color, config } from 'folds';
+import { DefaultReset, RadiiVariant, color, config, toRem } from 'folds';
 
 export const UploadCard = recipe({
   base: {
@@ -34,3 +34,65 @@ export const UploadCardError = style({
   padding: `0 ${config.space.S100}`,
   color: color.Critical.Main,
 });
+
+export const AudioPreviewContainer = style([
+  DefaultReset,
+  {
+    backgroundColor: color.SurfaceVariant.Container,
+    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    borderRadius: config.radii.R400,
+    padding: config.space.S300,
+    width: '100%',
+    maxWidth: toRem(400),
+    boxSizing: 'border-box',
+  },
+]);
+
+export const AudioWaveformContainer = style([
+  DefaultReset,
+  {
+    minHeight: 44,
+    cursor: 'pointer',
+    userSelect: 'none',
+    overflow: 'hidden',
+  },
+]);
+
+export const AudioWaveformBar = style([
+  DefaultReset,
+  {
+    width: 2,
+    height: 3,
+    borderRadius: 1,
+    flexShrink: 0,
+    transition: 'background-color 40ms, opacity 40ms',
+    pointerEvents: 'none',
+  },
+]);
+
+export const AudioWaveformBarPlayed = style([
+  DefaultReset,
+  {
+    backgroundColor: color.Secondary.Main,
+    opacity: 1,
+  },
+]);
+
+export const AudioWaveformBarUnplayed = style([
+  DefaultReset,
+  {
+    backgroundColor: color.SurfaceVariant.OnContainer,
+    opacity: 0.5,
+  },
+]);
+
+export const AudioTimeDisplay = style([
+  DefaultReset,
+  {
+    fontVariantNumeric: 'tabular-nums',
+    color: color.SurfaceVariant.OnContainer,
+    minWidth: toRem(30),
+    textAlign: 'right',
+    flexShrink: 0,
+  },
+]);