feat(Events): add tooltip for explaining joined at timestamp

simonknittel · Feb 2, 2025 · 1a608b0 · 1a608b0
1 parent 9fcade0
commit 1a608b0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/app/src/app/api/scrape-discord-events/route.ts b/app/src/app/api/scrape-discord-events/route.ts
@@ -4,7 +4,6 @@ import { getEvents } from "@/discord/utils/getEvents";
 import { getEventUsers } from "@/discord/utils/getEventUsers";
 import type { eventSchema } from "@/discord/utils/schemas";
 import { env } from "@/env";
-import { log } from "@/logging";
 import { publishNotification } from "@/pusher/utils/publishNotification";
 import { getTracer } from "@/tracing/utils/getTracer";
 import { SpanStatusCode } from "@opentelemetry/api";
@@ -22,9 +21,6 @@ export async function POST(request: NextRequest) {
 
     const { data: events } = await getEvents();
 
-    void log.info("Scraping Discord events", {
-      events: events.map((event) => event.id),
-    });
     for (const event of events) {
       const hash = createHash("md5");
       hash.update(

diff --git a/app/src/events/components/ParticipantsTab.tsx b/app/src/events/components/ParticipantsTab.tsx
@@ -9,10 +9,12 @@ import { getDiscordAvatar } from "@/discord/utils/getDiscordAvatar";
 import { type getEvent } from "@/discord/utils/getEvent";
 import type { memberSchema, userSchema } from "@/discord/utils/schemas";
 import type { Entity } from "@prisma/client";
+import * as Tooltip from "@radix-ui/react-tooltip";
 import clsx from "clsx";
 import Image from "next/image";
 import { Suspense } from "react";
 import {
+  FaInfoCircle,
   FaSortAlphaDown,
   FaSortAlphaUp,
   FaSortNumericDown,
@@ -21,7 +23,7 @@ import {
 import type { z } from "zod";
 import { getParticipants } from "../utils/getParticipants";
 
-const GRID_COLS = "grid-cols-[160px_140px_1fr]";
+const GRID_COLS = "grid-cols-[160px_160px_1fr]";
 
 type Props = Readonly<{
   className?: string;
@@ -120,7 +122,7 @@ export const ParticipantsTab = async ({
         <h2 className="font-bold mb-4">Spynet ({spynetCitizen.length})</h2>
 
         {spynetCitizen.length > 0 ? (
-          <table>
+          <table className="w-full min-w-[720px]">
             <thead>
               <tr
                 className={clsx(
@@ -144,7 +146,7 @@ export const ParticipantsTab = async ({
                   </Link>
                 </th>
 
-                <th>
+                <th className="flex items-center gap-2">
                   <Link
                     href={`?${joinedAtSearchParams.toString()}`}
                     className="flex items-center gap-2 cursor-pointer select-none hover:text-neutral-300 whitespace-nowrap"
@@ -157,6 +159,22 @@ export const ParticipantsTab = async ({
                       <FaSortNumericUp />
                     )}
                   </Link>
+
+                  <Tooltip.Provider delayDuration={300}>
+                    <Tooltip.Root>
+                      <Tooltip.Trigger className="text-sinister-red-500 hover:underline cursor-help">
+                        <FaInfoCircle />
+                      </Tooltip.Trigger>
+
+                      <Tooltip.Content
+                        className="p-2 text-sm leading-tight max-w-[640px] select-none rounded bg-neutral-600 text-white font-normal"
+                        sideOffset={5}
+                      >
+                        Auf etwa 2 Minuten genau
+                        <Tooltip.Arrow className="fill-neutral-600" />
+                      </Tooltip.Content>
+                    </Tooltip.Root>
+                  </Tooltip.Provider>
                 </th>
 
                 <th