feat(note-header): Improve participants and event chips (#676)

Author: ComputelessComputer

apps/desktop/src/components/editor-area/note-header/chips/event-chip.tsx

@@ -6,6 +6,7 @@ import { useHypr } from "@/contexts";
 import { commands as dbCommands } from "@hypr/plugin-db";
 import { Button } from "@hypr/ui/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@hypr/ui/components/ui/popover";
+import { cn } from "@hypr/ui/lib/utils";
 import { useSession } from "@hypr/utils/contexts";
 import { formatRelativeWithDay } from "@hypr/utils/datetime";
 
@@ -30,12 +31,18 @@ export function EventChip({ sessionId }: EventChipProps) {
   return (
     <Popover>
       <PopoverTrigger disabled={!event.data || onboardingSessionId === sessionId}>
-        <div className="flex flex-row items-center gap-2 rounded-md px-2 py-1.5 hover:bg-neutral-100">
+        <div
+          className={cn(
+            "flex flex-row items-center gap-2 rounded-md px-2 py-1.5 hover:bg-neutral-100",
+            !event.data && "opacity-50 cursor-not-allowed",
+            onboardingSessionId === sessionId && "opacity-50 cursor-not-allowed",
+          )}
+        >
           <CalendarIcon size={14} />
           <p className="text-xs">{formatRelativeWithDay(date)}</p>
         </div>
       </PopoverTrigger>
-      <PopoverContent align="start" className="shadow-lg">
+      <PopoverContent align="start" className="shadow-lg w-72">
         <div className="flex flex-col gap-2">
           <div className="font-semibold">{event.data?.name}</div>
           <div className="text-sm text-neutral-600">{event.data?.note}</div>

apps/desktop/src/components/editor-area/note-header/chips/participants-chip/index.tsx

@@ -54,7 +54,7 @@ export function ParticipantsChip({ sessionId }: ParticipantsChipProps) {
         </div>
       </PopoverTrigger>
 
-      <PopoverContent className="shadow-lg" align="start">
+      <PopoverContent className="shadow-lg w-80" align="start">
         <ParticipantsList sessionId={sessionId} />
       </PopoverContent>
     </Popover>

apps/desktop/src/components/editor-area/note-header/chips/participants-chip/participants-list.tsx

@@ -48,7 +48,7 @@ export function ParticipantsList({ sessionId }: ParticipantsListProps) {
   }
 
   return (
-    <div className="flex flex-col gap-3 max-w-[450px]">
+    <div className="flex flex-col gap-3">
       <div className="text-sm font-medium text-neutral-700">Participants</div>
 
       <div className="flex flex-col gap-4 max-h-[40vh] overflow-y-auto custom-scrollbar pr-1">