feat: What's New screen + updater progress, plus light-theme fixes

Post-update UX for the next release (0.1.2): - What's New: after a version change, greet the user with a toast that opens an in-app release-notes screen (collapsible Added/Changed/Fixed sections) sourced from the bundled CHANGELOG.md, reopenable from Settings -> Updates. Backed by a last_seen_version settings file (get/set_last_seen_version commands) that distinguishes upgrades from fresh installs. - Updater: the download/install progress toast now reappears when an update is started from the title-bar indicator or Settings after the prompt was dismissed; Settings -> Updates gains a real progress bar with a percentage. - Light theme: fix the recurring subtle-light breakage. Neutral surfaces now rely on the CSS-variable remap instead of light-theme:bg-white (which forced surfaces dark because --color-white is remapped dark); the green action buttons drop the broken light-theme:hover:bg-emerald-200 (remapped dark, unreadable on hover) for an override-free emerald-500 tint that auto-themes, across the updater, What's New, and onboarding. - Debug panel: add What's New triggers (toast / modal / reset).
2026-06-23 21:33:08 +01:00
parent 1a95e31f78
commit c878970180
14 changed files with 537 additions and 8 deletions
@@ -0,0 +1,44 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useGalleryStore } from "../store";
+
+// Shown once on the first launch after an update, inviting the user to read the
+// changelog. Distinct from UpdateToast (which drives the download/install flow).
+export function WhatsNewToast() {
+  const whatsNewToast = useGalleryStore((s) => s.whatsNewToast);
+  const whatsNewOpen = useGalleryStore((s) => s.whatsNewOpen);
+  const openWhatsNew = useGalleryStore((s) => s.openWhatsNew);
+  const dismissWhatsNewToast = useGalleryStore((s) => s.dismissWhatsNewToast);
+
+  const visible = whatsNewToast !== null && !whatsNewOpen;
+
+  return (
+    <AnimatePresence>
+      {visible ? (
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 12 }}
+          transition={{ duration: 0.18 }}
+          className="fixed bottom-4 right-4 z-50 w-80 rounded-lg border border-emerald-400/20 bg-gray-900 p-4 shadow-xl"
+        >
+          <p className="text-sm font-medium text-white">What's new in Phokus v{whatsNewToast}</p>
+          <p className="mt-1 text-xs text-gray-500">See what's changed in this version.</p>
+          <div className="mt-3 flex items-center gap-2">
+            <button
+              className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
+              onClick={openWhatsNew}
+            >
+              What's new
+            </button>
+            <button
+              className="rounded-md border border-transparent px-3 py-1.5 text-xs text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-gray-200"
+              onClick={dismissWhatsNewToast}
+            >
+              Dismiss
+            </button>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}