From 0de6f553780d1ff59b04cc07acd4f44316ad5bfc Mon Sep 17 00:00:00 2001
From: Techit Thawiang <techit@thawia.ng>
Date: Sun, 26 Oct 2025 21:34:32 +0700
Subject: [PATCH] Fix dissmissible banner typo

---
 .../web-dismissable-global-banner.vue         | 58 ---------------
 .../web-dismissible-global-banner.vue         | 70 +++++++++++++++++++
 app/layouts/default.vue                       |  2 +-
 3 files changed, 71 insertions(+), 59 deletions(-)
 delete mode 100644 app/components/web-dismissable-global-banner.vue
 create mode 100644 app/components/web-dismissible-global-banner.vue

diff --git a/app/components/web-dismissable-global-banner.vue b/app/components/web-dismissable-global-banner.vue
deleted file mode 100644
index 9756b47..0000000
--- a/app/components/web-dismissable-global-banner.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div
-    v-if="visible && banner && banner.active"
-    class="web-dismissable-banner"
-  >
-    <div class="web-dismissable-banner-content">
-      <a :href="banner.link" target="_blank" rel="noopener">
-        {{ banner.message }}
-      </a>
-      <button class="btn btn-secondary btn-sm" @click="dismiss"><span class="material-symbols-outlined">close</span></button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-
-// 🍪 Cookies
-const bannerDismissedCookie = useCookie('web_banner_dismissed', { maxAge: 60 * 60 * 24 * 30 }) // 30 days
-const bannerLastIdCookie = useCookie('web_banner_last_id', { maxAge: 60 * 60 * 24 * 30 }) // 30 days
-
-// 🔹 State
-const banner = ref<any>(null)
-const visible = ref(false)
-
-onMounted(async () => {
-  try {
-    const data = await $fetch('https://files.thawia.ng/files/config/web/banner/tmp/index.json')
-
-    // If no data or inactive, bail
-    if (!data || !data.active) return
-
-    banner.value = data
-
-    // Check if the banner is new or dismissed
-    const currentId = data.id?.toString() || ''
-    const lastSeenId = bannerLastIdCookie.value?.toString() || ''
-    const dismissed = bannerDismissedCookie.value === currentId
-
-    // Show banner only if new or not dismissed yet
-    if (currentId && (currentId !== lastSeenId || !dismissed)) {
-      visible.value = true
-    }
-
-    // Update last seen id
-    bannerLastIdCookie.value = currentId
-  } catch (err) {
-    console.error('Banner fetch failed:', err)
-  }
-})
-
-function dismiss() {
-  if (banner.value?.id) {
-    bannerDismissedCookie.value = banner.value.id.toString()
-  }
-  visible.value = false
-}
-</script>
\ No newline at end of file
diff --git a/app/components/web-dismissible-global-banner.vue b/app/components/web-dismissible-global-banner.vue
new file mode 100644
index 0000000..dcd7657
--- /dev/null
+++ b/app/components/web-dismissible-global-banner.vue
@@ -0,0 +1,70 @@
+<template>
+  <div
+    v-if="visible && banner && banner.active"
+    class="web-dismissible-banner"
+  >
+    <div class="web-dismissible-banner-content">
+      <a :href="banner.link" target="_blank" rel="noopener">
+        {{ banner.message }}
+      </a>
+      <button class="btn btn-secondary btn-sm" @click="dismiss"><span class="material-symbols-outlined">close</span></button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const banner = ref<any>(null)
+const visible = ref(false)
+
+const STORAGE_KEY_DISMISSED = 'web_banner_dismissed'
+const STORAGE_KEY_LAST_ID = 'web_banner_last_id'
+
+function getStorageItem(key: string): string | null {
+  if (typeof window === 'undefined') return null
+  return localStorage.getItem(key)
+}
+
+function setStorageItem(key: string, value: string) {
+  if (typeof window === 'undefined') return
+  localStorage.setItem(key, value)
+}
+
+function removeStorageItem(key: string) {
+  if (typeof window === 'undefined') return
+  localStorage.removeItem(key)
+}
+
+onMounted(async () => {
+  try {
+    const data = await $fetch('https://files.thawia.ng/files/config/web/banner/tmp/index.json')
+
+    // If no data or inactive, bail
+    if (!data) return
+
+    banner.value = data
+
+    const currentId = data.id?.toString() || ''
+    const lastSeenId = getStorageItem(STORAGE_KEY_LAST_ID) || ''
+    const dismissedId = getStorageItem(STORAGE_KEY_DISMISSED)
+
+    // Show banner only if new or not dismissed yet
+    if (currentId && (currentId !== lastSeenId || dismissedId !== currentId)) {
+      visible.value = true
+    }
+
+    // Update last seen ID
+    setStorageItem(STORAGE_KEY_LAST_ID, currentId)
+  } catch (err) {
+    console.error('Banner fetch failed:', err)
+  }
+})
+
+function dismiss() {
+  if (banner.value?.id) {
+    setStorageItem(STORAGE_KEY_DISMISSED, banner.value.id.toString())
+  }
+  visible.value = false
+}
+</script>
\ No newline at end of file
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index aa3e8a1..5c60962 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -4,7 +4,7 @@
 
 <template>
     <div>
-        <WebDismissableGlobalBanner/>
+        <WebDismissibleGlobalBanner/>
         <WebHeader/>
         <slot/>
         <WebFooter/>