ta_data_mas 0.0.2

package/apps/web/src/components/app-sidebar.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import {
+  Home,
+  Table2,
+  ShieldCheck,
+  FolderOpen,
+  Code2,
+  Radio,
+  Building2,
+  ChevronsUpDown,
+  Plus,
+  Check,
+  LogOut,
+  TerminalIcon,
+} from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+} from "@/components/ui/sidebar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { signOut } from "@/features/auth/sign-out";
+import { cn } from "@/lib/utils";
+import { OrganizationWithMeta } from "@apiDatabase/types";
+
+const orgNavItem = { icon: Home, label: "Home", segment: "projects" } as const;
+
+const projectNavItems = [
+  { icon: Table2, label: "Database", segment: "database" },
+  { icon: TerminalIcon, label: "SQL", segment: "sql" },
+  { icon: ShieldCheck, label: "Auth", segment: "auth" },
+  { icon: FolderOpen, label: "Storage", segment: "storage" },
+  { icon: Code2, label: "API", segment: "api" },
+  { icon: Radio, label: "Realtime", segment: "realtime" },
+] as const;
+
+function buildNavHref(
+  orgSlug: string | undefined,
+  projectSlug: string | undefined,
+  segment: string,
+  scope: "org" | "project",
+): string {
+  if (!orgSlug) return "/organizations";
+
+  if (scope === "org") {
+    return `/organizations/${orgSlug}/projects`;
+  }
+
+  if (projectSlug) {
+    return `/organizations/${orgSlug}/${projectSlug}/${segment}`;
+  }
+
+  return `/organizations/${orgSlug}/projects`;
+}
+
+function isNavItemActive(
+  pathname: string,
+  orgSlug: string | undefined,
+  projectSlug: string | undefined,
+  segment: string,
+  scope: "org" | "project",
+): boolean {
+  if (!orgSlug) return false;
+
+  if (scope === "org") {
+    return pathname === `/organizations/${orgSlug}/projects`;
+  }
+
+  if (!projectSlug) return false;
+
+  const base = `/organizations/${orgSlug}/${projectSlug}/${segment}`;
+  return pathname === base || pathname.startsWith(`${base}/`);
+}
+
+function navLinkClass(isActive: boolean) {
+  return cn(
+    "bg-transparent text-muted-foreground shadow-none",
+    "hover:bg-muted/60 hover:text-foreground",
+    isActive && "bg-muted font-medium text-foreground hover:bg-muted",
+  );
+}
+
+interface AppSidebarProps {
+  orgs: OrganizationWithMeta[];
+  user: { email: string; name: string | null };
+}
+
+export function AppSidebar({ orgs, user }: AppSidebarProps) {
+  const pathname = usePathname();
+  const params = useParams<{ slug: string; projectSlug?: string }>();
+  const currentOrg = orgs.find((org) => org.slug === params?.slug) ?? orgs[0];
+  const orgSlug = params?.slug;
+  const projectSlug = params?.projectSlug;
+
+  const homeHref = buildNavHref(
+    orgSlug,
+    projectSlug,
+    orgNavItem.segment,
+    "org",
+  );
+  const isHomeActive = isNavItemActive(
+    pathname,
+    orgSlug,
+    projectSlug,
+    orgNavItem.segment,
+    "org",
+  );
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton
+                  size="lg"
+                  className="data-[state=open]:bg-sidebar-accent"
+                >
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <Building2 size={16} />
+                  </div>
+                  <div className="flex flex-col gap-0.5 leading-none">
+                    <span className="font-semibold">{currentOrg?.name}</span>
+                    <span className="text-xs text-muted-foreground capitalize">
+                      {currentOrg?.role}
+                    </span>
+                  </div>
+                  <ChevronsUpDown className="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-[--radix-popper-anchor-width]"
+                align="start"
+              >
+                {orgs.map((org) => (
+                  <DropdownMenuItem key={org.id} asChild>
+                    <Link
+                      href={`/organizations/${org.slug}/projects`}
+                      className="flex items-center justify-between"
+                    >
+                      <span>{org.name}</span>
+                      {org.slug === params?.slug && <Check size={14} />}
+                    </Link>
+                  </DropdownMenuItem>
+                ))}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                  <Link href="/organizations">All organizations</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link
+                    href="/organizations/new"
+                    className="flex items-center gap-1.5"
+                  >
+                    <Plus size={14} />
+                    New organization
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu className="gap-1 px-0 py-1">
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  asChild
+                  isActive={false}
+                  tooltip={orgNavItem.label}
+                  className={navLinkClass(isHomeActive)}
+                >
+                  <Link href={homeHref}>
+                    <orgNavItem.icon />
+                    <span>{orgNavItem.label}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+
+              <SidebarSeparator className="my-2 group-data-[collapsible=icon]:hidden" />
+
+              {projectNavItems.map(({ icon: Icon, label, segment }) => {
+                const href = buildNavHref(
+                  orgSlug,
+                  projectSlug,
+                  segment,
+                  "project",
+                );
+                const isActive = isNavItemActive(
+                  pathname,
+                  orgSlug,
+                  projectSlug,
+                  segment,
+                  "project",
+                );
+
+                return (
+                  <SidebarMenuItem key={label}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={false}
+                      tooltip={label}
+                      className={navLinkClass(isActive)}
+                    >
+                      <Link href={href}>
+                        <Icon />
+                        <span>{label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton
+                  size="lg"
+                  className="data-[state=open]:bg-sidebar-accent"
+                >
+                  <Avatar className="size-8 rounded-lg">
+                    <AvatarFallback className="rounded-lg">
+                      {(user.name ?? user.email).charAt(0).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex flex-col gap-0.5 leading-none">
+                    <span className="font-semibold">
+                      {user.name ?? "Account"}
+                    </span>
+                    <span className="text-xs text-muted-foreground truncate">
+                      {user.email}
+                    </span>
+                  </div>
+                  <ChevronsUpDown className="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-[--radix-popper-anchor-width]"
+                side="top"
+                align="start"
+              >
+                <DropdownMenuItem asChild>
+                  <Link
+                    href={`/organizations/${orgSlug ?? currentOrg?.slug}/settings/members`}
+                  >
+                    Settings
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  asChild
+                  onSelect={(event) => event.preventDefault()}
+                >
+                  <form action={signOut}>
+                    <button
+                      type="submit"
+                      className="flex w-full items-center gap-1.5 text-destructive text-sm"
+                    >
+                      <LogOut size={14} />
+                      Sign out
+                    </button>
+                  </form>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+
+      <SidebarRail />
+    </Sidebar>
+  );
+}

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

@@ -0,0 +1,63 @@
+"use client";
+
+import { MenuIcon, XIcon } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+export default function Navbar() {
+  const [openMobileMenu, setOpenMobileMenu] = useState(false);
+
+  useEffect(() => {
+    if (openMobileMenu) {
+      document.body.classList.add("max-md:overflow-hidden");
+    } else {
+      document.body.classList.remove("max-md:overflow-hidden");
+    }
+  }, [openMobileMenu]);
+
+  return (
+    <nav
+      className={`flex items-center justify-between w-full px-6 md:px-16 lg:px-24 xl:px-32 py-4 ${openMobileMenu ? "" : "backdrop-blur"}`}
+    >
+      <Link className="flex items-center gap-2 italic font-semibold" href="/">
+        <Image
+          className="h-9 md:h-9.5 w-auto shrink-0 "
+          src="/logo.svg"
+          alt="Logo"
+          width={140}
+          height={40}
+          priority
+          fetchPriority="high"
+        />
+        ta_data_mas
+      </Link>
+      {/* Mobile menu */}
+      <div
+        className={`fixed inset-0 flex flex-col items-center justify-center gap-6 text-lg font-medium bg-white/60 dark:bg-black/40  backdrop-blur-md md:hidden transition duration-300 ${openMobileMenu ? "translate-x-0" : "-translate-x-full"}`}
+      >
+        <button className="italic font-semibold">
+          <a href="/login">Sign in</a>
+        </button>
+        <button
+          className="aspect-square size-10 p-1 items-center justify-center bg-grey-800 hover:bg-grey-800 transition text-black rounded-md flex"
+          onClick={() => setOpenMobileMenu(false)}
+        >
+          <XIcon />
+        </button>
+      </div>
+      <div className="flex items-center gap-4">
+        <button className="hidden md:block hover:bg-slate-100 dark:hover:bg-slate-950 transition px-4 py-2 border border-slate-600 rounded-md italic font-semibold">
+          <a href="/login">Sign in</a>
+        </button>
+
+        <button
+          onClick={() => setOpenMobileMenu(!openMobileMenu)}
+          className="md:hidden"
+        >
+          <MenuIcon size={26} className="active:scale-90 transition" />
+        </button>
+      </div>
+    </nav>
+  );
+}

package/apps/web/src/components/topNav.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import { Check, ChevronsUpDown } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { Project } from "@apiDatabase/types";
+import Link from "next/link";
+
+interface TopNavProps {
+  projects: Project[];
+}
+
+export function TopNav({ projects }: TopNavProps) {
+  const params = useParams<{ slug: string; projectSlug: string }>();
+  const currentProject = projects.find((p) => p.slug === params?.projectSlug);
+
+  console.log("projects", projects);
+
+  return (
+    <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
+      <SidebarTrigger className="-ml-1" />
+      <Separator orientation="vertical" className="mr-2 h-4" />
+
+      {params?.slug && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="gap-1.5 font-normal">
+              <span className="text-sm">
+                {currentProject?.name ?? "Select project"}
+              </span>
+              <ChevronsUpDown size={12} className="text-muted-foreground" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-56">
+            {projects.map((project) => (
+              <DropdownMenuItem key={project.id} asChild>
+                <Link
+                  href={`/organizations/${params.slug}/${project.slug}/database`}
+                  className="flex items-center justify-between"
+                >
+                  <span>{project.name}</span>
+                  {project.slug === params?.projectSlug && (
+                    <Check size={14} className="text-muted-foreground" />
+                  )}
+                </Link>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild>
+              <Link href={`/organizations/${params.slug}/projects`}>
+                All projects
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </header>
+  );
+}

package/apps/web/src/components/ui/avatar.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

package/apps/web/src/components/ui/badge.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import { Slot } from "radix-ui"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/apps/web/src/components/ui/button.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import { Slot } from "radix-ui"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }