feat(layout): add header quick actions and user controls

src/app/layouts/SidebarLayout.tsx

@@ -1,20 +1,30 @@
-import { ComponentProps } from 'react';
 import { TeamSlugSync } from 'features/teams/active-team';
+import { ComponentProps } from 'react';
 import { Separator, SidebarInset, SidebarProvider, SidebarTrigger } from 'shared/ui';
 import { AppSidebar } from 'widgets/app-sidebar';
+import { NavUser } from 'widgets/nav-user';
+import { Notifications } from 'widgets/notifications';
+import { QuickCreate } from 'widgets/quick-create';
 
 export function SidebarLayout({ children, ...props }: ComponentProps<typeof SidebarProvider>) {
   return (
     <SidebarProvider {...props}>
       <TeamSlugSync />
       <AppSidebar />
       <SidebarInset className="min-h-screen">
-        <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
-          <SidebarTrigger className="-ml-1" />
-          <Separator
-            orientation="vertical"
-            className="mr-2 self-center! data-[orientation=vertical]:h-6"
-          />
+        <header className="bg-background sticky top-0 z-50 flex h-14 shrink-0 items-center justify-between gap-2 border-b px-4">
+          <div className="flex items-center gap-2">
+            <SidebarTrigger className="-ml-1" />
+            <Separator
+              orientation="vertical"
+              className="self-center! data-[orientation=vertical]:h-6"
+            />
+          </div>
+          <div className="flex items-center gap-4">
+            <QuickCreate />
+            <Notifications />
+            <NavUser />
+          </div>
         </header>
         <div className="h-full overflow-x-hidden">{children}</div>
       </SidebarInset>

src/shared/ui/Item.tsx

@@ -136,7 +136,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
     <p
       data-slot="item-description"
       className={cn(
-        'text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4',
+        'text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-xs leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4',
         className
       )}
       {...props}

src/widgets/nav-user/index.ts

@@ -0,0 +1 @@
+export { NavUser } from './ui/NavUser';

src/widgets/nav-user/ui/NavUser.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { NavUserFallback } from './NavUserFallback';
+
+const NavUserContent = dynamic(() => import('./NavUserContent').then((mod) => mod.NavUserContent), {
+  ssr: false,
+  loading: () => <NavUserFallback />,
+});
+
+export function NavUser() {
+  return <NavUserContent />;
+}

src/widgets/nav-user/ui/NavUserContent.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { UserAvatar, UserQueries } from 'entities/user';
+import { SignOut } from 'features/auth/sign-out';
+import { LogOut, UserRoundIcon } from 'lucide-react';
+import Link from 'next/link';
+import { routes } from 'shared/config';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  SidebarMenuButton,
+} from 'shared/ui';
+
+export function NavUserContent() {
+  const query = useSuspenseQuery(UserQueries.getMe());
+
+  const {
+    email,
+    profile: { avatar, firstName, lastName },
+  } = query.data;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <SidebarMenuButton
+          size="lg"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground size-10 rounded-full p-0.5"
+        >
+          <UserAvatar
+            wrap={{ className: 'size-9' }}
+            src={avatar?.small}
+            alt={firstName}
+            fallback={{ firstName, lastName }}
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+        side="bottom"
+        align="end"
+        sideOffset={4}
+      >
+        <DropdownMenuLabel className="p-0 font-normal">
+          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+            <UserAvatar src={avatar?.small} alt={firstName} fallback={{ firstName, lastName }} />
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-medium">{firstName}</span>
+              <span className="truncate text-xs">{email}</span>
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <Link href={routes.profile.me()}>
+            <DropdownMenuItem>
+              <UserRoundIcon />
+              Мой профиль
+            </DropdownMenuItem>
+          </Link>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <SignOut asChild>
+          <DropdownMenuItem className="text-destructive">
+            <LogOut className="size-4" />
+            Выйти
+          </DropdownMenuItem>
+        </SignOut>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/widgets/nav-user/ui/NavUserFallback.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from 'shared/ui';
+
+export function NavUserFallback() {
+  return <Skeleton className="size-9 shrink-0 rounded-full" />;
+}

src/widgets/notifications/index.ts

@@ -0,0 +1 @@
+export { Notifications } from './ui/Notifications';

src/widgets/notifications/ui/Notifications.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { NotificationsFallback } from './NotificationsFallback';
+
+const NotificationsContent = dynamic(
+  () => import('./NotificationsContent').then((mod) => mod.NotificationsContent),
+  { ssr: false, loading: () => <NotificationsFallback /> }
+);
+
+export function Notifications() {
+  return <NotificationsContent />;
+}

src/widgets/notifications/ui/NotificationsContent.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { Bell } from 'lucide-react';
+import { useState } from 'react';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  Spinner,
+} from 'shared/ui';
+
+const notificationsQueryKey = ['notifications'];
+
+async function getNotifications() {
+  // TODO: Replace mocked request with real notifications endpoint.
+  await new Promise((resolve) => setTimeout(resolve, 400));
+
+  return [];
+}
+
+export function NotificationsContent() {
+  const [open, setOpen] = useState(false);
+  const query = useQuery({
+    queryKey: notificationsQueryKey,
+    queryFn: getNotifications,
+    enabled: open,
+  });
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-10 rounded-full"
+          aria-label="Уведомления"
+        >
+          <Bell className="size-5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-80 rounded-lg p-3">
+        {query.isLoading ? (
+          <div className="text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm">
+            <Spinner className="size-4" />
+            Загрузка уведомлений...
+          </div>
+        ) : (
+          <Empty className="border-0 p-3">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Bell />
+              </EmptyMedia>
+              <EmptyTitle>Уведомлений нет</EmptyTitle>
+              <EmptyDescription>Новые уведомления появятся здесь.</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/widgets/notifications/ui/NotificationsFallback.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from 'shared/ui';
+
+export function NotificationsFallback() {
+  return <Skeleton className="size-10 shrink-0 rounded-full" />;
+}

src/widgets/page-layout/ui/PageLayout.tsx

@@ -18,7 +18,7 @@ export function PageLayout({
   children,
 }: PageLayoutProps) {
   return (
-    <main className="min-h-screen bg-white">
+    <main className="bg-white">
       <div className="mx-auto px-6 py-10 lg:px-8">
         <header>
           <div className="flex items-center gap-3">

src/widgets/quick-create/index.ts

@@ -0,0 +1 @@
+export { QuickCreate } from './ui/QuickCreate';

src/widgets/quick-create/ui/QuickCreate.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useTeamStore } from 'entities/team';
+import { CreateProjectDialog } from 'features/projects/create';
+import { CreateTeamDialog } from 'features/teams/create';
+import { FolderPlus, Plus, UsersRound } from 'lucide-react';
+import { useState } from 'react';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from 'shared/ui';
+
+export function QuickCreate() {
+  const slug = useTeamStore.use.slug();
+  const [open, setOpen] = useState(false);
+  const [createTeamOpen, setCreateTeamOpen] = useState(false);
+  const [createProjectOpen, setCreateProjectOpen] = useState(false);
+
+  return (
+    <div>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            className="size-10 rounded-full"
+            variant="outline"
+            size="icon"
+            aria-label="Быстрое создание"
+          >
+            <Plus className="size-5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+        >
+          <DropdownMenuItem
+            onSelect={(e) => {
+              e.preventDefault();
+              setOpen(false);
+              setCreateTeamOpen(true);
+            }}
+          >
+            <Item className="flex-nowrap p-0">
+              <ItemMedia className="bg-primary/20 rounded-full p-2">
+                <UsersRound className="text-muted-foreground" />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>Команда</ItemTitle>
+                <ItemDescription className="whitespace-nowrap">
+                  Создать новую команду
+                </ItemDescription>
+              </ItemContent>
+            </Item>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={!slug}
+            onSelect={(e) => {
+              e.preventDefault();
+              setOpen(false);
+              setCreateProjectOpen(true);
+            }}
+          >
+            <Item className="flex-nowrap p-0">
+              <ItemMedia className="bg-primary/20 rounded-full p-2">
+                <FolderPlus className="text-muted-foreground" />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>Проект</ItemTitle>
+                <ItemDescription className="whitespace-nowrap">
+                  Создать новый проект
+                </ItemDescription>
+              </ItemContent>
+            </Item>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <CreateTeamDialog dialog={{ open: createTeamOpen, onOpenChange: setCreateTeamOpen }} />
+      <CreateProjectDialog
+        dialog={{ open: createProjectOpen, onOpenChange: setCreateProjectOpen }}
+      />
+    </div>
+  );
+}