new header

components/editor/commits.tsx

@@ -12,6 +12,8 @@ import {
 import { Commit } from "@/lib/type";
 import { cn, humanizeNumber } from "@/lib/utils";
 
+// todo: when there is a commit query, highlight the selected commit in the list.
+
 export const Commits = function ({ commits }: { commits?: Commit[] }) {
   const searchParams = useSearchParams();
   const commitParam = searchParams.get("commit");
@@ -65,14 +67,8 @@ export const Commits = function ({ commits }: { commits?: Commit[] }) {
     <Popover open={open} onOpenChange={setOpen}>
       <form>
         <PopoverTrigger asChild>
-          <Button variant={open ? "default" : "bordered"} size="xs">
+          <Button variant={open ? "default" : "ghost"} size="icon-xs">
             <HistoryIcon className="size-3.5" />
-            <span>
-              History <span className="max-lg:hidden">version</span>
-            </span>
-            <span className="py-0.5 px-1 text-[10px] flex items-center justify-center rounded font-semibold bg-accent text-primary font-mono">
-              {humanizeNumber(commits ? commits.length : 0)}
-            </span>
           </Button>
         </PopoverTrigger>
         <PopoverContent

components/editor/header.tsx

@@ -22,6 +22,7 @@ import { UserMenu } from "@/components/user-menu";
 import { useProject } from "@/components/projects/useProject";
 import { cn } from "@/lib/utils";
 import { Commits } from "./commits";
+import { ProjectSettings } from "./project-settings";
 
 export function AppEditorHeader({
   currentActivity,
@@ -65,25 +66,7 @@ export function AppEditorHeader({
           mobileTab !== "left-sidebar" ? "max-lg:hidden" : "max-lg:w-full!"
         )}
       >
-        <Button variant="ghost" className="pl-2.5! pr-3! py-1.5! h-auto!">
-          <Image
-            src="/logo.svg"
-            alt="DeepSite"
-            width={100}
-            height={100}
-            className="size-8"
-          />
-          <div className="flex flex-col -space-y-1 items-start">
-            <p className="text-sm font-bold text-primary">
-              {project?.cardData?.title ?? "New DeepSite website"}{" "}
-              {project?.cardData?.emoji}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              Live preview of your app
-            </p>
-          </div>
-          {/* <ChevronDown /> */}
-        </Button>
+        {project && <ProjectSettings project={project} />}
         <div className="flex items-center justify-end gap-2 max-lg:hidden">
           {(project?.commits?.length ?? 0) > 0 && (
             <Commits commits={project?.commits} />

components/editor/project-settings.tsx

@@ -0,0 +1,120 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+import { Sun, Moon, Settings, Contrast, Check } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { ChevronDown, ChevronLeft, Edit } from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { ProjectWithCommits } from "@/actions/projects";
+import { cn } from "@/lib/utils";
+import ProIcon from "@/assets/pro.svg";
+import { useParams } from "next/navigation";
+
+export const ProjectSettings = ({
+  project,
+}: {
+  project: ProjectWithCommits;
+}) => {
+  const { repoId, owner } = useParams();
+  const { theme, setTheme } = useTheme();
+  const { data: session } = useSession();
+  return (
+    // <Popover open={open} onOpenChange={setOpen}>
+    //   <PopoverTrigger asChild>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="pl-2.5! pr-3! py-1.5! h-auto!">
+          <Image
+            src="/logo.svg"
+            alt="DeepSite"
+            width={100}
+            height={100}
+            className="size-8"
+          />
+          <div className="flex flex-col -space-y-1 items-start">
+            <p className="text-sm font-bold text-primary">
+              {project?.cardData?.title ?? "New DeepSite website"}{" "}
+              {project?.cardData?.emoji}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Live preview of your app
+            </p>
+          </div>
+          <ChevronDown />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-64" align="start">
+        <DropdownMenuItem>
+          <Link href="/" className="flex items-center gap-1.5">
+            <ChevronLeft className="size-3.5" />
+            Go to Projects
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        {!session?.user?.isPro && (
+          <>
+            <DropdownMenuItem>
+              <Link
+                href="https://huggingface.co/pro"
+                className="flex items-center gap-1.5 bg-linear-to-r from-pink-500 via-green-500 to-amber-500 text-transparent bg-clip-text font-semibold"
+                target="_blank"
+              >
+                <Image alt="Pro" src={ProIcon} className="size-3.5" />
+                Subscribe to Pro
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        <DropdownMenuItem>
+          <Edit className="size-3.5" />
+          Rename the project
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Link
+            href={`https://huggingface.co/${owner}/${repoId}/settings`}
+            className="flex items-center gap-1.5"
+          >
+            <Settings className="size-3.5" />
+            Project settings
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="flex items-center justify-start gap-1.5">
+            <Contrast className="size-3.5" />
+            Appearance
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem onClick={() => setTheme("light")}>
+                Light
+                {theme === "light" && <Check />}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setTheme("dark")}>
+                Dark
+                {theme === "dark" && <Check />}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setTheme("system")}>
+                System
+                {theme === "system" && <Check />}
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

components/ui/dropdown-menu.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({
@@ -17,7 +17,7 @@ function DropdownMenuPortal({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+  );
 }
 
 function DropdownMenuTrigger({
@@ -28,7 +28,7 @@ function DropdownMenuTrigger({
       data-slot="dropdown-menu-trigger"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuContent({
@@ -48,7 +48,7 @@ function DropdownMenuContent({
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  )
+  );
 }
 
 function DropdownMenuGroup({
@@ -56,7 +56,7 @@ function DropdownMenuGroup({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+  );
 }
 
 function DropdownMenuItem({
@@ -65,8 +65,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -74,12 +74,12 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent cursor-pointer! focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -105,7 +105,7 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuRadioGroup({
@@ -116,7 +116,7 @@ function DropdownMenuRadioGroup({
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuRadioItem({
@@ -140,7 +140,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function DropdownMenuLabel({
@@ -148,7 +148,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
@@ -160,7 +160,7 @@ function DropdownMenuLabel({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSeparator({
@@ -173,7 +173,7 @@ function DropdownMenuSeparator({
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuShortcut({
@@ -189,13 +189,13 @@ function DropdownMenuShortcut({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSub({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -204,7 +204,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
@@ -219,7 +219,7 @@ function DropdownMenuSubTrigger({
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
@@ -235,7 +235,7 @@ function DropdownMenuSubContent({
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -254,4 +254,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};

components/user-menu/index.tsx

@@ -1,6 +1,13 @@
 import Link from "next/link";
 import { useSession, signIn, signOut } from "next-auth/react";
-import { ArrowRight, Folder, LogOut, Moon, Plus, Sun } from "lucide-react";
+import {
+  ArrowRight,
+  Check,
+  Contrast,
+  Folder,
+  LogOut,
+  Plus,
+} from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect } from "react";
 import { FaDiscord } from "react-icons/fa6";
@@ -11,15 +18,20 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useProjects } from "@/components/projects/useProjects";
 import { ProjectCard } from "@/components/projects/project-card";
-import { cn, DISCORD_URL } from "@/lib/utils";
+import { DISCORD_URL } from "@/lib/utils";
 import HFLogo from "@/assets/hf-logo.svg";
+import ProIcon from "@/assets/pro.svg";
 
 export function UserMenu() {
   const { data: session, status } = useSession();
@@ -107,6 +119,21 @@ export function UserMenu() {
       <DropdownMenuContent className="w-64" align="start">
         <DropdownMenuLabel>My Account</DropdownMenuLabel>
         <DropdownMenuSeparator />
+        {!session?.user?.isPro && (
+          <>
+            <DropdownMenuItem>
+              <Link
+                href="https://huggingface.co/pro"
+                className="flex items-center gap-1.5 bg-linear-to-r from-pink-500 via-green-500 to-amber-500 text-transparent bg-clip-text font-semibold"
+                target="_blank"
+              >
+                <Image alt="Pro" src={ProIcon} className="size-3.5" />
+                Subscribe to Pro
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
         <DropdownMenuItem>
           <Link
             href={`https://huggingface.co/${session.user.username}`}
@@ -123,6 +150,28 @@ export function UserMenu() {
             Settings
           </Link>
         </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="flex items-center justify-start gap-1.5">
+            <Contrast className="size-3.5" />
+            Appearance
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem onClick={() => setTheme("light")}>
+                Light
+                {theme === "light" && <Check />}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setTheme("dark")}>
+                Dark
+                {theme === "dark" && <Check />}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setTheme("system")}>
+                System
+                {theme === "system" && <Check />}
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
         <>
           <DropdownMenuSeparator />
           <DropdownMenuLabel>Projects</DropdownMenuLabel>
@@ -170,61 +219,27 @@ export function UserMenu() {
             </div>
           )}
         </>
-        <>
-          <DropdownMenuSeparator />
-          <DropdownMenuLabel>Social</DropdownMenuLabel>
-          <DropdownMenuItem>
-            <Link
-              href={DISCORD_URL}
-              target="_blank"
-              className="flex items-center justify-start gap-2"
-            >
-              <FaDiscord className="size-4 text-indigo-500" />
-              Discord
-            </Link>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <Link
-              href="https://huggingface.co/enzostvs"
-              target="_blank"
-              className="flex items-center justify-start gap-2"
-            >
-              <Image src={HFLogo} alt="HF" className="size-4" />
-              Hugging Face
-            </Link>
-          </DropdownMenuItem>
-        </>
         <DropdownMenuSeparator />
-        <DropdownMenuLabel>Theme</DropdownMenuLabel>
-        <div className="flex items-center justify-between gap-2 px-2 pb-2.5">
-          <Button
-            variant="outline"
-            size="icon-xs"
-            onClick={() => setTheme("light")}
-            className={cn(
-              "flex-1",
-              theme === "light" && "border-amber-300! bg-amber-500/10!"
-            )}
+        <DropdownMenuItem>
+          <Link
+            href={DISCORD_URL}
+            target="_blank"
+            className="flex items-center justify-start gap-2"
           >
-            <Sun
-              className={cn("size-3.5", theme === "light" && "text-amber-500")}
-            />
-          </Button>
-          <Button
-            variant="outline"
-            size="icon-xs"
-            onClick={() => setTheme("dark")}
-            className={cn(
-              "flex-1",
-              theme === "dark" && "border-indigo-500/50! bg-indigo-500/20!"
-            )}
+            <FaDiscord className="size-4" />
+            Discord
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Link
+            href="https://huggingface.co/enzostvs"
+            target="_blank"
+            className="flex items-center justify-start gap-2"
           >
-            <Moon
-              className={cn("size-3.5", theme === "dark" && "text-indigo-500")}
-            />
-          </Button>
-        </div>
-        <DropdownMenuSeparator />
+            <Image src={HFLogo} alt="HF" className="size-4 grayscale" />
+            Hugging Face
+          </Link>
+        </DropdownMenuItem>
         <DropdownMenuItem onClick={handleSignOut}>
           <LogOut className="size-4" />
           Sign out

lib/auth.ts

@@ -24,28 +24,28 @@ export const authConfig = {
           id: profile.sub,
           name: profile.name || profile.preferred_username,
           username: profile.preferred_username,
-          email: profile.email,
           image: profile.picture,
+          isPro: profile.isPro || false,
         };
       },
     },
   ],
   callbacks: {
     async jwt({ token, account, user }) {
-      // Persist the OAuth access_token and user info to the token right after signin
       if (account) {
         token.accessToken = account.access_token;
       }
       if (user) {
         token.username = user.username;
+        token.isPro = user.isPro;
       }
       return token;
     },
     async session({ session, token }) {
-      // Send properties to the client, like an access_token from a provider
       session.accessToken = token.accessToken as string;
       if (session.user) {
         session.user.username = token.username as string;
+        session.user.isPro = token.isPro as boolean;
       }
       return session;
     },

next-auth.d.ts

@@ -3,10 +3,12 @@ import NextAuth, { DefaultSession } from "next-auth";
 declare module "next-auth" {
   interface Session {
     accessToken?: string;
+    isPro?: boolean;
   }
-  
+
   interface User {
     username?: string;
+    isPro?: boolean;
   }
 }
 
@@ -14,6 +16,6 @@ declare module "next-auth/jwt" {
   interface JWT {
     accessToken?: string;
     username?: string;
+    isPro?: boolean;
   }
 }
-