npm - spendwise - Versions diffs - 1.0.0 → 1.0.2 - Mend

spendwise 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +7 -14
package/package.json +1 -1
package/src/main/webserver.js +40 -7
package/src/renderer/css/app.css +1 -1
package/src/renderer/index.html +146 -128
package/src/renderer/js/app.js +21 -1
package/src/renderer/js/charts.js +15 -0
package/src/renderer/js/theme.js +44 -0
package/src/renderer/js/views/month.js +4 -4

package/src/renderer/js/app.js CHANGED Viewed

@@ -39,6 +39,16 @@ document.addEventListener('alpine:init', () => {
     });
 });
+// Last screen (view + month) survives reload. localStorage, not the database:
+// like the theme, it is per-device state - the same db.json is shared between
+// the desktop app, the web server and other machines, and one screen's
+// position must not follow the data.
+const SCREEN_KEY = 'spendwise-last-screen';
+function loadScreen () {
+    try { return JSON.parse(localStorage.getItem(SCREEN_KEY)) || {}; } catch (e) { return {}; }
+}
 function appRoot () {
     return {
         async init () {
@@ -53,10 +63,20 @@ function appRoot () {
                 const ui = Alpine.store('ui');
                 const keys = FinEngine.monthKeys(res.data);
                 const open = keys.filter((k) => res.data.months[k].status === 'open');
-                ui.currentKey = open.length ? open[open.length - 1] : keys[keys.length - 1];
+                const saved = loadScreen(); // restore last screen, but only what still exists
+                ui.currentKey = res.data.months[saved.key] ? saved.key
+                    : open.length ? open[open.length - 1] : keys[keys.length - 1];
+                if (['month', 'insights', 'settings'].includes(saved.view)) ui.view = saved.view;
                 ui.savedSnapshot = JSON.stringify(res.data.months[ui.currentKey]);
                 // desktop privacy lock; web clients authenticated at the server
                 ui.locked = !!(res.data.settings && res.data.settings.auth) && !window.IS_WEB;
+                // reactive persistence: fires on any view/month change, whatever
+                // its origin (nav, header picker, close-out advancing the month)
+                Alpine.effect(() => {
+                    const snap = JSON.stringify({ view: ui.view, key: ui.currentKey });
+                    try { localStorage.setItem(SCREEN_KEY, snap); } catch (e) { /* private mode - session only */ }
+                });
             } catch (e) {
                 showToast('Failed to load data: ' + e.message, 'error', 12000);
             }

package/src/renderer/js/charts.js CHANGED Viewed

@@ -103,8 +103,23 @@ const Charts = {
         return this._render(id, el, options);
     },
+    /**
+     * Fold the current theme into a chart's options at render. theme.mode
+     * carries the tooltip/data-label palette and a transparent background lets
+     * the card show through; the axis-label and grid COLOURS are handled in CSS
+     * (input.css) instead, keyed on html.dark - that repaints instantly when the
+     * theme flips under an already-rendered chart, which updateOptions() can't.
+     */
+    _applyTheme (options) {
+        const dark = !!(window.Theme && window.Theme.resolved() === 'dark');
+        options.theme = { ...(options.theme || {}), mode: dark ? 'dark' : 'light' };
+        options.chart = { ...(options.chart || {}), background: 'transparent' };
+        return options;
+    },
     _render (id, el, options) {
         if (!el) return null;
+        this._applyTheme(options);
         // destroy + clear + create: updateOptions() does not reliably apply
         // changed label sets (donut legends stick), so a fresh instance it is
         this.destroy(id);

package/src/renderer/js/theme.js ADDED Viewed

@@ -0,0 +1,44 @@
+/*
+ * Appearance: sets `html.dark` from the saved preference so the dark palette
+ * in app.css applies. Loaded synchronously at the top of <head> (the app's CSP
+ * forbids inline scripts) so the class is on the element before first paint -
+ * no light-to-dark flash.
+ *
+ * The preference lives in localStorage, not the database: it is a per-device
+ * choice, and the same db.json is shared between the desktop app, the web
+ * server, and other machines - one person's dark mode must not follow the data.
+ *
+ *   spendwise-theme = 'system' | 'light' | 'dark'   (default 'system')
+ *
+ * window.Theme is the small API the Settings control drives.
+ */
+'use strict';
+(function () {
+    var KEY = 'spendwise-theme';
+    var mq = window.matchMedia('(prefers-color-scheme: dark)');
+    function pref () {
+        try { return localStorage.getItem(KEY) || 'system'; } catch (e) { return 'system'; }
+    }
+    function isDark (p) {
+        return p === 'dark' || (p === 'system' && mq.matches);
+    }
+    function apply () {
+        document.documentElement.classList.toggle('dark', isDark(pref()));
+    }
+    window.Theme = {
+        get: pref,
+        set: function (p) {
+            try { localStorage.setItem(KEY, p); } catch (e) { /* private mode - session only */ }
+            apply();
+        },
+        resolved: function () { return isDark(pref()) ? 'dark' : 'light'; },
+    };
+    // follow the OS while on 'system'
+    mq.addEventListener('change', function () { if (pref() === 'system') apply(); });
+    apply();
+}());

package/src/renderer/js/views/month.js CHANGED Viewed

@@ -235,10 +235,10 @@ function monthView () {
         groupHint (kind) {
             return {
-                income: 'All income for the month. 📌 Pin recurring sources so they carry forward.',
-                envelope: 'Little savings accounts: “monthly” is added at each close-out. Spending flows in automatically from expense rows assigned to the envelope. Use ％ to auto-fund from a percentage of other groups.',
-                goal: 'Envelope budgets with a cap - ideal for recurring bills. Use 🕓 to set a due date and the monthly deposit is calculated for you and re-spread each cycle.',
-                expense: 'Monthly or one-time expenses. 📌 Pin recurring ones. Assign one to an envelope and it spends from that envelope’s balance instead.',
+                income: 'All income for the month. <kbd class="border border-zinc-300 rounded-sm py-0.5 px-0.75"><svg class="w-3.5 h-3.5 inline-block -mt-1"><use href="#i-pin"/></svg></kbd> Pin recurring sources so they carry forward.',
+                envelope: 'Little savings accounts: Spending flows in automatically from expense rows assigned to the envelope. Use <kbd class="border border-zinc-300 rounded-sm py-0.5 px-0.75"><svg class="w-3.5 h-3.5 inline-block -mt-1"><use href="#i-percent"/></svg></kbd> to auto-fund from a percentage of other groups.',
+                goal: 'Envelope budgets with a cap - ideal for recurring bills. Use <kbd class="border border-zinc-300 rounded-sm py-0.5 px-0.75"><svg class="w-3.5 h-3.5 inline-block -mt-1"><use href="#i-clock"/></svg></kbd> to set a due date and the monthly deposit is calculated for you and re-spread each cycle.',
+                expense: 'Monthly or one-time expenses. <kbd class="border border-zinc-300 rounded-sm py-0.5 px-0.75"><svg class="w-3.5 h-3.5 inline-block -mt-1"><use href="#i-pin"/></svg></kbd> Pin recurring ones. Assign one to an envelope and it spends from that envelope’s balance instead.',
             }[kind] || '';
         },