refactor: replace DashboardToolbarIcon with Iconify icons in DashboardGroup and WidgetShell

Author: NoOne7135

custom/runtime/DashboardGroup.vue

@@ -18,31 +18,31 @@
           title="Edit JSON"
           @click="emit('edit-group', group)"
         >
-          <DashboardToolbarIcon name="edit" />
+          <IconToolsOutline class="h-5 w-5" />
         </DashboardToolbarButton>
 
         <DashboardToolbarButton
           title="Move up"
           :disabled="!canMoveUp"
           @click="emit('move-up')"
         >
-          <DashboardToolbarIcon name="move-up" />
+          <IconArrowUpOutline class="h-5 w-5" />
         </DashboardToolbarButton>
 
         <DashboardToolbarButton
           title="Move down"
           :disabled="!canMoveDown"
           @click="emit('move-down')"
         >
-          <DashboardToolbarIcon name="move-down" />
+          <IconArrowDownOutline class="h-5 w-5" />
         </DashboardToolbarButton>
 
         <DashboardToolbarButton
           title="Remove"
           variant="danger"
           @click="emit('remove-group')"
         >
-          <DashboardToolbarIcon name="remove" />
+          <IconTrashBinSolid class="h-5 w-5" />
         </DashboardToolbarButton>
       </div>
     </header>
@@ -103,8 +103,8 @@
 
 <script setup lang="ts">
 import { Button } from '@/afcl'
+import { IconArrowDownOutline, IconArrowUpOutline, IconToolsOutline, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite'
 import DashboardToolbarButton from './DashboardToolbarButton.vue'
-import DashboardToolbarIcon from './DashboardToolbarIcon.vue'
 import WidgetRenderer from './WidgetRenderer.vue'
 import WidgetShell from './WidgetShell.vue'
 import type { DashboardGroupConfig, DashboardWidgetConfig } from '../model/dashboard.types.js'

custom/runtime/DashboardRuntime.vue

@@ -66,7 +66,7 @@
             @click="closeGroupConfigEditor"
           >
             <svg
-              class="h-4 w-4"
+              class="h-5 w-5"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
@@ -129,7 +129,7 @@
             @click="closeWidgetConfigEditor"
           >
             <svg
-              class="h-4 w-4"
+              class="h-5 w-5"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"

custom/runtime/DashboardToolbarIcon.vue

@@ -14,31 +14,31 @@
         title="Edit JSON"
         @click="emit('edit')"
       >
-        <DashboardToolbarIcon name="edit" />
+        <IconToolsOutline class="h-5 w-5" />
       </DashboardToolbarButton>
 
       <DashboardToolbarButton
         title="Move up"
         :disabled="!canMoveUp"
         @click="emit('move-up')"
       >
-        <DashboardToolbarIcon name="move-up" />
+        <IconArrowUpOutline class="h-5 w-5" />
       </DashboardToolbarButton>
 
       <DashboardToolbarButton
         title="Move down"
         :disabled="!canMoveDown"
         @click="emit('move-down')"
       >
-        <DashboardToolbarIcon name="move-down" />
+        <IconArrowDownOutline class="h-5 w-5" />
       </DashboardToolbarButton>
 
       <DashboardToolbarButton
         title="Remove"
         variant="danger"
         @click="emit('remove')"
       >
-        <DashboardToolbarIcon name="remove" />
+        <IconTrashBinSolid class="h-5 w-5" />
       </DashboardToolbarButton>
     </div>
   </div>
@@ -49,9 +49,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { CSSProperties } from 'vue'
+import { IconArrowDownOutline, IconArrowUpOutline, IconToolsOutline, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite'
 import type { WidgetLayout } from '../model/dashboard.types.js'
 import DashboardToolbarButton from './DashboardToolbarButton.vue'
-import DashboardToolbarIcon from './DashboardToolbarIcon.vue'
 
 const DEFAULT_WIDGET_HEIGHT = 500