feat: timeline and folder import

frontend/src/components/KeyboardHints.tsx

@@ -0,0 +1,45 @@
+import { usePhotoStore } from '../store/photoStore'
+
+export function KeyboardHints() {
+  const selectedCount = usePhotoStore((state) => state.selectedPhotos.length)
+
+  const hints = selectedCount > 0 ? [
+    { key: '1-5', action: 'Rate' },
+    { key: 'P', action: 'Pick' },
+    { key: 'X', action: 'Reject' },
+    { key: 'Delete', action: 'Trash' },
+    { key: 'Esc', action: 'Deselect' },
+  ] : [
+    { key: '↑↓←→', action: 'Navigate' },
+    { key: 'Click', action: 'Select' },
+    { key: 'Shift+Click', action: 'Range' },
+    { key: 'Ctrl+A', action: 'Select All' },
+    { key: 'Space', action: 'Preview' },
+  ]
+
+  return (
+    <div className="fixed top-14 left-1/2 z-20 -translate-x-1/2">
+      <div className="flex items-center gap-3 rounded-full border border-border bg-surface/90 px-4 py-2 shadow-lg backdrop-blur-sm">
+        {hints.map((hint, i) => (
+          <div key={i} className="flex items-center gap-1.5">
+            <kbd className="rounded bg-surface-offset px-2 py-0.5 text-xs font-medium text-text">
+              {hint.key}
+            </kbd>
+            <span className="text-xs text-text-muted">{hint.action}</span>
+            {i < hints.length - 1 && (
+              <span className="ml-2 text-text-faint">•</span>
+            )}
+          </div>
+        ))}
+        {selectedCount > 0 && (
+          <>
+            <span className="ml-2 text-text-faint">•</span>
+            <span className="text-xs font-medium text-primary">
+              {selectedCount} selected
+            </span>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}