feat(studio): draw the audio meters toggle as a level meter (#4254)

packages/studio/src/components/TimelineToolbar.tsx

@@ -4,7 +4,6 @@ import {
   Magnet,
   MagnifyingGlassMinus,
   MagnifyingGlassPlus,
-  SpeakerHigh,
   Waves,
 } from "@phosphor-icons/react";
 import {
@@ -23,6 +22,7 @@ import {
 import { useTimelineZoom } from "../player/components/useTimelineZoom";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { Tooltip } from "./ui";
+import { AudioMetersIcon } from "./icons/AudioMetersIcon";
 import { flatActive, flatBtn, flatDisabled, flatIdle } from "./timelineToolbarStyles";
 import { TimelineHistoryButtons } from "./TimelineHistoryButtons";
 import { Scissors } from "../icons/SystemIcons";
@@ -264,7 +264,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
                 aria-pressed={audioMetersVisible}
                 className={audioMetersVisible ? flatActive : flatIdle}
               >
-                <SpeakerHigh size={16} weight="bold" aria-hidden="true" />
+                <AudioMetersIcon size={16} />
               </button>
             </Tooltip>
           )}

packages/studio/src/components/icons/AudioMetersIcon.tsx

@@ -0,0 +1,16 @@
+export function AudioMetersIcon({ size = 16 }: { size?: number | string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M2.5 13h2m-2-3h2M7 13h2m-2-3h2m-2-3h2m-2-3h2M11.5 13h2m-2-3h2m-2-3h2" />
+    </svg>
+  );
+}