From 9807957963ac7ef164967c9049901938540ed7b3 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Mon, 29 Sep 2025 22:53:48 +0200
Subject: [PATCH 1/2] feat(custom/shrink-topbar): Add toggle for compact mode
 of sticky top header

- Add a toggle to enable a more compact version of the sticky top header containing the chat title
- Reduce the height and padding of the header when compact mode is enabled
- Ensure the compact mode maintains usability and readability while optimizing screen space

Changes summary:
- Added a toggle to shrink the sticky top header, making it more compact. When enabled, the header's height and padding are reduced, providing a cleaner and more space-efficient layout while ensuring the chat title remains readable and functional.
---
 components/Custom/Layouts/Toggles.vue | 16 ++++++++++-
 components/Icons/Shrink.vue           | 20 ++++++++++++++
 styles/customs/_custom-toggles.scss   | 38 +++++++++++++++++++++++++++
 styles/elements/_right--sticky.scss   | 11 +++++---
 utils/storage.js                      |  2 ++
 5 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 components/Icons/Shrink.vue

diff --git a/components/Custom/Layouts/Toggles.vue b/components/Custom/Layouts/Toggles.vue
index 54dc353..05e83e7 100644
--- a/components/Custom/Layouts/Toggles.vue
+++ b/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">
diff --git a/components/Icons/Shrink.vue b/components/Icons/Shrink.vue
new file mode 100644
index 0000000..5c1bf08
--- /dev/null
+++ b/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>
diff --git a/styles/customs/_custom-toggles.scss b/styles/customs/_custom-toggles.scss
index 82aa50f..c1f3313 100644
--- a/styles/customs/_custom-toggles.scss
+++ b/styles/customs/_custom-toggles.scss
@@ -31,4 +31,42 @@ html[dsx-toggle-ai-bubble] {
     ._4f9bf79 {
         background: transparent !important;
     }
+}
+
+html[dsx-toggle-header-height] {
+    --h-header: 2.25rem !important;
+    --header-el-scale: 0.68 !important;
+
+    // ._7780f2e {}
+
+    /* Sticky header */
+    ._2be88ba {
+        height: var(--h-header) !important;
+        // display: none;
+
+        /* Sticky header: chat title */
+        .afa34042 {
+            scale: var(--header-el-scale);
+        }
+    }
+
+    /* 
+    .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);
+        // }
+    }
 }
\ No newline at end of file
diff --git a/styles/elements/_right--sticky.scss b/styles/elements/_right--sticky.scss
index fdf1824..1ad6376 100644
--- a/styles/elements/_right--sticky.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/utils/storage.js b/utils/storage.js
index 2d78f50..98f0b30 100644
--- a/utils/storage.js
+++ b/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

From 4a2e1840663ea4b84ae313ff2c2fc6da59089013 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Mon, 29 Sep 2025 23:19:30 +0200
Subject: [PATCH 2/2] fix(custom/shrink-topbar): Adjust compact header and
 roller button styles for smaller screens

- Fix styling issues with the compact header on smaller screens to ensure proper layout and usability
- Adjust the roller button's position and size to prevent overlap and improve visibility on smaller screens
- Ensure responsiveness and consistency across all screen sizes

Changes summary:
- Resolved styling issues with the compact header and roller button on smaller screens. The compact header now maintains proper layout and spacing, while the roller button's position and size have been adjusted to prevent overlap and ensure better visibility across devices.
---
 components/ThemeManager.vue         | 11 ++++++++++-
 styles/abstract/_root.scss          |  6 ++++--
 styles/customs/_custom-toggles.scss | 17 ++++++++++++++++-
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/components/ThemeManager.vue b/components/ThemeManager.vue
index 8e8591f..307a180 100644
--- a/components/ThemeManager.vue
+++ b/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 {
diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss
index 7b8806c..41bb590 100644
--- a/styles/abstract/_root.scss
+++ b/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') {
diff --git a/styles/customs/_custom-toggles.scss b/styles/customs/_custom-toggles.scss
index c1f3313..c85f99d 100644
--- a/styles/customs/_custom-toggles.scss
+++ b/styles/customs/_custom-toggles.scss
@@ -35,7 +35,7 @@ html[dsx-toggle-ai-bubble] {
 
 html[dsx-toggle-header-height] {
     --h-header: 2.25rem !important;
-    --header-el-scale: 0.68 !important;
+    --header-el-scale: 0.7 !important;
 
     // ._7780f2e {}
 
@@ -47,6 +47,7 @@ html[dsx-toggle-header-height] {
         /* Sticky header: chat title */
         .afa34042 {
             scale: var(--header-el-scale);
+            background-color: transparent !important;
         }
     }
 
@@ -69,4 +70,18 @@ html[dsx-toggle-header-height] {
         //     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;
+            }
+        }
+    }
 }
\ No newline at end of file