Use setting panel template (#1674)

* PanelTemplate

* Use panel template

src/components/dialog/content/SettingDialogContent.vue

@@ -17,50 +17,46 @@
       />
     </ScrollPanel>
     <Divider layout="vertical" class="mx-1 2xl:mx-4" />
-    <ScrollPanel class="settings-content flex-grow">
-      <Tabs :value="tabValue" :lazy="true">
-        <FirstTimeUIMessage v-if="tabValue === 'Comfy'" />
-        <TabPanels class="settings-tab-panels">
-          <TabPanel key="search-results" value="Search Results">
-            <SettingsPanel :settingGroups="searchResults" />
-          </TabPanel>
-          <TabPanel
-            v-for="category in settingCategories"
-            :key="category.key"
-            :value="category.label"
-          >
-            <SettingsPanel :settingGroups="sortedGroups(category)" />
-          </TabPanel>
-          <TabPanel key="about" value="About">
-            <AboutPanel />
-          </TabPanel>
-          <TabPanel key="keybinding" value="Keybinding">
-            <Suspense>
-              <KeybindingPanel />
-              <template #fallback>
-                <div>Loading keybinding panel...</div>
-              </template>
-            </Suspense>
-          </TabPanel>
-          <TabPanel key="extension" value="Extension">
-            <Suspense>
-              <ExtensionPanel />
-              <template #fallback>
-                <div>Loading extension panel...</div>
-              </template>
-            </Suspense>
-          </TabPanel>
-          <TabPanel key="server-config" value="Server-Config">
-            <Suspense>
-              <ServerConfigPanel />
-              <template #fallback>
-                <div>Loading server config panel...</div>
-              </template>
-            </Suspense>
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-    </ScrollPanel>
+    <Tabs :value="tabValue" :lazy="true" class="settings-content h-full w-full">
+      <TabPanels class="settings-tab-panels h-full w-full pr-0">
+        <PanelTemplate value="Search Results">
+          <SettingsPanel :settingGroups="searchResults" />
+        </PanelTemplate>
+
+        <PanelTemplate
+          v-for="category in settingCategories"
+          :key="category.key"
+          :value="category.label"
+        >
+          <template #header>
+            <FirstTimeUIMessage v-if="tabValue === 'Comfy'" />
+          </template>
+          <SettingsPanel :settingGroups="sortedGroups(category)" />
+        </PanelTemplate>
+
+        <AboutPanel />
+        <Suspense>
+          <KeybindingPanel />
+          <template #fallback>
+            <div>Loading keybinding panel...</div>
+          </template>
+        </Suspense>
+
+        <Suspense>
+          <ExtensionPanel />
+          <template #fallback>
+            <div>Loading extension panel...</div>
+          </template>
+        </Suspense>
+
+        <Suspense>
+          <ServerConfigPanel />
+          <template #fallback>
+            <div>Loading server config panel...</div>
+          </template>
+        </Suspense>
+      </TabPanels>
+    </Tabs>
   </div>
 </template>
 
@@ -69,16 +65,16 @@ import { ref, computed, onMounted, watch, defineAsyncComponent } from 'vue'
 import Listbox from 'primevue/listbox'
 import Tabs from 'primevue/tabs'
 import TabPanels from 'primevue/tabpanels'
-import TabPanel from 'primevue/tabpanel'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
 import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
 import { ISettingGroup, SettingParams } from '@/types/settingTypes'
-import SettingsPanel from './setting/SettingsPanel.vue'
 import SearchBox from '@/components/common/SearchBox.vue'
-import { flattenTree } from '@/utils/treeUtil'
+import SettingsPanel from './setting/SettingsPanel.vue'
+import PanelTemplate from './setting/PanelTemplate.vue'
 import AboutPanel from './setting/AboutPanel.vue'
 import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
+import { flattenTree } from '@/utils/treeUtil'
 import { isElectron } from '@/utils/envUtil'
 
 const KeybindingPanel = defineAsyncComponent(

src/components/dialog/content/setting/AboutPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="about-container">
+  <PanelTemplate value="About" class="about-container">
     <h2 class="text-2xl font-bold mb-2">{{ $t('about') }}</h2>
     <div class="space-y-2">
       <a
@@ -26,10 +26,11 @@
       v-if="systemStatsStore.systemStats"
       :stats="systemStatsStore.systemStats"
     />
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
+import PanelTemplate from './PanelTemplate.vue'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import Tag from 'primevue/tag'

src/components/dialog/content/setting/ExtensionPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="extension-panel">
+  <PanelTemplate value="Extension" class="extension-panel">
     <DataTable :value="extensionStore.extensions" stripedRows size="small">
       <Column field="name" :header="$t('extensionName')" sortable></Column>
       <Column
@@ -36,7 +36,7 @@
         severity="danger"
       />
     </div>
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
@@ -48,6 +48,7 @@ import Column from 'primevue/column'
 import ToggleSwitch from 'primevue/toggleswitch'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
+import PanelTemplate from './PanelTemplate.vue'
 
 const extensionStore = useExtensionStore()
 const settingStore = useSettingStore()

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="keybinding-panel">
+  <PanelTemplate value="Keybinding" class="keybinding-panel">
+    <template #header>
+      <SearchBox
+        v-model="filters['global'].value"
+        :placeholder="$t('searchKeybindings') + '...'"
+      />
+    </template>
+
     <DataTable
       :value="commandsData"
       v-model:selection="selectedCommandData"
@@ -11,12 +18,6 @@
         header: 'px-0'
       }"
     >
-      <template #header>
-        <SearchBox
-          v-model="filters['global'].value"
-          :placeholder="$t('searchKeybindings') + '...'"
-        />
-      </template>
       <Column field="actions" header="">
         <template #body="slotProps">
           <div class="actions invisible flex flex-row">
@@ -109,7 +110,7 @@
       text
       @click="resetKeybindings"
     />
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
@@ -127,6 +128,7 @@ import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
+import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
 import SearchBox from '@/components/common/SearchBox.vue'
 import { useToast } from 'primevue/usetoast'

src/components/dialog/content/setting/PanelTemplate.vue

@@ -0,0 +1,21 @@
+<template>
+  <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
+    <div class="flex flex-col h-full w-full gap-2">
+      <slot name="header" />
+      <ScrollPanel class="flex-grow h-0 pr-2">
+        <slot />
+      </ScrollPanel>
+      <slot name="footer" />
+    </div>
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import TabPanel from 'primevue/tabpanel'
+import ScrollPanel from 'primevue/scrollpanel'
+
+const props = defineProps<{
+  value: string
+  class?: string
+}>()
+</script>

src/components/dialog/content/setting/ServerConfigPanel.vue

@@ -1,42 +1,50 @@
 <template>
-  <div class="flex flex-col gap-2">
-    <Message v-if="modifiedConfigs.length > 0" severity="info" pt:text="w-full">
-      <p>
-        {{ $t('serverConfig.modifiedConfigs') }}
-      </p>
-      <ul>
-        <li v-for="config in modifiedConfigs" :key="config.id">
-          {{ config.name }}: {{ config.initialValue }} → {{ config.value }}
-        </li>
-      </ul>
-      <div class="flex justify-end gap-2">
-        <Button
-          :label="$t('serverConfig.revertChanges')"
-          @click="revertChanges"
-          outlined
-        />
-        <Button
-          :label="$t('serverConfig.restart')"
-          @click="restartApp"
-          outlined
-          severity="danger"
-        />
+  <PanelTemplate value="Server-Config" class="server-config-panel">
+    <template #header>
+      <div class="flex flex-col gap-2">
+        <Message
+          v-if="modifiedConfigs.length > 0"
+          severity="info"
+          pt:text="w-full"
+        >
+          <p>
+            {{ $t('serverConfig.modifiedConfigs') }}
+          </p>
+          <ul>
+            <li v-for="config in modifiedConfigs" :key="config.id">
+              {{ config.name }}: {{ config.initialValue }} → {{ config.value }}
+            </li>
+          </ul>
+          <div class="flex justify-end gap-2">
+            <Button
+              :label="$t('serverConfig.revertChanges')"
+              @click="revertChanges"
+              outlined
+            />
+            <Button
+              :label="$t('serverConfig.restart')"
+              @click="restartApp"
+              outlined
+              severity="danger"
+            />
+          </div>
+        </Message>
+        <Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
+          <template #icon>
+            <i-lucide:terminal class="text-xl font-bold" />
+          </template>
+          <div class="flex items-center justify-between">
+            <p>{{ commandLineArgs }}</p>
+            <Button
+              icon="pi pi-clipboard"
+              @click="copyCommandLineArgs"
+              severity="secondary"
+              text
+            />
+          </div>
+        </Message>
       </div>
-    </Message>
-    <Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
-      <template #icon>
-        <i-lucide:terminal class="text-xl font-bold" />
-      </template>
-      <div class="flex items-center justify-between">
-        <p>{{ commandLineArgs }}</p>
-        <Button
-          icon="pi pi-clipboard"
-          @click="copyCommandLineArgs"
-          severity="secondary"
-          text
-        />
-      </div>
-    </Message>
+    </template>
     <div
       v-for="([label, items], i) in Object.entries(serverConfigsByCategory)"
       :key="label"
@@ -58,7 +66,7 @@
         />
       </div>
     </div>
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
@@ -66,6 +74,7 @@ import Button from 'primevue/button'
 import Message from 'primevue/message'
 import Divider from 'primevue/divider'
 import FormItem from '@/components/common/FormItem.vue'
+import PanelTemplate from './PanelTemplate.vue'
 import { formatCamelCase } from '@/utils/formatUtil'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { storeToRefs } from 'pinia'