style: complete re-design of whole editor

apps/web/src/components/editor/timeline/index.tsx

@@ -20,6 +20,9 @@ import {
   ZoomIn,
   ZoomOut,
   Bookmark,
+  Eye,
+  MicOff,
+  Mic,
 } from "lucide-react";
 import {
   Tooltip,
@@ -544,7 +547,7 @@ export function Timeline() {
         {/* Timeline Header with Ruler */}
         <div className="flex bg-panel sticky top-0 z-10">
           {/* Track Labels Header */}
-          <div className="w-48 shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
+          <div className="w-28 shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
             {/* Empty space */}
             <span className="text-sm font-medium text-muted-foreground opacity-0">
               .
@@ -652,14 +655,14 @@ export function Timeline() {
                     );
                   }).filter(Boolean);
                 })()}
-                
+
                 {/* Bookmark markers */}
                 {(() => {
                   const { activeProject } = useProjectStore.getState();
                   if (!activeProject?.bookmarks?.length) return null;
-                  
+
                   return activeProject.bookmarks.map((bookmarkTime, i) => (
-                                          <div
+                    <div
                       key={`bookmark-${i}`}
                       className="absolute top-0 h-10 w-0.5 !bg-primary cursor-pointer"
                       style={{
@@ -687,7 +690,7 @@ export function Timeline() {
           {tracks.length > 0 && (
             <div
               ref={trackLabelsRef}
-              className="w-48 shrink-0 border-r border-black overflow-y-auto z-200 bg-panel"
+              className="w-28 shrink-0 border-r overflow-y-auto z-100 bg-panel"
               data-track-labels
             >
               <ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
@@ -695,17 +698,24 @@ export function Timeline() {
                   {tracks.map((track) => (
                     <div
                       key={track.id}
-                      className="flex items-center px-3 border-b border-muted/30 group bg-foreground/5"
+                      className="flex items-center px-3 group"
                       style={{ height: `${getTrackHeight(track.type)}px` }}
                     >
-                      <div className="flex items-center flex-1 min-w-0">
+                      <div className="flex items-center justify-end flex-1 min-w-0 gap-2">
+                        {track.muted ? (
+                          <MicOff
+                            className="h-4 w-4 text-destructive cursor-pointer"
+                            onClick={() => toggleTrackMute(track.id)}
+                          />
+                        ) : (
+                          <Mic
+                            className="h-4 w-4 text-muted-foreground cursor-pointer"
+                            onClick={() => toggleTrackMute(track.id)}
+                          />
+                        )}
+                        <Eye className="h-4 w-4 text-muted-foreground" />
                         <TrackIcon track={track} />
                       </div>
-                      {track.muted && (
-                        <span className="ml-2 text-xs text-red-500 font-semibold shrink-0">
-                          Muted
-                        </span>
-                      )}
                     </div>
                   ))}
                 </div>
@@ -760,7 +770,7 @@ export function Timeline() {
                       <ContextMenu key={track.id}>
                         <ContextMenuTrigger asChild>
                           <div
-                            className="absolute left-0 right-0 border-b border-muted/30 py-[0.05rem]"
+                            className="absolute left-0 right-0"
                             style={{
                               top: `${getCumulativeHeightBefore(
                                 tracks,
@@ -798,23 +808,6 @@ export function Timeline() {
                           <ContextMenuItem onClick={(e) => e.stopPropagation()}>
                             Track settings (soon)
                           </ContextMenuItem>
-                          {activeProject?.bookmarks?.length && activeProject.bookmarks.length > 0 && (
-                            <>
-                              <ContextMenuItem disabled>Bookmarks</ContextMenuItem>
-                              {activeProject.bookmarks.map((bookmarkTime, i) => (
-                                <ContextMenuItem 
-                                  key={`bookmark-menu-${i}`}
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    seek(bookmarkTime);
-                                  }}
-                                >
-                                  <Bookmark className="h-3 w-3 mr-2 inline-block" />
-                                  {bookmarkTime.toFixed(1)}s
-                                </ContextMenuItem>
-                              ))}
-                              </>
-                          )}
                         </ContextMenuContent>
                       </ContextMenu>
                     ))}
@@ -1000,11 +993,11 @@ function TimelineToolbar({
   const handleZoomSliderChange = (values: number[]) => {
     setZoomLevel(values[0]);
   };
-  
+
   const handleToggleBookmark = async () => {
     await toggleBookmark(currentTime);
   };
-  
+
   // Check if the current time is bookmarked
   const currentBookmarked = isBookmarked(currentTime);
   return (
@@ -1142,7 +1135,9 @@ function TimelineToolbar({
           <Tooltip>
             <TooltipTrigger asChild>
               <Button variant="text" size="icon" onClick={handleToggleBookmark}>
-                <Bookmark className={`h-4 w-4 ${currentBookmarked ? "fill-primary text-primary" : ""}`} />
+                <Bookmark
+                  className={`h-4 w-4 ${currentBookmarked ? "fill-primary text-primary" : ""}`}
+                />
               </Button>
             </TooltipTrigger>
             <TooltipContent>