From f5d5a387d349c35688c958c591073fa15c4d2c38 Mon Sep 17 00:00:00 2001
From: ryu <ryumacodes@gmail.com>
Date: Fri, 1 Aug 2025 02:33:42 +0500
Subject: feat: add timeline navigation return to start functionality

- Add Enter key shortcut for seeking to timeline start (00:00:00)
- Add return to start button in timeline toolbar with skip-back icon
- Both methods complement existing Home key shortcut
- Update keyboard shortcuts help to display Enter key properly
- Maintain consistent UI styling with existing playback controls

Resolves #415
---
 apps/web/src/components/editor/timeline/index.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

(limited to 'apps/web/src/components/editor/timeline')

diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 078f1258..cf5fd524 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -12,6 +12,7 @@ import {
   SplitSquareHorizontal,
   Pause,
   Play,
+  SkipBack,
   Video,
   Music,
   TypeIcon,
@@ -508,7 +509,7 @@ export function Timeline() {
       onMouseEnter={() => setIsInTimeline(true)}
       onMouseLeave={() => setIsInTimeline(false)}
     >
-      <TimelineToolbar zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
+      <TimelineToolbar zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} seek={seek} />
 
       {/* Timeline Container */}
       <div
@@ -806,9 +807,11 @@ function TrackIcon({ track }: { track: TimelineTrack }) {
 function TimelineToolbar({
   zoomLevel,
   setZoomLevel,
+  seek,
 }: {
   zoomLevel: number;
   setZoomLevel: (zoom: number) => void;
+  seek: (time: number) => void;
 }) {
   const {
     tracks,
@@ -981,6 +984,21 @@ function TimelineToolbar({
               {isPlaying ? "Pause (Space)" : "Play (Space)"}
             </TooltipContent>
           </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="text"
+                size="icon"
+                onClick={() => seek(0)}
+                className="mr-2"
+              >
+                <SkipBack className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              Return to Start (Home / Enter)
+            </TooltipContent>
+          </Tooltip>
           <div className="w-px h-6 bg-border mx-1" />
           {/* Time Display */}
           <div
-- 
cgit v1.3.1