Add toggle for compact mode of sticky top header in chats

components/Custom/Layouts/Toggles.vue

@@ -21,17 +21,30 @@
 			subtitle="Make User bubble full width to match the AI bubble width."
 			:iconComponent="IconFullWidth"
 		/>
+
+		<CardToggle
+			v-model="toggleHeaderHeightState"
+			title="Compact Topbar"
+			subtitle="Decrease the topbar height to make it more compact."
+			:iconComponent="IconShrink"
+		/>
 	</div>
 </template>
 
 <script setup>
-import { hideThinkingItem, toggleBubbleAIItem, toggleUserBubbleFullWidthItem } from '@/utils/storage'
+import {
+	hideThinkingItem,
+	toggleBubbleAIItem,
+	toggleUserBubbleFullWidthItem,
+	toggleHeaderHeightItem,
+} from '@/utils/storage'
 import { useToggleStorage } from '@/composables/useToggleStorage.js'
 
 import CardToggle from '@/components/Cards/Toggle.vue'
 import IconThinkingProcess from '@/components/Icons/ThinkingProcess.vue'
 import IconBubbleOFF from '@/components/Icons/BubbleOFF.vue'
 import IconFullWidth from '@/components/Icons/FullWidth.vue'
+import IconShrink from '@/components/Icons/Shrink.vue'
 
 // One toggle controls everything
 const hideThinkingState = useToggleStorage(hideThinkingItem, 'dsx-toggle-thinking-process')
@@ -40,6 +53,7 @@ const toggleUserBubbleFullWidthState = useToggleStorage(
 	toggleUserBubbleFullWidthItem,
 	'dsx-toggle-user-bubble-full-width'
 )
+const toggleHeaderHeightState = useToggleStorage(toggleHeaderHeightItem, 'dsx-toggle-header-height')
 </script>
 
 <style lang="scss">

components/Icons/Shrink.vue

@@ -0,0 +1,20 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="icon icon-tabler icons-tabler-outline icon-tabler-arrows-diagonal-minimize-2"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<path d="M18 10h-4v-4" />
+		<path d="M20 4l-6 6" />
+		<path d="M6 14h4v4" />
+		<path d="M10 14l-6 6" />
+	</svg>
+</template>

components/ThemeManager.vue

@@ -133,6 +133,11 @@ $blur-backdrop: blur(1rem);
 		clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
 		transition: opacity $trans, clip-path $trans;
 
+		svg {
+			width: calc(var(--roller-size) * 0.685);
+			height: calc(var(--roller-size) * 0.685);
+		}
+
 		button {
 			position: relative;
 			aspect-ratio: 1 / 1;
@@ -153,7 +158,7 @@ $blur-backdrop: blur(1rem);
 				top: 50%;
 				left: 50%;
 				width: max-content;
-				font-size: 0.7rem;
+				font-size: 0.725em;
 				font-weight: 700;
 				text-transform: uppercase;
 				padding: 6px;
@@ -165,6 +170,10 @@ $blur-backdrop: blur(1rem);
 				transition: opacity $trans, transform $trans;
 				z-index: 2;
 				pointer-events: none;
+
+				@include dev('md') {
+					font-size: 0.625em;
+				}
 			}
 
 			&:hover {

styles/abstract/_root.scss

@@ -31,7 +31,7 @@
     --roller-top: calc(var(--h-header) + 0.125rem);
     // --roller-top: calc(var(--h-header) / 4);
     // --roller-right: var(--roller-top);
-    --roller-right: 0.5rem;
+    --roller-right: 0.2rem;
     --roller-size: 2.2rem;
 
     /* ? --- Border-radius --- */
@@ -76,7 +76,9 @@
 
         --h-header: calc(44px + 12px + 4px); // titlebar height + header pt + header pb
         // --roller-right: calc(44px + 10px + 0.2rem);
-        --roller-size: 2rem;
+
+        // --roller-right: 0.2rem;
+        --roller-size: 1.825rem;
     }
 
     // @include dev('sm') {

styles/customs/_custom-toggles.scss

@@ -31,4 +31,57 @@ html[dsx-toggle-ai-bubble] {
     ._4f9bf79 {
         background: transparent !important;
     }
+}
+
+html[dsx-toggle-header-height] {
+    --h-header: 2.25rem !important;
+    --header-el-scale: 0.7 !important;
+
+    // ._7780f2e {}
+
+    /* Sticky header */
+    ._2be88ba {
+        height: var(--h-header) !important;
+        // display: none;
+
+        /* Sticky header: chat title */
+        .afa34042 {
+            scale: var(--header-el-scale);
+            background-color: transparent !important;
+        }
+    }
+
+    /* 
+    .f8d1e4c0 - Topbar chat title parent with margin-top
+    ._5a20a69 - DS logo and Collapsed sidebar and new chat icon wrapper */
+    .f8d1e4c0,
+    ._5a20a69 {
+        transform-origin: center center;
+        margin-top: 0 !important;
+        transform: translateY(calc(var(--h-header) * -50%)) !important;
+    }
+
+    /* DS logo and Collapsed sidebar and new chat icon wrapper */
+    ._5a20a69 {
+        scale: var(--header-el-scale);
+
+        /* Collapsed sidebar and new chat icon wrapper Icons wrapper */
+        // .e5bf614e {
+        //     backdrop-filter: blur(2rem);
+        // }
+    }
+
+    @include dev('md') {
+        --header-el-scale: 0.8 !important;
+
+        ._0efe408 {
+            padding-block: 0 !important;
+
+            &>* {
+                // scale: var(--header-el-scale);
+                transform-origin: center center;
+                transform: translateY(calc(var(--h-header) * -50%)) !important;
+            }
+        }
+    }
 }

styles/elements/_right--sticky.scss

@@ -1,9 +1,11 @@
 /* main right side element */
 ._7780f2e {
 
+
     /* Sticky header */
     ._2be88ba {
         background-color: var(--c-bg-chats-container) !important;
+        transition: height 0.2s ease-in-out;
 
         /* Icons when breakpoint is to 'md' so sidebar and new chat icon are moved to sticky header and doesnt have color */
         .ds-icon {
@@ -18,6 +20,7 @@
         .afa34042 {
             @include bg-accent-inverse($bg: hsla(var(--accent-hsl) / 0.1));
             outline: hsla(var(--accent-hsl) / 0.1) solid 1px !important;
+            transition: all 0.2s ease-in-out;
 
             &:hover {
                 box-shadow: inset 0 0 10px 2px hsla(var(--accent-hsl) / 0.2) !important;
@@ -34,10 +37,12 @@
         /* strange sticky header gradientoverlay */
         // .b480065b {
         ._62b4800 {
-            // background: linear-gradient(rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 100%);
-            // background: linear-gradient(var(--dsr-bg) 0%, transparent 100%);
             background: linear-gradient(to bottom, hsla(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.025) / 0.8) 0%, hsla(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.025) / 0) 100%) !important;
-            // height: 1.2rem !important;
         }
     }
+}
+
+/* DS logo and Collapsed sidebar and new chat icon wrapper */
+._5a20a69 {
+    transition: scale 0.2s ease-in-out;
 }

utils/storage.js

@@ -50,6 +50,7 @@ const STORAGE_CONFIG = Object.freeze({
 		hideThinkingItem: { key: 'local:hideThinking', fallback: false },
 		toggleBubbleAIItem: { key: 'local:toggleGptBubble', fallback: false },
 		toggleUserBubbleFullWidthItem: { key: 'local:toggleUserBubbleFullWidth', fallback: false },
+		toggleHeaderHeightItem: { key: 'local:toggleHeaderHeight', fallback: false },
 	},
 })
 
@@ -84,4 +85,5 @@ export const {
 	accentUserBubbleItem,
 	toggleBubbleAIItem,
 	toggleUserBubbleFullWidthItem,
+	toggleHeaderHeightItem,
 } = storageItems