From 58c79da8ec98955ac337f4126ff98bfc47610a74 Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Fri, 27 Mar 2026 22:35:48 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20Add=20back=20buttons=20and?=
 =?UTF-8?q?=20map=20previews=20to=20local=20histories=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add back-to-store button on index, back-to-index on Taiwan/HK pages
- Render map components as decorative card backgrounds on index page
- Override map styles for static display (white fills, no GPU layers)
---
 pages/local-histories/hongkong.vue |  9 +++++++
 pages/local-histories/index.vue    | 41 ++++++++++++++++++++++++++++++
 pages/local-histories/taiwan.vue   |  9 +++++++
 3 files changed, 59 insertions(+)

diff --git a/pages/local-histories/hongkong.vue b/pages/local-histories/hongkong.vue
index 2f972679..c056ed19 100644
--- a/pages/local-histories/hongkong.vue
+++ b/pages/local-histories/hongkong.vue
@@ -1,6 +1,15 @@
 <template>
   <div class="flex w-full flex-col justify-center">
     <section class="hk-local-histories-hero w-full min-h-screen flex justify-center relative text-white px-12 py-24 laptop:py-36">
+      <UButton
+        class="absolute z-10 top-4 left-4"
+        icon="i-material-symbols-arrow-back-rounded"
+        :to="localeRoute({ name: 'local-histories' })"
+        variant="ghost"
+        color="neutral"
+        size="md"
+        :ui="{ base: 'text-white' }"
+      />
       <div class="z-10 flex flex-col text-center max-w-6xl mx-auto px-2 laptop:px-12">
         <div class="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 w-full max-w-2xl text-white">
           <div class="flex justify-center mb-6">
diff --git a/pages/local-histories/index.vue b/pages/local-histories/index.vue
index 60df4b7f..c4b9c9fd 100644
--- a/pages/local-histories/index.vue
+++ b/pages/local-histories/index.vue
@@ -1,6 +1,15 @@
 <template>
   <div class="flex min-h-screen w-full flex-col">
     <section class="local-histories-index-hero relative flex w-full items-end justify-center px-6 pb-16 pt-32 laptop:pb-24 laptop:pt-48">
+      <UButton
+        class="absolute z-10 top-4 left-4"
+        icon="i-material-symbols-arrow-back-rounded"
+        :to="localeRoute({ name: 'store' })"
+        variant="ghost"
+        color="neutral"
+        size="md"
+        :ui="{ base: 'text-white' }"
+      />
       <div class="z-10 mx-auto max-w-3xl text-center text-white">
         <h1
           class="text-4xl font-bold laptop:text-6xl"
@@ -25,6 +34,16 @@
             class="absolute inset-0 transition-transform duration-500 group-hover:scale-105"
             :class="region.bgClass"
           />
+          <div class="map-preview pointer-events-none absolute inset-0 flex items-center justify-center transition-transform duration-500 group-hover:scale-105">
+            <LocalHistoriesMap
+              v-if="region.routeName === 'local-histories-taiwan'"
+              class="h-full w-full"
+            />
+            <HKLocalHistoriesMap
+              v-else-if="region.routeName === 'local-histories-hongkong'"
+              class="h-full w-full"
+            />
+          </div>
           <div
             class="relative flex flex-col justify-end p-8 laptop:p-10"
             :class="region.minH"
@@ -105,4 +124,26 @@ const regions = [
 .bg-hk-card {
   background: linear-gradient(160deg, #8a4a2a 0%, #b85c38 40%, #d4a574 100%);
 }
+
+.map-preview {
+  opacity: 0.3;
+}
+
+.map-preview :deep(path) {
+  fill: white !important;
+  stroke: rgba(255, 255, 255, 0.5) !important;
+  cursor: default !important;
+  will-change: auto !important;
+}
+
+.map-preview :deep(circle) {
+  fill: white !important;
+  stroke: white !important;
+}
+
+.map-preview :deep(#features),
+.map-preview :deep(#pins) {
+  will-change: auto !important;
+  transition: none !important;
+}
 </style>
diff --git a/pages/local-histories/taiwan.vue b/pages/local-histories/taiwan.vue
index ec9ca394..c8014024 100644
--- a/pages/local-histories/taiwan.vue
+++ b/pages/local-histories/taiwan.vue
@@ -1,6 +1,15 @@
 <template>
   <div class="flex w-full flex-col justify-center">
     <section class="local-histories-hero w-full min-h-screen flex justify-center relative text-white px-12 py-24 laptop:py-36">
+      <UButton
+        class="absolute z-10 top-4 left-4"
+        icon="i-material-symbols-arrow-back-rounded"
+        :to="localeRoute({ name: 'local-histories' })"
+        variant="ghost"
+        color="neutral"
+        size="md"
+        :ui="{ base: 'text-white' }"
+      />
       <div class="z-10 flex flex-col text-center max-w-6xl mx-auto px-2 laptop:px-12">
         <div class="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 w-full max-w-2xl text-white">
           <div class="flex justify-center mb-6">

From fdc316cbcaae0a7c105d637e84bc09c6e42e8ae8 Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Fri, 27 Mar 2026 22:41:34 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Replace=20manual=20obs?=
 =?UTF-8?q?ervers=20and=20rAF=20with=20VueUse=20composables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use useIntersectionObserver + useTransition for stats animation
- Add refDebounced for search input filtering
- Remove redundant expandedRegion state and featuredItems alias
- Fix card toggle behavior in Taiwan page to match Hong Kong
---
 pages/local-histories/hongkong.vue | 59 ++++++++------------------
 pages/local-histories/taiwan.vue   | 66 ++++++++++--------------------
 2 files changed, 38 insertions(+), 87 deletions(-)

diff --git a/pages/local-histories/hongkong.vue b/pages/local-histories/hongkong.vue
index c056ed19..9b784cee 100644
--- a/pages/local-histories/hongkong.vue
+++ b/pages/local-histories/hongkong.vue
@@ -324,13 +324,14 @@ const featuredByRegion = computed(() => {
 })
 
 const searchTerm = ref('')
+const debouncedSearchTerm = refDebounced(searchTerm, 300)
 const activeKeyword = ref('全部')
 
 const featuredTags = ['全部', '社區', '文化', '民生', '環境', '歷史']
 
 const filteredFeatured = computed(() => {
   const keyword = activeKeyword.value
-  const term = searchTerm.value.trim().toLowerCase()
+  const term = debouncedSearchTerm.value.trim().toLowerCase()
 
   return featuredHKLocalHistories.filter((item) => {
     const matchesKeyword = keyword === '全部' || item.tags.includes(keyword)
@@ -370,48 +371,22 @@ const heroStats = computed(() => [
 ])
 
 const heroStatsRef = ref<HTMLElement | null>(null)
-const animatedStats = ref<number[]>(heroStatTargets.map(() => 0))
-const hasAnimatedStats = ref(false)
-let rafHandle = 0
-let statsObserver: IntersectionObserver | null = null
-
-const animateStats = () => {
-  const duration = 700
-  const start = performance.now()
-
-  const step = (now: number) => {
-    const progress = Math.min((now - start) / duration, 1)
-    animatedStats.value = heroStatTargets.map(target => Math.round(target * progress))
-
-    if (progress < 1) {
-      rafHandle = requestAnimationFrame(step)
+const statsProgress = ref(0)
+const transitionedProgress = useTransition(statsProgress, { duration: 700 })
+const animatedStats = computed(() =>
+  heroStatTargets.map(target => Math.round(target * transitionedProgress.value)),
+)
+
+const { stop: stopObserver } = useIntersectionObserver(
+  heroStatsRef,
+  ([entry]) => {
+    if (entry?.isIntersecting) {
+      statsProgress.value = 1
+      stopObserver()
     }
-  }
-
-  rafHandle = requestAnimationFrame(step)
-}
-
-onMounted(() => {
-  if (!heroStatsRef.value) return
-
-  statsObserver = new IntersectionObserver(
-    ([entry]) => {
-      if (entry?.isIntersecting && !hasAnimatedStats.value) {
-        hasAnimatedStats.value = true
-        animateStats()
-        statsObserver?.disconnect()
-      }
-    },
-    { threshold: 0.4 },
-  )
-
-  statsObserver.observe(heroStatsRef.value)
-})
-
-onUnmounted(() => {
-  cancelAnimationFrame(rafHandle)
-  statsObserver?.disconnect()
-})
+  },
+  { threshold: 0.4 },
+)
 
 const regions = [
   {
diff --git a/pages/local-histories/taiwan.vue b/pages/local-histories/taiwan.vue
index c8014024..e530be0d 100644
--- a/pages/local-histories/taiwan.vue
+++ b/pages/local-histories/taiwan.vue
@@ -69,7 +69,7 @@
       <header class="mb-8 laptop:mb-12">
         <h2
           class="text-2xl text-center font-semibold text-neutral-900"
-          v-text="$t('local_histories_overview_title') "
+          v-text="$t('local_histories_overview_title')"
         />
         <p
           class="mt-2 text-sm text-center text-neutral-600"
@@ -114,7 +114,7 @@
               v-text="region.areas.join('、')"
             />
             <div
-              v-if="expandedRegion === region.key"
+              v-if="selectedRegion === region.key"
               class="mt-4 border-t border-[#d8dfd2] pt-3"
             >
               <ul class="mt-2 grid gap-2 text-sm text-[#5c6f61]">
@@ -281,7 +281,6 @@ const localeRoute = useLocaleRoute()
 
 const hoveredRegion = ref<string | null>(null)
 const selectedRegion = ref<string | null>('north')
-const expandedRegion = ref<string | null>('north')
 
 const activeRegion = computed(() => selectedRegion.value ?? hoveredRegion.value)
 
@@ -292,13 +291,10 @@ const handleMapHover = (region: string | null) => {
 const handleMapClick = (region: string) => {
   if (selectedRegion.value === region) return
   selectedRegion.value = region
-  expandedRegion.value = region
 }
 
 const handleCardClick = (regionKey: string) => {
-  if (selectedRegion.value === regionKey) return
-  selectedRegion.value = regionKey
-  expandedRegion.value = regionKey
+  selectedRegion.value = selectedRegion.value === regionKey ? null : regionKey
 }
 
 const featuredByRegion = computed(() => {
@@ -317,17 +313,16 @@ const featuredByRegion = computed(() => {
 })
 
 const searchTerm = ref('')
+const debouncedSearchTerm = refDebounced(searchTerm, 300)
 const activeKeyword = ref('全部')
 
 const featuredTags = ['全部', '文化', '歷史', '飲食', '職人', '社區營造']
 
-const featuredItems = featuredLocalHistories
-
 const filteredFeatured = computed(() => {
   const keyword = activeKeyword.value
-  const term = searchTerm.value.trim().toLowerCase()
+  const term = debouncedSearchTerm.value.trim().toLowerCase()
 
-  const filtered = featuredItems.filter((item) => {
+  const filtered = featuredLocalHistories.filter((item) => {
     const matchesKeyword = keyword === '全部' || item.tags.includes(keyword)
     if (!term) return matchesKeyword
 
@@ -367,41 +362,22 @@ const heroStats = computed(() => [
 ])
 
 const heroStatsRef = ref<HTMLElement | null>(null)
-const animatedStats = ref<number[]>(heroStatTargets.map(() => 0))
-const hasAnimatedStats = ref(false)
-
-const animateStats = () => {
-  const duration = 700
-  const start = performance.now()
-
-  const step = (now: number) => {
-    const progress = Math.min((now - start) / duration, 1)
-    animatedStats.value = heroStatTargets.map(target => Math.round(target * progress))
-
-    if (progress < 1) {
-      requestAnimationFrame(step)
+const statsProgress = ref(0)
+const transitionedProgress = useTransition(statsProgress, { duration: 700 })
+const animatedStats = computed(() =>
+  heroStatTargets.map(target => Math.round(target * transitionedProgress.value)),
+)
+
+const { stop: stopObserver } = useIntersectionObserver(
+  heroStatsRef,
+  ([entry]) => {
+    if (entry?.isIntersecting) {
+      statsProgress.value = 1
+      stopObserver()
     }
-  }
-
-  requestAnimationFrame(step)
-}
-
-onMounted(() => {
-  if (!heroStatsRef.value) return
-
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      if (entry?.isIntersecting && !hasAnimatedStats.value) {
-        hasAnimatedStats.value = true
-        animateStats()
-        observer.disconnect()
-      }
-    },
-    { threshold: 0.4 },
-  )
-
-  observer.observe(heroStatsRef.value)
-})
+  },
+  { threshold: 0.4 },
+)
 
 const regions = [
   {

From 3ab5d1eb6b6a2bd80c4d85eaf98359caff26995a Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Mon, 30 Mar 2026 14:20:50 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E2=99=BF=20Fix=20back=20button=20hover=20s?=
 =?UTF-8?q?tyle=20and=20accessibility=20on=20local=20histories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Override ghost button hover bg with translucent white for dark heroes
- Use i18n $t('common_back') for aria-label instead of hardcoded English
- Add keyboard handlers (Enter/Space) to region cards in Taiwan page
- Lazy-load decorative map SVGs in index to reduce initial bundle size
---
 pages/local-histories/hongkong.vue |  3 ++-
 pages/local-histories/index.vue    | 25 ++++++++++++++-----------
 pages/local-histories/taiwan.vue   |  5 ++++-
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/pages/local-histories/hongkong.vue b/pages/local-histories/hongkong.vue
index 9b784cee..6abd2bb1 100644
--- a/pages/local-histories/hongkong.vue
+++ b/pages/local-histories/hongkong.vue
@@ -8,7 +8,8 @@
         variant="ghost"
         color="neutral"
         size="md"
-        :ui="{ base: 'text-white' }"
+        :aria-label="$t('common_back')"
+        :ui="{ base: 'text-white hover:bg-white/10' }"
       />
       <div class="z-10 flex flex-col text-center max-w-6xl mx-auto px-2 laptop:px-12">
         <div class="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 w-full max-w-2xl text-white">
diff --git a/pages/local-histories/index.vue b/pages/local-histories/index.vue
index c4b9c9fd..63c9c9bc 100644
--- a/pages/local-histories/index.vue
+++ b/pages/local-histories/index.vue
@@ -8,7 +8,8 @@
         variant="ghost"
         color="neutral"
         size="md"
-        :ui="{ base: 'text-white' }"
+        :aria-label="$t('common_back')"
+        :ui="{ base: 'text-white hover:bg-white/10' }"
       />
       <div class="z-10 mx-auto max-w-3xl text-center text-white">
         <h1
@@ -34,16 +35,18 @@
             class="absolute inset-0 transition-transform duration-500 group-hover:scale-105"
             :class="region.bgClass"
           />
-          <div class="map-preview pointer-events-none absolute inset-0 flex items-center justify-center transition-transform duration-500 group-hover:scale-105">
-            <LocalHistoriesMap
-              v-if="region.routeName === 'local-histories-taiwan'"
-              class="h-full w-full"
-            />
-            <HKLocalHistoriesMap
-              v-else-if="region.routeName === 'local-histories-hongkong'"
-              class="h-full w-full"
-            />
-          </div>
+          <ClientOnly>
+            <div class="map-preview pointer-events-none absolute inset-0 flex items-center justify-center transition-transform duration-500 group-hover:scale-105">
+              <LazyLocalHistoriesMap
+                v-if="region.routeName === 'local-histories-taiwan'"
+                class="h-full w-full"
+              />
+              <LazyHKLocalHistoriesMap
+                v-else-if="region.routeName === 'local-histories-hongkong'"
+                class="h-full w-full"
+              />
+            </div>
+          </ClientOnly>
           <div
             class="relative flex flex-col justify-end p-8 laptop:p-10"
             :class="region.minH"
diff --git a/pages/local-histories/taiwan.vue b/pages/local-histories/taiwan.vue
index e530be0d..e51204b8 100644
--- a/pages/local-histories/taiwan.vue
+++ b/pages/local-histories/taiwan.vue
@@ -8,7 +8,8 @@
         variant="ghost"
         color="neutral"
         size="md"
-        :ui="{ base: 'text-white' }"
+        :aria-label="$t('common_back')"
+        :ui="{ base: 'text-white hover:bg-white/10' }"
       />
       <div class="z-10 flex flex-col text-center max-w-6xl mx-auto px-2 laptop:px-12">
         <div class="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 w-full max-w-2xl text-white">
@@ -95,6 +96,8 @@
             role="button"
             tabindex="0"
             @click="handleCardClick(region.key)"
+            @keydown.enter="handleCardClick(region.key)"
+            @keydown.space.prevent="handleCardClick(region.key)"
           >
             <div
               class="pointer-events-none absolute inset-0 rounded-2xl bg-cover bg-center opacity-30"