feat: updates to dev tools UI supporting tailwind/shadcn

Author: gureckis

src/dev/developer_mode/DataBarButton.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { computed } from 'vue'
+import { Button } from '@/uikit/components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/uikit/components/ui/tooltip'
+import { Database, RefreshCw } from 'lucide-vue-next'
 import useAPI from '@/core/composables/useAPI'
 const api = useAPI()
 
@@ -29,47 +32,54 @@ const database_tooltip = computed(() => {
 </script>
 
 <template>
-  <button class="button devbar-button has-tooltip-arrow has-tooltip-bottom" :data-tooltip="database_tooltip">
-    <FAIcon
-      icon="fa-solid fa-database"
-      class="disconnected"
-      :class="{ connected: api.store.browserEphemeral.dbConnected == true }"
-    />
-    &nbsp;&nbsp;|&nbsp;&nbsp;
-    <template v-if="!api.store.browserEphemeral.dbConnected">
-      <FAIcon icon="fa-solid fa-rotate" class="has-text-grey" />
-    </template>
-    <template v-else-if="api.store.browserEphemeral.dbChanges && api.store.browserEphemeral.dbConnected">
-      <FAIcon icon="fa-solid fa-rotate" class="outofsync" />
-    </template>
-    <template v-else>
-      <FAIcon icon="fa-solid fa-rotate" class="insync" />
-    </template>
-    <template v-if="!api.store.browserEphemeral.dbConnected">
-      &nbsp;&nbsp;|&nbsp;&nbsp;
-      <div class="mt-1">
-        <CircleProgress
-          :percentage="Math.round(api.store.browserPersisted.approxDataSize / 1048576) * 100"
-          :size="12"
-          :strokeWidth="40"
-          slicecolor="#aaa"
-          basecolor="#aaa"
-        />
-      </div>
-    </template>
-    <template v-else>
-      &nbsp;&nbsp;|&nbsp;&nbsp;
-      <div class="mt-1">
-        <CircleProgress
-          :percentage="Math.round(api.store.browserPersisted.approxDataSize / 1048576) * 100"
-          :size="12"
-          :strokeWidth="40"
-          slicecolor="hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-background-l) + var(--bulma-button-background-l-delta)))"
-          basecolor="var(--status-green)"
-        />
-      </div>
-    </template>
-  </button>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button size="menu" variant="outline">
+          <i-ix-database-filled
+            style="font-size: 2em"
+            class="disconnected"
+            :class="{ connected: api.store.browserEphemeral.dbConnected == true }"
+          />
+
+          <template v-if="!api.store.browserEphemeral.dbConnected">
+            <RefreshCw class="has-text-grey" />
+          </template>
+          <template v-else-if="api.store.browserEphemeral.dbChanges && api.store.browserEphemeral.dbConnected">
+            <RefreshCw class="outofsync" />
+          </template>
+          <template v-else>
+            <RefreshCw class="insync" />
+          </template>
+          <template v-if="!api.store.browserEphemeral.dbConnected">
+            <div class="mt-1">
+              <CircleProgress
+                :percentage="Math.round(api.store.browserPersisted.approxDataSize / 1048576) * 100"
+                :size="12"
+                :strokeWidth="40"
+                slicecolor="#aaa"
+                basecolor="#aaa"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div class="mt-1">
+              <CircleProgress
+                :percentage="Math.round(api.store.browserPersisted.approxDataSize / 1048576) * 100"
+                :size="12"
+                :strokeWidth="40"
+                slicecolor="hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-background-l) + var(--bulma-button-background-l-delta)))"
+                basecolor="var(--status-green)"
+              />
+            </div>
+          </template>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        {{ database_tooltip }}
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
 </template>
 
 <style scoped>