refactor(layouts): remove duplicated code.

src/App.vue

@@ -68,67 +68,26 @@
           <!-- Optional messages -->
           <Message :item="config.message" />
 
-          <!-- Horizontal layout -->
-          <div v-if="!vlayout || filter" class="columns is-multiline">
-            <template v-for="(group, groupIndex) in services">
-              <h2
-                v-if="group.name"
-                :key="`header-${groupIndex}`"
-                class="column is-full group-title"
-                :class="group.class"
-              >
-                <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
-                <div v-else-if="group.logo" class="group-logo media-left">
-                  <figure class="image is-48x48">
-                    <img :src="group.logo" :alt="`${group.name} logo`" />
-                  </figure>
-                </div>
-                {{ group.name }}
-              </h2>
-              <Service
-                v-for="(item, index) in group.items"
-                :key="`service-${groupIndex}-${index}`"
-                :item="item"
-                :proxy="config.proxy"
+          <!-- Unified layout -->
+          <div
             :class="[
-                  'column',
-                  `is-${12 / config.columns}`,
-                  `${item.class || group.class || ''}`,
+              'columns',
+              'is-multiline',
+              { 'layout-vertical': vlayout && !filter },
             ]"
-              />
-            </template>
-          </div>
-
-          <!-- Vertical layout -->
-          <div
-            v-if="!filter && vlayout"
-            class="columns is-multiline layout-vertical"
           >
-            <div
+            <ServiceGroup
               v-for="(group, groupIndex) in services"
               :key="groupIndex"
-              :class="['column', `is-${12 / config.columns}`]"
-            >
-              <h2 v-if="group.name" class="group-title" :class="group.class">
-                <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
-                <div v-else-if="group.logo" class="group-logo media-left">
-                  <figure class="image is-48x48">
-                    <img :src="group.logo" :alt="`${group.name} logo`" />
-                  </figure>
-                </div>
-                {{ group.name }}
-              </h2>
-              <Service
-                v-for="(item, index) in group.items"
-                :key="index"
-                :item="item"
+              :group="group"
+              :is-vertical="vlayout && !filter"
               :proxy="config.proxy"
-                :class="item.class || group.class"
+              :columns="config.columns"
+              :group-index="groupIndex"
             />
           </div>
         </div>
       </div>
-      </div>
     </section>
 
     <footer class="footer">
@@ -150,7 +109,7 @@ import merge from "lodash.merge";
 import Navbar from "./components/Navbar.vue";
 import GetStarted from "./components/GetStarted.vue";
 import ConnectivityChecker from "./components/ConnectivityChecker.vue";
-import Service from "./components/Service.vue";
+import ServiceGroup from "./components/ServiceGroup.vue";
 import Message from "./components/Message.vue";
 import SearchInput from "./components/SearchInput.vue";
 import SettingToggle from "./components/SettingToggle.vue";
@@ -165,7 +124,7 @@ export default {
     Navbar,
     GetStarted,
     ConnectivityChecker,
-    Service,
+    ServiceGroup,
     Message,
     SearchInput,
     SettingToggle,
@@ -196,6 +155,9 @@ export default {
     window.onhashchange = this.buildDashboard;
     this.loaded = true;
   },
+  beforeUnmount() {
+    window.onhashchange = null;
+  },
   methods: {
     searchHotkey() {
       if (this.config.hotkey && this.config.hotkey.search) {

src/components/GroupHeader.vue

@@ -0,0 +1,23 @@
+<template>
+  <h2 :class="group.class">
+    <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
+    <div v-else-if="group.logo" class="group-logo media-left">
+      <figure class="image is-48x48">
+        <img :src="group.logo" :alt="`${group.name} logo`" />
+      </figure>
+    </div>
+    {{ group.name }}
+  </h2>
+</template>
+
+<script>
+export default {
+  name: "GroupHeader",
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>

src/components/ServiceGroup.vue

@@ -0,0 +1,69 @@
+<template>
+  <!-- Vertical layout: Group container wrapper -->
+  <div v-if="isVertical" :class="['column', `is-${12 / columns}`]">
+    <GroupHeader v-if="group.name" :group="group" class="group-title" />
+    <Service
+      v-for="(item, index) in group.items"
+      :key="index"
+      :item="item"
+      :proxy="proxy"
+      :class="item.class || group.class"
+    />
+  </div>
+
+  <!-- Horizontal layout: Direct rendering -->
+  <template v-else>
+    <GroupHeader
+      v-if="group.name"
+      :key="`header-${groupIndex}`"
+      :group="group"
+      class="column is-full group-title"
+    />
+    <Service
+      v-for="(item, index) in group.items"
+      :key="`service-${groupIndex}-${index}`"
+      :item="item"
+      :proxy="proxy"
+      :class="[
+        'column',
+        `is-${12 / columns}`,
+        `${item.class || group.class || ''}`,
+      ]"
+    />
+  </template>
+</template>
+
+<script>
+import Service from "./Service.vue";
+import GroupHeader from "./GroupHeader.vue";
+
+export default {
+  name: "ServiceGroup",
+  components: {
+    Service,
+    GroupHeader,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+    isVertical: {
+      type: Boolean,
+      default: false,
+    },
+    proxy: {
+      type: String,
+      default: null,
+    },
+    columns: {
+      type: String,
+      required: true,
+    },
+    groupIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+};
+</script>