@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/variants/workspaces/src/app/(console)/languages/new/page.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { useAbility } from "@casl/react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/navigation";
+import { useState, type FormEvent } from "react";
+import { type CreateLanguageInput } from "@simple-auth-kit/auth-client";
+import { toast } from "sonner";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { FormErrorAlert } from "@/components/form-error-alert";
+import { PermissionRequired } from "@/components/permission-required";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Heading } from "@/components/ui/heading";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { PERMISSIONS, hasPermission, type AppAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { errorMessage, errorMessages } from "@/lib/error";
+import { DIRECTION_OPTIONS, emptyLanguageForm, type LanguageFormValues } from "../language-schema";
+
+const inputClassName = "bg-background border-2 focus:border-purple-500 transition-colors";
+
+export default observer(function NewLanguagePage() {
+  const ability = useAbility<AppAbility>();
+  const canManage = hasPermission(ability, PERMISSIONS.languagesManage);
+  const router = useRouter();
+
+  const [form, setForm] = useState<LanguageFormValues>(emptyLanguageForm);
+  const [formError, setFormError] = useState<string[] | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  if (!canManage) return <PermissionRequired permission={PERMISSIONS.languagesManage} what="Adding a language" />;
+
+  function set<K extends keyof LanguageFormValues>(key: K, value: LanguageFormValues[K]) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    setFormError(null);
+    const input: CreateLanguageInput = {
+      code: form.code,
+      name: form.name,
+      nativeName: form.nativeName,
+      direction: form.direction,
+      isDefault: form.isDefault,
+      isActive: form.isActive,
+    };
+    setLoading(true);
+    try {
+      const language = await authClient.createLanguage(input);
+      toast.success("Language created.");
+      router.push(`/languages/${language.id}`);
+    } catch (err) {
+      setFormError(errorMessages(err));
+      toast.error(errorMessage(err));
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex-1 space-y-4">
+      <Breadcrumb items={[{ title: "Languages", href: "/languages" }, { title: "Add language", href: "/languages/new" }]} />
+      <div className="flex items-start justify-between">
+        <Heading title="Add New Language" description="Create a new language." />
+      </div>
+      <Separator />
+
+      <Card>
+        <CardHeader />
+        <CardContent>
+          <FormErrorAlert messages={formError} />
+          <form onSubmit={handleSubmit} className="space-y-8 w-full">
+            <Card className="w-full">
+              <CardHeader className="border-b bg-muted/50">
+                <CardTitle className="text-2xl">Language Information</CardTitle>
+                <CardDescription className="text-base">Enter language details</CardDescription>
+              </CardHeader>
+              <CardContent className="pt-6">
+                <div className="space-y-6">
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Basic Information</h3>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      <div className="flex flex-col gap-1.5">
+                        <Label htmlFor="name">Language Name</Label>
+                        <Input
+                          id="name"
+                          required
+                          disabled={loading}
+                          placeholder="e.g., English"
+                          value={form.name}
+                          onChange={(e) => set("name", e.target.value)}
+                          type="text"
+                          className={inputClassName}
+                        />
+                      </div>
+                      <div className="flex flex-col gap-1.5">
+                        <Label htmlFor="code">
+                          Language Code &nbsp;
+                          <span className="text-xs text-destructive dark:text-destructive-foreground">(ISO code, e.g., en, ar, bn)</span>
+                        </Label>
+                        <Input
+                          id="code"
+                          required
+                          disabled={loading}
+                          placeholder="e.g., en"
+                          value={form.code}
+                          type="text"
+                          maxLength={10}
+                          className={`${inputClassName} lowercase`}
+                          onChange={(e) => set("code", e.target.value.toLowerCase())}
+                        />
+                      </div>
+                      <div className="flex flex-col gap-1.5">
+                        <Label htmlFor="nativeName">
+                          Native Name &nbsp;
+                          <span className="text-xs text-muted-foreground">(e.g., العربية, বাংলা)</span>
+                        </Label>
+                        <Input
+                          id="nativeName"
+                          required
+                          disabled={loading}
+                          placeholder="e.g., English"
+                          value={form.nativeName}
+                          onChange={(e) => set("nativeName", e.target.value)}
+                          type="text"
+                          className={inputClassName}
+                        />
+                      </div>
+                      <div className="flex flex-col gap-1.5">
+                        <Label htmlFor="direction">Text Direction</Label>
+                        <Select value={form.direction} onValueChange={(value) => set("direction", value as "ltr" | "rtl")} disabled={loading}>
+                          <SelectTrigger id="direction" className="w-full min-w-[200px]">
+                            <SelectValue placeholder="Select text direction" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {DIRECTION_OPTIONS.map((option) => (
+                              <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+
+              <div className="flex flex-wrap justify-center gap-4 mt-6">
+                <div className="flex flex-row items-center space-x-3 rounded-lg border border-purple-500 bg-purple-50 dark:bg-purple-950/20 p-4">
+                  <Checkbox id="isDefault" checked={form.isDefault} onCheckedChange={(checked) => set("isDefault", checked === true)} />
+                  <div className="space-y-1 leading-none">
+                    <Label htmlFor="isDefault" className="text-base font-medium">
+                      Default Language
+                    </Label>
+                    <p className="text-sm text-muted-foreground">The default language is the one a new deployment&apos;s locale falls back to</p>
+                  </div>
+                </div>
+                <div className="flex flex-row items-center space-x-3 rounded-lg border border-purple-500 bg-purple-50 dark:bg-purple-950/20 p-4">
+                  <Checkbox id="isActive" checked={form.isActive} onCheckedChange={(checked) => set("isActive", checked === true)} />
+                  <div className="space-y-1 leading-none">
+                    <Label htmlFor="isActive" className="text-base font-medium">
+                      Active Status
+                    </Label>
+                    <p className="text-sm text-muted-foreground">Language will be active and available for selection</p>
+                  </div>
+                </div>
+              </div>
+
+              <CardFooter className="flex justify-center gap-4 mt-8 pb-8">
+                <Button type="button" variant="outline" onClick={() => router.push("/languages")} disabled={loading}>
+                  Cancel
+                </Button>
+                <Button disabled={loading} className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 min-w-32" type="submit">
+                  {loading ? "Creating..." : "Create Language"}
+                </Button>
+              </CardFooter>
+            </Card>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/app/(console)/languages/page.tsx

@@ -0,0 +1,348 @@
+"use client";
+
+import { useAbility } from "@casl/react";
+import { type ColumnDef, type PaginationState, type SortingState, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { useDebounce } from "use-debounce";
+import { ChevronDownIcon, EyeIcon, PencilIcon, PlusIcon, PowerIcon, Trash2Icon } from "lucide-react";
+import { AuthApiError, type LanguageSummary } from "@simple-auth-kit/auth-client";
+import { AlertModal } from "@/components/alert-modal";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { TableSkeletonLoader } from "@/components/loader/table-skeleton-loader";
+import { PermissionRequired } from "@/components/permission-required";
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { DataTable } from "@/components/ui/data-table";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { PERMISSIONS, hasPermission, missingPermissionHint, type AppAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { useWorkspaceStore } from "@/lib/stores/store-context";
+import { toast } from "sonner";
+
+export default observer(function LanguagesPage() {
+  const ability = useAbility<AppAbility>();
+  const workspaces = useWorkspaceStore();
+  const activeWorkspaceId = workspaces.activeWorkspaceId;
+  const canRead = hasPermission(ability, PERMISSIONS.languagesRead);
+  const canManage = hasPermission(ability, PERMISSIONS.languagesManage);
+  const canStatus = hasPermission(ability, PERMISSIONS.languagesStatus);
+
+  const [search, setSearch] = useState("");
+  const [searchKey] = useDebounce(search, 500);
+  const [status, setStatus] = useState<"" | "active" | "inactive">("");
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 20 });
+
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [pendingLanguage, setPendingLanguage] = useState<LanguageSummary | null>(null);
+  const [pendingAction, setPendingAction] = useState<"status" | "delete" | null>(null);
+  const [pendingBusy, setPendingBusy] = useState(false);
+
+  // `activeWorkspaceId` is part of the query key, same reasoning as the users list: languages are
+  // workspace-scoped, so switching workspace has to re-fetch rather than leave the previous
+  // workspace's languages on screen.
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: ["languages-list", activeWorkspaceId, pagination.pageIndex, pagination.pageSize, searchKey, status],
+    queryFn: () =>
+      authClient.listLanguages({
+        search: searchKey || undefined,
+        page: pagination.pageIndex + 1,
+        limit: pagination.pageSize,
+        // The backend filter is `activeOnly` — one-directional — so "Active" filters server-side
+        // (correct totals) while "Inactive" has to filter the fetched page below.
+        activeOnly: status === "active" ? true : undefined,
+      }),
+    enabled: canRead && !!activeWorkspaceId,
+    placeholderData: keepPreviousData,
+  });
+
+  const total = data?.meta.total ?? 0;
+  const pageCount = data?.meta.pageCount ?? 0;
+
+  const languages = useMemo(() => {
+    let items = data?.items ?? [];
+    if (status === "inactive") items = items.filter((l) => !l.isActive);
+    return items;
+  }, [data, status]);
+
+  function clearFilters() {
+    setSearch("");
+    setStatus("");
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+  }
+
+  function openStatusConfirm(language: LanguageSummary) {
+    setPendingLanguage(language);
+    setPendingAction("status");
+    setConfirmOpen(true);
+  }
+
+  function openDeleteConfirm(language: LanguageSummary) {
+    setPendingLanguage(language);
+    setPendingAction("delete");
+    setConfirmOpen(true);
+  }
+
+  async function confirmPendingAction() {
+    if (!pendingLanguage || !pendingAction) return;
+    setPendingBusy(true);
+    try {
+      if (pendingAction === "status") {
+        if (pendingLanguage.isActive) await authClient.deactivateLanguage(pendingLanguage.id);
+        else await authClient.activateLanguage(pendingLanguage.id);
+        toast.success(pendingLanguage.isActive ? "Language deactivated." : "Language activated.");
+      } else {
+        await authClient.deleteLanguage(pendingLanguage.id);
+        toast.success("Language deleted.");
+      }
+      setConfirmOpen(false);
+      setPendingLanguage(null);
+      setPendingAction(null);
+      await refetch();
+    } catch (err) {
+      toast.error(err instanceof AuthApiError ? err.message : "That action failed. Try again.");
+    } finally {
+      setPendingBusy(false);
+    }
+  }
+
+  const columns = useMemo<ColumnDef<LanguageSummary>[]>(
+    () => [
+      {
+        id: "name",
+        header: "Name",
+        accessorFn: (language) => language.name,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <Link href={`/languages/${row.original.id}`} className="font-medium hover:underline">
+              {row.original.name}
+            </Link>
+            {row.original.isDefault && <Badge variant="secondary">Default</Badge>}
+          </div>
+        ),
+      },
+      {
+        id: "nativeName",
+        header: "Native name",
+        accessorFn: (language) => language.nativeName,
+        cell: ({ row }) => <span className="text-sm">{row.original.nativeName}</span>,
+      },
+      {
+        id: "code",
+        header: "Code",
+        accessorFn: (language) => language.code,
+        cell: ({ row }) => <Badge variant="outline">{row.original.code}</Badge>,
+      },
+      {
+        id: "direction",
+        header: "Direction",
+        accessorFn: (language) => language.direction,
+        cell: ({ row }) => <Badge variant={row.original.direction === "rtl" ? "secondary" : "outline"}>{row.original.direction.toUpperCase()}</Badge>,
+      },
+      {
+        id: "status",
+        header: "Status",
+        accessorFn: (language) => (language.isActive ? "Active" : "Inactive"),
+        cell: ({ row }) => {
+          const language = row.original;
+          return (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button type="button" disabled={!canStatus} className="disabled:cursor-not-allowed disabled:opacity-60" onClick={() => openStatusConfirm(language)}>
+                  <Badge variant={language.isActive ? "success" : "destructive"}>{language.isActive ? "Active" : "Inactive"}</Badge>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {canStatus ? (language.isActive ? "Deactivate this language" : "Activate this language") : missingPermissionHint(PERMISSIONS.languagesStatus)}
+              </TooltipContent>
+            </Tooltip>
+          );
+        },
+      },
+      {
+        id: "created",
+        header: "Created",
+        accessorFn: (language) => language.createdAt,
+        cell: ({ row }) => <span className="text-xs text-muted-foreground">{new Date(row.original.createdAt).toLocaleDateString()}</span>,
+      },
+      {
+        id: "actions",
+        header: "Actions",
+        enableSorting: false,
+        cell: ({ row }) => {
+          const language = row.original;
+          return (
+            <div className="flex justify-end items-center gap-1.5">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Link href={`/languages/${language.id}`} className={cn(buttonVariants({ variant: "outline", size: "icon" }))}>
+                    <EyeIcon />
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent>View details</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Link
+                    href={`/languages/${language.id}/edit`}
+                    aria-disabled={!canManage}
+                    className={cn(buttonVariants({ variant: "outline", size: "icon" }), !canManage && "pointer-events-none opacity-50")}
+                  >
+                    <PencilIcon />
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent>{canManage ? "Edit language" : missingPermissionHint(PERMISSIONS.languagesManage)}</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button size="icon" variant="outline" disabled={!canStatus} onClick={() => openStatusConfirm(language)}>
+                    <PowerIcon />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {canStatus ? (language.isActive ? "Deactivate this language" : "Activate this language") : missingPermissionHint(PERMISSIONS.languagesStatus)}
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button size="icon" variant="outline" disabled={!canManage} onClick={() => openDeleteConfirm(language)}>
+                    <Trash2Icon />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{canManage ? "Delete language" : missingPermissionHint(PERMISSIONS.languagesManage)}</TooltipContent>
+              </Tooltip>
+            </div>
+          );
+        },
+      },
+    ],
+    [canManage, canStatus],
+  );
+
+  const table = useReactTable({
+    data: languages,
+    columns,
+    pageCount: pageCount || -1,
+    state: { sorting, pagination },
+    onSortingChange: setSorting,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    manualPagination: true,
+    manualFiltering: true,
+  });
+
+  if (!canRead) return <PermissionRequired permission={PERMISSIONS.languagesRead} what="Languages" />;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Breadcrumb items={[{ title: "Languages", href: "/languages" }]} />
+
+      <AlertModal
+        isOpen={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        onConfirm={confirmPendingAction}
+        loading={pendingBusy}
+        description={
+          pendingAction === "status"
+            ? pendingLanguage?.isActive
+              ? "This deactivates the language — it stops appearing in active listings and pickers until reactivated."
+              : "This reactivates the language, immediately."
+            : "This soft-deletes the language: it stops appearing in listings, but the row is kept for audit purposes."
+        }
+      />
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>Languages</CardTitle>
+          {canManage && (
+            <Link href="/languages/new" className={cn(buttonVariants({ size: "sm" }))}>
+              <PlusIcon />
+              Add language
+            </Link>
+          )}
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          {isError && <p className="text-sm text-destructive">{error instanceof AuthApiError ? error.message : "Couldn't load languages. Try again."}</p>}
+
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <Input
+              placeholder="Search languages…"
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+                setPagination((p) => ({ ...p, pageIndex: 0 }));
+              }}
+            />
+            <Select value={status || "all"} onValueChange={(value) => setStatus(value === "all" ? "" : (value as "active" | "inactive"))}>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All statuses</SelectItem>
+                <SelectItem value="active">Active</SelectItem>
+                <SelectItem value="inactive">Inactive</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button variant="outline" disabled={!search && !status} onClick={clearFilters}>
+              Clear
+            </Button>
+          </div>
+
+          <div className="flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center">
+            <p className="text-sm text-muted-foreground">
+              Showing {languages.length} of {total} results
+            </p>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  Columns <ChevronDownIcon className="ml-1 size-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => (
+                    <DropdownMenuCheckboxItem key={column.id} className="capitalize" checked={column.getIsVisible()} onCheckedChange={(value) => column.toggleVisibility(!!value)}>
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          {isLoading ? (
+            <TableSkeletonLoader
+              columns={[
+                { header: "Name", skeletonType: "text", skeletonWidth: "w-32" },
+                { header: "Native name", skeletonType: "text", skeletonWidth: "w-32" },
+                { header: "Code", skeletonType: "badge", skeletonWidth: "w-16" },
+                { header: "Direction", skeletonType: "badge", skeletonWidth: "w-16" },
+                { header: "Status", width: "w-[100px]", skeletonType: "button" },
+                { header: "Created", skeletonType: "text", skeletonWidth: "w-24" },
+                { header: "Actions", width: "w-[160px]", skeletonType: "actions", skeletonCount: 3 },
+              ]}
+              rows={pagination.pageSize > 10 ? 10 : pagination.pageSize}
+            />
+          ) : languages.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <p className="text-lg text-muted-foreground">No data found</p>
+              <p className="mt-2 text-sm text-muted-foreground">Try adjusting your search or filters</p>
+            </div>
+          ) : (
+            <DataTable columns={columns} data={languages} total={total} table={table} onPaginationChange={setPagination} />
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/app/(console)/layout.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, type ReactNode } from "react";
+import { AppSidebar } from "@/components/app-sidebar";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { UserMenu } from "@/components/user-menu";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { WorkspaceSwitcher } from "@/components/workspace-switcher";
+import { useAuthStore, useWorkspaceStore } from "@/lib/stores/store-context";
+
+/** The one console screen that works without a workspace — it is how you get your first one. */
+const CREATE_WORKSPACE_PATH = "/workspaces/new";
+
+/**
+ * Route-group guard: every screen under `(console)` requires an authenticated session, and every
+ * screen but "My account" and "New workspace" also requires a workspace to act in. Redirects to
+ * `/login` once we've finished the one-time `initialize()` check and there's still no user.
+ */
+export default observer(function ConsoleLayout({ children }: { children: ReactNode }) {
+  const store = useAuthStore();
+  const workspaces = useWorkspaceStore();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (store.status === "ready" && !store.isAuthenticated) {
+      router.replace("/login");
+    }
+  }, [store.status, store.isAuthenticated, router]);
+
+  // This app has no server-side middleware equivalent to the base admin-nextjs app's `proxy.ts`
+  // (no NextAuth here), so this layout is the only thing standing between a revoked/blocked
+  // session and every screen under (console) — re-verify on every navigation, not just on mount,
+  // so a logout-all/block/deactivate takes effect at the next click rather than at next page load.
+  useEffect(() => {
+    if (store.status !== "ready" || !store.isAuthenticated) return;
+    void store.verifySession().then((stillValid) => {
+      if (!stillValid) router.replace("/login");
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  if (store.status !== "ready" || !store.isAuthenticated || workspaces.status !== "ready") {
+    return <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">Loading…</div>;
+  }
+
+  // A first-time user has an account but no workspace. That is an ordinary starting point, not a
+  // broken console — so the shell stays, and the page invites them to make one.
+  const showEmptyState = workspaces.hasNoWorkspaces && pathname !== CREATE_WORKSPACE_PATH && pathname !== "/account";
+
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center justify-between gap-2 border-b border-border px-4">
+          <div className="flex items-center gap-2">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <span className="text-sm font-medium text-muted-foreground">simple-auth-kit admin</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <WorkspaceSwitcher />
+            <ThemeToggle />
+            <UserMenu />
+          </div>
+        </header>
+        <main className="flex-1 px-4 py-6 md:px-6">
+          {showEmptyState ? (
+            <Card className="mx-auto max-w-lg">
+              <CardHeader>
+                <CardTitle>Create your first workspace</CardTitle>
+                <CardDescription>
+                  Users, roles and the audit log all belong to a workspace, so there&apos;s nothing to show until you have one. Create a
+                  workspace and you&apos;ll be its administrator straight away.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button asChild>
+                  <Link href={CREATE_WORKSPACE_PATH}>Create a workspace</Link>
+                </Button>
+              </CardContent>
+            </Card>
+          ) : (
+            children
+          )}
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+});