chore: update dependencies and component styling

- Upgrade Rollup to version 4.34.8
- Update TypeScript ESLint and related packages
- Modify LanguageSwitcher and ThemeToggle components to remove `lg="hidden"` class
- Refactor Scrollbar component with improved initialization and theme handling
- Inline scrollbar styles in Scrollbar component, removing separate CSS file

src/components/LanguageSwitcher.astro

@@ -17,7 +17,6 @@ function getLanguageDisplayName(code: string) {
   type="button"
   id="language-switcher"
   class="absolute right-[calc(9.94vw+2.8rem)] top-[calc(7.3vw+2.68rem)] z-99 aspect-square w-6.6 c-secondary [@supports(-webkit-touch-callout:none)]:top-[calc(7.3vw+2.28rem)] active:scale-90"
-  lg="hidden"
   aria-label={`Current Language: ${getLanguageDisplayName(currentLocale)}. Click to switch to next language.`}
 >
   <svg

src/components/Scrollbar.astro

@@ -1,19 +1,19 @@
 <script>
 import { OverlayScrollbars } from 'overlayscrollbars'
 
-let scrollbarsInstance: ReturnType<typeof OverlayScrollbars> | null = null
-
 function initScrollbar() {
   const bodyElement = document.body
+  const scrollbarTheme = document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light'
   if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
-    scrollbarsInstance = OverlayScrollbars({
+    OverlayScrollbars({
       target: bodyElement,
       cancel: {
+        // don't initialize the overlay scrollbar if there is a native one
         nativeScrollbarsOverlaid: true,
       },
     }, {
       scrollbars: {
-        theme: document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light',
+        theme: scrollbarTheme,
         autoHide: 'scroll',
         autoHideDelay: 800,
       },
@@ -26,24 +26,40 @@ function initScrollbar() {
   }
 }
 
-// Automatically update scrollbar theme
-document.addEventListener('theme-changed', () => {
-  scrollbarsInstance?.options({
-    scrollbars: {
-      theme: document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light',
-    },
-  })
-})
-
-// Cleanup scrollbar instance before page transitions
-document.addEventListener('astro:before-swap', () => {
-  scrollbarsInstance?.destroy()
-  scrollbarsInstance = null
-})
-
-document.addEventListener('astro:page-load', initScrollbar)
+document.addEventListener('theme-changed', initScrollbar)
+document.addEventListener('astro:after-swap', initScrollbar)
+initScrollbar()
 </script>
 
 <style is:global>
-@import '@/styles/scrollbar.css';
+@import 'overlayscrollbars/overlayscrollbars.css';
+
+.scrollbar-light,
+.scrollbar-dark {
+  --os-size: 1rem;
+  --os-padding-perpendicular: 0.2rem;
+  --os-padding-axis: 0.4rem;
+  --os-handle-border-radius: 0.7rem;
+  --os-handle-perpendicular-size-hover: 160%;
+  --os-handle-perpendicular-size-active: 160%;
+  --os-handle-interactive-area-offset: 3px;
+}
+
+.scrollbar-light {
+  --os-handle-bg: #CFC5BD;
+  --os-handle-bg-hover: #ADA49E;
+  --os-handle-bg-active: #ADA49E;
+}
+
+.scrollbar-dark {
+  --os-handle-bg: #2C2C2C;
+  --os-handle-bg-hover: #3C3C3C;
+  --os-handle-bg-active: #3C3C3C;
+}
+
+@media (max-width: 1023px) {
+  .os-scrollbar {
+    display: none !important;
+  }
+}
 </style>

src/components/ThemeToggle.astro

@@ -6,10 +6,8 @@ const { light: { background: lightMode }, dark: { background: darkMode } } = the
 
 <button
   id="theme-toggle"
-  aria-pressed="false"
   aria-label="Theme Toggle Button"
   class="absolute right-[calc(9.94vw-1.18rem)] top-[calc(7.3vw+2.6rem)] z-99 aspect-square w-7 c-secondary [@supports(-webkit-touch-callout:none)]:top-[calc(7.3vw+2.2rem)] active:scale-90"
-  lg="hidden"
 >
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -58,6 +56,7 @@ function updateTheme() {
   }
   // Update theme configuration in local storage
   localStorage.setItem('theme', isDark ? 'dark' : 'light')
+  document.dispatchEvent(new Event('theme-changed'))
 }
 
 // Initialize click event (on first load or page transition)

src/layouts/Head.astro

@@ -111,6 +111,7 @@ function updateTheme() {
   if (metaTheme) {
     metaTheme.setAttribute('content', isDark ? darkMode : lightMode)
   }
+  document.dispatchEvent(new Event('theme-changed'))
 }
 
 // Listen to system theme changes in real-time

src/styles/scrollbar.css

@@ -1,30 +0,0 @@
-@import 'overlayscrollbars/overlayscrollbars.css';
-
-.scrollbar-light,
-.scrollbar-dark {
-  --os-size: 1rem;
-  --os-padding-perpendicular: 0.2rem;
-  --os-padding-axis: 0.4rem;
-  --os-handle-border-radius: 0.7rem;
-  --os-handle-perpendicular-size-hover: 160%;
-  --os-handle-perpendicular-size-active: 160%;
-  --os-handle-interactive-area-offset: 3px;
-}
-
-.scrollbar-light {
-  --os-handle-bg: #CFC5BD;
-  --os-handle-bg-hover: #ADA49E;
-  --os-handle-bg-active: #ADA49E;
-}
-
-.scrollbar-dark {
-  --os-handle-bg: #2C2C2C;
-  --os-handle-bg-hover: #3C3C3C;
-  --os-handle-bg-active: #3C3C3C;
-}
-
-@media (max-width: 1023px) {
-  .os-scrollbar {
-    display: none !important;
-  }
-}