feat(ui): Redesign sidebar, one-touch toggles, fix trash & subtask optimistic UI, auto-admin, and full n-depth DND

src/components/tasks/MarkdownNoteEditor.tsx

@@ -12,7 +12,8 @@ interface MarkdownNoteEditorProps {
 
 export function MarkdownNoteEditor({ value, onChange, onSave }: MarkdownNoteEditorProps) {
   const { t } = useI18n();
-  const [mode, setMode] = useState<"edit" | "preview">("edit");
+  // Default to preview mode as requested
+  const [mode, setMode] = useState<"edit" | "preview">("preview");
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const previewRef = useRef<HTMLDivElement>(null);
 
@@ -101,27 +102,34 @@ export function MarkdownNoteEditor({ value, onChange, onSave }: MarkdownNoteEdit
           {t("notes").toUpperCase()}
         </span>
 
-        <div className="view-switcher-group" style={{ padding: 2 }}>
-          <button
-            type="button"
-            className={`view-switcher-btn${mode === "edit" ? " active" : ""}`}
-            style={{ fontSize: 11, padding: "2px 8px" }}
-            onClick={() => {
+        {/* Minimal Matte One-touch Mode Toggle */}
+        <button
+          type="button"
+          className="btn btn-ghost btn-sm"
+          style={{
+            fontSize: 11.5,
+            padding: "2px 8px",
+            height: 24,
+            borderRadius: "var(--radius-sm)",
+            border: "1px solid var(--border)",
+            background: mode === "edit" ? "var(--accent-light)" : "var(--bg-secondary)",
+            color: mode === "edit" ? "var(--accent)" : "var(--text-secondary)",
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "all var(--dur-fast)",
+          }}
+          onClick={() => {
+            if (mode === "preview") {
               setMode("edit");
               setTimeout(() => textareaRef.current?.focus(), 50);
-            }}
-          >
-            ✏️ Edit
-          </button>
-          <button
-            type="button"
-            className={`view-switcher-btn${mode === "preview" ? " active" : ""}`}
-            style={{ fontSize: 11, padding: "2px 8px" }}
-            onClick={() => setMode("preview")}
-          >
-            👁️ Preview
-          </button>
-        </div>
+            } else {
+              setMode("preview");
+            }
+          }}
+          title={mode === "preview" ? "Switch to Edit" : "Switch to Preview"}
+        >
+          {mode === "preview" ? "✏️ Edit" : "👁️ Preview"}
+        </button>
       </div>
 
       {/* Editor / Preview Area */}