analysis: allow re-opening saved analyses

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I0c7074f1c44dcef27662e99eed875e3d6a6a6964

src/components/FileUpload.tsx

@@ -1,12 +1,14 @@
-import { createSignal, Show } from 'solid-js';
-import { StatsData } from '../utils/types';
-import { BarChart2 } from 'lucide-solid';
+import { createSignal, Show, For } from 'solid-js';
+import { StatsData, ComparisonEntry } from '../utils/types';
+import { BarChart2, Clock } from 'lucide-solid';
 
 interface FileUploadProps {
   onFileLoad: (data: StatsData, raw: Record<string, unknown>) => void;
   onTextLoad: (text: string) => void;
   showHelp: boolean;
   onToggleHelp: () => void;
+  snapshots?: ComparisonEntry[];
+  onLoadSnapshot?: (entry: ComparisonEntry) => void;
 }
 
 export default function FileUpload(props: FileUploadProps) {
@@ -91,6 +93,27 @@ export default function FileUpload(props: FileUploadProps) {
         <Show when={error()}>
           <div class="error">{error()}</div>
         </Show>
+
+        <Show when={props.snapshots && props.snapshots.length > 0}>
+          <div class="recent-analyses">
+            <h3>
+              <Clock size={16} />
+              Recent Analyses
+            </h3>
+            <div class="snapshot-list">
+              <For each={props.snapshots}>
+                {entry => (
+                  <div class="snapshot-item" onClick={() => props.onLoadSnapshot?.(entry)}>
+                    <span class="snapshot-name">{entry.name}</span>
+                    <span class="snapshot-date">
+                      {new Date(entry.timestamp).toLocaleDateString()}
+                    </span>
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
       </div>
     </div>
   );

src/index.tsx

@@ -1,4 +1,4 @@
-import { createSignal, Show, For, onMount, createEffect, Suspense, lazy } from 'solid-js';
+import { createSignal, Show, For, onMount, createEffect, lazy } from 'solid-js';
 import { render } from 'solid-js/web';
 import { Github, Save, Upload, Trash2, X } from 'lucide-solid';
 import FileUpload from './components/FileUpload';
@@ -206,6 +206,8 @@ function App() {
                 onTextLoad={loadFromText}
                 showHelp={showHelp()}
                 onToggleHelp={() => setShowHelp(!showHelp())}
+                snapshots={snapshots()}
+                onLoadSnapshot={loadSnapshot}
               />
             </Show>
             <Show when={currentStats()}>

src/styles.css

@@ -297,6 +297,55 @@ body {
   font-size: 0.875rem;
 }
 
+.recent-analyses {
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--border-color);
+  text-align: left;
+}
+
+.recent-analyses h3 {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.snapshot-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.snapshot-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.snapshot-item:hover {
+  background: var(--bg-secondary);
+  border-color: var(--accent);
+}
+
+.snapshot-item .snapshot-name {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.snapshot-item .snapshot-date {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
 .quick-tips {
   background: var(--card-bg);
   border: 1px solid var(--border-color);