feat: add offline widget & remove openssl in favour of droplet-rs

components/Header.vue

@@ -28,9 +28,7 @@
       />
       <div class="inline-flex items-center">
         <ol class="inline-flex gap-3">
-          <HeaderQueueWidget
-            :object="currentQueueObject"
-          />
+          <HeaderQueueWidget :object="currentQueueObject" />
           <li v-for="(item, itemIdx) in quickActions">
             <HeaderWidget
               @click="item.action"
@@ -39,6 +37,7 @@
               <component class="h-5" :is="item.icon" />
             </HeaderWidget>
           </li>
+          <OfflineHeaderWidget v-if="state.status === AppStatus.Offline" />
           <HeaderUserWidget />
         </ol>
       </div>
@@ -49,11 +48,12 @@
 
 <script setup lang="ts">
 import { BellIcon, UserGroupIcon } from "@heroicons/vue/16/solid";
-import type { NavigationItem, QuickActionNav } from "../types";
+import { AppStatus, type NavigationItem, type QuickActionNav } from "../types";
 import HeaderWidget from "./HeaderWidget.vue";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 
 const window = getCurrentWindow();
+const state = useAppState();
 
 const navigation: Array<NavigationItem> = [
   {
@@ -78,7 +78,7 @@ const navigation: Array<NavigationItem> = [
   },
 ];
 
-const {currentNavigation} = useCurrentNavigationIndex(navigation);
+const { currentNavigation } = useCurrentNavigationIndex(navigation);
 
 const quickActions: Array<QuickActionNav> = [
   {

components/OfflineHeaderWidget.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ArrowDownTrayIcon, CloudIcon } from "@heroicons/vue/20/solid";
+</script>
+
+<template>
+  <div
+    class="transition inline-flex items-center rounded-sm px-4 py-1.5 bg-zinc-900 text-sm text-zinc-400 gap-x-2"
+  >
+    <div class="relative">
+      <CloudIcon class="h-5 z-50 text-zinc-500" />
+      <div
+        class="absolute rounded-full left-1/2 top-1/2 -translate-y-[45%] -translate-x-1/2 w-[2px] h-6 rotate-[45deg] bg-zinc-400 z-50"
+      />
+    </div>
+    Offline
+  </div>
+</template>