Improve tenant selection

project.inlang/messages/de.json

@@ -174,7 +174,7 @@
 	},
 	"actions": "Aktionen",
 	"edit": "Editieren",
-	"configure": "Konfigurieren",
 	"pause": "Pausieren",
-	"delete": "Löschen"
+	"delete": "Löschen",
+	"select": "Auswählen"
 }

project.inlang/messages/en.json

@@ -182,7 +182,7 @@
 	},
 	"actions": "Actions",
 	"edit": "Edit",
-	"configure": "Configure",
 	"pause": "Pause",
-	"delete": "Delete"
+	"delete": "Delete",
+	"select": "Select"
 }

src/lib/components/layouts/sidebar-layout/components/tenant-switcher.svelte

@@ -11,8 +11,9 @@
   import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
   import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
   import UnplugIcon from "@lucide/svelte/icons/unplug";
-  import UnknownTenantIcon from "@lucide/svelte/icons/ticket-x";
+  import UnknownTenantIcon from "@lucide/svelte/icons/shield-question-mark";
   import Loader from "@lucide/svelte/icons/loader-2";
+  import { cn } from "$lib/utils";
 
   const sidebar = useSidebar();
 
@@ -27,11 +28,17 @@
 
 <Sidebar.Menu>
   {#if $tenants.isLoading}
-    <Sidebar.MenuItem class="bg-sidebar-accent flex h-12 items-center justify-start rounded-md p-4">
-      <div class="flex items-center">
-        <Loader class="size-4 animate-spin" strokeWidth={1} />
-      </div>
-    </Sidebar.MenuItem>
+    <div class="@container">
+      <Sidebar.MenuItem
+        class={cn(
+          "bg-sidebar-accent flex h-8 items-center justify-center rounded-md @[50px]:h-12 @[50px]:justify-start @[50px]:px-4",
+        )}
+      >
+        <div class="flex items-center">
+          <Loader class="size-4 animate-spin" strokeWidth={1} />
+        </div>
+      </Sidebar.MenuItem>
+    </div>
   {:else}
     <Sidebar.MenuItem>
       <DropdownMenu.Root>
@@ -45,7 +52,11 @@
               <div
                 class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
               >
-                <UnknownTenantIcon class="size-4" />
+                {#if activeTenant}
+                  <UnknownTenantIcon class="size-4" />
+                {:else}
+                  <UnplugIcon class="size-4" />
+                {/if}
               </div>
               <div class="grid flex-1 text-left text-sm leading-tight">
                 {#if activeTenant}

src/routes/(pages)/dashboard/tenants/+page.svelte

@@ -3,14 +3,14 @@
   import { m } from "$i18n/messages";
   import { MaxPageWidth } from "$lib/components/layouts/max-page-width";
   import { SidebarLayout } from "$lib/components/layouts/sidebar-layout";
-  import EmptyState from "$lib/components/templates/empty-state/empty-state.svelte";
+  import EmptyState from "$lib/components/templates/empty-state/center-state.svelte";
   import { List, ListItem } from "$lib/components/templates/list";
   import { LoadingList } from "$lib/components/templates/loading";
   import { Button } from "$lib/components/ui/button";
   import { ResponsiveDialog, closeDialog, openDialog } from "$lib/components/ui/responsive-dialog";
   import { ROUTES } from "$lib/const/routes";
   import { type TTenant } from "$lib/types/tenant";
-  import ConfigureIcon from "@lucide/svelte/icons/cog";
+  import SelectIcon from "@lucide/svelte/icons/plug-zap";
   import EditIcon from "@lucide/svelte/icons/pencil";
   import PlusIcon from "@lucide/svelte/icons/plus";
   import UnknownTenantIcon from "@lucide/svelte/icons/ticket-x";
@@ -79,8 +79,8 @@
                   },
                   {
                     type: "action",
-                    icon: ConfigureIcon,
-                    label: m["configure"](),
+                    icon: SelectIcon,
+                    label: m["select"](),
                     onClick: () => tenantsStore.setCurrentTenant(tenant.id, true),
                   },
                   {