itsmartashub · itsmartashub · Sep 6, 2025 · Sep 6, 2025 · Sep 6, 2025 · Sep 6, 2025
diff --git a/components/Custom/Layouts/Toggles.vue b/components/Custom/Layouts/Toggles.vue
@@ -14,20 +14,32 @@
 			subtitle="Turn off the AI bubble style to match the default Deepseek look and feel."
 			:iconComponent="IconBubbleOFF"
 		/>
+
+		<CardToggle
+			v-model="toggleUserBubbleFullWidthState"
+			title="User Bubble Full Width"
+			subtitle="Make User bubble full width to match the AI bubble width."
+			:iconComponent="IconFullWidth"
+		/>
 	</div>
 </template>
 
 <script setup>
-import { hideThinkingItem, toggleBubbleAIItem } from '@/utils/storage'
+import { hideThinkingItem, toggleBubbleAIItem, toggleUserBubbleFullWidthItem } 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'
 
 // One toggle controls everything
 const hideThinkingState = useToggleStorage(hideThinkingItem, 'dsx-toggle-thinking-process')
 const toggleBubbleAI = useToggleStorage(toggleBubbleAIItem, 'dsx-toggle-ai-bubble')
+const toggleUserBubbleFullWidthState = useToggleStorage(
+	toggleUserBubbleFullWidthItem,
+	'dsx-toggle-user-bubble-full-width'
+)
 </script>
 
 <style lang="scss">

diff --git a/components/Icons/BubbleOFF.vue b/components/Icons/BubbleOFF.vue
@@ -9,13 +9,12 @@
 		stroke-width="2"
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		class="icon icon-tabler icons-tabler-outline icon-tabler-bubble-x"
+		class="icon icon-tabler icons-tabler-outline icon-tabler-message-circle-off"
 	>
 		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 		<path
-			d="M13.5 18.75c-.345 .09 -.727 .25 -1.1 .25a4.3 4.3 0 0 1 -1.57 -.298l-3.83 2.298v-3.134a2.668 2.668 0 0 1 -1.795 -3.773a4.8 4.8 0 0 1 2.908 -8.933a5.335 5.335 0 0 1 9.194 1.078a5.333 5.333 0 0 1 4.484 6.778"
+			d="M8.595 4.577c3.223 -1.176 7.025 -.61 9.65 1.63c2.982 2.543 3.601 6.523 1.636 9.66m-1.908 2.109c-2.787 2.19 -6.89 2.666 -10.273 1.024l-4.7 1l1.3 -3.9c-2.229 -3.296 -1.494 -7.511 1.68 -10.057"
 		/>
-		<path d="M22 22l-5 -5" />
-		<path d="M17 22l5 -5" />
+		<path d="M3 3l18 18" />
 	</svg>
 </template>
diff --git a/components/Icons/Chrome.vue b/components/Icons/Chrome.vue
@@ -0,0 +1,21 @@
+<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-brand-chrome"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+		<path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+		<path d="M12 9h8.4" />
+		<path d="M14.598 13.5l-4.2 7.275" />
+		<path d="M9.402 13.5l-4.2 -7.275" />
+	</svg>
+</template>
diff --git a/components/Icons/Firefox.vue b/components/Icons/Firefox.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-brand-firefox"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<path d="M4.028 7.82a9 9 0 1 0 12.823 -3.4c-1.636 -1.02 -3.064 -1.02 -4.851 -1.02h-1.647" />
+		<path
+			d="M4.914 9.485c-1.756 -1.569 -.805 -5.38 .109 -6.17c.086 .896 .585 1.208 1.111 1.685c.88 -.275 1.313 -.282 1.867 0c.82 -.91 1.694 -2.354 2.628 -2.093c-1.082 1.741 -.07 3.733 1.371 4.173c-.17 .975 -1.484 1.913 -2.76 2.686c-1.296 .938 -.722 1.85 0 2.234c.949 .506 3.611 -1 4.545 .354c-1.698 .102 -1.536 3.107 -3.983 2.727c2.523 .957 4.345 .462 5.458 -.34c1.965 -1.52 2.879 -3.542 2.879 -5.557c-.014 -1.398 .194 -2.695 -1.26 -4.75"
+		/>
+	</svg>
+</template>
diff --git a/components/Icons/IconFullWidth.vue → components/Icons/FullWidth.vue b/components/Icons/IconFullWidth.vue → components/Icons/FullWidth.vue
diff --git a/components/PillChip.vue b/components/PillChip.vue
@@ -3,6 +3,7 @@
 		:is="componentType"
 		:href="href || undefined"
 		:target="href ? '_blank' : undefined"
+		:title="href ? title : undefined"
 		:rel="href ? 'noopener noreferrer' : undefined"
 		:to="to || undefined"
 		class="pill-chip"
@@ -44,6 +45,10 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
+	title: {
+		type: String,
+		default: '',
+	},
 	to: {
 		type: [String, Object],
 		default: '',
@@ -83,25 +88,25 @@ const handleClick = (event) => {
 
 <style lang="scss" scoped>
 .pill-chip {
-	--icon-size: 1.8rem;
-
 	display: inline-flex;
 	align-items: center;
-	gap: 0.375rem;
-	padding: 0.275rem;
-	font-size: 0.9rem;
+	gap: 0.375em;
+	padding: 0.2em;
+	font-size: var(--pillchip-font-size);
 	font-weight: 500;
 	font-family: inherit;
 	text-decoration: none;
 	background-color: var(--chip-bg);
 	color: var(--chip-text);
-	backdrop-filter: blur(2rem);
+	backdrop-filter: blur(1rem);
 	border: color-mix(in oklab, currentColor, transparent 85%) 2px solid;
 	border-radius: 50vw;
 	outline: none;
 	cursor: pointer;
 	transition: all 0.25s ease;
 
+	--icon-size: 1.8em;
+
 	&__icon {
 		display: flex;
 		flex-shrink: 0;
@@ -132,7 +137,7 @@ const handleClick = (event) => {
 	&:hover {
 		background-color: var(--chip-text);
 		color: var(--chip-bg);
-		transform: scale(0.95);
+		transform: scale(0.9);
 
 		.pill-chip__icon {
 			background-color: var(--icon-color);

diff --git a/entrypoints/popup/App.vue b/entrypoints/popup/App.vue
@@ -1,12 +1,14 @@
 <script setup>
-import Header from './components/Header.vue'
 import PopupImage from './components/PopupImage.vue'
+import Header from './components/Header.vue'
+import Recommendation from './components/Recommendation.vue'
 </script>
 
 <template>
 	<div class="popup">
 		<PopupImage />
 		<Header />
+		<Recommendation />
 	</div>
 </template>
 

diff --git a/entrypoints/popup/components/Header.vue b/entrypoints/popup/components/Header.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { version, name } from '@/package.json'
 import PillChip from '@/components/PillChip.vue'
 import IconGithub from '@/components/Icons/Github.vue'
 
 const EXT_VERSION = ref(`v${version}`)
 const EXT_REPO = `https://github.com/itsmartashub/${name}`
-const EXT_RELEASE_LINK = computed(() => `${EXT_REPO}/releases/tag/v${EXT_VERSION.value}`)
+// const EXT_RELEASE_LINK = computed(() => `${EXT_REPO}/releases/tag/v${EXT_VERSION.value}`)
 </script>
 
 <template>
@@ -17,6 +17,7 @@ const EXT_RELEASE_LINK = computed(() => `${EXT_REPO}/releases/tag/v${EXT_VERSION
 			chip-bg="var(--on-accent)"
 			chip-text="var(--accent)"
 			:href="EXT_REPO"
+			title="DeepStyled Github Repository"
 		/>
 	</header>
 </template>

diff --git a/entrypoints/popup/components/PopupImage.vue b/entrypoints/popup/components/PopupImage.vue
@@ -11,7 +11,7 @@ import dsHeaderImg from '@/assets/img/ds-header-lg.webp'
 	inset: 0;
 	z-index: -1;
 	width: 100%;
-	height: 20rem;
+	height: 24rem;
 	object-fit: cover;
 	object-position: center;
 	display: block;

diff --git a/entrypoints/popup/components/Recommendation.vue b/entrypoints/popup/components/Recommendation.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { ref } from 'vue'
+import PillChip from '@/components/PillChip.vue'
+import IconGithub from '@/components/Icons/Github.vue'
+import IconFirefox from '@/components/Icons/Firefox.vue'
+import IconChrome from '@/components/Icons/Chrome.vue'
+
+const extLinks = [
+	{
+		name: 'Github',
+		url: 'https://github.com/itsmartashub/GPThemes',
+		icon: IconGithub,
+	},
+	{
+		name: 'Chrome',
+		url: 'https://chromewebstore.google.com/detail/gpthemes/bghdlfnkbghekhdadaokecnhkcodfcna',
+		icon: IconChrome,
+	},
+	{
+		name: 'Firefox',
+		url: 'https://addons.mozilla.org/en-US/firefox/addon/gpthemes/',
+		icon: IconFirefox,
+	},
+]
+</script>
+
+<template>
+	<div class="recommendation">
+		<p>
+			Enjoying this? Try
+			<a
+				href="https://github.com/itsmartashub/GPThemes"
+				target="_blank"
+				rel="noopener noreferrer"
+				title="Github Repository"
+				><b>GPT<span>hemes</span></b></a
+			>
+			for ChatGPT
+		</p>
+		<ul class="recommendation__items">
+			<li v-for="link in extLinks" :key="link.name" class="recommendation__item">
+				<PillChip
+					:icon="link.icon"
+					chip-bg="var(--on-accent)"
+					chip-text="var(--accent)"
+					:href="link.url"
+					:title="`GPThemes on ${link.name}`"
+				/>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.recommendation {
+	position: fixed;
+	bottom: 0%;
+	left: 50%;
+	transform: translateX(-50%);
+	width: max-content;
+	background-color: color-mix(in oklab, var(--accent), transparent 90%);
+	backdrop-filter: blur(0.65rem) saturate(1.12);
+	border-radius: var(--br);
+	padding: 0.8rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.65rem;
+	margin-bottom: 0.5rem;
+	box-shadow: 0 0 1px 1px color-mix(in oklab, var(--accent), transparent 90%) inset;
+	z-index: -1;
+	// text-shadow: 0 0 8px color-mix(in oklab, var(--accent), black 60%);
+	transition: translate 0.35s $easeInOutBack;
+
+	&:hover {
+		translate: 0 -0.25rem;
+	}
+
+	p {
+		b {
+			padding: 0.25rem 0.5rem;
+			font-weight: bold;
+			background-color: color-mix(in oklab, var(--accent), transparent 90%);
+			border-radius: 0.5rem;
+			box-shadow: 0 0 1px 1px color-mix(in oklab, var(--accent), transparent 90%) inset;
+			transition: all 0.2s ease;
+
+			span {
+				font-weight: 400;
+			}
+		}
+
+		a {
+			&:hover {
+				b {
+					background-color: var(--accent);
+					color: var(--on-accent);
+				}
+			}
+		}
+	}
+
+	&__items {
+		--pillchip-font-size: 0.75rem;
+		padding: 0.1rem;
+		align-self: center;
+		display: flex;
+		gap: 0.5rem;
+		font-size: 0.825em;
+		// z-index: 10;
+		// translate: 0 50%;
+		border-radius: 50vw;
+		// background-color: color-mix(in oklab, var(--accent), transparent 90%);
+		// border: 2px solid color-mix(in oklab, var(--accent), transparent 90%);
+		// backdrop-filter: blur(2rem);
+	}
+}
+</style>
diff --git a/entrypoints/popup/style.scss b/entrypoints/popup/style.scss
@@ -1,7 +1,5 @@
 :root {
-    --accent: #bcbfdb;
-    // --bg: #5e6184;
-    // --on-accent: color-mix(in oklab, var(--accent) 20%, #31344d);
+    --accent: #adb4e4;
     --on-accent: #5e6184;
 }
 
@@ -11,10 +9,11 @@
 }
 
 body {
-    // background-color: var(--accent-darker);
-    // color: var(--accent);
-    // background-image: url("@/assets/img/ds-header-lg.webp") no-repeat center fixed;
-    // background-size: cover;
+    background-color: var(--on-accent);
+    color: var(--accent);
+    font-size: 0.925em;
+    line-height: 1.625;
+    text-shadow: 0 0 1px color-mix(in oklab, var(--accent), black 60%);
 }
 
 #app {
@@ -28,10 +27,19 @@ h3,
 h4,
 h5,
 h6,
-a {
+a,
+p {
     color: var(--accent);
 }
 
+ul {
+    list-style: none;
+}
+
+li {
+    list-style-type: none;
+}
+
 a {
     text-decoration: none;
 }

diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss
@@ -61,6 +61,8 @@
     --c-scrollbar-track: transparent;
     --c-scrollbar-corner: var(--c-scrollbar-thumb);
 
+    --pillchip-font-size: 0.875rem;
+
 
     @include dev('md') {
         --p-chat-bubble: calc(var(--br) * 1.2);

diff --git a/styles/customs/_custom-toggles.scss b/styles/customs/_custom-toggles.scss
@@ -14,6 +14,19 @@ html[dsx-toggle-accent-user-bubble] {
     }
 }
 
+html[dsx-toggle-user-bubble-full-width] {
+    .fbb737a4 {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+
+    /* User chat bubble in edit state */
+    ._9663006._3111eee .ds-textarea {
+        // width: 100% !important;
+        max-width: 100% !important;
+    }
+}
+
 html[dsx-toggle-ai-bubble] {
     ._4f9bf79 {
         background: transparent !important;