fix(ui): fix UI behavior in no namespace state

ui/src/components/AppBar/DevicesDropdown.vue

@@ -1,5 +1,6 @@
 <template>
   <v-badge
+    v-if="hasNamespaces"
     :model-value="pendingDevicesCount > 0"
     :content="pendingDevicesCount"
     offset-y="-5"
@@ -346,6 +347,7 @@ const stats = computed(() => statsStore.stats);
 const offlineDevices = computed(
   () => stats.value.registered_devices - stats.value.online_devices,
 );
+const hasNamespaces = computed(() => namespacesStore.namespaceList.length > 0);
 const toggleDrawer = () => {
   isDrawerOpen.value = !isDrawerOpen.value;
 };
@@ -392,7 +394,7 @@ const fetchRecentDevices = async () => {
 };
 
 onBeforeMount(async () => {
-  if (namespacesStore.namespaceList.length === 0) return;
+  if (!hasNamespaces.value) return;
   await fetchStats();
   await fetchPendingDevices();
   await fetchRecentDevices();

ui/src/components/Namespace/Namespace.vue

@@ -1,6 +1,6 @@
 <template>
   <NamespaceAdd v-model="showAddDialog" />
-  <NamespaceInstructions v-model="showAddNamespaceInstructions" />
+  <NamespaceInstructions v-model="showInstructionsDialog" />
 
   <v-menu
     :close-on-content-click="false"
@@ -108,6 +108,8 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
+import { useDisplay } from "vuetify";
+import { until } from "@vueuse/core";
 import NamespaceAdd from "./NamespaceAdd.vue";
 import NamespaceInstructions from "./NamespaceInstructions.vue";
 import NamespaceChip from "./NamespaceChip.vue";
@@ -117,7 +119,6 @@ import useNamespaceManager from "./composables/useNamespaceManager";
 import useAuthStore from "@/store/modules/auth";
 import CopyWarning from "@/components/User/CopyWarning.vue";
 import { envVariables } from "@/envVariables";
-import { useDisplay } from "vuetify";
 
 defineOptions({
   inheritAttrs: false,
@@ -139,7 +140,7 @@ const {
 const { mdAndDown, thresholds } = useDisplay();
 
 const showAddDialog = ref(false);
-const showAddNamespaceInstructions = computed(() => namespacesLoaded.value && !hasNamespaces.value && !props.isAdminContext);
+const showInstructionsDialog = ref(false);
 const userId = computed(() => authStore.id || localStorage.getItem("id") || "");
 
 const showAdminButton = computed(() => {
@@ -168,5 +169,7 @@ const navigateToAdminPanel = () => {
 
 onMounted(async () => {
   await loadCurrentNamespace();
+  await until(namespacesLoaded).toBe(true);
+  showInstructionsDialog.value = !hasNamespaces.value && !props.isAdminContext;
 });
 </script>

ui/src/components/Namespace/NamespaceInstructions.vue

@@ -1,11 +1,10 @@
 <template>
   <WindowDialog
-    v-model="showNoNamespaceDialog"
+    v-model="showNamespaceInstructions"
     title="You have no namespaces associated"
     icon="mdi-folder-alert"
     icon-color="warning"
-    persistent
-    :show-close-button="false"
+    @close="showNamespaceInstructions = false"
   >
     <div class="pa-6">
       <p>
@@ -70,15 +69,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { useRoute } from "vue-router";
+import { ref } from "vue";
 import { envVariables } from "@/envVariables";
 import NamespaceAdd from "./NamespaceAdd.vue";
 import WindowDialog from "@/components/Dialogs/WindowDialog.vue";
 
-const route = useRoute();
-const showDialog = defineModel<boolean>({ required: true });
+const showNamespaceInstructions = defineModel<boolean>({ required: true });
 const showNamespaceAdd = ref(false);
-const showNoNamespaceDialog = computed(() => route.name === "AcceptInvite" ? false : showDialog.value);
 const { isCommunity } = envVariables;
 </script>

ui/src/components/QuickConnection/QuickConnection.vue

@@ -4,29 +4,27 @@
       color="primary"
       variant="flat"
       tabindex="0"
-      aria-label="Dialog Quick Connection"
       data-test="quick-connection-open-btn"
       prepend-icon="mdi-console"
       block
+      text="Quick Connect"
+      :disabled
       @click="showDialog = true"
-    >
-      Quick Connect
-    </v-btn>
+    />
 
-    <div>
-      <p
-        class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1"
-        data-test="quick-connect-instructions"
+    <p
+      v-if="!disabled"
+      class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1"
+      data-test="quick-connect-instructions"
+    >
+      Press <v-chip
+        density="compact"
+        size="small"
+        label
       >
-        Press <v-chip
-          density="compact"
-          size="small"
-          label
-        >
-          Ctrl+K
-        </v-chip> to Quick Connect!
-      </p>
-    </div>
+        Ctrl+K
+      </v-chip> to Quick Connect!
+    </p>
 
     <WindowDialog
       v-model="showDialog"
@@ -130,6 +128,8 @@ import { useMagicKeys } from "@vueuse/core";
 import QuickConnectionList from "./QuickConnectionList.vue";
 import WindowDialog from "@/components/Dialogs/WindowDialog.vue";
 
+const props = defineProps<{ disabled: boolean }>();
+
 const showDialog = ref(false);
 const filter = ref("");
 const listRef = ref<InstanceType<typeof QuickConnectionList> & { rootEl?: HTMLElement }>();
@@ -146,6 +146,7 @@ const normalizeLabel = (label: string) => label.toLowerCase().replace(/\s+/g, "-
 useMagicKeys({
   passive: false,
   onEventFired(event) {
+    if (props.disabled) return;
     if (event.ctrlKey && event.key.toLowerCase() === "k" && event.type === "keydown") {
       event.preventDefault();
       showDialog.value = !showDialog.value;
@@ -155,6 +156,8 @@ useMagicKeys({
     }
   },
 });
+
+defineExpose({ showDialog });
 </script>
 
 <style scoped lang="scss">

ui/src/layouts/AppLayout.vue

@@ -26,24 +26,6 @@
       </div>
     </v-toolbar>
 
-    <div
-      v-if="!hasNamespaces"
-      class="d-flex justify-center"
-    >
-      <v-btn
-        color="primary"
-        data-test="save-btn"
-        @click="showNamespaceAdd = true"
-      >
-        Add Namespace
-      </v-btn>
-      <NamespaceAdd
-        v-model="showNamespaceAdd"
-        enable-switch-in
-        data-test="namespace-add-component"
-      />
-    </div>
-
     <v-list
       density="compact"
       class="bg-v-theme-surface"
@@ -127,7 +109,7 @@
       </template>
 
       <v-col class="d-flex align-end justify-center">
-        <QuickConnection />
+        <QuickConnection :disabled="!hasNamespaces" />
       </v-col>
     </v-list>
   </v-navigation-drawer>
@@ -179,7 +161,6 @@ import { envVariables } from "../envVariables";
 import UserWarning from "../components/User/UserWarning.vue";
 import AppBar from "../components/AppBar/AppBar.vue";
 import QuickConnection from "../components/QuickConnection/QuickConnection.vue";
-import NamespaceAdd from "@/components/Namespace/NamespaceAdd.vue";
 import Snackbar from "@/components/Snackbar/Snackbar.vue";
 import useLayoutStore from "@/store/modules/layout";
 import useNamespacesStore from "@/store/modules/namespaces";
@@ -206,7 +187,6 @@ const namespacesStore = useNamespacesStore();
 const spinnerStore = useSpinnerStore();
 const { getPrivateKeyList } = usePrivateKeysStore();
 const currentRoute = computed(() => router.currentRoute);
-const showNamespaceAdd = ref(false);
 const hasNamespaces = computed(() => namespacesStore.namespaceList.length !== 0);
 const theme = computed(() => layoutStore.theme);
 
@@ -220,8 +200,7 @@ const hasSpinner = computed({
   set(newStatus) { spinnerStore.status = newStatus; },
 });
 
-const disableItem = (item: string) => !hasNamespaces.value && item !== "Settings";
-
+const disableItem = (item: string) => !hasNamespaces.value && item !== "Settings" && item !== "Home";
 const isItemHidden = (meta?: RouteMeta) => {
   if (!meta?.isHidden) return false;
   return meta.isHidden();