feat(image-to-base64): progress bar, synced navigation, batch download buttons (#66)

- Process files one at a time for real per-file progress bar
- Sync right panel with left panel file navigation (arrows work)
- Show image preview before conversion
- Add "Download All as JSON" and "Download All as Text" batch buttons
- Unify batch action button styles

Co-authored-by: stirling-image <stirling-image@users.noreply.github.com>

apps/web/src/stores/base64-store.ts

@@ -17,14 +17,24 @@ export interface Base64Error {
   error: string;
 }
 
+export interface Base64Progress {
+  completed: number;
+  total: number;
+  currentFile: string;
+}
+
 interface Base64State {
   results: Base64Result[];
   errors: Base64Error[];
   processing: boolean;
+  progress: Base64Progress | null;
   expandedIndex: number;
 
   setResults: (results: Base64Result[], errors: Base64Error[]) => void;
   setProcessing: (v: boolean) => void;
+  setProgress: (p: Base64Progress | null) => void;
+  addResult: (result: Base64Result) => void;
+  addError: (error: Base64Error) => void;
   setExpandedIndex: (i: number) => void;
   reset: () => void;
 }
@@ -33,10 +43,15 @@ export const useBase64Store = create<Base64State>((set) => ({
   results: [],
   errors: [],
   processing: false,
+  progress: null,
   expandedIndex: 0,
 
   setResults: (results, errors) => set({ results, errors, expandedIndex: 0 }),
   setProcessing: (v) => set({ processing: v }),
+  setProgress: (p) => set({ progress: p }),
+  addResult: (result) => set((s) => ({ results: [...s.results, result] })),
+  addError: (error) => set((s) => ({ errors: [...s.errors, error] })),
   setExpandedIndex: (i) => set({ expandedIndex: i }),
-  reset: () => set({ results: [], errors: [], processing: false, expandedIndex: 0 }),
+  reset: () =>
+    set({ results: [], errors: [], processing: false, progress: null, expandedIndex: 0 }),
 }));