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>