(feat): add context menu to call users

(feat): ui changes to invite popup & call ui in general
(feat): make eslint less aggressive
(fix): stop watching button on own screenshares
(qol): update todo

packages/call/src/components/modals/contextMenu.tsx

@@ -0,0 +1,95 @@
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  Slider,
+} from "@tensamin/ui";
+import { User } from "@tensamin/user/context";
+import { useCall } from "../../store";
+import { useState } from "react";
+
+function EmptyCheckboxIndicator({ checked }: { checked: boolean }) {
+  if (checked) {
+    return null;
+  }
+
+  return (
+    <span className="pointer-events-none absolute right-2 size-4 rounded-[4px] border border-current opacity-70" />
+  );
+}
+
+export default function ContextMenu({
+  user,
+  ownId,
+}: {
+  user: User;
+  ownId: number;
+}) {
+  const [muted, setMuted] = useState(false);
+  const [soundboardMuted, setSoundboardMuted] = useState(false);
+  const [serverDeafened, setServerDeafened] = useState(false);
+  const [serverMuted, setServerMuted] = useState(false);
+  const watchedStreamParticipantIds = useCall(
+    (state) => state.watchedStreamParticipantIds,
+  );
+
+  return (
+    <ContextMenuContent className="p-1">
+      {watchedStreamParticipantIds.includes(user.user_id) &&
+      user.user_id !== ownId ? (
+        <ContextMenuItem variant="destructive">Stop Watching</ContextMenuItem>
+      ) : null}
+      <ContextMenuItem>Profile</ContextMenuItem>
+      <ContextMenuItem>Change Nickname</ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem
+        onSelect={(e) => e.preventDefault()}
+        className="flex flex-col items-start pb-2"
+      >
+        <p>Volume</p>
+        <Slider
+          onClick={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+        />
+      </ContextMenuItem>
+      <ContextMenuCheckboxItem
+        checked={muted}
+        onCheckedChange={setMuted}
+        onSelect={(e) => e.preventDefault()}
+        className="flex justify-between"
+      >
+        <p>Mute</p>
+        <EmptyCheckboxIndicator checked={muted} />
+      </ContextMenuCheckboxItem>
+      <ContextMenuCheckboxItem
+        checked={soundboardMuted}
+        onCheckedChange={setSoundboardMuted}
+        onSelect={(e) => e.preventDefault()}
+        className="flex justify-between"
+      >
+        <p>Mute Soundboard</p>
+        <EmptyCheckboxIndicator checked={soundboardMuted} />
+      </ContextMenuCheckboxItem>
+      <ContextMenuCheckboxItem
+        checked={serverDeafened}
+        onCheckedChange={setServerDeafened}
+        onSelect={(e) => e.preventDefault()}
+        className="flex justify-between text-destructive focus:text-destructive"
+      >
+        <p>Server Deaf</p>
+        <EmptyCheckboxIndicator checked={serverDeafened} />
+      </ContextMenuCheckboxItem>
+      <ContextMenuCheckboxItem
+        checked={serverMuted}
+        onCheckedChange={setServerMuted}
+        onSelect={(e) => e.preventDefault()}
+        className="flex justify-between text-destructive focus:text-destructive"
+      >
+        <p>Server Mute</p>
+        <EmptyCheckboxIndicator checked={serverMuted} />
+      </ContextMenuCheckboxItem>
+      <ContextMenuItem variant="destructive">Disconnect</ContextMenuItem>
+    </ContextMenuContent>
+  );
+}