feat: add personal project list, add project settings, etc

components/containers/navbar.tsx

@@ -15,7 +15,7 @@ import trpc from "~/lib/trpc";
 import { usePageContext } from "~/renderer/context";
 
 const Navbar = () => {
-  const {user, urlPathname } = usePageContext();
+  const { user, urlPathname } = usePageContext();
   const logout = trpc.auth.logout.useMutation({
     onSuccess() {
       window.location.reload();
@@ -46,6 +46,9 @@ const Navbar = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
+                  <DropdownMenuItem asChild>
+                    <Link href="/projects">My Projects</Link>
+                  </DropdownMenuItem>
                   <DropdownMenuItem onClick={() => logout.mutate()}>
                     Logout
                   </DropdownMenuItem>

components/containers/project-card.tsx

@@ -0,0 +1,46 @@
+import Link from "~/renderer/link";
+import type { ProjectSchema } from "~/server/db/schema/project";
+import type { UserSchema } from "~/server/db/schema/user";
+import { Skeleton } from "../ui/skeleton";
+
+type Props = {
+  project: Omit<ProjectSchema, "settings"> & {
+    user: UserSchema;
+  };
+};
+
+const ProjectCard = ({ project }: Props) => {
+  return (
+    <Link
+      key={project.id}
+      href={`/${project.slug}`}
+      className="border border-white/20 hover:border-white/40 rounded-lg transition-colors overflow-hidden"
+    >
+      <div className="w-full aspect-[3/2] bg-gray-900"></div>
+      <div className="py-2 px-3 flex items-center gap-3">
+        <div className="size-8 rounded-full bg-white/80"></div>
+        <div>
+          <p className="text-md truncate">{project.title}</p>
+          <p className="text-xs truncate">{project.user.name}</p>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+const ProjectCardSkeleton = () => (
+  <div>
+    <Skeleton className="w-full aspect-[3/2]" />
+    <div className="py-2 flex items-center gap-3">
+      <Skeleton className="size-8 rounded-full" />
+      <div className="flex-1">
+        <Skeleton className="w-full h-4" />
+        <Skeleton className="w-full h-4 mt-2" />
+      </div>
+    </div>
+  </div>
+);
+
+ProjectCard.Skeleton = ProjectCardSkeleton;
+
+export default ProjectCard;