Add journal saving to localStorage

twisted/twisted_site/templates/client/projects/journal/edit.html

@@ -32,7 +32,8 @@
                         {% block preform %}
                         {% endblock preform %}
                         <div class="flex-1 border border-border bg-card">
-                            <c-mdedit class="h-full overflow-auto">
+                            <c-mdedit class="h-full overflow-auto"
+                                      save_id="edit-journal-{{ journal.id }}">
                                 <c-slot name="content">{{ content|default:journal.content }}</c-slot>
                             </c-mdedit>
                         </div>

twisted/twisted_site/templates/client/projects/journal/new_journal.base.html

@@ -54,7 +54,8 @@
                         {% block preform %}
                         {% endblock preform %}
                         <div class="flex-1 border border-border bg-card">
-                            <c-mdedit class="h-full overflow-auto">
+                            <c-mdedit class="h-full overflow-auto"
+                                      save_id="new-journal-{{ project.id }}">
                             </c-mdedit>
                         </div>
                         <div class="flex justify-end pt-3">

twisted/twisted_site/templates/cotton/mdedit.html

@@ -1,4 +1,20 @@
 <div class="flex flex-col flex-1 min-h-0 min-w-0 {{ class }} font-vintage">
+    <div id="restorebanner"
+         class="hidden shrink-0 items-center justify-between gap-2 bg-warning/30 border-b border-warning px-3 py-2 text-sm">
+        <span>A saved draft was found. Restore it?</span>
+        <div class="flex gap-2 shrink-0">
+            <button type="button"
+                    onclick="restoreSavedDraft()"
+                    class="px-2 py-1 bg-primary text-primary-foreground border border-border hover:bg-primary/80">
+                Restore
+            </button>
+            <button type="button"
+                    onclick="dismissSavedDraft()"
+                    class="px-2 py-1 bg-secondary text-secondary-foreground border border-border hover:bg-primary hover:text-primary-foreground">
+                Dismiss
+            </button>
+        </div>
+    </div>
     <div class="shrink-0 flex items-center gap-1 bg-card border-b border-border p-1">
         <button id="editbutton"
                 type="button"
@@ -35,6 +51,84 @@
     const textbox = document.querySelector("#content");
     const csrfToken = "{{ csrf_token }}";
 
+    const saveId = "{{ save_id }}";
+    const draftStorageKey = saveId ? `mdedit-draft:${saveId}` : null;
+
+    function readSavedDraft() {
+        if (!draftStorageKey) {
+            return null;
+        }
+
+        try {
+            return localStorage.getItem(draftStorageKey);
+        } catch (e) {
+            return null;
+        }
+    }
+
+    function saveDraft() {
+        if (!draftStorageKey) {
+            return;
+        }
+
+        try {
+            localStorage.setItem(draftStorageKey, textbox.value);
+        } catch (e) {
+            // localStorage unavailable (private browsing, quota exceeded, etc.)
+        }
+    }
+
+    function clearSavedDraft() {
+        if (!draftStorageKey) {
+            return;
+        }
+
+        try {
+            localStorage.removeItem(draftStorageKey);
+        } catch (e) {
+            // ignore
+        }
+    }
+
+    function restoreSavedDraft() {
+        const saved = readSavedDraft();
+
+        if (saved !== null) {
+            textbox.value = saved;
+            renderpreview();
+        }
+
+        document.getElementById("restorebanner").classList.add("hidden");
+        document.getElementById("restorebanner").classList.remove("flex");
+    }
+
+    function dismissSavedDraft() {
+        document.getElementById("restorebanner").classList.add("hidden");
+        document.getElementById("restorebanner").classList.remove("flex");
+    }
+
+    if (draftStorageKey) {
+        const saved = readSavedDraft();
+
+        if (saved !== null && saved !== textbox.value) {
+            if (textbox.value.trim() === "") {
+                textbox.value = saved;
+                renderpreview();
+            } else {
+                document.getElementById("restorebanner").classList.remove("hidden");
+                document.getElementById("restorebanner").classList.add("flex");
+            }
+        }
+
+        setInterval(saveDraft, 1_000);
+
+        const form = textbox.closest("form");
+
+        if (form) {
+            form.addEventListener("submit", clearSavedDraft);
+        }
+    }
+
     function generateRandomString(length) {
         const chars =
             "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

twisted/twisted_site/views/admin/users.py

@@ -57,7 +57,11 @@ def get(self, request: HttpRequest, user_id: int) -> HttpResponse:
         self.audit_log.additional_context["user"] = user.profile.slack_username  # ty:ignore[unresolved-attribute] # pyright: ignore[reportAttributeAccessIssue] # pyrefly: ignore[missing-attribute]
 
         context["user"] = user
-        context["staff_perms"] = model_to_dict(user.profile.staff_permissions or {})
+        try:
+            context["staff_perms"] = model_to_dict(user.profile.staff_permissions)
+        except AttributeError:
+            context["staff_perms"] = None
+
         context["login_maybe"] = os.environ.get("LOGIN_ENABLED") == "maybe"
         return TemplateResponse(request, "admin/user.html", context)