ui(pages): improve sidebar section headers

Author: gustavotoyota

apps/client/src/layouts/PagesLayout/LeftSidebar/CurrentPath.vue

@@ -1,16 +1,23 @@
 <template>
-  <q-toolbar style="padding: 0; background-color: #141414; min-height: 50px">
+  <q-toolbar
+    style="
+      padding: 0;
+      background-color: #141414;
+      min-height: 0;
+      overflow: hidden;
+    "
+  >
     <DeepBtn
       flat
-      style="width: 100%; height: 50px; border-radius: 0"
+      style="width: 100%; height: 32px; min-height: 0; border-radius: 0"
       no-caps
       @click="negateProp(uiStore(), 'currentPathExpanded')"
     >
-      <div style="width: 100%; display: flex; align-items: center">
-        <q-avatar style="margin-left: -8px">
+      <div style="width: 100%; height: 0; display: flex; align-items: center">
+        <q-avatar style="margin-top: -1px; margin-left: -8px">
           <q-icon
             name="mdi-map-marker-radius"
-            size="26px"
+            size="20px"
           />
         </q-avatar>
 
@@ -19,30 +26,16 @@
             margin-left: -2px;
             text-align: left;
             color: rgba(255, 255, 255, 0.85);
-            font-size: 15.2px;
+            font-size: 13.5px;
           "
         >
           Current path
         </q-toolbar-title>
       </div>
-
-      <q-tooltip
-        v-if="!uiStore().leftSidebarExpanded"
-        anchor="center right"
-        self="center left"
-        max-width="200px"
-        transition-show="jump-right"
-        transition-hide="jump-left"
-      >
-        <div style="font-weight: bold; font-size: 14px">Current path</div>
-      </q-tooltip>
     </DeepBtn>
   </q-toolbar>
 
   <q-list
-    :class="{
-      mini: !uiStore().leftSidebarExpanded,
-    }"
     style="
       height: 0;
       overflow-x: hidden;

apps/client/src/layouts/PagesLayout/LeftSidebar/LeftSidebar.vue

@@ -36,8 +36,8 @@
 
 <script setup lang="ts">
 import { listenPointerEvents } from '@stdlib/misc';
-import CurrentPath from 'src/layouts/PagesLayout/LeftSidebar/CurrentPath.vue';
 
+import CurrentPath from './CurrentPath.vue';
 import RecentPages from './RecentPages.vue';
 
 function resizeLeftSidebar(event: PointerEvent) {

apps/client/src/layouts/PagesLayout/LeftSidebar/RecentPages.vue

@@ -1,16 +1,23 @@
 <template>
-  <q-toolbar style="padding: 0; background-color: #141414">
+  <q-toolbar
+    style="
+      padding: 0;
+      background-color: #141414;
+      min-height: 0;
+      overflow: hidden;
+    "
+  >
     <DeepBtn
       flat
-      style="width: 100%; height: 50px; border-radius: 0"
+      style="width: 100%; height: 32px; min-height: 0; border-radius: 0"
       no-caps
       @click="negateProp(uiStore(), 'recentPagesExpanded')"
     >
-      <div style="width: 100%; display: flex; align-items: center">
-        <q-avatar style="margin-left: -8px">
+      <div style="width: 100%; height: 0; display: flex; align-items: center">
+        <q-avatar style="margin-top: -1px; margin-left: -8px">
           <q-icon
             name="mdi-history"
-            size="26px"
+            size="20px"
           />
         </q-avatar>
 
@@ -19,23 +26,12 @@
             margin-left: -2px;
             text-align: left;
             color: rgba(255, 255, 255, 0.85);
-            font-size: 15.2px;
+            font-size: 13.5px;
           "
         >
           Recent pages
         </q-toolbar-title>
       </div>
-
-      <q-tooltip
-        v-if="!uiStore().leftSidebarExpanded"
-        anchor="center right"
-        self="center left"
-        max-width="200px"
-        transition-show="jump-right"
-        transition-hide="jump-left"
-      >
-        <div style="font-weight: bold; font-size: 14px">Recent pages</div>
-      </q-tooltip>
     </DeepBtn>
   </q-toolbar>
 

apps/client/src/layouts/PagesLayout/RightSidebar/RightSidebar.vue

@@ -16,11 +16,20 @@
       max-width: 299px;
     "
   >
-    <q-toolbar style="padding: 0; flex: none; background-color: #141414">
+    <q-toolbar
+      style="
+        padding: 0;
+        flex: none;
+        background-color: #141414;
+        height: 32px;
+        min-height: 0;
+        overflow: hidden;
+      "
+    >
       <q-avatar style="margin-left: 9px">
         <q-icon
           name="mdi-chart-box"
-          size="26px"
+          size="20px"
         />
       </q-avatar>
 
@@ -30,7 +39,7 @@
           margin-left: -2px;
           text-align: left;
           color: rgba(255, 255, 255, 0.85);
-          font-size: 15.2px;
+          font-size: 13.5px;
         "
       >
         <template v-if="page.activeElem.react.value?.type === 'note'">