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/package.json                             |  1 +
 apps/web/src/components/editor/timeline/index.tsx | 20 +++++++++++++++++++-
 apps/web/src/hooks/use-keyboard-shortcuts-help.ts |  1 +
 apps/web/src/stores/keybindings-store.ts          |  1 +
 4 files changed, 22 insertions(+), 1 deletion(-)

(limited to 'apps/web')

diff --git a/apps/web/package.json b/apps/web/package.json
index 9531b6c7..139c6529 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -72,6 +72,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16",
     "@types/bun": "latest",
+    "@types/node": "^24.1.0",
     "@types/pg": "^8.15.4",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
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
diff --git a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts b/apps/web/src/hooks/use-keyboard-shortcuts-help.ts
index 2f1a4d4a..e2cde3b4 100644
--- a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts
+++ b/apps/web/src/hooks/use-keyboard-shortcuts-help.ts
@@ -77,6 +77,7 @@ const formatKey = (key: string): string => {
     .replace("down", "↓")
     .replace("space", "Space")
     .replace("home", "Home")
+    .replace("enter", "Enter")
     .replace("end", "End")
     .replace("delete", "Delete")
     .replace("backspace", "Backspace")
diff --git a/apps/web/src/stores/keybindings-store.ts b/apps/web/src/stores/keybindings-store.ts
index 97cba23f..4c11cfde 100644
--- a/apps/web/src/stores/keybindings-store.ts
+++ b/apps/web/src/stores/keybindings-store.ts
@@ -17,6 +17,7 @@ export const defaultKeybindings: KeybindingConfig = {
   "shift+left": "jump-backward",
   "shift+right": "jump-forward",
   home: "goto-start",
+  enter: "goto-start",
   end: "goto-end",
   s: "split-element",
   n: "toggle-snapping",
-- 
cgit v1.3.1