merge: hub toast on auth-gated tile click

src/pages/Hub.vue

@@ -57,7 +57,7 @@ const token = computed(() => localStorage.getItem('lnbits_access_token') || '')
 
 function hubLink(m: Module): string | null {
   if (!m.envKey) return null
-  // Auth-only modules (wallet, chat, castle) are ghosted when not logged in.
+  // Auth-only modules (wallet, chat, castle, tasks) are ghosted when not logged in.
   if (m.authRequired && !isAuthenticated.value) return null
   const url = import.meta.env[m.envKey] as string | undefined
   if (!url) return null
@@ -68,6 +68,24 @@ function hubLink(m: Module): string | null {
   return url
 }
 
+function isAuthGated(m: Module): boolean {
+  return !!(m.authRequired && !isAuthenticated.value)
+}
+
+function onTileClick(m: Module, event: Event) {
+  // Ghosted auth-required tiles aren't anchors; intercept and toast.
+  if (isAuthGated(m)) {
+    event.preventDefault()
+    toast.info(`${m.label} requires login`, {
+      action: {
+        label: 'Log in',
+        onClick: () => router.push('/login'),
+      },
+    })
+  }
+  // "Coming soon" tiles (no envKey, no authRequired) silently do nothing.
+}
+
 const showProfile = ref(false)
 
 function notImplemented() {
@@ -107,14 +125,17 @@ function notImplemented() {
         <component
           v-for="m in orderedModules"
           :key="m.label"
-          :is="hubLink(m) ? 'a' : 'div'"
+          :is="hubLink(m) ? 'a' : (isAuthGated(m) ? 'button' : 'div')"
           :href="hubLink(m) || undefined"
           class="relative flex flex-col items-center justify-center gap-1 rounded-xl border backdrop-blur-sm transition-all p-2 min-h-0"
           :class="[
             hubLink(m)
               ? 'bg-card/60 hover:bg-card/40 border-white/10 hover:border-white/25 cursor-pointer'
-              : 'bg-card/70 border-white/5 opacity-60 cursor-not-allowed',
+              : isAuthGated(m)
+                ? 'bg-card/70 hover:bg-card/55 border-white/5 opacity-60 cursor-pointer'
+                : 'bg-card/70 border-white/5 opacity-60 cursor-not-allowed',
           ]"
+          @click="onTileClick(m, $event)"
         >
           <component :is="m.icon" class="h-7 w-7 text-foreground/90" :style="{ filter: `drop-shadow(0 0 8px ${m.glow})` }" />
           <div class="text-center leading-tight">