web: delete dashboards

apps/web/src/components/Card.tsx

@@ -1,20 +1,48 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import type { HtmlProps } from '@/types';
 import { cn } from '@/utils/cn';
+import { MoreHorizontal } from 'lucide-react';
 
 type CardProps = HtmlProps<HTMLDivElement> & {
   hover?: boolean;
 };
 
-export function Card({ children, hover }: CardProps) {
+export function Card({ children, hover, className }: CardProps) {
   return (
     <div
       className={cn(
-        'border border-border rounded',
-        hover &&
-          'transition-all hover:-translate-y-0.5 hover:shadow hover:border-black'
+        'border border-border rounded relative',
+        hover && 'transition-all hover:shadow hover:border-black',
+        className
       )}
     >
       {children}
     </div>
   );
 }
+
+interface CardActionsProps {
+  children: React.ReactNode;
+}
+export function CardActions({ children }: CardActionsProps) {
+  return (
+    <div className="absolute top-2 right-2 z-10">
+      <DropdownMenu>
+        <DropdownMenuTrigger className="h-8 w-8 hover:border rounded justify-center items-center flex">
+          <MoreHorizontal size={16} />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[200px]">
+          <DropdownMenuGroup>{children}</DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export const CardActionsItem = DropdownMenuItem;

apps/web/src/components/navbar/NavbarMenu.tsx

@@ -1,35 +1,46 @@
 import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import { cn } from '@/utils/cn';
 import { strip } from '@/utils/object';
+import type { LinkProps } from 'next/link';
 import Link from 'next/link';
 
 import { NavbarUserDropdown } from './NavbarUserDropdown';
 
+function Item({
+  children,
+  ...props
+}: LinkProps & { children: React.ReactNode }) {
+  return (
+    <Link
+      {...props}
+      className="h-9 items-center flex px-3 leading-none relative [&>div]:hover:opacity-100 [&>div]:hover:ring-1"
+      shallow
+    >
+      <div className="opacity-0 absolute inset-0 transition-all bg-gradient-to-r from-blue-50 to-purple-50 rounded ring-0 ring-purple-900" />
+      <span className="relative">{children}</span>
+    </Link>
+  );
+}
+
 export function NavbarMenu() {
   const params = useOrganizationParams();
   return (
-    <div className={cn('flex gap-6 items-center text-sm', 'max-sm:flex-col')}>
+    <div className={cn('flex gap-1 items-center text-sm', 'max-sm:flex-col')}>
       {params.project && (
-        <Link shallow href={`/${params.organization}/${params.project}`}>
-          Home
-        </Link>
+        <Item href={`/${params.organization}/${params.project}`}>Home</Item>
       )}
       {params.project && (
-        <Link shallow href={`/${params.organization}/${params.project}/events`}>
+        <Item href={`/${params.organization}/${params.project}/events`}>
           Events
-        </Link>
+        </Item>
       )}
       {params.project && (
-        <Link
-          shallow
-          href={`/${params.organization}/${params.project}/profiles`}
-        >
+        <Item href={`/${params.organization}/${params.project}/profiles`}>
           Profiles
-        </Link>
+        </Item>
       )}
       {params.project && (
-        <Link
-          shallow
+        <Item
           href={{
             pathname: `/${params.organization}/${params.project}/reports`,
             query: strip({
@@ -38,7 +49,7 @@ export function NavbarMenu() {
           }}
         >
           Create report
-        </Link>
+        </Item>
       )}
       <NavbarUserDropdown />
     </div>

apps/web/src/components/navbar/NavbarUserDropdown.tsx

@@ -9,20 +9,20 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import { User } from 'lucide-react';
-import { signOut } from 'next-auth/react';
+import { signOut, useSession } from 'next-auth/react';
 import Link from 'next/link';
 
 export function NavbarUserDropdown() {
   const params = useOrganizationParams();
+  const session = useSession();
+  const user = session.data?.user;
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button>
-          <Avatar>
-            <AvatarFallback>CL</AvatarFallback>
-          </Avatar>
-        </button>
+      <DropdownMenuTrigger>
+        <Avatar>
+          <AvatarFallback>{user?.name?.charAt(0) ?? '🤠'}</AvatarFallback>
+        </Avatar>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[200px]">
         <DropdownMenuGroup>

apps/web/src/components/ui/dropdown-menu.tsx

@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:mr-2',
       inset && 'pl-8',
       className
     )}