From 06ff3f52ed0886199c5016e64f8403c7c2e24e83 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 4 Sep 2025 18:42:38 +0200 Subject: [PATCH] refactor(custom/toggles): Use toggle attributes on instead css vars for managing UI states - Refactor `useToggleStorage` and `hideThinkingProcess` to toggle attributes on the `` element instead of directly modifying CSS variables - Replace direct CSS variable updates with attribute-based toggling for cleaner, more maintainable, and extensible code - Ensure the new approach is DRY (Don't Repeat Yourself) and easier to extend for future elements or features Changes summary: - Refactored the logic for managing UI states like the thinking process visibility. Instead of directly modifying CSS variables, the implementation now toggles attributes on the `` element. This approach improves code clarity, reduces redundancy, and makes it easier to extend functionality for new elements in the future. --- components/Custom/Layouts/Toggles.vue | 2 +- composables/useToggleStorage.js | 43 +++++++++++++++----------- styles/abstract/_root.scss | 2 -- styles/customs/_custom-chats.scss | 0 styles/customs/_custom-fonts.scss | 0 styles/customs/_custom-toggles.scss | 5 +++ styles/customs/utils/_hideToggles.scss | 12 +++++++ styles/elements/_right--main.scss | 27 +++------------- styles/index.scss | 2 ++ utils/storage.js | 9 ++++-- 10 files changed, 56 insertions(+), 46 deletions(-) create mode 100644 styles/customs/_custom-chats.scss create mode 100644 styles/customs/_custom-fonts.scss create mode 100644 styles/customs/_custom-toggles.scss create mode 100644 styles/customs/utils/_hideToggles.scss diff --git a/components/Custom/Layouts/Toggles.vue b/components/Custom/Layouts/Toggles.vue index bbcb4f1..0018f53 100644 --- a/components/Custom/Layouts/Toggles.vue +++ b/components/Custom/Layouts/Toggles.vue @@ -18,5 +18,5 @@ import CardToggle from '@/components/Cards/Toggle.vue' import IconThinkingProcess from '@/components/Icons/ThinkingProcess.vue' // One toggle controls everything -const hideThinkingState = useToggleStorage(hideThinkingItem, '--displayThinkingProcess') +const hideThinkingState = useToggleStorage(hideThinkingItem, 'dsx-toggle-thinking-process') diff --git a/composables/useToggleStorage.js b/composables/useToggleStorage.js index 85cc7ce..e35c2a8 100644 --- a/composables/useToggleStorage.js +++ b/composables/useToggleStorage.js @@ -1,36 +1,43 @@ import { ref, watch } from 'vue' -export function useToggleStorage(storageItem, cssVar) { +export function useToggleStorage(storageItem, attributeName) { const state = ref(false) + let initialized = false - // Initialize state from storage immediately + // Initialize state from storage const initializeState = async () => { try { const val = await storageItem.getValue() state.value = Boolean(val) } catch (error) { console.warn('Failed to load storage value:', error) + } finally { + initialized = true } } - // Fire and forget initialization initializeState() - // Reactive sync: state → CSS + storage - watch( - state, - async (val) => { - const display = val ? 'none' : 'block' - document.documentElement.style.setProperty(cssVar, display) - - try { - await storageItem.setValue(val) - } catch (error) { - console.warn('Failed to save storage value:', error) - } - }, - { immediate: true } // Apply initial state to CSS - ) + watch(state, async (val, oldVal) => { + // Skip until initialization finishes + if (!initialized) return + + // Only update if value actually changed + if (val === oldVal) return + + const root = document.documentElement + if (val) { + if (!root.hasAttribute(attributeName)) root.setAttribute(attributeName, '') + } else { + if (root.hasAttribute(attributeName)) root.removeAttribute(attributeName) + } + + try { + await storageItem.setValue(val) + } catch (error) { + console.warn('Failed to save storage value:', error) + } + }) return state } diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss index 6ce2c29..861af6b 100644 --- a/styles/abstract/_root.scss +++ b/styles/abstract/_root.scss @@ -13,8 +13,6 @@ --ds-font-family: var(--fontFamily) !important; // override DS font-family - --displayThinkingProcess: none; - /* ? --- Custom Widths --- */ --defaultWidthChats: 800px; // --defaultWidthChats: var(--message-list-max-width); diff --git a/styles/customs/_custom-chats.scss b/styles/customs/_custom-chats.scss new file mode 100644 index 0000000..e69de29 diff --git a/styles/customs/_custom-fonts.scss b/styles/customs/_custom-fonts.scss new file mode 100644 index 0000000..e69de29 diff --git a/styles/customs/_custom-toggles.scss b/styles/customs/_custom-toggles.scss new file mode 100644 index 0000000..b391f07 --- /dev/null +++ b/styles/customs/_custom-toggles.scss @@ -0,0 +1,5 @@ +html[dsx-toggle-thinking-process] { + .ds-think-content { + display: none !important; + } +} \ No newline at end of file diff --git a/styles/customs/utils/_hideToggles.scss b/styles/customs/utils/_hideToggles.scss new file mode 100644 index 0000000..cc5a53d --- /dev/null +++ b/styles/customs/utils/_hideToggles.scss @@ -0,0 +1,12 @@ +// Define your toggle states in a map for scalability +$toggle-states: ( + "thinking-process", + "user-accent", +); + +// Mixin to generate all toggle styles +@mixin toggleStyles($state, $styles) { + html[dsx-toggle-#{$state}] & { + @content; + } +} \ No newline at end of file diff --git a/styles/elements/_right--main.scss b/styles/elements/_right--main.scss index 38ee0b4..8fd7680 100644 --- a/styles/elements/_right--main.scss +++ b/styles/elements/_right--main.scss @@ -123,11 +123,14 @@ /* Thinking process texts */ .ds-think-content { --thinking-p-left: 13px; // this is from ds deafult - display: var(--displayThinkingProcess) !important; color: var(--c-subtext-2) !important; transition: font-size 0.15s ease-in-out, line-height 0.15s ease-in-out; + // @include toggleStyles('thinking-process', ()) { + // display: none !important; + // } + &:not(:empty) { @extend .fadeIn; } @@ -143,28 +146,6 @@ line-height: calc((var(--lineHeight) / 16) * 0.85) !important; } } - - // /* Thinking process texts */ - // .e1675d8b { - // --thinking-p-left: 13px; // this is from ds deafult - // display: var(--displayThinkingProcess) !important; - - // &:not(:empty) { - // @extend .fadeIn; - // } - - // color: var(--c-subtext-2) !important; - // // font-size: calc(calc((var(--fontSize) / 16) * 1rem) * 0.75) !important; - // // line-height: calc((var(--lineHeight) / 16) * 0.5) !important; - // transition: font-size 0.15s ease-in-out, - // line-height 0.15s ease-in-out; - - // /* Thinking border on the left */ - // ._9ecc93a { - // border-color: currentColor !important; - // opacity: 0.6; - // } - // } } /* Shirmer animation on "Thought" txt while thinking */ diff --git a/styles/index.scss b/styles/index.scss index 6868613..060eb13 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -12,6 +12,8 @@ @import 'global/_base'; @import 'global/_scrollbars'; +@import 'customs/utils/_hideToggles'; +@import 'customs/_custom-toggles'; @import 'components/_skeleton'; @import 'components/_icons'; diff --git a/utils/storage.js b/utils/storage.js index 9f159b0..e3b8ff3 100644 --- a/utils/storage.js +++ b/utils/storage.js @@ -15,8 +15,13 @@ export const THEMES = { OLED: 'oled', } -export function getAllStorageItems() { - storage.snapshot('local').then((res) => console.table(res)) +export async function getAllStorageItems() { + try { + const res = await storage.snapshot('local') + console.table(res) + } catch (e) { + console.warn('Failed to snapshot storage:', e) + } } export const themeItem = storage.defineItem('local:theme', {