fix: tighten workspace controls

2026-07-02 18:24:35 -07:00
parent fd548eaa7b
commit 7718d9759c
9 changed files with 331 additions and 81 deletions
--- a/app/(app)/app/settings/audit/page.tsx
+++ b/app/(app)/app/settings/audit/page.tsx
@@ -1,12 +1,11 @@
 import { redirect } from "next/navigation";

-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table } from "@/components/ui/table";
 import { getCurrentAuthContext } from "@/modules/core/server/auth";
 import { hasPermission } from "@/modules/core/server/permissions";
 import { readData } from "@/modules/core/server/store";
-import { TableToolbar } from "@/modules/settings/components/TableToolbar";
+import { TablePagination, TableToolbar } from "@/modules/settings/components/TableToolbar";
 import { getPage, getPageCount, getSearchParam, paginate, type SearchParams } from "@/modules/settings/lib/pagination";

 type AuditPageProps = {
@@ -39,10 +38,8 @@ export default async function AuditPage({ searchParams }: AuditPageProps): Promi

  return (
    <div className="flex flex-col gap-5">
-      <section>
-        <Badge variant="success">Audit</Badge>
-        <h2 className="mt-3 text-xl font-semibold">审计日志</h2>
-        <p className="mt-1 text-sm text-muted-foreground">关键操作、拒绝访问和故障处理留痕。</p>
+      <section className="border-b pb-4">
+        <h2 className="text-xl font-semibold">审计日志</h2>
      </section>

      <Card>
@@ -51,8 +48,6 @@ export default async function AuditPage({ searchParams }: AuditPageProps): Promi
        </CardHeader>
        <CardContent className="p-0">
          <TableToolbar
-            page={Math.min(page, pageCount)}
-            pageCount={pageCount}
            pathname="/app/settings/audit"
            query={query}
            searchPlaceholder="搜索操作者、动作、对象、结果"
@@ -94,6 +89,13 @@ export default async function AuditPage({ searchParams }: AuditPageProps): Promi
              </Table.Body>
            </Table>
          </div>
+          <TablePagination
+            page={Math.min(page, pageCount)}
+            pageCount={pageCount}
+            pathname="/app/settings/audit"
+            query={query}
+            total={filteredLogs.length}
+          />
        </CardContent>
      </Card>
    </div>
--- a/app/(app)/app/settings/organizations/page.tsx
+++ b/app/(app)/app/settings/organizations/page.tsx
@@ -1,7 +1,6 @@
 import { redirect } from "next/navigation";
 import Link from "next/link";

-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table } from "@/components/ui/table";
 import { getCurrentAuthContext } from "@/modules/core/server/auth";
@@ -11,7 +10,7 @@ import {
  OrganizationManagementClient,
  OrganizationRowActions,
 } from "@/modules/settings/components/OrganizationManagementClient";
-import { TableToolbar } from "@/modules/settings/components/TableToolbar";
+import { TablePagination, TableToolbar } from "@/modules/settings/components/TableToolbar";
 import { getPage, getPageCount, getSearchParam, paginate, type SearchParams } from "@/modules/settings/lib/pagination";

 type OrganizationsPageProps = {
@@ -52,12 +51,8 @@ export default async function OrganizationsPage({ searchParams }: OrganizationsP

  return (
    <div className="flex flex-col gap-5">
-      <section className="flex flex-col gap-4 border-b pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div>
-          <Badge variant="success">Organizations</Badge>
-          <h2 className="mt-3 text-xl font-semibold">机构管理</h2>
-          <p className="mt-1 text-sm text-muted-foreground">多机构租户、启停状态、成员邀请和机构角色初始化。</p>
-        </div>
+      <section className="flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-center lg:justify-between">
+        <h2 className="text-xl font-semibold">机构管理</h2>
        {canManageOrganizations ? <OrganizationManagementClient /> : null}
      </section>

@@ -67,8 +62,6 @@ export default async function OrganizationsPage({ searchParams }: OrganizationsP
        </CardHeader>
        <CardContent className="p-0">
          <TableToolbar
-            page={Math.min(page, pageCount)}
-            pageCount={pageCount}
            pathname="/app/settings/organizations"
            query={query}
            searchPlaceholder="搜索机构名称、标识、状态"
@@ -120,6 +113,13 @@ export default async function OrganizationsPage({ searchParams }: OrganizationsP
              </Table.Body>
            </Table>
          </div>
+          <TablePagination
+            page={Math.min(page, pageCount)}
+            pageCount={pageCount}
+            pathname="/app/settings/organizations"
+            query={query}
+            total={filteredOrganizations.length}
+          />
        </CardContent>
      </Card>
    </div>
--- a/app/(app)/app/settings/roles/page.tsx
+++ b/app/(app)/app/settings/roles/page.tsx
@@ -1,12 +1,11 @@
 import { redirect } from "next/navigation";

-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table } from "@/components/ui/table";
 import { getCurrentAuthContext } from "@/modules/core/server/auth";
 import { getRoleDefinitions, hasPermission, PERMISSION_DEFINITIONS } from "@/modules/core/server/permissions";
 import { RoleManagementClient, RoleRowActions } from "@/modules/settings/components/RoleManagementClient";
-import { TableToolbar } from "@/modules/settings/components/TableToolbar";
+import { TablePagination, TableToolbar } from "@/modules/settings/components/TableToolbar";
 import { getPage, getPageCount, getSearchParam, paginate, type SearchParams } from "@/modules/settings/lib/pagination";

 type RolesPageProps = {
@@ -37,12 +36,8 @@ export default async function RolesPage({ searchParams }: RolesPageProps): Promi

  return (
    <div className="flex flex-col gap-5">
-      <section className="flex flex-col gap-4 border-b pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div>
-          <Badge variant="success">RBAC</Badge>
-          <h2 className="mt-3 text-xl font-semibold">角色权限</h2>
-          <p className="mt-1 text-sm text-muted-foreground">系统权限点、内置角色和机构自定义角色。</p>
-        </div>
+      <section className="flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-center lg:justify-between">
+        <h2 className="text-xl font-semibold">角色权限</h2>
        {canManageRoles ? <RoleManagementClient permissions={PERMISSION_DEFINITIONS} /> : null}
      </section>

@@ -52,8 +47,6 @@ export default async function RolesPage({ searchParams }: RolesPageProps): Promi
        </CardHeader>
        <CardContent className="p-0">
          <TableToolbar
-            page={Math.min(page, pageCount)}
-            pageCount={pageCount}
            pathname="/app/settings/roles"
            query={query}
            searchPlaceholder="搜索角色、权限、说明"
@@ -97,6 +90,13 @@ export default async function RolesPage({ searchParams }: RolesPageProps): Promi
              </Table.Body>
            </Table>
          </div>
+          <TablePagination
+            page={Math.min(page, pageCount)}
+            pageCount={pageCount}
+            pathname="/app/settings/roles"
+            query={query}
+            total={filteredRoles.length}
+          />
        </CardContent>
      </Card>
    </div>
--- a/app/(app)/app/settings/status/page.tsx
+++ b/app/(app)/app/settings/status/page.tsx
@@ -8,7 +8,7 @@ import { getCurrentAuthContext } from "@/modules/core/server/auth";
 import { hasPermission } from "@/modules/core/server/permissions";
 import { readData } from "@/modules/core/server/store";
 import { IncidentStatusActions } from "@/modules/settings/components/IncidentStatusActions";
-import { TableToolbar } from "@/modules/settings/components/TableToolbar";
+import { TablePagination, TableToolbar } from "@/modules/settings/components/TableToolbar";
 import { getPage, getPageCount, getSearchParam, paginate, type SearchParams } from "@/modules/settings/lib/pagination";

 type StatusPageProps = {
@@ -42,10 +42,12 @@ export default async function StatusPage({ searchParams }: StatusPageProps): Pro

  return (
    <div className="flex flex-col gap-5">
-      <section>
+      <section className="flex flex-col gap-3 border-b pb-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold">运行状态</h2>
+          <p className="mt-1 text-sm text-muted-foreground">{databaseHealth.reason}</p>
+        </div>
        <Badge variant={databaseHealth.ok ? "success" : "danger"}>{databaseHealth.ok ? "Healthy" : "Degraded"}</Badge>
-        <h2 className="mt-3 text-xl font-semibold">运行状态</h2>
-        <p className="mt-1 text-sm text-muted-foreground">{databaseHealth.reason}</p>
      </section>

      <section className="grid gap-4 md:grid-cols-4">
@@ -81,8 +83,6 @@ export default async function StatusPage({ searchParams }: StatusPageProps): Pro
        </CardHeader>
        <CardContent className="p-0">
          <TableToolbar
-            page={Math.min(page, pageCount)}
-            pageCount={pageCount}
            pathname="/app/settings/status"
            query={query}
            searchPlaceholder="搜索故障标题、来源、状态"
@@ -132,6 +132,13 @@ export default async function StatusPage({ searchParams }: StatusPageProps): Pro
              </Table.Body>
            </Table>
          </div>
+          <TablePagination
+            page={Math.min(page, pageCount)}
+            pageCount={pageCount}
+            pathname="/app/settings/status"
+            query={query}
+            total={filteredIncidents.length}
+          />
        </CardContent>
      </Card>
    </div>
--- a/app/(app)/app/settings/users/page.tsx
+++ b/app/(app)/app/settings/users/page.tsx
@@ -8,7 +8,7 @@ import { getRoleDefinitions, hasPermission } from "@/modules/core/server/permiss
 import { readData } from "@/modules/core/server/store";
 import { ROLE_LABELS } from "@/modules/core/types";
 import type { RoleId } from "@/modules/core/types";
-import { TableToolbar } from "@/modules/settings/components/TableToolbar";
+import { TablePagination, TableToolbar } from "@/modules/settings/components/TableToolbar";
 import { UserAccountActions, UserManagementClient } from "@/modules/settings/components/UserManagementClient";
 import { getPage, getPageCount, getSearchParam, paginate, type SearchParams } from "@/modules/settings/lib/pagination";
 import { UserAvatar } from "@/modules/shared/components/UserAvatar";
@@ -65,10 +65,8 @@ export default async function UsersPage({ searchParams }: UsersPageProps): Promi

  return (
    <div className="flex flex-col gap-5">
-      <section>
-        <Badge variant="success">Accounts</Badge>
-        <h2 className="mt-3 text-xl font-semibold">用户管理</h2>
-        <p className="mt-1 text-sm text-muted-foreground">账号创建、机构加入审批、角色分配和账号列表。</p>
+      <section className="border-b pb-4">
+        <h2 className="text-xl font-semibold">用户管理</h2>
      </section>

      <UserManagementClient
@@ -84,8 +82,6 @@ export default async function UsersPage({ searchParams }: UsersPageProps): Promi
        </CardHeader>
        <CardContent className="p-0">
          <TableToolbar
-            page={Math.min(page, pageCount)}
-            pageCount={pageCount}
            pathname="/app/settings/users"
            query={query}
            searchPlaceholder="搜索姓名、邮箱、角色、状态"
@@ -145,6 +141,13 @@ export default async function UsersPage({ searchParams }: UsersPageProps): Promi
              </Table.Body>
            </Table>
          </div>
+          <TablePagination
+            page={Math.min(page, pageCount)}
+            pageCount={pageCount}
+            pathname="/app/settings/users"
+            query={query}
+            total={filteredAccounts.length}
+          />
        </CardContent>
      </Card>
    </div>
--- a/modules/settings/components/TableToolbar.tsx
+++ b/modules/settings/components/TableToolbar.tsx
@@ -4,8 +4,6 @@ import { buildPageHref } from "@/modules/settings/lib/pagination";

 type TableToolbarProps = {
  actionLabel?: string;
-  page: number;
-  pageCount: number;
  pathname: string;
  query: string;
  searchPlaceholder: string;
@@ -14,8 +12,6 @@ type TableToolbarProps = {

 export function TableToolbar({
  actionLabel,
-  page,
-  pageCount,
  pathname,
  query,
  searchPlaceholder,
@@ -29,31 +25,88 @@ export function TableToolbar({
          搜索
        </Button>
      </form>
-      <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
-        <span>{actionLabel ?? `共 ${total} 条`}</span>
-        <div className="flex items-center gap-2">
-          {page <= 1 ? (
-            <Button disabled size="sm" variant="outline">
-              上一页
-            </Button>
-          ) : (
-            <LinkButton href={buildPageHref(pathname, query, page - 1)} size="sm" variant="outline">
-              上一页
-            </LinkButton>
-          )}
-          <span className="min-w-16 text-center">
-            {page}/{pageCount}
-          </span>
-          {page >= pageCount ? (
-            <Button disabled size="sm" variant="outline">
-              下一页
-            </Button>
-          ) : (
-            <LinkButton href={buildPageHref(pathname, query, page + 1)} size="sm" variant="outline">
-              下一页
-            </LinkButton>
-          )}
-        </div>
+      <span className="text-sm text-muted-foreground">{actionLabel ?? `共 ${total} 条`}</span>
+    </div>
+  );
+}
+
+type TablePaginationProps = {
+  page: number;
+  pageCount: number;
+  pathname: string;
+  query: string;
+  total: number;
+};
+
+export function TablePagination({
+  page,
+  pageCount,
+  pathname,
+  query,
+  total,
+}: TablePaginationProps): React.ReactElement {
+  const safePage = Math.min(page, pageCount);
+  const isFirstPage = safePage <= 1;
+  const isLastPage = safePage >= pageCount;
+
+  return (
+    <div className="flex flex-col gap-3 border-t p-4 text-sm text-muted-foreground lg:flex-row lg:items-center lg:justify-between">
+      <span>共 {total} 条</span>
+      <div className="flex flex-wrap items-center gap-2">
+        {isFirstPage ? (
+          <Button disabled size="sm" variant="outline">
+            首页
+          </Button>
+        ) : (
+          <LinkButton href={buildPageHref(pathname, query, 1)} size="sm" variant="outline">
+            首页
+          </LinkButton>
+        )}
+        {isFirstPage ? (
+          <Button disabled size="sm" variant="outline">
+            上一页
+          </Button>
+        ) : (
+          <LinkButton href={buildPageHref(pathname, query, safePage - 1)} size="sm" variant="outline">
+            上一页
+          </LinkButton>
+        )}
+        <span className="min-w-14 text-center text-foreground">
+          {safePage}/{pageCount}
+        </span>
+        <form action={pathname} className="flex items-center gap-2">
+          {query.trim() ? <input name="q" type="hidden" value={query.trim()} /> : null}
+          <Input
+            aria-label="跳转页码"
+            className="h-9 w-20"
+            defaultValue={safePage}
+            max={pageCount}
+            min={1}
+            name="page"
+            type="number"
+          />
+          <Button size="sm" type="submit" variant="outline">
+            跳转
+          </Button>
+        </form>
+        {isLastPage ? (
+          <Button disabled size="sm" variant="outline">
+            下一页
+          </Button>
+        ) : (
+          <LinkButton href={buildPageHref(pathname, query, safePage + 1)} size="sm" variant="outline">
+            下一页
+          </LinkButton>
+        )}
+        {isLastPage ? (
+          <Button disabled size="sm" variant="outline">
+            末页
+          </Button>
+        ) : (
+          <LinkButton href={buildPageHref(pathname, query, pageCount)} size="sm" variant="outline">
+            末页
+          </LinkButton>
+        )}
      </div>
    </div>
  );
--- a/modules/shared/components/AccountMenu.tsx
+++ b/modules/shared/components/AccountMenu.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Ellipsis, LogOut, Settings } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { Permission, PublicAccount } from "@/modules/core/types";
+import { UserAvatar } from "@/modules/shared/components/UserAvatar";
+
+type AccountMenuProps = {
+  account: PublicAccount;
+  permissions: Permission[];
+};
+
+export function AccountMenu({ account, permissions }: AccountMenuProps): React.ReactElement {
+  const router = useRouter();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isPending, setIsPending] = useState(false);
+  const canReadAccounts = permissions.includes("account:read");
+  const settingsHref = canReadAccounts ? `/app/settings/users?q=${encodeURIComponent(account.email)}` : "/app/settings/global";
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    function handlePointerDown(event: PointerEvent): void {
+      const target = event.target;
+      if (target instanceof Node && !menuRef.current?.contains(target)) {
+        setIsOpen(false);
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent): void {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  async function handleSignOut(): Promise<void> {
+    setIsPending(true);
+    await fetch("/api/auth/logout", { method: "POST" });
+    router.refresh();
+    router.replace("/login");
+  }
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <div className="flex min-w-0 items-center gap-3 rounded-md bg-secondary/55 p-2">
+        <UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="sm" />
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium leading-tight">{account.name}</p>
+          <p className="truncate text-xs leading-tight text-muted-foreground">{account.email}</p>
+        </div>
+        <Button
+          aria-expanded={isOpen}
+          aria-haspopup="menu"
+          aria-label="打开账号菜单"
+          onClick={() => setIsOpen((current) => !current)}
+          size="icon"
+          type="button"
+          variant="ghost"
+          className="size-9 shrink-0"
+        >
+          <Ellipsis className="size-4" aria-hidden="true" />
+        </Button>
+      </div>
+
+      {isOpen ? (
+        <div
+          className="absolute bottom-full right-0 z-30 mb-2 w-52 rounded-md border bg-popover p-1 text-popover-foreground shadow-lg"
+          role="menu"
+        >
+          <Link
+            className="flex min-h-10 items-center gap-2 rounded-sm px-3 text-sm font-medium hover:bg-secondary"
+            href={settingsHref}
+            onClick={() => setIsOpen(false)}
+            role="menuitem"
+          >
+            <Settings className="size-4 text-muted-foreground" aria-hidden="true" />
+            用户设置
+          </Link>
+          <button
+            className="flex min-h-10 w-full items-center gap-2 rounded-sm px-3 text-left text-sm font-medium hover:bg-secondary disabled:opacity-55"
+            disabled={isPending}
+            onClick={handleSignOut}
+            role="menuitem"
+            type="button"
+          >
+            <LogOut className="size-4 text-muted-foreground" aria-hidden="true" />
+            退出登录
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/modules/shared/components/AppBreadcrumbs.tsx
+++ b/modules/shared/components/AppBreadcrumbs.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronRight } from "lucide-react";
+
+type BreadcrumbItem = {
+  href?: string;
+  label: string;
+};
+
+const routeLabels: Record<string, string> = {
+  "/app/dashboard": "运营看板",
+  "/app/elders": "老人档案",
+  "/app/beds": "床位房间",
+  "/app/health": "健康照护",
+  "/app/care": "护理服务",
+  "/app/emergency": "安全应急",
+  "/app/devices": "设备运维",
+  "/app/notices": "公告通知",
+  "/app/alerts": "规则预警",
+  "/app/family": "家属服务",
+  "/app/settings/global": "全局配置",
+  "/app/settings/organizations": "机构管理",
+  "/app/settings/users": "用户管理",
+  "/app/settings/roles": "角色权限",
+  "/app/settings/audit": "审计日志",
+  "/app/settings/status": "运行状态",
+};
+
+function getBreadcrumbs(pathname: string): BreadcrumbItem[] {
+  if (pathname === "/app" || pathname === "/app/dashboard") {
+    return [{ label: "工作台" }];
+  }
+
+  if (pathname.startsWith("/app/settings/organizations/")) {
+    return [
+      { href: "/app/dashboard", label: "工作台" },
+      { href: "/app/settings/users", label: "系统设置" },
+      { href: "/app/settings/organizations", label: "机构管理" },
+      { label: "机构详情" },
+    ];
+  }
+
+  if (pathname.startsWith("/app/settings")) {
+    return [
+      { href: "/app/dashboard", label: "工作台" },
+      { href: "/app/settings/users", label: "系统设置" },
+      { label: routeLabels[pathname] ?? "设置" },
+    ];
+  }
+
+  return [
+    { href: "/app/dashboard", label: "工作台" },
+    { label: routeLabels[pathname] ?? "工作区" },
+  ];
+}
+
+export function AppBreadcrumbs(): React.ReactElement {
+  const pathname = usePathname();
+  const breadcrumbs = getBreadcrumbs(pathname);
+
+  return (
+    <nav aria-label="面包屑" className="flex min-w-0 items-center gap-1 text-sm">
+      {breadcrumbs.map((item, index) => {
+        const isLast = index === breadcrumbs.length - 1;
+
+        return (
+          <span className="flex min-w-0 items-center gap-1" key={`${item.label}-${index}`}>
+            {index > 0 ? <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" /> : null}
+            {item.href && !isLast ? (
+              <Link className="shrink-0 font-medium hover:text-primary" href={item.href}>
+                {item.label}
+              </Link>
+            ) : (
+              <span className={isLast ? "min-w-0 truncate text-muted-foreground" : "shrink-0 font-medium"}>{item.label}</span>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}
--- a/modules/shared/components/AppShell.tsx
+++ b/modules/shared/components/AppShell.tsx
@@ -20,6 +20,8 @@ import type { LucideIcon } from "lucide-react";

 import type { Permission, PublicAccount } from "@/modules/core/types";
 import { SignOutButton } from "@/modules/auth/components/SignOutButton";
+import { AccountMenu } from "@/modules/shared/components/AccountMenu";
+import { AppBreadcrumbs } from "@/modules/shared/components/AppBreadcrumbs";
 import { UserAvatar } from "@/modules/shared/components/UserAvatar";

 type NavItem = {
@@ -194,14 +196,7 @@ export function AppShell({ children, account, permissions }: AppShellProps): Rea
          </nav>

          <div className="border-t p-3">
-            <div className="flex min-w-0 items-center gap-3 rounded-md bg-secondary/55 p-2">
-              <UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="sm" />
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-medium leading-tight">{account.name}</p>
-                <p className="truncate text-xs leading-tight text-muted-foreground">{account.email}</p>
-              </div>
-            </div>
-            <SignOutButton className="mt-2 w-full justify-start" />
+            <AccountMenu account={account} permissions={permissions} />
          </div>
        </div>
      </aside>
@@ -212,9 +207,7 @@ export function AppShell({ children, account, permissions }: AppShellProps): Rea
            <span className="inline-flex size-10 items-center justify-center rounded-md bg-primary text-primary-foreground xl:hidden">
              <Stethoscope className="size-5" aria-hidden="true" />
            </span>
-            <div>
-              <p className="text-sm font-medium">工作台</p>
-            </div>
+            <AppBreadcrumbs />
          </div>
          <div className="flex min-w-0 items-center gap-2 xl:hidden">
            <div className="hidden min-w-0 items-center gap-2 sm:flex">