feat: timeline and folder import

frontend/src/components/layout/TopBar.tsx

@@ -7,31 +7,71 @@ import {
   FolderOpen,
   Upload,
   Settings,
-  Menu
+  Menu,
+  Trash2
 } from 'lucide-react'
 import clsx from 'clsx'
 import { usePhotoStore } from '../../store/photoStore'
+import { photos } from '../../services/api'
+import { toast } from '../ToastContainer'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import muliLogo from '../../assets/muli-logo.png'
 
 export function TopBar() {
   const [searchQuery, setSearchQuery] = useState('')
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
-  const selectedCount = usePhotoStore((state) => state.selectedPhotos.length)
+  const selectedPhotos = usePhotoStore((state) => state.selectedPhotos)
+  const clearSelection = usePhotoStore((state) => state.clearSelection)
+  const selectedCount = selectedPhotos.length
+  const queryClient = useQueryClient()
+  
+  // Mutation for moving photos to trash
+  const trashPhotosMutation = useMutation({
+    mutationFn: async () => {
+      await photos.bulkUpdate(selectedPhotos, { trash: true })
+    },
+    onSuccess: () => {
+      toast.success('Moved to Trash', `${selectedCount} photo${selectedCount > 1 ? 's' : ''} moved to trash`)
+      clearSelection()
+      queryClient.invalidateQueries({ queryKey: ['photos'] })
+    },
+    onError: (error: any) => {
+      toast.error('Failed to Move to Trash', error.message || 'An error occurred')
+    },
+  })
   
   return (
     <header className="flex h-12 items-center justify-between border-b border-border bg-surface px-4">
       {/* Left Section - Menu and App Name */}
       <div className="flex items-center gap-3">
         <button
-          className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text"
-          title="Toggle sidebar"
+          className="group relative rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text"
+          title="Toggle sidebar (Tab)"
         >
           <Menu className="h-5 w-5" />
+          <kbd className="absolute -bottom-5 left-1/2 -translate-x-1/2 rounded bg-surface-offset px-1 py-0.5 text-[9px] font-medium text-text opacity-0 group-hover:opacity-100">
+            Tab
+          </kbd>
         </button>
-        <h1 className="text-lg font-semibold text-text">Mulita</h1>
+        <div className="flex items-center gap-2">
+          <img src={muliLogo} alt="Mulita" className="h-7 w-7 object-contain" />
+          <h1 className="text-lg font-semibold text-text">Mulita</h1>
+        </div>
         {selectedCount > 0 && (
-          <span className="rounded bg-primary/20 px-2 py-0.5 text-sm text-primary">
-            {selectedCount} selected
-          </span>
+          <>
+            <span className="rounded bg-primary/20 px-2 py-0.5 text-sm text-primary">
+              {selectedCount} selected
+            </span>
+            <button
+              onClick={() => trashPhotosMutation.mutate()}
+              disabled={trashPhotosMutation.isPending}
+              className="flex items-center gap-1 rounded bg-reject/20 px-2 py-0.5 text-sm text-reject hover:bg-reject/30 disabled:opacity-50"
+              title="Move to trash"
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+              Trash
+            </button>
+          </>
         )}
       </div>
       
@@ -81,10 +121,13 @@ export function TopBar() {
         
         {/* Filter Button */}
         <button
-          className="rounded p-1.5 text-text-muted hover:bg-surface-2 hover:text-text"
-          title="Filter photos"
+          className="group relative rounded p-1.5 text-text-muted hover:bg-surface-2 hover:text-text"
+          title="Filter photos (Ctrl+F)"
         >
           <SlidersHorizontal className="h-4 w-4" />
+          <kbd className="absolute -bottom-5 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-surface-offset px-1 py-0.5 text-[9px] font-medium text-text opacity-0 group-hover:opacity-100">
+            Ctrl+F
+          </kbd>
         </button>
         
         <div className="mx-1 h-6 w-px bg-border" />