Merge pull request #3 from danicostales/main

jorgeteixe · web-flow · commit 98e4d2460244 · 2026-02-24T23:11:59.000+01:00
Add tag-based schedule filtering, refactor ScheduleCard, and update social links
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -38,6 +38,7 @@ const SOCIAL_MASTODON = 'https://mastodon.social/@gpul_'
 const SOCIAL_BSKY = 'https://bsky.app/profile/gpul.org'
 const SOCIAL_LINKEDIN = 'https://www.linkedin.com/company/gpul'
 const SOCIAL_X = 'https://x.com/gpul_'
+const SOCIAL_INSTAGRAM = 'https://www.instagram.com/gpul_/'
 
 function Header({ now }: { now: Date | null }) {
   return (
@@ -83,7 +84,7 @@ function StayConnected({ wifi }: { wifi: WifiInfo | null }) {
             rel="noreferrer"
             className="text-base md:text-lg font-semibold text-indigo-400 hover:text-indigo-300"
           >
-            discord.gg/catyMZrF
+            {DISCORD_URL.replace(/^https?:\/\//, '')}
           </a>
         </div>
         <div className="flex flex-col gap-1.5">
@@ -146,6 +147,17 @@ function StayConnected({ wifi }: { wifi: WifiInfo | null }) {
                 <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
               </svg>
             </a>
+            <a
+              href={SOCIAL_INSTAGRAM}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-slate-400 hover:text-slate-300 transition-colors"
+              aria-label="Instagram"
+            >
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden>
+                <path d="M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2 16.25v-8.5A5.75 5.75 0 0 1 7.75 2zm0 1.75A4 4 0 0 0 3.75 7.75v8.5a4 4 0 0 0 4 4h8.5a4 4 0 0 0 4-4v-8.5a4 4 0 0 0-4-4h-8.5zm8.9 1.35a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 1.75a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5z" />
+              </svg>
+            </a>
           </div>
         </div>
       </div>
diff --git a/app/routes/schedule.tsx b/app/routes/schedule.tsx
@@ -1,7 +1,7 @@
 import { Link } from 'react-router'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
-import { Clock, MapPin, Tag } from 'lucide-react'
+import { ChevronDown, Clock, Filter, MapPin, Tag } from 'lucide-react'
 import { readItems, readSingleton } from '@directus/sdk'
 import directus from '../lib/directus'
 import {
@@ -49,7 +49,34 @@ function ScheduleDescription({ markdown, className }: { markdown: string; classN
   )
 }
 
-function ScheduleCard({ item, isActive }: { item: TimedScheduleItem; isActive: boolean }) {
+function formatRelativeStartsIn(startDate: Date, now: Date | null): string | null {
+  if (!now) return null
+  const diffMs = startDate.getTime() - now.getTime()
+  const diffMinutes = Math.round(diffMs / 60000)
+  if (diffMinutes <= 0) return null
+  if (diffMinutes < 60) return `Starts in ${diffMinutes} min`
+  const hours = Math.floor(diffMinutes / 60)
+  const minutes = diffMinutes % 60
+  return minutes === 0 ? `Starts in ${hours}h` : `Starts in ${hours}h ${minutes}m`
+}
+
+function statusBadge(status: TimedScheduleItem['status']) {
+  if (status === 'live') {
+    return {
+      label: 'Live',
+      classes: 'text-amber-200 bg-amber-500/15 border-amber-400/50'
+    }
+  }
+  if (status === 'past') {
+    return {
+      label: 'Done',
+      classes: 'text-slate-400 bg-slate-800/80 border-slate-700'
+    }
+  }
+  return null
+}
+
+function ScheduleCard({ item, isActive, now }: { item: TimedScheduleItem; isActive: boolean; now: Date | null }) {
   const startLabel = item.startDate.toLocaleTimeString(undefined, {
     hour: '2-digit',
     minute: '2-digit',
@@ -72,69 +99,50 @@ function ScheduleCard({ item, isActive }: { item: TimedScheduleItem; isActive: b
         : `${durationHours}h ${durationRemainderMinutes}m`
       : `${durationMinutes}m`
 
+  const badge = statusBadge(item.status)
+
   let textClasses = 'text-slate-400'
   let titleClasses = 'text-lg md:text-xl font-semibold'
-  let timeClasses = 'text-sm font-medium'
-  let statusLabel: string | null = null
   let borderClasses = 'border-neutral-800'
-  let liveAccentDot = false
 
   if (item.status === 'live') {
     textClasses = 'text-amber-100'
     titleClasses = 'text-xl md:text-2xl font-semibold text-slate-50'
-    timeClasses = 'text-base font-medium text-amber-200'
-    statusLabel = 'LIVE NOW'
-    borderClasses = 'border-amber-400/80 shadow-[0_0_24px_rgba(250,204,21,0.25)]'
-    liveAccentDot = true
+    borderClasses = 'border-amber-400/70'
   } else if (item.status === 'past') {
     textClasses = 'text-slate-500'
     titleClasses = 'text-lg md:text-xl font-semibold text-slate-500'
-    timeClasses = 'text-sm font-medium text-slate-500'
   } else {
     textClasses = 'text-slate-400'
     titleClasses = 'text-lg md:text-xl font-semibold text-slate-50'
-    timeClasses = 'text-sm font-medium text-slate-400'
   }
 
-  let relativeTimeLabel: string | null = null
-  if (item.status === 'upcoming') {
-    const now = new Date()
-    const diffMs = item.startDate.getTime() - now.getTime()
-    const diffMinutes = Math.round(diffMs / 60000)
-    if (diffMinutes > 0) {
-      if (diffMinutes < 60) {
-        relativeTimeLabel = `Starts in ${diffMinutes} min`
-      } else {
-        const hours = Math.floor(diffMinutes / 60)
-        const minutes = diffMinutes % 60
-        relativeTimeLabel = minutes === 0 ? `Starts in ${hours}h` : `Starts in ${hours}h ${minutes}m`
-      }
-    }
-  }
+  const relativeTimeLabel = item.status === 'upcoming' ? formatRelativeStartsIn(item.startDate, now) : null
 
   return (
     <article
-      className={`rounded-xl border bg-black/80 px-4 py-4 md:px-6 md:py-5 flex flex-col md:flex-row md:gap-6 gap-3 ${borderClasses} ${isActive ? 'shadow-[0_0_30px_rgba(0,0,0,0.4)]' : ''}`}
+      className={`rounded-xl border bg-neutral-900/80 px-4 py-4 md:px-6 md:py-5 flex flex-col md:flex-row md:items-stretch gap-4 md:gap-5 ${borderClasses} ${isActive ? 'bg-neutral-900' : ''}`}
     >
-      <div className="md:w-40 flex flex-col gap-1 border-b border-neutral-800 md:border-b-0 md:border-r md:pr-4 md:pb-0 pb-2 text-xs text-slate-400 shrink-0">
-        <div className="flex flex-wrap items-baseline gap-2">
-          <span className="inline-flex items-center gap-1.5">
-            <Clock className="h-3.5 w-3.5 text-slate-500 shrink-0" />
-            <span className="tabular-nums">{startLabel}</span>
-            <span className="tabular-nums text-slate-500">{durationLabel}</span>
-          </span>
-          <span className="tabular-nums text-slate-500">→ {endLabel}</span>
-        </div>
-        <div className="flex flex-col gap-0.5 text-[11px]">
-          <span className="inline-flex items-center gap-1.5">
-            <MapPin className="h-3 w-3 text-slate-600 shrink-0" />
-            <span className="truncate max-w-[200px] md:max-w-36">{item.location}</span>
-          </span>
-          {relativeTimeLabel ? <span>{relativeTimeLabel}</span> : null}
-        </div>
+      <div className="w-full md:w-44 md:shrink-0 md:pr-5 border-b border-neutral-800 pb-2 md:border-b-0 md:border-r md:pb-0 text-xs text-slate-400 flex flex-col gap-1.5">
+        <span className="inline-flex items-center gap-1.5 tabular-nums text-slate-300">
+          <Clock className="h-3.5 w-3.5 text-slate-500 shrink-0" />
+          {startLabel} → {endLabel} <span className="ml-1 text-slate-500">({durationLabel})</span>
+        </span>
+        <span className="inline-flex items-center gap-1.5 min-w-0 text-slate-400">
+          <MapPin className="h-3 w-3 text-slate-600 shrink-0" />
+          <span className="truncate">{item.location}</span>
+        </span>
+        {relativeTimeLabel ? <span className="text-slate-500">{relativeTimeLabel}</span> : null}
       </div>
       <div className="flex-1 min-w-0 flex flex-col gap-2">
-        <div className="flex flex-wrap items-baseline gap-2">
+        <div className="flex flex-wrap items-center gap-2">
+          {badge ? (
+            <span
+              className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] ${badge.classes}`}
+            >
+              {badge.label}
+            </span>
+          ) : null}
           <h3 className={titleClasses}>{item.title}</h3>
           {item.tags && item.tags.length ? (
             <div className="flex flex-wrap items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-slate-500">
@@ -145,12 +153,10 @@ function ScheduleCard({ item, isActive }: { item: TimedScheduleItem; isActive: b
         </div>
         {item.description ? <ScheduleDescription markdown={item.description} className={textClasses} /> : null}
         <div className="mt-1 flex items-center justify-end gap-3 text-xs text-slate-500">
-          {statusLabel ? (
+          {item.status === 'live' ? (
             <span className="inline-flex items-center gap-2 text-[11px] font-bold text-amber-300 shrink-0">
-              {liveAccentDot ? (
-                <span className="h-1.5 w-1.5 rounded-full bg-amber-400 shadow-[0_0_10px_rgba(250,204,21,0.9)] animate-pulse" />
-              ) : null}
-              <span>{statusLabel}</span>
+              <span className="h-1.5 w-1.5 rounded-full bg-amber-400" />
+              <span>LIVE NOW</span>
             </span>
           ) : null}
         </div>
@@ -162,8 +168,49 @@ function ScheduleCard({ item, isActive }: { item: TimedScheduleItem; isActive: b
 export default function Schedule() {
   const [data, setData] = useState<ScheduleData>({ schedule: [], hacking: null })
   const [isLoading, setIsLoading] = useState(true)
+  const [selectedTag, setSelectedTag] = useState<string>('all')
+  const [isFilterOpen, setIsFilterOpen] = useState(false)
+  const filterRef = useRef<HTMLDivElement | null>(null)
   const now = useNow(1000)
   const timedSchedule = useMemo(() => buildTimedSchedule(data.schedule, now), [data.schedule, now])
+  const availableTags = useMemo(() => {
+    const tagMap = new Map<string, string>()
+    for (const item of data.schedule) {
+      for (const rawTag of item.tags ?? []) {
+        const label = rawTag.trim()
+        if (!label) continue
+        const key = label.toLowerCase()
+        if (!tagMap.has(key)) tagMap.set(key, label)
+      }
+    }
+    return Array.from(tagMap.entries())
+      .map(([key, label]) => ({ key, label }))
+      .sort((a, b) => a.label.localeCompare(b.label))
+  }, [data.schedule])
+
+  const filteredSchedule = useMemo(() => {
+    if (selectedTag === 'all') return timedSchedule
+    return timedSchedule.filter((item) => item.tags?.some((tag) => tag.trim().toLowerCase() === selectedTag))
+  }, [selectedTag, timedSchedule])
+
+  useEffect(() => {
+    if (selectedTag === 'all') return
+    const exists = availableTags.some((tag) => tag.key === selectedTag)
+    if (!exists) setSelectedTag('all')
+  }, [availableTags, selectedTag])
+
+  useEffect(() => {
+    if (!isFilterOpen) return
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!filterRef.current) return
+      if (event.target instanceof Node && !filterRef.current.contains(event.target)) {
+        setIsFilterOpen(false)
+      }
+    }
+
+    window.addEventListener('mousedown', handlePointerDown)
+    return () => window.removeEventListener('mousedown', handlePointerDown)
+  }, [isFilterOpen])
 
   useEffect(() => {
     let cancelled = false
@@ -190,15 +237,65 @@ export default function Schedule() {
   return (
     <div className="min-h-screen text-slate-50 font-sans flex flex-col">
       <Header now={now} />
-      <main className="flex-1 px-4 md:px-12 py-6 md:py-8 max-w-4xl mx-auto w-full">
-        <h2 className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-500 mb-4">Schedule</h2>
+      <main className="flex-1 px-4 md:px-12 py-6 md:py-8 max-w-5xl mx-auto w-full">
+        <div className="mb-4 flex items-center justify-between gap-3">
+          <h2 className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-500">Schedule</h2>
+          {availableTags.length > 0 ? (
+            <div ref={filterRef} className="relative">
+              <button
+                type="button"
+                onClick={() => setIsFilterOpen((value) => !value)}
+                className="inline-flex items-center gap-2 rounded-md border border-neutral-700 bg-neutral-900 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-300 hover:border-neutral-600"
+                aria-expanded={isFilterOpen}
+                aria-haspopup="menu"
+              >
+                <Filter className="h-3.5 w-3.5" />
+                <span>
+                  {selectedTag === 'all'
+                    ? 'All tags'
+                    : (availableTags.find((tag) => tag.key === selectedTag)?.label ?? 'All tags')}
+                </span>
+                <ChevronDown className={`h-3.5 w-3.5 transition-transform ${isFilterOpen ? 'rotate-180' : ''}`} />
+              </button>
+              {isFilterOpen ? (
+                <div className="absolute right-0 z-20 mt-2 min-w-44 overflow-hidden rounded-lg border border-neutral-700 bg-neutral-900 shadow-lg">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedTag('all')
+                      setIsFilterOpen(false)
+                    }}
+                    className={`block w-full px-3 py-2 text-left text-xs font-medium uppercase tracking-[0.12em] ${selectedTag === 'all' ? 'bg-slate-800 text-slate-100' : 'text-slate-300 hover:bg-neutral-800'}`}
+                  >
+                    All tags
+                  </button>
+                  {availableTags.map((tag) => (
+                    <button
+                      key={tag.key}
+                      type="button"
+                      onClick={() => {
+                        setSelectedTag(tag.key)
+                        setIsFilterOpen(false)
+                      }}
+                      className={`block w-full px-3 py-2 text-left text-xs font-medium uppercase tracking-[0.12em] ${selectedTag === tag.key ? 'bg-indigo-500/20 text-indigo-100' : 'text-slate-300 hover:bg-neutral-800'}`}
+                    >
+                      {tag.label}
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
         <div className="space-y-3">
-          {timedSchedule.map((item) => (
-            <ScheduleCard key={item.id} item={item} isActive={item.status === 'live'} />
+          {filteredSchedule.map((item) => (
+            <ScheduleCard key={item.id} item={item} isActive={item.status === 'live'} now={now} />
           ))}
         </div>
-        {timedSchedule.length === 0 && !isLoading ? (
-          <p className="text-slate-500 py-8">No schedule items yet.</p>
+        {filteredSchedule.length === 0 && !isLoading ? (
+          <p className="text-slate-500 py-8">
+            {selectedTag === 'all' ? 'No schedule items yet.' : 'No schedule items for this tag.'}
+          </p>
         ) : null}
       </main>
       {isLoading ? (
