From 26ba717d10b18183f44e334706a61ddbafc6e29a Mon Sep 17 00:00:00 2001
From: Sayiddd <sajidmuhammadikhlas@gmail.com>
Date: Sat, 4 Apr 2026 10:45:44 +0700
Subject: [PATCH 1/4] Added useScrollbarWidth composable

Added composable & provider and injector for accessing scrollbar width
---
 src/composables/useScrollbarWidth.ts | 38 ++++++++++++++++++++++++++++
 src/keys/scroll.ts                   |  7 +++++
 src/layouts/default.vue              | 17 ++++++++++---
 src/pages/index.vue                  | 15 ++++++++++-
 4 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 src/composables/useScrollbarWidth.ts

diff --git a/src/composables/useScrollbarWidth.ts b/src/composables/useScrollbarWidth.ts
new file mode 100644
index 0000000..18e3073
--- /dev/null
+++ b/src/composables/useScrollbarWidth.ts
@@ -0,0 +1,38 @@
+// source code: https://github.com/vueuse/vueuse/issues/4262
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+// Calculates scrollbar width for an HTML element reactively.
+// This is needed for gutter layout happening on Chrome & Opera.
+export default function useScrollbarWidth(
+  elementRef: Ref<HTMLElement | null>,
+): Ref<number> {
+  const scrollbarWidth = ref<number>(0)
+  let resizeObserver: ResizeObserver
+
+  function calc() {
+    const scrollEl = elementRef.value!
+    scrollbarWidth.value = scrollEl.offsetWidth - scrollEl.clientWidth
+  }
+
+  onMounted(() => {
+    const element = elementRef.value!
+
+    // initial calculation
+    calc()
+
+    // recalculate whenever window size or zoom level changes
+    window.addEventListener('resize', calc, false)
+
+    // recalculate whenever element size changes
+    resizeObserver = new ResizeObserver(calc)
+    resizeObserver.observe(element)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', calc)
+    resizeObserver.disconnect()
+  })
+
+  return scrollbarWidth
+}
diff --git a/src/keys/scroll.ts b/src/keys/scroll.ts
index 14ebb46..c990784 100644
--- a/src/keys/scroll.ts
+++ b/src/keys/scroll.ts
@@ -1,3 +1,10 @@
 import type { UseScrollReturn } from '@vueuse/core'
 
+interface ScrollbarWidthCtx {
+  // uses MaybeRef for injector default value
+  scrollbarWidth: MaybeRef<number>
+  setScrollbarWidth: (value: number) => void
+}
+
 export const scrollKey: InjectionKey<UseScrollReturn> = Symbol('kei-chan is injecting scrolling')
+export const scrollbarWidthKey: InjectionKey<ScrollbarWidthCtx> = Symbol('kei-chan is injecting scrollbar width')
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 3ffd7cf..4e70718 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import type { UseScrollReturn } from '@vueuse/core'
-import { scrollKey } from '~/keys/scroll'
+import { scrollbarWidthKey, scrollKey } from '~/keys/scroll'
 import { isSidebarOpenKey } from '~/keys/sidebar'
 
 const route = useRoute()
 
 const isInRoot = computed(() => route.path === '/')
+const scrollbarWidth = ref(0)
+const isSidebarOpen = ref(false)
 
 // composable init
 const el = useTemplateRef<HTMLElement>('scrollRef')
 const scrollReturn: UseScrollReturn = useScroll(el)
-provide(scrollKey, scrollReturn)
 
 // composable won't work on the same level as initialization
 const { arrivedState, measure } = scrollReturn
@@ -33,8 +34,18 @@ router.afterEach(() => {
 })
 */
 
-const isSidebarOpen = ref(false)
+function setScrollbarWidth(value: number) {
+  scrollbarWidth.value = value
+}
+
+provide(scrollbarWidthKey, {
+  scrollbarWidth,
+  setScrollbarWidth,
+})
+provide(scrollKey, scrollReturn)
 provide(isSidebarOpenKey, isSidebarOpen)
+
+// TODO: match layout decor with browser scrollbar width, fix layout shifts, reset default scrollbar style
 </script>
 
 <template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index fd2ec8e..3d6082c 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,13 +1,26 @@
 <script setup lang="ts">
+import useScrollbarWidth from '~/composables/useScrollbarWidth'
+import { scrollbarWidthKey } from '~/keys/scroll'
+
 const { t } = useI18n()
 
 useHead({
   title: () => t('button.home'),
 })
+
+const el = useTemplateRef('scrollRef')
+const scrollbarWidth = useScrollbarWidth(el)
+// great article https://gusiol.medium.com/typing-vue-inject-with-object-destructuring-f5a2b6067319
+const { setScrollbarWidth } = inject(scrollbarWidthKey, {
+  scrollbarWidth: 0,
+  setScrollbarWidth: () => undefined,
+})
+
+onMounted(() => setScrollbarWidth(scrollbarWidth.value))
 </script>
 
 <template>
-  <div class="relative" overflow="x-hidden y-auto" h="full" snap="y mandatory">
+  <div ref="scrollRef" class="relative" overflow="x-hidden y-auto" h="full" snap="y mandatory">
     <ScrollIndicator />
     <IndexFirstSection />
     <IndexSecondSection />

From ba2c95f885772dd383ebd37b9ce182968a92611a Mon Sep 17 00:00:00 2001
From: Sayiddd <sajidmuhammadikhlas@gmail.com>
Date: Mon, 20 Apr 2026 11:59:22 +0700
Subject: [PATCH 2/4] Remove unused package 'pinia'

---
 package.json         |  1 -
 pnpm-workspace.yaml  |  1 -
 src/modules/pinia.ts | 17 -----------------
 3 files changed, 19 deletions(-)
 delete mode 100644 src/modules/pinia.ts

diff --git a/package.json b/package.json
index a8f1f2b..9c5d932 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "@unocss/reset": "catalog:frontend",
     "@vueuse/core": "catalog:frontend",
     "nprogress": "catalog:frontend",
-    "pinia": "catalog:frontend",
     "vue": "catalog:frontend",
     "vue-i18n": "catalog:frontend",
     "vue-router": "catalog:frontend"
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 32c75e1..7bda9c4 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -42,7 +42,6 @@ catalogs:
     '@unocss/reset': ^66.1.0-beta.7
     '@vueuse/core': ^13.0.0
     nprogress: ^0.2.0
-    pinia: ^3.0.1
     vue: ^3.5.13
     vue-i18n: ^11.1.2
     vue-router: ^4.5.0
diff --git a/src/modules/pinia.ts b/src/modules/pinia.ts
deleted file mode 100644
index 2ebeb3e..0000000
--- a/src/modules/pinia.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { UserModule } from '~/types'
-import { createPinia } from 'pinia'
-
-// Setup Pinia
-// https://pinia.vuejs.org/
-export const install: UserModule = ({ isClient, initialState, app }) => {
-  const pinia = createPinia()
-  app.use(pinia)
-  // Refer to
-  // https://github.com/antfu/vite-ssg/blob/main/README.md#state-serialization
-  // for other serialization strategies.
-  if (isClient)
-    pinia.state.value = (initialState.pinia) || {}
-
-  else
-    initialState.pinia = pinia.state.value
-}

From afd2132af49a0e45f0281ce2bd9bf49bd3951ccc Mon Sep 17 00:00:00 2001
From: Sayiddd <sajidmuhammadikhlas@gmail.com>
Date: Mon, 20 Apr 2026 12:01:40 +0700
Subject: [PATCH 3/4] Remove .vscode from ignored list

---
 .gitignore              |  1 -
 .vscode/extensions.json | 13 ++++++++++++
 .vscode/settings.json   | 47 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/extensions.json
 create mode 100644 .vscode/settings.json

diff --git a/.gitignore b/.gitignore
index 2bb9842..a01c5e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,3 @@ node_modules
 .idea/
 *.log
 public/assets/fonts
-/.vscode/
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..d066795
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,13 @@
+{
+  "recommendations": [
+    "antfu.iconify",
+    "antfu.unocss",
+    "antfu.vite",
+    "antfu.goto-alias",
+    "csstools.postcss",
+    "dbaeumer.vscode-eslint",
+    "vue.volar",
+    "lokalise.i18n-ally",
+    "streetsidesoftware.code-spell-checker"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..3aac95e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,47 @@
+{
+  "cSpell.words": ["Vite", "unocss", "vueuse", "vitejs"],
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.localesPaths": "locales",
+  "i18n-ally.sortKeys": true,
+
+  // Disable the default formatter
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // The following is optional.
+  // It's better to put under project setting `.vscode/settings.json`
+  // to avoid conflicts with working with different eslint configs
+  // that does not support all formats.
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}

From daea56a4075722f961871816ebd9feb8416d1570 Mon Sep 17 00:00:00 2001
From: Sayiddd <sajidmuhammadikhlas@gmail.com>
Date: Mon, 20 Apr 2026 12:11:37 +0700
Subject: [PATCH 4/4] Update lockfile

---
 pnpm-lock.yaml | 29 -----------------------------
 1 file changed, 29 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1889044..025eb5a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,9 +104,6 @@ catalogs:
     nprogress:
       specifier: ^0.2.0
       version: 0.2.0
-    pinia:
-      specifier: ^3.0.1
-      version: 3.0.4
     vue:
       specifier: ^3.5.13
       version: 3.5.30
@@ -145,9 +142,6 @@ importers:
       nprogress:
         specifier: catalog:frontend
         version: 0.2.0
-      pinia:
-        specifier: catalog:frontend
-        version: 3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
       vue:
         specifier: catalog:frontend
         version: 3.5.30(typescript@5.9.3)
@@ -1808,9 +1802,6 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
-  '@vue/devtools-api@7.7.9':
-    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
-
   '@vue/devtools-core@7.7.9':
     resolution: {integrity: sha512-48jrBSwG4GVQRvVeeXn9p9+dlx+ISgasM7SxZZKczseohB0cBz+ITKr4YbLWjmJdy45UHL7UMPlR4Y0CWTRcSQ==}
     peerDependencies:
@@ -3588,15 +3579,6 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
-  pinia@3.0.4:
-    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
-    peerDependencies:
-      typescript: '>=4.5.0'
-      vue: ^3.5.11
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -6122,10 +6104,6 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-api@7.7.9':
-    dependencies:
-      '@vue/devtools-kit': 7.7.9
-
   '@vue/devtools-core@7.7.9(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.30(typescript@5.9.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.9
@@ -8238,13 +8216,6 @@ snapshots:
 
   pidtree@0.6.0: {}
 
-  pinia@3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3)):
-    dependencies:
-      '@vue/devtools-api': 7.7.9
-      vue: 3.5.30(typescript@5.9.3)
-    optionalDependencies:
-      typescript: 5.9.3
-
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8