diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index a6fdfcc..120a559 100644 --- a/src/components/FileUpload.tsx +++ b/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) => 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) {
{error()}
+ + 0}> +
+

+ + Recent Analyses +

+
+ + {entry => ( +
props.onLoadSnapshot?.(entry)}> + {entry.name} + + {new Date(entry.timestamp).toLocaleDateString()} + +
+ )} +
+
+
+
); diff --git a/src/index.tsx b/src/index.tsx index 17a4ca9..a1180be 100644 --- a/src/index.tsx +++ b/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} /> diff --git a/src/styles.css b/src/styles.css index 55f9cef..1b7bb47 100644 --- a/src/styles.css +++ b/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);