FEAT: OCTOBER UPDATE

src/pages/CategoryPage.vue

@@ -1,70 +1,52 @@
 <template>
-  <div ref="scrollRef">
-    <div class="page-transition-fade">
-      <h2 class="sub-category">{{ decodedLabel }}</h2>
+  <IndexPage v-if="isIndexPage" />
 
-      <Suspense>
-        <template #default>
-          <component :is="SubcategoryComponent" v-if="SubcategoryComponent" />
-        </template>
+  <div class="page-transition-fade" v-else>
+    <h2 class="sub-category">{{ decodedLabel }}</h2>
 
-        <template #fallback>
-          <div class="loading-placeholder"></div>
-        </template>
-      </Suspense>
+    <Suspense v-if="SubcategoryComponent">
+      <template #default>
+        <component :is="SubcategoryComponent" v-if="SubcategoryComponent" />
+      </template>
+
+      <template #fallback>
+        <div class="loading-placeholder"></div>
+      </template>
+    </Suspense>
+    <div v-else class="p-6">
+      <h3 class="font-semibold text-white text-lg">Not Found</h3>
+      <p class="text-[#a6a6a6] text-sm">This section is unavailable.</p>
     </div>
-
-    <BackToTopButton />
   </div>
+
+  <BackToTopButton />
 </template>
 
 <script setup lang="ts">
-import { computed, watch, onMounted, nextTick, defineAsyncComponent, useTemplateRef } from 'vue';
+import BackToTopButton from '@/components/common/BackToTopButton.vue';
+import { computed, defineAsyncComponent, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { componentMap } from '../constants/Components';
 import { decodeLabel } from '../utils/utils';
-import BackToTopButton from '@/components/common/BackToTopButton.vue';
+import IndexPage from './IndexPage.vue';
 
 const route = useRoute();
-const scrollRef = useTemplateRef<HTMLDivElement>('scrollRef');
 
 const subcategory = computed(() => route.params.subcategory as string);
 const decodedLabel = computed(() => decodeLabel(subcategory.value));
+const isIndexPage = computed(() => subcategory.value === 'index');
 
 const SubcategoryComponent = computed(() => {
-  if (!subcategory.value) {
-    return null;
-  }
-
-  const componentLoader = componentMap[subcategory.value as keyof typeof componentMap];
-
-  if (!componentLoader) {
-    return null;
-  }
-
-  return defineAsyncComponent(componentLoader);
+  const key = subcategory.value as keyof typeof componentMap;
+  const loader = componentMap[key];
+  return loader ? defineAsyncComponent(loader) : null;
 });
 
 watch(
   decodedLabel,
   label => {
-    if (label) {
-      document.title = `Vue Bits - ${label}`;
-    }
+    if (label) document.title = `Vue Bits - ${label}`;
   },
   { immediate: true }
 );
-
-watch(subcategory, async () => {
-  if (scrollRef.value) {
-    await nextTick();
-    scrollRef.value.scrollTo(0, 0);
-  }
-});
-
-onMounted(() => {
-  if (scrollRef.value) {
-    scrollRef.value.scrollTo(0, 0);
-  }
-});
 </script>