fix(components): update shell components and settings modal null check

2026-05-31 13:11:26 +08:00 · 2026-05-31 13:11:26 +08:00 · 0f7b05f7ef
commit 0f7b05f7ef
parent a96222cc28
6 changed files with 190 additions and 46 deletions
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@ -315,9 +315,9 @@ export function CommandPalette() {
                    <span
                      className={`grid size-8 shrink-0 place-items-center rounded-lg ${
                        item.type === "issue"
-                          ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+                          ? "bg-warning/10 text-warning dark:text-warning"
                          : item.type === "repo"
-                            ? "bg-blue-500/10 text-blue-600 dark:text-blue-400"
+                            ? "bg-info/10 text-info dark:text-info"
                            : item.type === "room"
                              ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
                              : "bg-primary/10 text-primary"
--- a/src/components/right-drawer.tsx
+++ b/src/components/right-drawer.tsx
@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";

@ -47,7 +48,7 @@ export default function RightDrawer({

  if (!open) return null;

-  return (
+  return createPortal(
    <div className="fixed inset-y-0 right-0 z-50 flex w-full justify-end">
      {/* Backdrop */}
      <div
@ -80,8 +81,11 @@ export default function RightDrawer({
        </div>

        {/* Body */}
-        {children}
+        <div className="min-h-0 flex-1 overflow-y-auto">
+          {children}
+        </div>
      </div>
-    </div>
+    </div>,
+    document.body,
  );
 }
--- a/src/components/settings/SettingsModal.tsx
+++ b/src/components/settings/SettingsModal.tsx
@ -110,9 +110,10 @@ export function SettingsModal({ open, onClose, initialSection }: SettingsModalPr
    localStorage.setItem(SETTINGS_RETURN_PATH_KEY, location.pathname);

    const el = document.querySelector('[data-slot="dialog-content"]') as HTMLDivElement | null;
-    const overlayEl = document.querySelector('[data-slot="dialog-overlay"]') as HTMLDivElement | null;
    if (!el) return;

+    const overlayEl = document.querySelector('[data-slot="dialog-overlay"]') as HTMLDivElement | null;
+
    setIsExpanding(true);

    const duration = 350;
@ -135,6 +136,7 @@ export function SettingsModal({ open, onClose, initialSection }: SettingsModalPr
      );
    }

+    const targetEl = el;
    function frame(now: number) {
      const elapsed = now - start;
      const progress = Math.min(elapsed / duration, 1);
@ -144,11 +146,11 @@ export function SettingsModal({ open, onClose, initialSection }: SettingsModalPr
      const h = startH + (endH - startH) * eased;
      const r = startR + (endR - startR) * eased;

-      el.style.setProperty("width", `${w}vw`, "important");
-      el.style.setProperty("height", `${h}vh`, "important");
-      el.style.setProperty("max-width", `${w}vw`, "important");
-      el.style.setProperty("max-height", `${h}vh`, "important");
-      el.style.setProperty("border-radius", `${r}px`, "important");
+      targetEl.style.setProperty("width", `${w}vw`, "important");
+      targetEl.style.setProperty("height", `${h}vh`, "important");
+      targetEl.style.setProperty("max-width", `${w}vw`, "important");
+      targetEl.style.setProperty("max-height", `${h}vh`, "important");
+      targetEl.style.setProperty("border-radius", `${r}px`, "important");

      if (progress < 1) {
        requestAnimationFrame(frame);
--- a/src/components/shell/personal-sidebar.tsx
+++ b/src/components/shell/personal-sidebar.tsx
@ -223,9 +223,9 @@ function AgentChatSidebar() {
                aria-current={active ? "page" : undefined}
                aria-label={conv.title || "Untitled chat"}
                className={cn(
-                  "group relative flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-left transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "group relative flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-left transition-[background-color,color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                  active
-                    ? "bg-primary/[0.08] text-foreground shadow-[inset_0_0_0_1px_var(--color-primary)/15]"
+                    ? "bg-primary/[0.08] text-foreground ring-1 ring-primary/15"
                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground hover:shadow-sm",
                )}
                onClick={() => navigate(`/me/chat/${conv.id}`)}
@ -262,7 +262,7 @@ function AgentChatSidebar() {
                </div>
                <button
                  type="button"
-                  className="shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground/30 opacity-0 transition-all duration-200 hover:bg-destructive/10 hover:text-destructive focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100"
+                  className="shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground/30 opacity-0 transition-[background-color,color,opacity] duration-200 hover:bg-destructive/10 hover:text-destructive focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100"
                  onClick={(e) => {
                    e.stopPropagation();
                    handleDelete(conv.id);
@ -300,7 +300,7 @@ function PersonalSidebar() {
    <aside className="flex h-full w-[240px] shrink-0 flex-col overflow-hidden border-r border-border bg-sidebar">
      <header className="flex h-[48px] shrink-0 items-center gap-3 border-b border-border px-4">
        <PersonalAvatar />
-        <button className="flex min-w-0 flex-1 items-center gap-2 text-left text-base font-semibold text-foreground">
+        <button aria-label="Personal menu" className="flex min-w-0 flex-1 items-center gap-2 rounded-lg text-left text-base font-semibold text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30" type="button">
          <span className="truncate">{me?.display_name || me?.username || "User"}</span>
          <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
        </button>
@ -321,9 +321,9 @@ function PersonalSidebar() {
        ) : (
          <>
            <section className="mb-5">
-              <button className="mb-2 flex w-full items-center justify-between px-2 text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+              <div className="mb-2 flex w-full items-center justify-between px-2 text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
                Personal
-              </button>
+              </div>
              <nav className="space-y-1">
                {personalItems.map((item) => (
                  <PersonalNavLink
@ -336,9 +336,9 @@ function PersonalSidebar() {
            </section>

            <section className="mb-5">
-              <button className="mb-2 flex w-full items-center justify-between px-2 text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+              <div className="mb-2 flex w-full items-center justify-between px-2 text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
                Social
-              </button>
+              </div>
              <nav className="space-y-1">
                {socialItems.map((item) => (
                  <PersonalNavLink
--- a/src/components/shell/rail.tsx
+++ b/src/components/shell/rail.tsx
@ -1,13 +1,22 @@
+import { useState } from "react";
 import { Link, useLocation } from "react-router";
-import { Home, Plus, Settings } from "lucide-react";
+import { Home, LogOut, Plus, Settings } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";

 import { client, type WorkspaceResponse } from "@/client";
 import { CreateWorkspaceDialog } from "@/page/workspace/create";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { workspaceColor, workspaceInitial } from "./shared";
 import { useSettingsModal } from "@/components/settings/SettingsModalContext";
+import { useAuth } from "@/context/auth-context";

 function WorkspaceIcon({
  active,
@ -25,13 +34,13 @@ function WorkspaceIcon({
    >
      <span
        className={cn(
-          "absolute -left-[11px] h-2 w-[3px] rounded-r-full bg-foreground opacity-0 transition-all group-hover:h-4 group-hover:opacity-60",
+          "absolute -left-[11px] h-2 w-[3px] rounded-r-full bg-foreground opacity-0 transition-[height,opacity] group-hover:h-4 group-hover:opacity-60",
          active && "h-6 opacity-100",
        )}
      />
      <span
        className={cn(
-          "grid size-9 place-items-center overflow-hidden rounded-xl bg-gradient-to-br text-[12px] font-bold text-white ring-1 ring-black/[0.06] transition-all",
+          "grid size-9 place-items-center overflow-hidden rounded-xl bg-gradient-to-br text-[12px] font-bold text-white ring-1 ring-black/[0.06] transition-[border-radius,box-shadow]",
          workspaceColor(workspace.name),
          active && "rounded-lg ring-2 ring-primary/20",
        )}
@ -50,17 +59,127 @@ function WorkspaceIcon({
  );
 }

-function SettingsRailButton() {
-  const { openSettingsModal } = useSettingsModal();
+function UserAvatar({ name, avatarUrl }: { name: string; avatarUrl?: string | null }) {
+  const initial = name.charAt(0).toUpperCase();
+
+  if (avatarUrl) {
+    return <img alt={name} className="size-full object-cover" src={avatarUrl} />;
+  }
+
  return (
-    <button
-      aria-label="Settings"
-      className="inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-border bg-card text-muted-foreground transition-all hover:bg-accent hover:text-foreground cursor-pointer"
-      title="Settings"
-      onClick={() => openSettingsModal()}
-    >
-      <Settings className="size-[18px]" />
-    </button>
+    <span className="flex size-full items-center justify-center bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400 text-[12px] font-bold text-white">
+      {initial}
+    </span>
+  );
+}
+
+function SettingsRailButton() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { openSettingsModal } = useSettingsModal();
+  const { me } = useAuth();
+
+  const userName = me?.display_name || me?.username || "User";
+  const userHandle = me?.username ? `@${me.username}` : "Personal account";
+
+  const handleLogout = () => {
+    void client.authLogout().finally(() => {
+      window.location.href = "/";
+    });
+  };
+
+  return (
+    <DropdownMenu onOpenChange={setIsOpen}>
+      <div className="group relative">
+        <DropdownMenuTrigger
+          render={
+            <button
+              aria-label="Account menu"
+              className="inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-xl border border-border bg-card p-1 transition-[background-color,border-color,box-shadow] duration-200 hover:bg-accent hover:shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+              title="Account menu"
+              type="button"
+            />
+          }
+        >
+          <span className="size-7 overflow-hidden rounded-full ring-1 ring-black/[0.06] dark:ring-white/[0.06]">
+            <UserAvatar avatarUrl={me?.avatar_url} name={userName} />
+          </span>
+        </DropdownMenuTrigger>
+
+        <div
+          className={cn(
+            "absolute top-1/2 -right-2.5 -translate-y-1/2 transition-opacity duration-200",
+            isOpen ? "opacity-100" : "opacity-0 group-hover:opacity-60",
+          )}
+        >
+          <svg
+            aria-hidden="true"
+            className={cn(
+              "transition-[color,transform] duration-200",
+              isOpen
+                ? "scale-110 text-primary"
+                : "text-muted-foreground/50 group-hover:text-muted-foreground",
+            )}
+            fill="none"
+            height="20"
+            viewBox="0 0 12 24"
+            width="10"
+          >
+            <path
+              d="M2 4C6 8 6 16 2 20"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeWidth="1.5"
+            />
+          </svg>
+        </div>
+
+        <DropdownMenuContent
+          align="end"
+          className="w-64 origin-bottom-left rounded-2xl border border-border bg-popover/95 p-2 text-popover-foreground shadow-xl shadow-foreground/5 backdrop-blur-sm"
+          side="right"
+          sideOffset={12}
+        >
+          <div className="flex items-center gap-3 rounded-xl p-3">
+            <div className="size-10 shrink-0 overflow-hidden rounded-full ring-1 ring-black/[0.06] dark:ring-white/[0.06]">
+              <UserAvatar avatarUrl={me?.avatar_url} name={userName} />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="truncate text-sm font-medium leading-tight tracking-tight text-foreground">
+                {userName}
+              </div>
+              <div className="truncate text-xs leading-tight tracking-tight text-muted-foreground">
+                {userHandle}
+              </div>
+            </div>
+          </div>
+
+          <DropdownMenuSeparator className="my-2 bg-gradient-to-r from-transparent via-zinc-200 to-transparent dark:via-zinc-800" />
+
+          <DropdownMenuItem
+            className="group flex cursor-pointer items-center gap-3 rounded-xl border border-transparent p-3 transition-[background-color,border-color,box-shadow] duration-200 hover:border-border hover:bg-accent hover:shadow-sm"
+            onClick={() => window.setTimeout(() => openSettingsModal(), 0)}
+          >
+            <Settings className="size-4 text-muted-foreground transition-colors group-hover:text-foreground" />
+            <span className="text-sm font-medium leading-tight tracking-tight text-foreground transition-colors group-hover:text-foreground">
+              Settings
+            </span>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator className="my-2 bg-gradient-to-r from-transparent via-zinc-200 to-transparent dark:via-zinc-800" />
+
+          <DropdownMenuItem
+            className="group flex cursor-pointer items-center gap-3 rounded-xl border border-transparent bg-destructive/10 p-3 transition-[background-color,border-color,box-shadow] duration-200 hover:border-destructive/30 hover:bg-destructive/15 hover:shadow-sm"
+            onClick={handleLogout}
+          >
+            <LogOut className="size-4 text-destructive transition-colors" />
+            <span className="text-sm font-medium leading-tight text-destructive">
+              Logout
+            </span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </div>
+    </DropdownMenu>
  );
 }

@ -76,7 +195,7 @@ function RailButton({
  return (
    <Link
      aria-label={label}
-      className="inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-border bg-card text-muted-foreground transition-all hover:bg-accent hover:text-foreground"
+      className="inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-border bg-card text-muted-foreground transition-[background-color,color,border-color] hover:bg-accent hover:text-foreground"
      title={label}
      to={to}
    >
@ -136,7 +255,7 @@ export function WorkspaceRail() {
        <CreateWorkspaceDialog>
          <Button
            aria-label="Create workspace"
-            className="size-9 rounded-xl border-border bg-card text-muted-foreground transition-all hover:bg-accent hover:text-foreground"
+            className="size-9 rounded-xl border-border bg-card text-muted-foreground transition-[background-color,color,border-color] hover:bg-accent hover:text-foreground"
            size="icon"
            variant="outline"
          >
--- a/src/components/shell/workspace-sidebar.tsx
+++ b/src/components/shell/workspace-sidebar.tsx
@ -1,5 +1,5 @@
 import { useMemo, useState, createContext, useContext } from "react";
-import { Link, Outlet, useLocation, useParams } from "react-router";
+import { Link, Outlet, useLocation, useParams, useSearchParams } from "react-router";
 import {
  Bell,
  ChevronDown,
@ -101,9 +101,9 @@ function ChannelLink({
  return (
    <Link
      className={cn(
-        "group flex h-[32px] items-center gap-2 rounded-lg px-2.5 text-[13px] transition-all duration-150",
+        "group flex h-[36px] items-center gap-2 rounded-lg px-2.5 text-[13px] transition-[background-color,color,box-shadow] duration-150",
        active
-          ? "bg-primary/[0.08] font-semibold text-foreground shadow-[inset_0_0_0_1px_rgba(var(--color-primary),0.06)]"
+          ? "bg-primary/[0.08] font-semibold text-foreground ring-1 ring-primary/10"
          : "text-muted-foreground/70 hover:bg-accent/50 hover:text-foreground",
      )}
      to={to}
@ -256,14 +256,15 @@ function WorkspaceSidebar() {
      {/* Header */}
      <header className="flex h-[48px] shrink-0 items-center gap-2.5 border-b border-border px-4">
        <WorkspaceAvatar workspace={currentWorkspace} />
-        <button className="flex min-w-0 flex-1 items-center gap-1.5 text-left">
+        <button aria-label="Workspace menu" className="flex min-w-0 flex-1 items-center gap-1.5 rounded-lg text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30" type="button">
          <span className="truncate text-sm font-semibold text-foreground">
            {currentWorkspace?.name ?? projectName}
          </span>
          <ChevronDown className="size-3.5 shrink-0 text-muted-foreground/40" />
        </button>
        <Button
-          className="size-7 text-muted-foreground/30 hover:bg-accent/50 hover:text-muted-foreground"
+          aria-label="Search workspace"
+          className="size-8 text-muted-foreground/30 hover:bg-accent/50 hover:text-muted-foreground"
          size="icon"
          variant="ghost"
        >
@ -315,7 +316,7 @@ function WorkspaceSidebar() {
              onCreated={refreshChannels}
              workspaceId={workspaceId}
            >
-              <div className="mt-1.5 flex h-[32px] w-full cursor-pointer items-center gap-2 rounded-md px-2 text-[13px] text-muted-foreground/60 transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground">
+              <div className="mt-1.5 flex h-[36px] w-full cursor-pointer items-center gap-2 rounded-lg px-2 text-[13px] text-muted-foreground/60 transition-[background-color,color] duration-150 hover:bg-accent/50 hover:text-muted-foreground">
                <Plus className="size-[15px] shrink-0" />
                <span>Add channel</span>
              </div>
@ -324,10 +325,10 @@ function WorkspaceSidebar() {
        ) : (
          <>
            <section className="mb-5">
-              <button className="mb-2 flex w-full items-center justify-between px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground/35">
+              <div className="mb-2 flex w-full items-center justify-between px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground/35">
                Workplan
                <ChevronDown className="size-3.5" />
-              </button>
+              </div>
              <nav className="space-y-[1px]">
                <ShellNavLink
                  item={{
@ -446,28 +447,34 @@ function TopBar() {
      <div className="flex items-center gap-1 text-muted-foreground/30">
        <CommandPalette />
        <button
+          aria-label="Open search panel"
          className={cn(
-            "grid size-8 place-items-center rounded-xl transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground/70",
+            "grid size-10 place-items-center rounded-xl transition-[background-color,color] duration-150 hover:bg-accent/50 hover:text-muted-foreground/70",
            panel.showSearch && "bg-accent/50 text-foreground",
          )}
          onClick={panel.toggleSearch}
          title="Search"
+          type="button"
        >
          <Search className="size-[14px]" />
        </button>
        <button
+          aria-label="Open members panel"
          className={cn(
-            "grid size-8 place-items-center rounded-xl transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground/70",
+            "grid size-10 place-items-center rounded-xl transition-[background-color,color] duration-150 hover:bg-accent/50 hover:text-muted-foreground/70",
            panel.showMembers && "bg-accent/50 text-foreground",
          )}
          onClick={panel.toggleMembers}
          title="Members"
+          type="button"
        >
          <Users className="size-[14px]" />
        </button>
        <button
-          className="grid size-8 place-items-center rounded-xl transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground/70"
+          aria-label="Open notifications"
+          className="grid size-10 place-items-center rounded-xl transition-[background-color,color] duration-150 hover:bg-accent/50 hover:text-muted-foreground/70"
          title="Notifications"
+          type="button"
        >
          <Bell className="size-[14px]" />
        </button>
@ -499,7 +506,8 @@ function MembersPanel() {
            </span>
          </div>
          <Button
-            className="size-7 text-muted-foreground/40 hover:bg-accent/50 hover:text-foreground"
+            aria-label="Close members panel"
+            className="size-8 text-muted-foreground/40 hover:bg-accent/50 hover:text-foreground"
            onClick={panel.closeMembers}
            size="icon"
            variant="ghost"
@ -548,6 +556,8 @@ function MembersPanel() {
 /* ------------------------------------------------------------------ */

 export function WorkspaceShell() {
+  const [searchParams] = useSearchParams();
+  const isEmbed = searchParams.get("embed") === "1";
  const [showMembers, setShowMembers] = useState(false);
  const [showSearch, setShowSearch] = useState(false);

@ -597,6 +607,15 @@ export function WorkspaceShell() {
    [showMembers, showSearch, members, membersLoading],
  );

+  // Embed mode: render only the page content, no shell chrome
+  if (isEmbed) {
+    return (
+      <div className="flex h-full flex-col overflow-hidden bg-background">
+        <Outlet />
+      </div>
+    );
+  }
+
  return (
    <NavShell>
      <TooltipProvider delay={300}>