feat: add right sidebar mini-mode with quick action buttons

- Add three-state right sidebar toggle: expanded → mini (48px) → hidden → expanded
- Add rightMiniMode ref and state management to PageLayout
- Add right-sidebar-mini slot with centered icon buttons for note/arrow actions
- Show FilePlus (create page), ArrowUpDown (swap), and Copy (link) buttons in mini mode
- Update PageLayout tests to verify mini-mode toggle behavior
- Mark UI polish task 5.3 as DONE

Author: gustavotoyota

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

@@ -39,6 +39,7 @@ 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";
 
@@ -623,6 +624,61 @@ 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,12 +68,24 @@ describe("PageLayout", () => {
     expect(style).not.toContain("display: none");
   });
 
-  it("hides right sidebar when toggled off", async () => {
+  it("switches right sidebar to mini mode 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");
+  });
+
+  it("hides 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");
   });
 

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

@@ -6,13 +6,25 @@ 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() {
-  rightExpanded.value = !rightExpanded.value;
+  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;
+  }
 }
 function resetLeftWidth() {
   leftWidth.value = 240;
@@ -22,6 +34,7 @@ function resetLeftWidth() {
 provide("pageLayout", {
   leftExpanded,
   rightExpanded,
+  rightMiniMode,
   leftWidth,
   toggleLeft,
   toggleRight,
@@ -103,9 +116,13 @@ function onResizePointerUp(e: PointerEvent) {
       <aside
         v-show="rightExpanded"
         class="border-border/40 bg-muted/30 flex flex-col overflow-y-auto border-l"
-        :style="{ width: '300px', minWidth: '300px' }"
+        :class="rightMiniMode ? 'items-center' : ''"
+        :style="{ width: rightMiniMode ? '48px' : '300px', minWidth: rightMiniMode ? '48px' : '300px' }"
       >
-        <div class="p-2">
+        <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">
           <slot name="right-sidebar" />
         </div>
       </aside>

new-deepnotes/docs/UI_POLISH_PROGRESS.md

@@ -14,5 +14,5 @@ Tracks execution of `UI_POLISH_PLAN.md` (areas around the main section in the pa
 | **5.1** | Right sidebar: styled selects, height control, arrow head selects | **DONE** | `NotePropertiesCard.vue`, `ArrowPropertiesCard.vue`, `PageEditorView.vue` |
 | **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) | `NOT STARTED` | `PageLayout.vue` |
+| **5.3** | Right sidebar: mini-mode (48px collapsed strip) | **DONE** | `PageLayout.vue`, `PageEditorView.vue` |
 | **7** | Keyboard shortcut parity (high-impact missing shortcuts) | `NOT STARTED` | `useSpatialKeyboard.ts` |