refactor: unify sidebar layout and section headers (#708)

* refactor: unify sidebar section headers

* refactor: align math sidebar with tree spacing

* refactor: standardize tools sidebar items

* refactor: standardize section header height and remove spacing hacks

* refactor: make SidebarHeader flexible with sectionTitle prop and action slot

* refactor: add headerGap prop and leftHeader slot to TwoColumn

* refactor: add headerGap prop to ThreeColumn

* refactor: adopt header-gap CSS variable and sectionTitle in sidebars

* refactor: move math sheet header to leftHeader slot

* refactor: use leftHeader slot in Devtools view

Author: antonreshetov

src/renderer/components/layout/ThreeColumn.vue

@@ -8,10 +8,12 @@ const props = withDefaults(
     showList: boolean
     sidebarWidth?: number
     listWidth?: number
+    headerGap?: number
   }>(),
   {
     sidebarWidth: LAYOUT_DEFAULTS.sidebar.width,
     listWidth: LAYOUT_DEFAULTS.list.width,
+    headerGap: 0,
   },
 )
 
@@ -94,7 +96,12 @@ const isResizing = computed(
       :style="{ width: `${internalSidebarWidth}px` }"
       class="shrink-0 overflow-hidden"
     >
-      <slot name="sidebar" />
+      <div
+        class="h-full"
+        :style="{ '--header-gap': `${props.headerGap}px` }"
+      >
+        <slot name="sidebar" />
+      </div>
     </div>
     <div
       v-if="showSidebar"

src/renderer/components/layout/TwoColumn.vue

@@ -9,6 +9,7 @@ interface Props {
   rightSize?: string
   showBack?: boolean
   topSpace?: number
+  headerGap?: number
 }
 
 interface Emits {
@@ -20,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   rightSize: '1fr',
   showBack: true,
   topSpace: 0,
+  headerGap: 0,
 })
 
 const emit = defineEmits<Emits>()
@@ -31,6 +33,7 @@ const gridTemplateColumns = computed(() => {
 const leftHeaderStyle = computed(() => {
   return {
     paddingTop: `calc(var(--content-top-offset) + ${props.topSpace}px)`,
+    paddingBottom: `${props.headerGap}px`,
   }
 })
 </script>
@@ -41,22 +44,24 @@ const leftHeaderStyle = computed(() => {
     :style="{ gridTemplateColumns }"
   >
     <div class="grid h-full min-h-0 grid-rows-[auto_1fr] overflow-hidden">
-      <div
-        class="flex items-center justify-between gap-2 overflow-hidden px-2 pb-2"
-        :style="leftHeaderStyle"
-      >
-        <div class="truncate font-bold">
-          {{ title }}
-        </div>
-        <UiActionButton
-          v-if="showBack"
-          :tooltip="i18n.t('button.back')"
-          class="shrink-0"
-          @click="() => emit('back')"
+      <slot name="leftHeader">
+        <div
+          class="flex items-center justify-between gap-2 px-2"
+          :style="leftHeaderStyle"
         >
-          <ArrowLeft class="h-4 w-4" />
-        </UiActionButton>
-      </div>
+          <div class="min-w-0 truncate px-1 leading-5 font-bold select-none">
+            {{ title }}
+          </div>
+          <UiActionButton
+            v-if="showBack"
+            :tooltip="i18n.t('button.back')"
+            class="shrink-0"
+            @click="() => emit('back')"
+          >
+            <ArrowLeft class="h-4 w-4" />
+          </UiActionButton>
+        </div>
+      </slot>
       <div class="h-full min-h-0 overflow-auto">
         <slot name="left" />
       </div>

src/renderer/components/math-notebook/SheetList.vue

@@ -3,7 +3,7 @@ import * as ContextMenu from '@/components/ui/shadcn/context-menu'
 import { useApp, useMathNotebook } from '@/composables'
 import { i18n } from '@/electron'
 import { format } from 'date-fns'
-import { FileText, Plus } from 'lucide-vue-next'
+import { FileText } from 'lucide-vue-next'
 
 const { isCompactListMode } = useApp()
 const {
@@ -49,87 +49,73 @@ function finishRename(id: string) {
 function cancelRename() {
   editingId.value = null
 }
+
+defineExpose({
+  handleCreateSheet,
+})
 </script>
 
 <template>
   <div class="flex h-full flex-col overflow-hidden">
-    <div class="_mt-1 flex items-center justify-between px-2 pb-2 select-none">
-      <UiText
-        as="div"
-        variant="caption"
-        weight="bold"
-        uppercase
-      >
-        {{ i18n.t("spaces.math.sheetList") }}
-      </UiText>
-      <UiActionButton
-        :tooltip="i18n.t('spaces.math.newSheet')"
-        @click="handleCreateSheet"
-      >
-        <Plus class="h-4 w-4" />
-      </UiActionButton>
-    </div>
-
     <div class="scrollbar min-h-0 flex-1 overflow-y-auto px-2">
       <ContextMenu.ContextMenu
         v-for="sheet in sheets"
         :key="sheet.id"
       >
         <ContextMenu.ContextMenuTrigger as-child>
-          <div
-            class="group mb-0.5 flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 transition-colors duration-75"
-            :class="
-              activeSheetId === sheet.id
-                ? 'bg-accent text-accent-foreground'
-                : 'hover:bg-accent-hover'
-            "
+          <SidebarItem
+            class="group mb-0.5 cursor-default transition-colors duration-75"
+            :class="activeSheetId === sheet.id ? 'text-accent-foreground' : ''"
+            :selected="activeSheetId === sheet.id"
             @click="selectSheet(sheet.id)"
             @dblclick="startRename(sheet.id, sheet.name)"
           >
-            <FileText
-              class="h-3.5 w-3.5 shrink-0 transition-colors"
-              :class="
-                activeSheetId === sheet.id
-                  ? 'text-accent-foreground'
-                  : 'text-muted-foreground'
-              "
-              :stroke-width="1.5"
-            />
-            <div class="min-w-0 flex-1">
-              <input
-                v-if="editingId === sheet.id"
-                v-model="editingName"
-                class="sheet-rename-input w-full bg-transparent text-[13px] outline-none"
-                @blur="finishRename(sheet.id)"
-                @keydown.enter="finishRename(sheet.id)"
-                @keydown.escape="cancelRename"
-                @click.stop
-              >
-              <template v-else>
-                <div
-                  :class="isCompactListMode ? 'flex items-center gap-2' : ''"
+            <div class="flex items-center gap-2 px-2 py-0.5">
+              <FileText
+                class="h-3.5 w-3.5 shrink-0 transition-colors"
+                :class="
+                  activeSheetId === sheet.id
+                    ? 'text-accent-foreground'
+                    : 'text-muted-foreground'
+                "
+                :stroke-width="1.5"
+              />
+              <div class="min-w-0 flex-1">
+                <input
+                  v-if="editingId === sheet.id"
+                  v-model="editingName"
+                  class="sheet-rename-input w-full bg-transparent text-[13px] outline-none"
+                  @blur="finishRename(sheet.id)"
+                  @keydown.enter="finishRename(sheet.id)"
+                  @keydown.escape="cancelRename"
+                  @click.stop
                 >
-                  <UiText
-                    as="div"
-                    variant="sm"
-                    class="truncate leading-tight"
-                    :class="isCompactListMode ? 'flex-1' : ''"
-                  >
-                    {{ sheet.name }}
-                  </UiText>
-                  <UiText
-                    as="div"
-                    variant="caption"
-                    class="leading-tight transition-colors"
-                    :class="isCompactListMode ? 'shrink-0' : ''"
-                    muted
+                <template v-else>
+                  <div
+                    :class="isCompactListMode ? 'flex items-center gap-2' : ''"
                   >
-                    {{ format(new Date(sheet.updatedAt), "dd.MM.yyyy") }}
-                  </UiText>
-                </div>
-              </template>
+                    <UiText
+                      as="div"
+                      variant="sm"
+                      class="truncate leading-tight"
+                      :class="isCompactListMode ? 'flex-1' : ''"
+                    >
+                      {{ sheet.name }}
+                    </UiText>
+                    <UiText
+                      as="div"
+                      variant="caption"
+                      class="leading-tight transition-colors"
+                      :class="isCompactListMode ? 'shrink-0' : ''"
+                      muted
+                    >
+                      {{ format(new Date(sheet.updatedAt), "dd.MM.yyyy") }}
+                    </UiText>
+                  </div>
+                </template>
+              </div>
             </div>
-          </div>
+          </SidebarItem>
         </ContextMenu.ContextMenuTrigger>
 
         <ContextMenu.ContextMenuContent>

src/renderer/components/notes/NotesSidebar.vue

@@ -21,9 +21,15 @@ nextTick(() => {
 <template>
   <div
     data-notes-sidebar
-    class="flex h-full flex-col px-1 pt-[var(--content-top-offset)]"
+    class="flex h-full flex-col px-1"
+    style="
+      padding-top: calc(var(--content-top-offset) + var(--header-gap, 0px));
+    "
   >
-    <SidebarHeader :title="i18n.t('notes.plural')" />
+    <SidebarHeader
+      :title="i18n.t('notes.plural')"
+      :section-title="i18n.t('common.library')"
+    />
     <NotesSidebarLibrary />
     <NotesSidebarFolders />
   </div>

src/renderer/components/notes/NotesSidebarFolders.vue

@@ -176,22 +176,16 @@ function onCancelEdit() {
 </script>
 
 <template>
-  <div class="mt-1 flex items-center justify-between py-1 pl-1 select-none">
-    <UiText
-      as="div"
-      variant="caption"
-      weight="bold"
-      uppercase
-    >
-      {{ i18n.t("common.folders") }}
-    </UiText>
-    <UiActionButton
-      :tooltip="i18n.t('action.new.folder')"
-      @click="createNoteFolderAndSelect()"
-    >
-      <Plus class="h-4 w-4" />
-    </UiActionButton>
-  </div>
+  <SidebarSectionHeader :title="i18n.t('common.folders')">
+    <template #action>
+      <UiActionButton
+        :tooltip="i18n.t('action.new.folder')"
+        @click="createNoteFolderAndSelect()"
+      >
+        <Plus class="h-4 w-4" />
+      </UiActionButton>
+    </template>
+  </SidebarSectionHeader>
   <div class="flex min-h-0 flex-1 flex-col">
     <div class="min-h-0 flex-1">
       <div class="min-h-0 flex-1 overflow-y-auto">
@@ -255,16 +249,7 @@ function onCancelEdit() {
       class="shrink-0 overflow-hidden"
     >
       <div class="flex h-full min-h-0 flex-col">
-        <div class="flex items-center justify-between py-1 pl-1 select-none">
-          <UiText
-            as="div"
-            variant="caption"
-            weight="bold"
-            uppercase
-          >
-            {{ i18n.t("common.tags") }}
-          </UiText>
-        </div>
+        <SidebarSectionHeader :title="i18n.t('common.tags')" />
         <div class="min-h-0 flex-1 px-1 pb-1">
           <NotesSidebarTags />
         </div>

src/renderer/components/sidebar/Header.vue

@@ -1,26 +1,27 @@
 <script setup lang="ts">
-import { i18n } from '@/electron'
-
 interface Props {
   title: string
+  sectionTitle?: string
 }
 
 defineProps<Props>()
 </script>
 
 <template>
   <div class="px-1">
-    <div class="truncate px-1 pb-2 leading-5 font-bold select-none">
+    <div class="truncate px-1 leading-5 font-bold select-none">
       {{ title }}
     </div>
-    <UiText
-      as="div"
-      variant="caption"
-      weight="bold"
-      uppercase
-      class="flex gap-1 pb-1 pl-1 select-none"
+    <SidebarSectionHeader
+      v-if="sectionTitle"
+      :title="sectionTitle"
     >
-      {{ i18n.t("common.library") }}
-    </UiText>
+      <template
+        v-if="$slots.action"
+        #action
+      >
+        <slot name="action" />
+      </template>
+    </SidebarSectionHeader>
   </div>
 </template>

src/renderer/components/sidebar/Item.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  selected?: boolean
+  focused?: boolean
+  hoverable?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  selected: false,
+  focused: false,
+  hoverable: true,
+})
+</script>
+
+<template>
+  <div
+    data-sidebar-item
+    :data-selected="selected ? 'true' : undefined"
+    :data-focused="focused ? 'true' : undefined"
+    class="data-[selected=true]:bg-accent data-[focused=true]:bg-primary! data-[focused=true]:text-primary-foreground rounded-md"
+    :class="{
+      'hover:bg-accent-hover': hoverable && !selected && !focused,
+    }"
+  >
+    <slot />
+  </div>
+</template>

src/renderer/components/sidebar/SectionHeader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="flex h-9 items-center justify-between py-1 pl-1 select-none">
+    <UiText
+      as="div"
+      variant="caption"
+      weight="bold"
+      uppercase
+    >
+      {{ title }}
+    </UiText>
+    <slot name="action" />
+  </div>
+</template>