Add Cmd+Shift+E focus mode and Escape exit behaviors

- Cmd+Shift+E toggles focus mode (hides sidebar + notes panel)
- Cmd+E exits focus mode fully when both panels are hidden
- Escape in editor exits focus mode before focusing notes pane
- Escape in notes pane reopens sidebar if hidden
- Editor header gets left padding in focus mode for traffic lights
- Suppress note row layout animations on panel visibility changes
- Preserve editor cursor position during focus mode toggle

Author: ChristianChiarulli

app/src/app.tsx

@@ -34,6 +34,7 @@ import {
   getPaneFocusShortcut,
   isCommandPaletteShortcut,
   isEditorFindShortcut,
+  isFocusModeShortcut,
   isNotesSearchShortcut,
   isSidebarToggleShortcut,
 } from "@/shared/lib/keyboard";
@@ -85,7 +86,9 @@ function App() {
 
   const setSettingsOpen = useUIStore((s) => s.setSettingsOpen);
   const sidebarVisible = useUIStore((s) => s.sidebarVisible);
+  const notesPanelVisible = useUIStore((s) => s.notesPanelVisible);
   const toggleSidebar = useUIStore((s) => s.toggleSidebar);
+  const toggleFocusMode = useUIStore((s) => s.toggleFocusMode);
   const setFocusedPane = useShellStore((s) => s.setFocusedPane);
 
   const openCommandPalette = useEffectEvent(() => {
@@ -123,11 +126,23 @@ function App() {
       return;
     }
 
+    if (isFocusModeShortcut(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      toggleFocusMode();
+      return;
+    }
+
     if (isSidebarToggleShortcut(event)) {
       event.preventDefault();
       event.stopPropagation();
       event.stopImmediatePropagation();
-      toggleSidebar();
+      if (useUIStore.getState().notesPanelVisible) {
+        toggleSidebar();
+      } else {
+        toggleFocusMode();
+      }
       return;
     }
 
@@ -291,11 +306,7 @@ function App() {
             data-tauri-drag-region
           />
         ) : null}
-        <Container
-          className="h-full w-full"
-          id="comet-shell"
-          key={sidebarVisible ? "s" : "h"}
-        >
+        <Container className="h-full w-full" id="comet-shell">
           {sidebarVisible ? (
             <>
               <Section
@@ -314,21 +325,25 @@ function App() {
             </>
           ) : null}
 
-          <Section
-            defaultSize={280}
-            disableResponsive
-            maxSize={340}
-            minSize={220}
-            className="select-none"
-          >
-            <NotesPane {...notesPaneProps} />
-          </Section>
+          {notesPanelVisible ? (
+            <>
+              <Section
+                defaultSize={280}
+                disableResponsive
+                maxSize={340}
+                minSize={220}
+                className="select-none"
+              >
+                <NotesPane {...notesPaneProps} />
+              </Section>
 
-          <Bar
-            className="bg-accent/35 z-30 cursor-col-resize"
-            expandInteractiveArea={{ left: 5, right: 5 }}
-            size={1}
-          />
+              <Bar
+                className="bg-accent/35 z-30 cursor-col-resize"
+                expandInteractiveArea={{ left: 5, right: 5 }}
+                size={1}
+              />
+            </>
+          ) : null}
 
           <Section minSize={300}>
             <EditorPane {...editorPaneProps} />

app/src/features/editor/note-editor.tsx

@@ -79,6 +79,7 @@ import {
 } from "@/features/editor/lib/note-editor-selection";
 import { useNoteEditorSearchSync } from "@/features/editor/hooks/use-note-editor-search-sync";
 import { useNoteEditorToolbarActions } from "@/features/editor/hooks/use-note-editor-toolbar-actions";
+import { useUIStore } from "@/features/settings/store/use-ui-store";
 import { useShellStore } from "@/features/shell/store/use-shell-store";
 import {
   isEditorFindShortcut,
@@ -551,6 +552,10 @@ export const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
             {
               key: "Escape",
               run(view) {
+                const uiState = useUIStore.getState();
+                if (!uiState.notesPanelVisible) {
+                  uiState.toggleFocusMode();
+                }
                 useShellStore.getState().setFocusedPane("notes");
                 blurEditorView(view);
                 return true;

app/src/features/notes/ui/notes-pane.tsx

@@ -685,6 +685,13 @@ export function NotesPane({
     skipAnimationUntilRef.current = Date.now() + 500;
   }
 
+  // Suppress layout animations when panel visibility changes.
+  const prevSidebarVisibleRef = useRef(sidebarVisible);
+  if (prevSidebarVisibleRef.current !== sidebarVisible) {
+    prevSidebarVisibleRef.current = sidebarVisible;
+    skipAnimationUntilRef.current = Date.now() + 500;
+  }
+
   const shouldSkipAnimation = Date.now() < skipAnimationUntilRef.current;
   const searchInputRef = useRef<HTMLInputElement | null>(null);
   const pendingNotesPaneSelectionRef = useRef<

app/src/features/settings/store/use-ui-store.ts

@@ -49,6 +49,9 @@ type UIStore = {
   sidebarVisible: boolean;
   toggleSidebar(): void;
 
+  notesPanelVisible: boolean;
+  toggleFocusMode(): void;
+
   sidebarNotesChildrenOpen: boolean;
   setSidebarNotesChildrenOpen(open: boolean): void;
 
@@ -121,6 +124,16 @@ export const useUIStore = create<UIStore>()(
         set((state) => ({ sidebarVisible: !state.sidebarVisible }));
       },
 
+      notesPanelVisible: true,
+      toggleFocusMode: () => {
+        set((state) => {
+          const entering = state.sidebarVisible || state.notesPanelVisible;
+          return entering
+            ? { sidebarVisible: false, notesPanelVisible: false }
+            : { sidebarVisible: true, notesPanelVisible: true };
+        });
+      },
+
       sidebarNotesChildrenOpen: true,
       setSidebarNotesChildrenOpen: (sidebarNotesChildrenOpen) => {
         set({ sidebarNotesChildrenOpen });
@@ -135,6 +148,7 @@ export const useUIStore = create<UIStore>()(
         editorVimMode: state.editorVimMode,
         themeName: state.themeName,
         sidebarVisible: state.sidebarVisible,
+        notesPanelVisible: state.notesPanelVisible,
         noteSortPrefs: state.noteSortPrefs,
         expandedSidebarTagPaths: state.expandedSidebarTagPaths,
         sidebarNotesChildrenOpen: state.sidebarNotesChildrenOpen,

app/src/features/shell/editor-pane.tsx

@@ -480,6 +480,7 @@ export function EditorPane({
     null,
   );
   const editorFontSize = useUIStore((s) => s.editorFontSize);
+  const notesPanelVisible = useUIStore((s) => s.notesPanelVisible);
   const showToolbar = useUIStore((s) => s.showEditorToolbar);
   const editorSpellCheck = useUIStore((s) => s.editorSpellCheck);
   const editorVimMode = useUIStore((s) => s.editorVimMode);
@@ -856,6 +857,7 @@ export function EditorPane({
       <header
         className={cn(
           "flex h-13 shrink-0 items-center justify-between gap-3 px-4",
+          !notesPanelVisible && "pl-24",
           showHeaderBorder && !findOpen && "border-separator border-b",
         )}
       >

app/src/shared/lib/keyboard.ts

@@ -40,6 +40,10 @@ export function isSidebarToggleShortcut(event: ShortcutEvent) {
   return matchesShortcut(event, { code: "KeyE", key: "e" });
 }
 
+export function isFocusModeShortcut(event: ShortcutEvent) {
+  return matchesShortcut(event, { code: "KeyE", key: "e", shift: true });
+}
+
 export function isNotesSearchShortcut(event: ShortcutEvent) {
   return matchesShortcut(event, {
     code: "KeyF",