Persist recap list oder in local storage

Author: paviro

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "koshelf"
-version = "1.3.0"
+version = "1.4.0"
 description = "Transform your KOReader library into a beautiful reading dashboard with statistics."
 repository = "https://github.com/paviro/KOShelf"
 license = "EUPL-1.2 license"

Cargo.toml

@@ -1,3 +1,5 @@
+import { StorageManager } from './storage-manager.js';
+
 // Recap interactions: year dropdown + navigation
 document.addEventListener('DOMContentLoaded', () => {
   const wrapper = document.getElementById('yearSelectorWrapper');
@@ -37,7 +39,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const Timeline = document.getElementById('recapTimeline');
 
   if (sortToggle && Timeline) {
-    let isNewestFirst = true; // Default matches backend
+    // Read from storage, default to true (Newest First)
+    let isNewestFirst = StorageManager.get(StorageManager.KEYS.RECAP_SORT_ORDER, true);
 
     // Icons
     // Newest First (Sort Descending): Lines + Arrow Down
@@ -50,40 +53,47 @@ document.addEventListener('DOMContentLoaded', () => {
     // Arrow: M18 18V6M15 9l3-3 3 3
     const iconOldest = `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h5M4 12h8M4 17h8M18 18V6M15 9l3-3 3 3"></path>`;
 
-    sortToggle.addEventListener('click', () => {
-      isNewestFirst = !isNewestFirst;
-
-      // Update SVG icon
+    // Function to update the button UI
+    const updateUI = () => {
       const svg = sortToggle.querySelector('svg');
       if (svg) {
         svg.innerHTML = isNewestFirst ? iconNewest : iconOldest;
       }
-
-      // Update title
       sortToggle.title = isNewestFirst ? "Current: Newest First" : "Current: Oldest First";
+    };
 
+    // Function to flip the DOM order
+    const flipOrder = () => {
       // 1. Reorder Month Groups
       const months = Array.from(Timeline.querySelectorAll('.month-group'));
       months.reverse().forEach(month => Timeline.appendChild(month));
 
       // 2. Reorder Items within each Month Group (keep header at top)
       months.forEach(month => {
-        // The first child is the "month header" (.recap-event with month label)
-        // subsequent children are book items
-        // We only want to reverse the book items, keeping the header first.
         const children = Array.from(month.children);
         if (children.length > 1) {
           const header = children[0]; // first element is month title
           const items = children.slice(1); // the rest are books
 
-          // Clear content
           month.innerHTML = '';
-          // Apppend header back
           month.appendChild(header);
-          // Append reversed items
           items.reverse().forEach(item => month.appendChild(item));
         }
       });
+    };
+
+    // Apply initial state if different from default (Newest First)
+    if (!isNewestFirst) {
+      updateUI();
+      flipOrder();
+    }
+
+    sortToggle.addEventListener('click', () => {
+      isNewestFirst = !isNewestFirst;
+      StorageManager.set(StorageManager.KEYS.RECAP_SORT_ORDER, isNewestFirst);
+
+      updateUI();
+      flipOrder();
     });
   }
 });

assets/recap.js

@@ -0,0 +1,51 @@
+/**
+ * Central LocalStorage Manager
+ * Handles namespaced storage to avoid collisions and provides type safety helper.
+ */
+export class StorageManager {
+    static PREFIX = 'koshelf_';
+
+    // Centralized keys configuration
+    static KEYS = {
+        RECAP_SORT_ORDER: 'recap_sort_newest_first',
+        // Add future keys here
+    };
+
+    /**
+     * Get a value from local storage
+     * @param {string} key - The key to retrieve (value from StorageManager.KEYS)
+     * @param {any} defaultValue - Default value if key doesn't exist
+     * @returns {any} - The stored value or default
+     */
+    static get(key, defaultValue = null) {
+        try {
+            const item = localStorage.getItem(this.PREFIX + key);
+            if (item === null) return defaultValue;
+            return JSON.parse(item);
+        } catch (e) {
+            console.warn('StorageManager: Failed to parse item', e);
+            return defaultValue;
+        }
+    }
+
+    /**
+     * Set a value in local storage
+     * @param {string} key - The key to set (value from StorageManager.KEYS)
+     * @param {any} value - The value to store (will be JSON stringified)
+     */
+    static set(key, value) {
+        try {
+            localStorage.setItem(this.PREFIX + key, JSON.stringify(value));
+        } catch (e) {
+            console.warn('StorageManager: Failed to save item', e);
+        }
+    }
+
+    /**
+     * Remove a value from local storage
+     * @param {string} key - The key to remove (value from StorageManager.KEYS)
+     */
+    static remove(key) {
+        localStorage.removeItem(this.PREFIX + key);
+    }
+}

assets/storage-manager.js

@@ -258,6 +258,10 @@ impl SiteGenerator {
             let calendar_init_js_content = include_str!("../assets/calendar.js");
             fs::write(self.js_dir().join("calendar.js"), calendar_init_js_content)?;
 
+            // Storage utility
+            let storage_js_content = include_str!("../assets/storage-manager.js");
+            fs::write(self.js_dir().join("storage-manager.js"), storage_js_content)?;
+
             // Recap small UI logic
             let recap_js_content = include_str!("../assets/recap.js");
             fs::write(self.js_dir().join("recap.js"), recap_js_content)?;