Show reference-data update time, location filter UI, and tile fixes
- Status gains reference_updated_at (sourced from reference.db's file mtime, so it needs no separate persisted state) and the sidebar's "Your library" panel shows it as a relative "Updated Xh ago" stamp that self-refreshes every minute. - Add a Location field to the Library tab's filters panel, wired to the new LibraryFilter.location. - Bump every font-size in the stylesheet up one step for a slightly larger, easier-to-read UI overall. - Fix the library/deck tile view's +/- quantity overlay permanently covering the card art's own printed mana cost (top-right corner) — it now only fades in on hover/focus, like the other row actions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
30
src/App.tsx
30
src/App.tsx
@@ -72,6 +72,21 @@ const NAV: { id: Tab; label: string; icon: ReactNode }[] = [
|
||||
},
|
||||
];
|
||||
|
||||
/** Compact relative time, e.g. "2h ago" — for the "database updated" stamp. */
|
||||
function formatRelativeTime(epochSeconds: number): string {
|
||||
const diffSec = Math.round((Date.now() - epochSeconds * 1000) / 1000);
|
||||
if (diffSec < 30) return "just now";
|
||||
const mins = Math.round(diffSec / 60);
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hours = Math.round(mins / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.round(hours / 24);
|
||||
if (days < 30) return `${days}d ago`;
|
||||
const months = Math.round(days / 30);
|
||||
if (months < 12) return `${months}mo ago`;
|
||||
return `${Math.round(months / 12)}y ago`;
|
||||
}
|
||||
|
||||
/** Percent-fill (0..100) of one segment, given overall cumulative percent. */
|
||||
function segmentFill(stages: IngestStageInfo[], index: number, overallPercent: number): number {
|
||||
let start = 0;
|
||||
@@ -107,6 +122,14 @@ export default function App() {
|
||||
};
|
||||
}, [refreshStatus]);
|
||||
|
||||
// Force a re-render every minute so the "Updated Xh ago" stamp stays fresh
|
||||
// over a long session without needing an actual status refetch.
|
||||
const [, tick] = useState(0);
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => tick((n) => n + 1), 60000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const ready = status?.reference_ready ?? false;
|
||||
|
||||
// Keep the sidebar's library summary fresh: fetch once card data is ready,
|
||||
@@ -279,7 +302,12 @@ export default function App() {
|
||||
</>
|
||||
)}
|
||||
<div className="lib-stats-sub">
|
||||
{status?.card_count.toLocaleString()} cards in database
|
||||
<div>{status?.card_count.toLocaleString()} cards in database</div>
|
||||
{status?.reference_updated_at != null && (
|
||||
<div title={new Date(status.reference_updated_at * 1000).toLocaleString()}>
|
||||
Updated {formatRelativeTime(status.reference_updated_at)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user