auto save

server/static/retro.css

@@ -400,9 +400,61 @@ textarea {
     gap: 0.5em;
 }
 .add-item-form input { flex: 1; }
-.note-delete-form { margin-top: 0.75rem; }
-.note-delete-form button { background: var(--mc-red); color: var(--mc-bright); }
-.note-delete-form button:hover { background: var(--mc-red-bright); }
+.note-menu-btn {
+    background: transparent;
+    color: var(--mc-dim);
+    border: 2px solid var(--mc-dim);
+    box-shadow: none;
+    padding: 0.1em 0.4em;
+    font-size: 1em;
+    line-height: 1;
+    letter-spacing: 0;
+}
+.note-menu-btn:hover { color: var(--mc-bright); border-color: var(--mc-bright); }
+
+.note-title-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 0.25rem;
+}
+
+.note-save-status {
+    font-size: 0.8em;
+    color: var(--mc-dim);
+    white-space: nowrap;
+}
+.note-save-status.saved { color: var(--mc-yellow); }
+.note-save-status.unsaved { color: var(--mc-red); }
+
+.note-menu-dropdown {
+    position: absolute;
+    right: 0;
+    top: 100%;
+    background: var(--mc-deep);
+    border: 3px double var(--mc-bright);
+    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
+    min-width: 140px;
+    z-index: 10;
+    margin-top: 0.2rem;
+}
+.note-menu-dropdown button {
+    display: block;
+    width: 100%;
+    text-align: left;
+    background: none;
+    border: none;
+    box-shadow: none;
+    padding: 0.4em 0.8em;
+    color: var(--mc-bright);
+    font: inherit;
+    text-transform: none;
+    letter-spacing: 0;
+    cursor: pointer;
+}
+.note-menu-dropdown button:hover { background: var(--mc-cyan); color: var(--mc-black); }
 
 
 /* --- Notifications --- */