refactor: remove right sidebar mini-mode, change left sidebar tabs from vertical to horizontal

- Remove three-state right sidebar toggle (expanded → mini → hidden), revert to simple show/hide
- Remove rightMiniMode ref and related state management from PageLayout
- Remove right-sidebar-mini slot and quick action buttons from PageEditorView
- Change PageEditorLeftSidebar tab strip from vertical (40px left border) to horizontal (top border)
- Update PageLayout tests to reflect simplified two-state

Author: gustavotoyota

new-deepnotes/apps/web/src/features/pages/PageEditorLeftSidebar.vue

@@ -16,11 +16,10 @@ const tabs = [
 </script>
 
 <template>
-  <div class="flex h-full w-full overflow-hidden">
-    <!-- Vertical tab strip -->
+  <div class="flex flex-col h-full w-full overflow-hidden">
+    <!-- Horizontal tab strip -->
     <div
-      class="border-border/40 bg-muted/30 flex flex-col items-center gap-1 border-r py-2"
-      style="width: 40px; min-width: 40px"
+      class="border-border/40 bg-muted/30 flex flex-row items-center gap-1 border-b px-2 py-1"
     >
       <button
         v-for="tab in tabs"

new-deepnotes/apps/web/src/features/pages/PageEditorView.vue

@@ -39,7 +39,6 @@ import PageStateScreens from "./screens/PageStateScreens.vue";
 import { usePageStatus } from "./usePageStatus";
 import { useUserPageLists } from "./useUserPageLists";
 import { cursorColorForUserId } from "./page-awareness-utils";
-import { FilePlus, ArrowUpDown, Copy } from "lucide-vue-next";
 
 import type { SnapshotRow } from "./page-snapshot-list";
 
@@ -624,61 +623,6 @@ onMounted(() => {
       </div>
     </template>
 
-    <!-- === Right sidebar mini mode === -->
-    <template #right-sidebar-mini>
-      <div class="flex flex-col items-center gap-2">
-        <!-- Note mini actions -->
-        <template v-if="selectedNoteId">
-          <Button
-            variant="ghost"
-            size="icon"
-            class="h-8 w-8"
-            title="Create new page"
-            :disabled="cryptoError !== null"
-            @click="handleCreateNewPage"
-          >
-            <FilePlus class="h-4 w-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            class="h-8 w-8"
-            title="Swap head and body"
-            :disabled="cryptoError !== null"
-            @click="handleSwapHeadBody"
-          >
-            <ArrowUpDown class="h-4 w-4" />
-          </Button>
-        </template>
-
-        <!-- Arrow mini actions -->
-        <template v-if="selectedArrowId">
-          <Button
-            variant="ghost"
-            size="icon"
-            class="h-8 w-8"
-            title="Swap arrowheads"
-            :disabled="cryptoError !== null"
-            @click="handleSwapArrowheads"
-          >
-            <ArrowUpDown class="h-4 w-4" />
-          </Button>
-        </template>
-
-        <!-- Common: copy link -->
-        <Button
-          v-if="selectedNoteId || selectedArrowId"
-          variant="ghost"
-          size="icon"
-          class="h-8 w-8"
-          title="Copy link"
-          @click="selectedNoteId ? handleCopyNoteLink() : handleCopyArrowLink()"
-        >
-          <Copy class="h-4 w-4" />
-        </Button>
-      </div>
-    </template>
-
     <!-- === Floating overlay === -->
     <template #floating-overlay>
       <!-- Bottom-right info -->

new-deepnotes/apps/web/src/layouts/PageLayout.test.ts

@@ -68,25 +68,25 @@ describe("PageLayout", () => {
     expect(style).not.toContain("display: none");
   });
 
-  it("switches right sidebar to mini mode on first toggle", async () => {
+  it("hides right sidebar on first toggle", async () => {
     wrapper = mount(PageLayout);
     const toolbar = wrapper.findComponent({ name: "MainToolbarMock" });
     await toolbar.vm.$emit("toggle-right");
     await wrapper.vm.$nextTick();
     const aside = wrapper.findAll("aside");
-    const style = aside[1]!.attributes("style") ?? "";
-    expect(style).not.toContain("display: none");
-    expect(style).toContain("48px");
+    expect(aside[1]!.attributes("style")).toContain("display: none");
   });
 
-  it("hides right sidebar on second toggle", async () => {
+  it("shows right sidebar on second toggle", async () => {
     wrapper = mount(PageLayout);
     const toolbar = wrapper.findComponent({ name: "MainToolbarMock" });
     await toolbar.vm.$emit("toggle-right");
     await toolbar.vm.$emit("toggle-right");
     await wrapper.vm.$nextTick();
     const aside = wrapper.findAll("aside");
-    expect(aside[1]!.attributes("style")).toContain("display: none");
+    const style = aside[1]!.attributes("style") ?? "";
+    expect(style).not.toContain("display: none");
+    expect(style).toContain("300px");
   });
 
   it("renders default slot in main canvas area", () => {

new-deepnotes/apps/web/src/layouts/PageLayout.vue

@@ -6,25 +6,13 @@ import MainToolbar from "@/features/spatial/MainToolbar.vue";
 // --- sidebar state ---
 const leftExpanded = ref(true);
 const rightExpanded = ref(true);
-const rightMiniMode = ref(false);
 const leftWidth = ref(240);
 
 function toggleLeft() {
   leftExpanded.value = !leftExpanded.value;
 }
 function toggleRight() {
-  if (rightExpanded.value && !rightMiniMode.value) {
-    // expanded -> mini
-    rightMiniMode.value = true;
-  } else if (rightExpanded.value && rightMiniMode.value) {
-    // mini -> hidden
-    rightExpanded.value = false;
-    rightMiniMode.value = false;
-  } else {
-    // hidden -> expanded
-    rightExpanded.value = true;
-    rightMiniMode.value = false;
-  }
+  rightExpanded.value = !rightExpanded.value;
 }
 function resetLeftWidth() {
   leftWidth.value = 240;
@@ -34,7 +22,6 @@ function resetLeftWidth() {
 provide("pageLayout", {
   leftExpanded,
   rightExpanded,
-  rightMiniMode,
   leftWidth,
   toggleLeft,
   toggleRight,
@@ -116,13 +103,9 @@ function onResizePointerUp(e: PointerEvent) {
       <aside
         v-show="rightExpanded"
         class="border-border/40 bg-muted/30 flex flex-col overflow-y-auto border-l"
-        :class="rightMiniMode ? 'items-center' : ''"
-        :style="{ width: rightMiniMode ? '48px' : '300px', minWidth: rightMiniMode ? '48px' : '300px' }"
+        style="width: 300px; min-width: 300px"
       >
-        <div v-if="rightMiniMode" class="flex flex-col items-center gap-1 py-2">
-          <slot name="right-sidebar-mini" />
-        </div>
-        <div v-else class="p-2">
+        <div class="p-2">
           <slot name="right-sidebar" />
         </div>
       </aside>

new-deepnotes/docs/UI_POLISH_PROGRESS.md

@@ -2,11 +2,11 @@
 
 Tracks execution of `UI_POLISH_PLAN.md` (areas around the main section in the pages layout only).
 
-> **Last updated:** After editor-chrome evaluation (Jun 2026).  
+> **Last updated:** Jun 2026 — after sidebar orientation + mini-mode removal.  
 > **Evaluation findings:**
-> - Left sidebar tabs are **vertical** (left edge) but should be **horizontal** (above content).
-> - Mini-mode is **disliked by user** and must be removed entirely.
-> - "Styled selects" (§5.1) were marked DONE but still use raw `<select>` because Shadcn `Select` is **not installed** in the project.
+> - ✅ Left sidebar tabs are now **horizontal** (above content).
+> - ✅ Mini-mode has been removed entirely; right sidebar is 2-state only.
+> - "Styled selects" (§5.1) still use raw `<select>` because Shadcn `Select` is **not installed** in the project.
 > - Right sidebar is missing a **header bar** showing the active element type.
 > - `CURRENT_SITUATION.md` is a snapshot; it should not be edited.
 
@@ -15,14 +15,14 @@ Tracks execution of `UI_POLISH_PLAN.md` (areas around the main section in the pa
 | Section | Task | Status | Files Touched | Notes |
 |---------|------|--------|---------------|-------|
 | **2.1** | Simplify header: remove `PageToolbarActions`, text links, add profile dropdown | **DONE** | `MainToolbar.vue`, `PageEditorView.vue` | ✅ Good quality. |
-| **3.1** | Left sidebar: icon-tabbed sections, remove collab card | **DONE (wrong orientation)** | `PageEditorView.vue`, `PageLayout.vue`, `PageEditorLeftSidebar.vue` | Tabs are vertical on the left edge; need to flip to **horizontal** at the top. |
+| **3.1** | Left sidebar: icon-tabbed sections, remove collab card | **DONE** | `PageEditorView.vue`, `PageLayout.vue`, `PageEditorLeftSidebar.vue` | ✅ Tabs now horizontal at top. |
 | **4.2** | Fix note interactions: vertical resize, double-click, handles visibility, edit-on-frame | **DONE** | `DisplayNote.vue`, `useCanvasActions.ts`, `page-doc-schema.ts`, `note-model.ts` | — |
 | **4.1a-d** | Main toolbar: command dispatcher + toolbar shell + formatting/objects/alignment + remove floating buttons | **DONE** | `CanvasToolbar.vue`, `useEditorCommandDispatcher.ts`, `SpatialPageView.vue` | — |
 | **4.3** | Expand context menus | **DONE** | `CanvasContextMenu.vue`, `NoteContextMenu.vue`, `SpatialPageView.vue` | — |
 | **5.1** | Right sidebar: styled selects, height control, arrow head selects | **NOT DONE** | `NotePropertiesCard.vue`, `ArrowPropertiesCard.vue`, `PageEditorView.vue` | Still uses raw `<select>`. **Blocked:** Shadcn `Select` component is not installed. |
 | **5.1b** | Right sidebar: consolidate page-level cards, add missing controls (swap, timestamps, copy link, local collapsing, anchors) | **DONE** | `NotePropertiesCard.vue`, `ArrowPropertiesCard.vue`, `PageEditorView.vue` | — |
 | **5.2** | Right sidebar: "Create new page" functionality | `PARTIAL` | `NotePropertiesCard.vue` | UI added, crypto stubbed. |
-| **5.3** | Right sidebar: mini-mode (48px collapsed strip) | **`ABANDONED`** | `PageLayout.vue`, `PageEditorView.vue` | User dislikes mini-mode. Remove entirely; sidebar should be **expanded ↔ hidden only**. Also remove mini-mode slot from `PageEditorView.vue`. |
+| **5.3** | Right sidebar: mini-mode (48px collapsed strip) | **REMOVED** | `PageLayout.vue`, `PageEditorView.vue` | ✅ 2-state only (expanded ↔ hidden). |
 | **7** | Keyboard shortcut parity (high-impact missing shortcuts) | `NOT STARTED` | `useSpatialKeyboard.ts` | — |
 
 ## Blocked Dependencies
@@ -31,7 +31,6 @@ Tracks execution of `UI_POLISH_PLAN.md` (areas around the main section in the pa
 
 ## Next Recommended Actions
 
-1. `PageEditorLeftSidebar.vue` — flip `flex-row` → `flex-col`; move tab strip to horizontal top.
-2. `PageLayout.vue` — delete `rightMiniMode` ref and 3-state toggle logic; make right sidebar 2-state (expanded/hidden).
-3. `PageEditorView.vue` — delete `#right-sidebar-mini` slot and its contents.
-4. Install Shadcn `select` and `tabs` primitives into `@/components/ui`.
+1. Install Shadcn `select` primitive into `@/components/ui`.
+2. Replace raw `<select>` elements in `NotePropertiesCard.vue` (anchor X/Y, width) and `ArrowPropertiesCard.vue` (body type, body style) with Shadcn `Select`.
+3. Add missing keyboard shortcuts to `useSpatialKeyboard.ts` (§7).