fix: tighten sharing and shadcn composition

src/modules/calendar/components/calendar-shell.tsx

@@ -17,6 +17,7 @@ import type { CalView } from "@/modules/_core/themes";
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -48,6 +49,10 @@ type EventDraft = {
 type MobileView = "day" | "week" | "agenda";
 
 const DEFAULT_COLOR = "#B85C3C";
+const VISIBILITY_ITEMS = [
+  { label: "Household", value: "household" },
+  { label: "Private", value: "private" },
+];
 
 const VIEW_MAP: Record<CalView, string> = {
   month: "dayGridMonth",
@@ -115,6 +120,10 @@ export function CalendarShell({
     () => eventRows.filter((event) => visibleIds.has(event.calendarId)),
     [eventRows, visibleIds],
   );
+  const calendarSelectItems = useMemo(
+    () => calendarRows.map((calendar) => ({ label: calendar.name, value: calendar.id })),
+    [calendarRows],
+  );
 
   function toggleCalendar(id: string) {
     setVisibleIds((current) => {
@@ -343,6 +352,7 @@ export function CalendarShell({
                 onChange={(event) => updateCalendar(calendar, { color: event.target.value })}
               />
               <Select
+                items={VISIBILITY_ITEMS}
                 value={calendar.visibility}
                 onValueChange={(value) =>
                   updateCalendar(calendar, { visibility: value as "private" | "household" })
@@ -354,8 +364,13 @@ export function CalendarShell({
                   </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="household">Household</SelectItem>
-                  <SelectItem value="private">Private</SelectItem>
+                  <SelectGroup>
+                    {VISIBILITY_ITEMS.map((item) => (
+                      <SelectItem key={item.value} value={item.value}>
+                        {item.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
                 </SelectContent>
               </Select>
               <Button
@@ -391,6 +406,7 @@ export function CalendarShell({
               onChange={(event) => setCalendarColorValue(event.target.value)}
             />
             <Select
+              items={VISIBILITY_ITEMS}
               value={calendarVisibility}
               onValueChange={(value) =>
                 setCalendarVisibilityValue(value as "private" | "household")
@@ -402,8 +418,13 @@ export function CalendarShell({
                 </SelectValue>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="household">Household</SelectItem>
-                <SelectItem value="private">Private</SelectItem>
+                <SelectGroup>
+                  {VISIBILITY_ITEMS.map((item) => (
+                    <SelectItem key={item.value} value={item.value}>
+                      {item.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
               </SelectContent>
             </Select>
           </div>
@@ -444,6 +465,7 @@ export function CalendarShell({
       />
       <Label htmlFor="event-calendar">Calendar</Label>
       <Select
+        items={calendarSelectItems}
         value={selectedEvent.calendarId}
         onValueChange={(value) => setSelectedEvent({ ...selectedEvent, calendarId: value ?? "" })}
       >
@@ -454,11 +476,13 @@ export function CalendarShell({
           </SelectValue>
         </SelectTrigger>
         <SelectContent>
-          {calendarRows.map((calendar) => (
-            <SelectItem key={calendar.id} value={calendar.id}>
-              {calendar.name}
-            </SelectItem>
-          ))}
+          <SelectGroup>
+            {calendarSelectItems.map((calendar) => (
+              <SelectItem key={calendar.value} value={calendar.value}>
+                {calendar.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
         </SelectContent>
       </Select>
       <div className="grid gap-3 sm:grid-cols-2">