Assisted-by: Claude Opus 4.6 via Claude Code

diff --git a/lib/ketchup/views/layout.rb b/lib/ketchup/views/layout.rb
index 557bd60..912fc0a 100644
--- a/lib/ketchup/views/layout.rb
+++ b/lib/ketchup/views/layout.rb
@@ -21,6 +21,7 @@ module Views
           link(rel: "stylesheet", href: "/css/app.css")
           script(src: "https://unpkg.com/overtype/dist/overtype.min.js")
           script(src: "/js/app.js", defer: true)
+          script(src: "https://cdn.jsdelivr.net/npm/@alpinejs/persist@3/dist/cdn.min.js", defer: true)
           script(src: "https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js", defer: true)
         end
         body do
diff --git a/public/js/app.js b/public/js/app.js
index 129efb2..185afcd 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -60,13 +60,10 @@ OverType.setTheme({ name: "ketchup", colors: { text: "#1a1a1a" } })
 
 document.addEventListener("alpine:init", () => {
   Alpine.data("sortable", () => ({
-    sort: localStorage.getItem("sort") || "urgency",
+    sort: Alpine.$persist("urgency"),
 
     init() {
-      this.$watch("sort", (value) => {
-        localStorage.setItem("sort", value)
-        this.reorder()
-      })
+      this.$watch("sort", () => this.reorder())
       if (this.sort !== "urgency") {
         this.$nextTick(() => this.reorder())
       }
@@ -215,12 +212,6 @@ document.addEventListener("alpine:init", () => {
   }
 
   Alpine.data("upcoming", () => ({
-    showEmpty: localStorage.getItem("upcoming-show-empty") !== "false",
-
-    init() {
-      this.$watch("showEmpty", (value) => {
-        localStorage.setItem("upcoming-show-empty", value)
-      })
-    },
+    showEmpty: Alpine.$persist(true),
   }))
 })