redone player/user structure. player can only be in one lobby; realtime with trpc subscriptions and redis

2025-03-29 19:10:07 +01:00
parent a00116a61d
commit 2db3af2dfc
38 changed files with 819 additions and 423 deletions
@@ -0,0 +1,64 @@
+import Link from "next/link";
+import React from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import Avatar from "@/components/avatar";
+import { Edit, Eye, LogOut } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Player } from "@/server/db/schema";
+import { appRoutes } from "@/config/app.routes";
+
+function UserPopover({ player }: { player: Player }) {
+  const dropdownItemClassName =
+    "focus:bg-border/30 focus:text-white flex items-center gap-1 ";
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Avatar
+          src={player.avatar!}
+          fb={player.displayName!}
+          className="border-border/20 size-10 cursor-pointer border-2"
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="bg-border/30 container-bg text-white">
+        <DropdownMenuLabel className="w-32 truncate overflow-hidden font-bold">
+          {player.displayName}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className={dropdownItemClassName} asChild>
+          <Link href={appRoutes.me}>
+            <Eye className="size-4 text-white" />
+            View Profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem className={dropdownItemClassName} asChild>
+          <Link href={appRoutes.editProfile}>
+            <Edit className="size-4 text-white" />
+            Edit Profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className={cn(
+            dropdownItemClassName,
+            "group focus:border-destructive focus:text-destructive border border-transparent focus:font-bold",
+          )}
+          asChild
+        >
+          <Link href={appRoutes.signOut}>
+            <LogOut className="group-focus:text-destructive size-4 text-white" />
+            Log out
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export default UserPopover;