feat: Add server subscription state indicator to logo

Author: 3urobeat

src/components/globalTitleBar.vue

@@ -5,7 +5,7 @@
  * Created Date: 2025-12-28 15:07:43
  * Author: 3urobeat
  *
- * Last Modified: 2026-04-29 17:48:44
+ * Last Modified: 2026-04-29 18:10:10
  * Modified By: 3urobeat
  *
  * Copyright (c) 2025 - 2026 3urobeat <https://github.com/3urobeat>
@@ -22,12 +22,15 @@
     <div class="fixed flex items-center z-40 shrink-0 h-15 min-w-screen dark:text-text-dark border-y border-y-border-primary-light dark:border-y-border-primary-dark border-t-0">
 
         <!-- Left side -->
-        <div class="fixed h-8 left-12.5 lg:left-7.5 flex gap-4 select-none">
+        <div class="fixed h-8 left-12.5 lg:left-7.5 flex gap-5 select-none">
             <!-- Wardrobe Icon(s) for light/dark mode with cut for expanded search bar on mobile -->
             <NuxtLink class="z-20 cursor-pointer transition-opacity duration-500" to="/">
-                <div :class="globalSearchStr != null ? 'w-10 sm:w-fit' : ''">
-                    <img src="/logo-dark.png" class="h-7.5 object-left object-cover sm:object-contain hidden dark:block">
-                    <img src="/logo-light.png" class="h-7.5 object-left object-cover sm:object-contain block dark:hidden">
+                <div :class="globalSearchStr != null ? 'w-10 sm:w-fit' : ''" class="relative inline-block">
+                    <img src="/logo-dark.png" class="h-7.5 object-left object-cover sm:object-contain hidden dark:block" />
+                    <img src="/logo-light.png" class="h-7.5 object-left object-cover sm:object-contain block dark:hidden" />
+
+                    <!-- Server Connection Status dot, positioned to bottom right of logo -->
+                    <div class="absolute bottom-0 right-0 translate-x-1/2 translate-y-1/3 rounded-full size-3 bg-green-500/80 shadow-md" v-if="subscriptionState" :title="$t('serverSubscriptionConnected')"></div>
                 </div>
             </NuxtLink>
 
@@ -126,6 +129,7 @@
     const globalSearchInput                         = useTemplateRef("globalSearchInput");
     const globalSearchBarShown: Ref<boolean>        = useState(State.GLOBAL_SEARCH_BAR_SHOWN); // Poor woman's approach at page properties
     const globalSearchStr:      Ref<string|null>    = useState(State.GLOBAL_SEARCH_STRING);    // null on page load, set to "" on click to expand input
+    const subscriptionState:    Ref<boolean>        = useState(State.SERVER_SUBSCRIPTION_CONNECTED);
 
     const currentWeather: Ref<WeatherData|null> = ref(null);
     const weatherLoading: Ref<boolean>          = ref(false);

src/composables/state.ts

@@ -4,7 +4,7 @@
  * Created Date: 2026-04-29 17:32:34
  * Author: 3urobeat
  *
- * Last Modified: 2026-04-29 17:49:17
+ * Last Modified: 2026-04-29 17:49:51
  * Modified By: 3urobeat
  *
  * Copyright (c) 2026 3urobeat <https://github.com/3urobeat>
@@ -16,6 +16,7 @@
 
 
 export enum State {
+    SERVER_SUBSCRIPTION_CONNECTED = "serverSubscriptionConnected",
     CACHED_IMAGES                 = "cachedImages",
     GLOBAL_SEARCH_STRING          = "globalSearchStr",
     GLOBAL_SEARCH_BAR_SHOWN       = "globalSearchBarShown"
@@ -26,6 +27,7 @@ export enum State {
  * Initializes all states with default value
  */
 export function initState() {
+    useState(State.SERVER_SUBSCRIPTION_CONNECTED, () => false);
     useState(State.CACHED_IMAGES, () => []);
     useState(State.GLOBAL_SEARCH_STRING, () => null);
     useState(State.GLOBAL_SEARCH_BAR_SHOWN, () => false);

src/composables/subscription.ts

@@ -4,7 +4,7 @@
  * Created Date: 2026-04-08 17:59:41
  * Author: 3urobeat
  *
- * Last Modified: 2026-04-28 21:58:59
+ * Last Modified: 2026-04-29 17:45:11
  * Modified By: 3urobeat
  *
  * Copyright (c) 2026 3urobeat <https://github.com/3urobeat>
@@ -18,6 +18,7 @@
 import { SubscriptionEventAction, SubscriptionEventType, type SubscriptionEvent } from "../model/api";
 import { NotificationLevel, NotificationType, type NotificationData } from "../model/notification";
 import { emitSubscriptionEvent } from "./events";
+import { State } from "./state";
 
 let serverSubscriptionEventStream: EventSource | undefined;
 
@@ -29,6 +30,8 @@ let serverSubscriptionEventStream: EventSource | undefined;
 function handleServerSubscriptionConnected(event: unknown) { // eslint-disable-line @typescript-eslint/no-unused-vars
     console.debug("[DEBUG] Server Subscription: Connected!");
 
+    useState(State.SERVER_SUBSCRIPTION_CONNECTED).value = true;
+
     emitNotificationShowEvent({
         level: NotificationLevel.DEBUG,
         title: "Server Subscription",
@@ -93,6 +96,8 @@ function handleServerSubscriptionError(err: unknown) {
 export function establishServerSubscriptionConnection() {
     if (serverSubscriptionEventStream) throw("EventStream is not null, close it first");
 
+    useState(State.SERVER_SUBSCRIPTION_CONNECTED).value = false;
+
     if (getServerSettingsFromServer().value.document!.serverSubscriptionEnabled) {
         console.debug("[DEBUG] establishServerSubscriptionConnection: Attempting to connect...");
 
@@ -114,4 +119,5 @@ export function closeServerSubscriptionConnection() {
         serverSubscriptionEventStream.close();
         serverSubscriptionEventStream = undefined;
     }
+    useState(State.SERVER_SUBSCRIPTION_CONNECTED).value = false;
 }

src/i18n/locales/de.json

@@ -49,6 +49,7 @@
 
 
     "_dummy3": "-------------- Shared Components Text --------------",
+    "serverSubscriptionConnected": "Serververbindung aktiv",
     "weatherLoadFail": "Wetter konnte nicht geladen werden!",
     "weatherForLocation": "Wetter für {location}:",
     "weatherTempFeelsLike": "gefühlt",

src/i18n/locales/en.json

@@ -49,6 +49,7 @@
 
 
     "_dummy3": "-------------- Shared Components Text --------------",
+    "serverSubscriptionConnected": "Server Connection established",
     "weatherLoadFail": "Couldn't load weather!",
     "weatherForLocation": "Weather for {location}:",
     "weatherTempFeelsLike": "feels like",

src/pages/clothing/view.vue

@@ -169,7 +169,7 @@
 
     // Refs
     const thisClothing:        Ref<Clothing> = ref({ id: "", title: "", description: "", imgPath: "", labelIDs: [], addedTimestamp: 0, modifiedTimestamp: 0 });
-    const thisClothingImgBlob: Ref<string>   = ref("")
+    const thisClothingImgBlob: Ref<string>   = ref("");
 
     // Check if edit mode is enabled based on if name of this route is outfits-view or outfits-edit
     const editModeEnabled = (useRoute().name == "clothing-edit");