Merge branch 'source' into new-conf-design--ogs

Author: hasparus

src/app/conf/2023/sessions/[id]/_event_title.ts

@@ -1,4 +1,4 @@
-import { ScheduleSession } from "../../../_components/schedule/session-list"
+import { ScheduleSession } from "@/app/conf/_api/sched-types"
 
 export function getEventTitle(
   event: ScheduleSession,

src/app/conf/2025/components/navbar.tsx

@@ -53,7 +53,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
       <NavbarPlaceholder className="bg-pri-base before:bg-white/30 dark:bg-pri-darker dark:before:bg-blk/40" />
       <header
         className={clsx(
-          "gql-all-anchors-focusable sticky top-0 z-10 w-full border-b border-blk/60 font-mono text-neu-900 antialiased dark:border-white/80",
+          "gql-all-anchors-focusable sticky top-0 z-[100] w-full border-b border-blk/60 font-mono text-neu-900 antialiased dark:border-white/80",
           mobileDrawerOpen && "!border-neu-900 dark:!border-white",
         )}
       >

src/app/conf/2025/components/session-tags.tsx

@@ -21,17 +21,17 @@ export function SessionTags({ session, className, ...rest }: SessionTagsProps) {
       {eventType && (
         <Tag color={eventsColors[session.event_type || ""]}>{eventType}</Tag>
       )}
-      {session.audience && (
+      {session.company && (
         <Tag
-          color={eventsColors[session.audience] || "hsl(var(--color-neu-700))"}
+          color={eventsColors[session.company] || "hsl(var(--color-neu-500))"}
         >
-          {session.audience}
+          {session.company}
         </Tag>
       )}
       {session.event_subtype && (
         <Tag
           color={
-            eventsColors[session.event_subtype] || "hsl(var(--color-sec-base))"
+            eventsColors[session.event_subtype] || "hsl(var(--color-sec-dark))"
           }
         >
           {session.event_subtype}

src/app/conf/2025/components/speaker-tags.tsx

@@ -16,18 +16,17 @@ export function SpeakerTags({
   className?: string
   showEventType?: boolean
 }) {
-  const eventType =
-    showEventType && speakerSessions.get(speaker.username)?.[0]?.event_type
+  const firstTalk = speakerSessions.get(speaker.username)?.[0]
+  let tag = showEventType && firstTalk?.event_subtype
+
+  const tagColor = (tag && eventsColors[tag]) || "hsl(var(--color-sec-dark))"
+  if (tag && tag.includes(" and ")) {
+    tag = tag.replace(" and ", " & ")
+  }
 
   return (
     <div className={clsx("flex basis-0 flex-wrap gap-2", className)}>
-      {eventType && (
-        <Tag color={eventsColors[eventType] || "hsl(var(--color-sec-base))"}>
-          {eventType === "Federation and Composite Schemas"
-            ? "Federation"
-            : eventType}
-        </Tag>
-      )}
+      {tag && <Tag color={tagColor}>{tag}</Tag>}
 
       {speaker._years.length > 1 && (
         <Tag color="hsl(var(--color-neu-500))">

src/app/conf/2025/components/what-to-expect.tsx

@@ -1,6 +1,8 @@
 import clsx from "clsx"
 import { HTMLAttributes } from "react"
 
+import { schedule, speakers } from "../_data"
+
 interface WhatToExpectSectionProps extends HTMLAttributes<HTMLElement> {}
 
 export default function WhatToExpectSection({
@@ -14,16 +16,16 @@ export default function WhatToExpectSection({
     >
       <h3 className="typography-h2 md:flex-1">What to expect</h3>
       <ul className="flex flex-col gap-6 uppercase md:flex-1">
-        <ListItem number="75+" text="talks" />
-        <ListItem number="42" text="sessions" />
+        <ListItem number={schedule.length} text="sessions" />
+        <ListItem number={speakers.length} text="speakers" />
+        <ListItem number="9" text="lightning talks" />
         <ListItem number="7" text="workshops" />
-        <ListItem number="1" text="unique venue" />
       </ul>
     </section>
   )
 }
 
-function ListItem({ number, text }: { number: string; text: string }) {
+function ListItem({ number, text }: { number: string | number; text: string }) {
   return (
     <li className="list-none bg-gradient-to-r from-[#CDF27E] p-6 dark:from-[#507501]">
       <span className="inline-block w-[87px] text-[72px]/none [text-box:trim-both_cap_alphabetic]">

src/app/conf/2025/schedule/[id]/page.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx"
 import { metadata as layoutMetadata } from "@/app/conf/2023/layout"
 
 import { speakers, schedule } from "../../_data"
-import { SchedSpeaker, ScheduleSession } from "../../../2023/types"
+import { ScheduleSession } from "../../../2023/types"
 
 import { findVideo, SessionVideo } from "./session-video"
 import { NavbarPlaceholder } from "../../components/navbar"

src/app/conf/2025/schedule/_components/filters.tsx

@@ -1,36 +1,84 @@
 import clsx from "clsx"
 import { useState } from "react"
-import { Combobox } from "@headlessui/react"
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+  ComboboxButton,
+  Label,
+} from "@headlessui/react"
 
 import { Tag } from "@/app/conf/_design-system/tag"
 import { Button } from "@/app/conf/_design-system/button"
 
 import CloseIcon from "@/app/conf/_design-system/pixelarticons/close.svg?svgr"
 import CaretDownIcon from "@/app/conf/_design-system/pixelarticons/caret-down.svg?svgr"
 import { eventsColors } from "../../utils"
+import { ScheduleSession } from "@/app/conf/_api/sched-types"
+
+export interface FilterCategoryConfig {
+  property: keyof ScheduleSession
+  label: string
+  options: string[]
+  enabledOptions?: Set<string> | null
+}
+
+export const FilterCategoryConfig = {
+  fromFields: (
+    fields: Partial<Record<keyof ScheduleSession, string /* label */>>,
+    scheduleData: ScheduleSession[],
+  ) => {
+    return Object.entries(fields).map(
+      ([field, label]): FilterCategoryConfig => ({
+        property: field as keyof ScheduleSession,
+        label,
+        options: Array.from(
+          new Set(
+            scheduleData.map(
+              session => session[field as keyof ScheduleSession],
+            ),
+          ),
+        ).filter((x): x is string => !!x && typeof x === "string"),
+      }),
+    )
+  },
+}
+
+export type CategoryName = keyof ScheduleSession
+
+export interface FilterStates extends Partial<Record<CategoryName, string[]>> {}
+export const FilterStates = {
+  initial: (fields: Array<keyof ScheduleSession>) =>
+    Object.fromEntries(fields.map(field => [field, []])),
+}
+
 type FiltersProps = {
-  categories: { name: string; options: string[] }[]
+  categories: FilterCategoryConfig[]
   filterState: Record<string, string[]>
+  enabledOptions: Record<string, Set<string> | null>
   onFilterChange: (category: string, newSelectedOptions: string[]) => void
 }
 
 export function Filters({
   categories,
   filterState,
+  enabledOptions,
   onFilterChange,
 }: FiltersProps) {
   return (
     <div className="flex flex-wrap justify-stretch gap-x-2 gap-y-4 pb-10">
       {categories.map(category => (
         <FiltersCombobox
-          key={category.name}
-          label={category.name}
+          key={category.property}
+          label={category.label}
           options={category.options}
-          value={filterState[category.name] || []}
+          enabledOptions={enabledOptions[category.property]}
+          value={filterState[category.property] || []}
           onChange={newSelectedOptions => {
-            onFilterChange(category.name, newSelectedOptions)
+            onFilterChange(category.property, newSelectedOptions)
           }}
-          placeholder={`Any ${category.name.toLowerCase()}`}
+          placeholder={`Any ${category.label.toLowerCase()}`}
           className="flex-1"
         />
       ))}
@@ -69,6 +117,7 @@ export function ResetFiltersButton({
 interface FiltersComboboxProps {
   label: string
   options: string[]
+  enabledOptions: Set<string> | null
   value: string[]
   onChange: (newSelectedOptions: string[]) => void
   placeholder: string
@@ -77,6 +126,7 @@ interface FiltersComboboxProps {
 function FiltersCombobox({
   label,
   options,
+  enabledOptions,
   value,
   onChange,
   placeholder,
@@ -95,12 +145,12 @@ function FiltersCombobox({
     <Combobox immediate multiple value={value} onChange={onChange}>
       <div className={clsx("flex flex-col", className)}>
         {label && (
-          <Combobox.Label className="typography-menu mb-1 block font-mono font-medium uppercase text-neu-900">
+          <Label className="typography-menu mb-1 block font-mono font-medium uppercase text-neu-900">
             {label}
-          </Combobox.Label>
+          </Label>
         )}
         <label className="relative w-full border border-neu-500 bg-neu-0 p-2 focus-within:outline-none focus-within:ring focus-within:ring-neu-300 dark:border-neu-200 dark:focus-within:ring-neu-200">
-          <Combobox.Input
+          <ComboboxInput
             value={query}
             onChange={e => setQuery(e.target.value)}
             className={clsx(
@@ -109,7 +159,7 @@ function FiltersCombobox({
             placeholder={placeholder}
             autoComplete="true"
           />
-          <Combobox.Button
+          <ComboboxButton
             className={clsx(
               "absolute inset-y-0 right-0 flex items-center px-2 focus:outline-none",
             )}
@@ -118,7 +168,7 @@ function FiltersCombobox({
               className="ui-open:rotate-180 size-5 text-neu-400 transition-transform duration-150 group-hover:text-neu-500"
               aria-hidden="true"
             />
-          </Combobox.Button>
+          </ComboboxButton>
           {value.length > 0 && (
             <div className="inset-y-0 left-0 z-[1] mt-1 flex items-center overflow-x-auto pr-8">
               <div className="flex flex-wrap items-center gap-1">
@@ -136,23 +186,27 @@ function FiltersCombobox({
         </label>
 
         <div className="relative">
-          <Combobox.Options
+          <ComboboxOptions
             className={clsx(
               "absolute z-10 -mt-px max-h-60 w-full overflow-auto border border-neu-500 bg-neu-0 p-1 text-base",
             )}
           >
             {filteredOptions.map(option => (
-              <Combobox.Option key={option} value={option}>
+              <ComboboxOption
+                key={option}
+                value={option}
+                disabled={enabledOptions ? !enabledOptions.has(option) : false}
+              >
                 {({ active, selected }) => (
                   <FilterComboboxOption
                     active={active}
                     selected={selected}
                     option={option}
                   />
                 )}
-              </Combobox.Option>
+              </ComboboxOption>
             ))}
-          </Combobox.Options>
+          </ComboboxOptions>
         </div>
       </div>
     </Combobox>
@@ -208,6 +262,7 @@ function FilterComboboxOption({
       className={clsx(
         "typography-body-sm relative flex cursor-default select-none items-center p-1 font-sans",
         active && "bg-neu-100 dark:bg-neu-50",
+        "[[data-disabled]_&]:line-through [[data-disabled]_&]:opacity-40",
       )}
     >
       <CheckboxIcon