add accout menu to navigation bar

Design-System-Pro · Aug 23, 2024 · c4a4f19 · c4a4f19
1 parent d49b50c
commit c4a4f19
Show file tree

Hide file tree

Showing 17 changed files with 236 additions and 453 deletions.
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -15,7 +15,6 @@
   "dependencies": {
     "@ds-project/api": "workspace:*",
     "@ds-project/auth": "workspace:*",
-    "@ds-project/types": "workspace:*",
     "@ds-project/components": "workspace:*",
     "@ds-project/database": "workspace:*",
     "@hookform/resolvers": "^3.9.0",

diff --git a/apps/dashboard/src/app/(dashboard)/_actions/account-details.action.ts b/apps/dashboard/src/app/(dashboard)/_actions/account-details.action.ts
@@ -0,0 +1,9 @@
+import { createServerClient } from '@ds-project/auth/server';
+
+export async function getEmail() {
+  const supabase = createServerClient();
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+  return session?.user.email;
+}
diff --git a/apps/dashboard/src/app/(dashboard)/layout.tsx b/apps/dashboard/src/app/(dashboard)/layout.tsx
@@ -18,12 +18,17 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   const projects = await api.projects.account();
+  const user = await api.users.current();
 
   return (
     <html lang="en">
       <body className={cn('flex flex-col items-center', inter.className)}>
         <header className="sticky top-0 w-full">
-          <Navigation className="px-2 pt-2" projects={projects} />
+          <Navigation
+            className="px-2 pt-2"
+            projects={projects}
+            email={user?.email ?? 'Account'}
+          />
         </header>
         <main className="flex min-h-screen w-full flex-col items-center py-2">
           {children}

diff --git a/apps/dashboard/src/components/account-menu/acocunt-menu.tsx b/apps/dashboard/src/components/account-menu/acocunt-menu.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Icons,
+  Text,
+} from '@ds-project/components';
+import Link from 'next/link';
+
+interface AccountMenuProps {
+  email: string;
+}
+
+export function AccountMenu({ email }: AccountMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost">
+          <Text size="sm">
+            <span>{email}</span>
+          </Text>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/auth/logout">
+            <Icons.ExitIcon className="mr-2 h-4 w-4" />
+            <span>Log out</span>
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/dashboard/src/components/account-menu/index.ts b/apps/dashboard/src/components/account-menu/index.ts
@@ -0,0 +1 @@
+export * from './acocunt-menu';
diff --git a/apps/dashboard/src/components/navigation/navigation.tsx b/apps/dashboard/src/components/navigation/navigation.tsx
@@ -15,13 +15,15 @@ import Link from 'next/link';
 import { cn } from '@/lib/css';
 import { HomeButton } from '../home-button';
 import type { SelectProjects } from '@ds-project/database/schema';
+import { AccountMenu } from '../account-menu/acocunt-menu';
 
 interface NavigationProps {
   className?: string;
   projects?: Pick<SelectProjects, 'id' | 'name'>[];
+  email: string;
 }
 
-export function Navigation({ className, projects }: NavigationProps) {
+export function Navigation({ className, projects, email }: NavigationProps) {
   return (
     <nav
       className={cn(
@@ -87,6 +89,10 @@ export function Navigation({ className, projects }: NavigationProps) {
           </Link>
         </Button>
       </div>
+
+      <div>
+        <AccountMenu email={email} />
+      </div>
     </nav>
   );
 }
diff --git a/packages/api/src/app-router.ts b/packages/api/src/app-router.ts
@@ -3,9 +3,11 @@ import { githubRouter } from './router/github';
 import { integrationsRouter } from './router/integrations';
 import { projectsRouter } from './router/projects';
 import { resourcesRouter } from './router/resources';
+import { usersRouter } from './router/users';
 import { createTRPCRouter } from './trpc';
 
 export const appRouter = createTRPCRouter({
+  users: usersRouter,
   accounts: accountsRouter,
   integrations: integrationsRouter,
   resources: resourcesRouter,

diff --git a/packages/api/src/router/users.ts b/packages/api/src/router/users.ts
@@ -0,0 +1,11 @@
+import { createTRPCRouter, protectedProcedure } from '../trpc';
+
+export const usersRouter = createTRPCRouter({
+  current: protectedProcedure.query(({ ctx }) => {
+    return ctx.user
+      ? {
+          email: ctx.user.email,
+        }
+      : null;
+  }),
+});
diff --git a/packages/api/src/trpc.ts b/packages/api/src/trpc.ts
@@ -63,6 +63,7 @@ export const createTRPCContext = async (opts: {
     : null;
 
   return {
+    user,
     database,
     token,
     account,
@@ -148,13 +149,14 @@ export const publicProcedure = t.procedure.use(timingMiddleware);
 export const protectedProcedure = t.procedure
   .use(timingMiddleware)
   .use(({ ctx, next }) => {
-    if (!ctx.account) {
+    if (!ctx.account || !ctx.user) {
       throw new TRPCError({ code: 'UNAUTHORIZED' });
     }
 
     return next({
       ctx: {
         ...ctx,
+        user: ctx.user,
         account: ctx.account,
       } as DSContext,
     });

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -32,8 +32,8 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@ds-project/prettier": "workspace:*",
     "@ds-project/eslint": "workspace:*",
+    "@ds-project/prettier": "workspace:*",
     "@ds-project/typescript": "workspace:*",
     "@types/node": "catalog:",
     "@types/react": "^18.2.61",
@@ -54,6 +54,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",

diff --git a/packages/components/src/avatar/avatar.tsx b/packages/components/src/avatar/avatar.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'ds-relative ds-flex ds-h-10 ds-w-10 ds-shrink-0 ds-overflow-hidden ds-rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('ds-aspect-square ds-h-full ds-w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'ds-flex ds-h-full ds-w-full ds-items-center ds-justify-center ds-rounded-full ds-bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/packages/components/src/avatar/index.ts b/packages/components/src/avatar/index.ts
@@ -0,0 +1 @@
+export * from './avatar';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -1,5 +1,6 @@
 export * from './alert';
 export * from './aspect-ratio';
+export * from './avatar';
 export * from './breadcrumb';
 export * from './button';
 export * from './card';
@@ -10,6 +11,7 @@ export * from './input';
 export * from './label';
 export * from './menubar';
 export * from './navigation-menu';
+export * from './popover';
 export * from './select';
 export * from './switch';
 export * from './tabs';

diff --git a/packages/components/src/popover/index.ts b/packages/components/src/popover/index.ts
@@ -0,0 +1 @@
+export * from './popover';
diff --git a/packages/components/src/popover/popover.tsx b/packages/components/src/popover/popover.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '@/lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'ds-z-50 ds-w-72 ds-rounded-md ds-border ds-bg-popover ds-p-4 ds-text-popover-foreground ds-shadow-md ds-outline-none data-[state=open]:ds-animate-in data-[state=closed]:ds-animate-out data-[state=closed]:ds-fade-out-0 data-[state=open]:ds-fade-in-0 data-[state=closed]:ds-zoom-out-95 data-[state=open]:ds-zoom-in-95 data-[side=bottom]:ds-slide-in-from-top-2 data-[side=left]:ds-slide-in-from-right-2 data-[side=right]:ds-slide-in-from-left-2 data-[side=top]:ds-slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/packages/figma-plugin/package.json b/packages/figma-plugin/package.json
@@ -17,7 +17,6 @@
     "@apollo/client": "^3.7.11",
     "@ds-project/api": "workspace:*",
     "@ds-project/components": "workspace:*",
-    "@ds-project/types": "workspace:*",
     "@octokit/core": "^6.1.2",
     "@octokit/request": "^9.1.3",
     "@octokit/types": "^13.5.0",