refactor: rework async ToolSettings

app/src/views/tool/ToolSettings.vue

@@ -1,32 +1,20 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-
 import api, { objectToParams } from '@/api'
 import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
-import type {
-  ConfigPanelsProps,
-  OnPanelApply,
-} from '@/composables/configPanels'
 import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import type { CoreConfigPanels } from '@/types/core/options'
 
 const props = defineProps<{ tabId?: string }>()
 
-const { loading, refetch } = useInitialQueries([{ uri: 'settings?full' }], {
+const coreConfig = await api.get<CoreConfigPanels>({
-  onQueriesResponse,
+  uri: 'settings?full',
+  initial: true,
 })
-const config = shallowRef<ConfigPanelsProps | undefined>()
 
-function onQueriesResponse(config_: CoreConfigPanels) {
+const { form, panel, v, routes, onPanelApply } = useConfigPanels(
-  config.value = useConfigPanels(
+  formatConfigPanels(coreConfig),
-    formatConfigPanels(config_),
   () => props.tabId,
-    onPanelApply,
+  ({ panelId, data }, onError) => {
-  )
-}
-
-const onPanelApply: OnPanelApply = ({ panelId, data }, onError) => {
     // FIXME no route for potential action
     api
       .put({
@@ -34,20 +22,18 @@ const onPanelApply: OnPanelApply = ({ panelId, data }, onError) => {
         data: { args: objectToParams(data) },
         humanKey: { key: 'settings.update', panel: panelId },
       })
-    .then(() => refetch())
+      .then(() => api.refetch())
       .catch(onError)
-}
+  },
+)
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardFormSkeleton">
   <ConfigPanelsComponent
-      v-if="config"
+    v-model="form"
-      v-model="config.form"
+    :panel="panel"
-      :panel="config.panel.value"
+    :validations="v"
-      :validations="config.v.value"
+    :routes="routes"
-      :routes="config.routes"
+    @apply="onPanelApply"
-      @apply="config.onPanelApply"
   />
-  </ViewBase>
 </template>