feat(phase5): calendar channels - events, RSVPs, calendar view

2026-06-30 11:15:40 -04:00
parent 58ce09cc18
commit e65ce54e36
10 changed files with 531 additions and 8 deletions
@@ -0,0 +1,162 @@
+import { useEffect, useMemo, useState } from 'react';
+import { api } from '../lib/api.ts';
+
+interface CalendarEvent {
+  id: string;
+  channel_id: string;
+  creator_id: string;
+  title: string;
+  description: string | null;
+  start_time: string;
+  end_time: string | null;
+  recurrence_rule: string | null;
+  location: string | null;
+  color: string | null;
+  going_count: number;
+  maybe_count: number;
+  no_count: number;
+  user_status: string;
+}
+
+interface CalendarViewProps {
+  channelId: string;
+  channelName: string;
+}
+
+export function CalendarView({ channelId, channelName }: CalendarViewProps) {
+  const [events, setEvents] = useState<CalendarEvent[]>([]);
+  const [date, setDate] = useState(() => new Date());
+  const [loading, setLoading] = useState(false);
+  const [showForm, setShowForm] = useState(false);
+  const [title, setTitle] = useState('');
+  const [start, setStart] = useState('');
+  const [end, setEnd] = useState('');
+  const [description, setDescription] = useState('');
+  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null);
+
+  const monthStart = useMemo(() => new Date(date.getFullYear(), date.getMonth(), 1), [date]);
+  const monthEnd = useMemo(() => new Date(date.getFullYear(), date.getMonth() + 1, 0), [date]);
+  const days: (number | null)[] = useMemo(() => {
+    const startDay = monthStart.getDay();
+    const total = monthEnd.getDate();
+    const arr: (number | null)[] = Array(startDay).fill(null);
+    for (let i = 1; i <= total; i++) arr.push(i);
+    return arr;
+  }, [monthStart, monthEnd]);
+
+  useEffect(() => {
+    const from = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-01T00:00:00Z`;
+    const to = `${date.getFullYear()}-${String(date.getMonth() + 2).padStart(2, '0')}-01T00:00:00Z`;
+    setLoading(true);
+    api.get<CalendarEvent[]>(`/channels/${channelId}/events?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`)
+      .then((data) => setEvents(Array.isArray(data) ? data : []))
+      .finally(() => setLoading(false));
+  }, [channelId, date]);
+
+  const eventsForDay = (day: number) => {
+    const d = new Date(date.getFullYear(), date.getMonth(), day);
+    return events.filter((e) => {
+      const start = new Date(e.start_time);
+      return start.getFullYear() === d.getFullYear() && start.getMonth() === d.getMonth() && start.getDate() === d.getDate();
+    });
+  };
+
+  const handleCreate = async () => {
+    if (!title || !start) return;
+    const payload = { title, start_time: start, end_time: end || undefined, description: description || undefined };
+    const ev = await api.post<CalendarEvent>(`/channels/${channelId}/events`, payload);
+    setEvents((prev) => [...prev, ev]);
+    setShowForm(false);
+    setTitle('');
+    setStart('');
+    setEnd('');
+    setDescription('');
+  };
+
+  const handleRSVP = async (eventId: string, status: 'going' | 'maybe' | 'no') => {
+    await api.post(`/events/${eventId}/rsvp`, { status });
+    setEvents((prev) => prev.map((e) => e.id === eventId ? { ...e, user_status: status } : e));
+  };
+
+  const prevMonth = () => setDate((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+  const nextMonth = () => setDate((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
+
+  return (
+    <div className="flex flex-col h-full bg-gb-bg">
+      <div className="terminal-border border-t-0 border-x-0 px-3 py-2 text-gb-fg-s flex items-center justify-between">
+        <span>○ {channelName}</span>
+        <button onClick={() => setShowForm((p) => !p)} className="text-xs text-gb-fg-f hover:text-gb-orange font-mono">[NEW EVENT]</button>
+      </div>
+      {showForm && (
+        <div className="p-3 border-b border-gb-bg-t space-y-2 font-mono text-xs">
+          <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="title" className="terminal-input w-full" />
+          <input type="datetime-local" value={start} onChange={(e) => setStart(e.target.value)} className="terminal-input w-full" />
+          <input type="datetime-local" value={end} onChange={(e) => setEnd(e.target.value)} className="terminal-input w-full" />
+          <textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="description" className="terminal-input w-full h-16" />
+          <button onClick={handleCreate} disabled={!title || !start} className="px-3 py-1 bg-gb-orange text-gb-bg disabled:opacity-50">[CREATE]</button>
+        </div>
+      )}
+      <div className="p-3 flex items-center justify-between font-mono text-xs">
+        <button onClick={prevMonth} className="text-gb-fg-f hover:text-gb-orange">[&lt;]</button>
+        <span className="text-gb-fg">{date.toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
+        <button onClick={nextMonth} className="text-gb-fg-f hover:text-gb-orange">[&gt;]</button>
+      </div>
+      {loading && <div className="p-3 text-gb-fg-f text-xs font-mono">[loading...]</div>}
+      <div className="flex-1 overflow-y-auto p-3">
+        <div className="grid grid-cols-7 gap-1 text-center text-xs font-mono text-gb-fg-s mb-1">
+          {['S','M','T','W','T','F','S'].map((d) => <div key={d}>{d}</div>)}
+        </div>
+        <div className="grid grid-cols-7 gap-1">
+          {days.map((day, idx) => (
+            <div key={idx} className="min-h-16 border border-gb-bg-t p-1 text-xs">
+              {day !== null && (
+                <>
+                  <div className="text-gb-fg-f font-mono">{day}</div>
+                  {eventsForDay(day).map((ev) => (
+                    <button
+                      key={ev.id}
+                      onClick={() => setSelectedEvent(ev)}
+                      className="w-full text-left mt-1 px-1 py-0.5 truncate text-gb-bg font-mono"
+                      style={{ backgroundColor: ev.color || '#b8bb26' }}
+                    >
+                      {ev.title}
+                    </button>
+                  ))}
+                </>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      {selectedEvent && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gb-bg/90 p-4" onClick={() => setSelectedEvent(null)}>
+          <div className="bg-gb-bg border border-gb-fg-t w-full max-w-sm p-4" onClick={(e) => e.stopPropagation()}>
+            <div className="text-gb-fg font-bold mb-1">{selectedEvent.title}</div>
+            <div className="text-gb-fg-s text-xs font-mono mb-2">
+              {new Date(selectedEvent.start_time).toLocaleString()}
+              {selectedEvent.end_time && ` → ${new Date(selectedEvent.end_time).toLocaleString()}`}
+            </div>
+            {selectedEvent.description && <div className="text-gb-fg-s text-xs mb-2">{selectedEvent.description}</div>}
+            <div className="flex gap-2 text-xs font-mono mb-3">
+              <span className="text-gb-green">going:{selectedEvent.going_count}</span>
+              <span className="text-gb-orange">maybe:{selectedEvent.maybe_count}</span>
+              <span className="text-gb-red">no:{selectedEvent.no_count}</span>
+            </div>
+            <div className="flex gap-2">
+              {(['going','maybe','no'] as const).map((s) => (
+                <button
+                  key={s}
+                  onClick={() => handleRSVP(selectedEvent.id, s)}
+                  className={`px-2 py-1 border ${selectedEvent.user_status === s ? 'bg-gb-orange text-gb-bg border-gb-orange' : 'border-gb-bg-t text-gb-fg-s'}`}
+                >
+                  {s}
+                </button>
+              ))}
+              <button onClick={() => setSelectedEvent(null)} className="ml-auto text-gb-fg-f hover:text-gb-orange">[x]</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -92,7 +92,7 @@ export function ChannelList() {
                      channel.id === activeChannelId ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
                    }`}
                  >
-                    <span className="text-gb-fg-f">{channel.type === 'forum' ? '■' : '#'}</span>
+                    <span className="text-gb-fg-f">{channel.type === 'forum' ? '■' : channel.type === 'calendar' ? '○' : '#'}</span>
                    <span className="truncate flex-1">{channel.name}</span>
                    <span
                      onClick={(e) => { e.stopPropagation(); setSettingsChannel({ id: channel.id, name: channel.name }); }}
@@ -10,6 +10,7 @@ import { MessageSearch } from "./MessageSearch";
 import { ThreadListPanel } from "./ThreadListPanel.tsx";
 import { ThreadPanel } from "./ThreadPanel.tsx";
 import { ForumView } from "./ForumView.tsx";
+import { CalendarView } from "./CalendarView.tsx";
 import { UserProfileModal } from "./UserProfileModal.tsx";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -245,7 +246,9 @@ export function ChatArea() {
          {activeChannel
            ? activeChannel.type === 'forum'
              ? `■ ${activeChannel.name}`
-              : `# ${activeChannel.name}`
+              : activeChannel.type === 'calendar'
+                ? `○ ${activeChannel.name}`
+                : `# ${activeChannel.name}`
            : activeChannelId
              ? `#${activeChannelId}`
              : "[NO CHANNEL SELECTED]"}
@@ -321,6 +324,8 @@ export function ChatArea() {
      <div className="flex flex-1 min-h-0">
        {activeChannel && activeChannel.type === 'forum' && activeChannelId ? (
          <ForumView channelId={activeChannelId} channelName={activeChannel.name} onOpenThread={(t) => setActiveThread(t)} />
+        ) : activeChannel && activeChannel.type === 'calendar' && activeChannelId ? (
+          <CalendarView channelId={activeChannelId} channelName={activeChannel.name} />
        ) : (
          <>
            <div className="flex-1 flex flex-col min-w-0">
@@ -11,7 +11,7 @@ interface ChannelApiResponse {
  id: string;
  server_id: string;
  name: string;
-  type: 'text' | 'voice' | 'forum';
+  type: 'text' | 'voice' | 'forum' | 'calendar';
  category: string;
  position: number;
  slowmode_seconds: number;
@@ -29,7 +29,7 @@ const SLOWMODE_OPTIONS = [

 export function CreateChannelModal({ serverId, onClose }: CreateChannelModalProps) {
  const [name, setName] = useState('');
-  const [type, setType] = useState<'text' | 'voice' | 'forum'>('text');
+  const [type, setType] = useState<'text' | 'voice' | 'forum' | 'calendar'>('text');
  const [category, setCategory] = useState('general');
  const [slowmodeSeconds, setSlowmodeSeconds] = useState(0);
  const [loading, setLoading] = useState(false);
@@ -107,12 +107,13 @@ export function CreateChannelModal({ serverId, onClose }: CreateChannelModalProp
            <label className="text-xs text-gb-fg-f block mb-1">TYPE:</label>
            <select
              value={type}
-              onChange={(e) => setType(e.target.value as 'text' | 'voice' | 'forum')}
+              onChange={(e) => setType(e.target.value as 'text' | 'voice' | 'forum' | 'calendar')}
              className="terminal-input w-full"
            >
              <option value="text">text</option>
              <option value="voice">voice</option>
              <option value="forum">forum</option>
+              <option value="calendar">calendar</option>
            </select>
          </div>
          <div>
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { api } from '../lib/api.ts';

-export type ChannelType = 'text' | 'voice' | 'forum';
+export type ChannelType = 'text' | 'voice' | 'forum' | 'calendar';

 export interface Channel {
  id: string;
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/components/BotManager.tsx","./src/components/ChannelList.tsx","./src/components/ChannelSettingsModal.tsx","./src/components/ChatArea.tsx","./src/components/CommandManager.tsx","./src/components/ConversationList.tsx","./src/components/CreateChannelModal.tsx","./src/components/CreateServerModal.tsx","./src/components/DMChat.tsx","./src/components/EmojiPicker.tsx","./src/components/ForumView.tsx","./src/components/GiphyPicker.tsx","./src/components/InstallPrompt.tsx","./src/components/InviteModal.tsx","./src/components/JoinServer.tsx","./src/components/JoinServerModal.tsx","./src/components/Layout.tsx","./src/components/LoginForm.tsx","./src/components/MemberContextMenu.tsx","./src/components/MemberList.tsx","./src/components/MemberRoleAssign.tsx","./src/components/MentionDropdown.tsx","./src/components/MentionPopup.tsx","./src/components/MessageSearch.tsx","./src/components/MobileDrawer.tsx","./src/components/MobileNav.tsx","./src/components/NewConversationModal.tsx","./src/components/ReactionBar.tsx","./src/components/ReplyBar.tsx","./src/components/RoleManager.tsx","./src/components/ServerBar.tsx","./src/components/ServerSettingsModal.tsx","./src/components/SlashCommandPopup.tsx","./src/components/ThemeToggle.tsx","./src/components/ThreadListPanel.tsx","./src/components/ThreadPanel.tsx","./src/components/TypingIndicator.tsx","./src/components/UserProfileModal.tsx","./src/components/UserSettings.tsx","./src/components/VoiceChannel.tsx","./src/components/VoiceControls.tsx","./src/components/VoicePanel.tsx","./src/lib/api.ts","./src/lib/usePermissions.ts","./src/stores/auth.ts","./src/stores/bot.ts","./src/stores/channel.ts","./src/stores/conversation.ts","./src/stores/layout.ts","./src/stores/member.ts","./src/stores/message.ts","./src/stores/moderation.ts","./src/stores/permissions.ts","./src/stores/presence.ts","./src/stores/push.ts","./src/stores/role.ts","./src/stores/server.ts","./src/stores/thread.ts","./src/stores/typing.ts","./src/stores/voice.ts","./src/stores/ws.ts"],"version":"5.9.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/components/BotManager.tsx","./src/components/CalendarView.tsx","./src/components/ChannelList.tsx","./src/components/ChannelSettingsModal.tsx","./src/components/ChatArea.tsx","./src/components/CommandManager.tsx","./src/components/ConversationList.tsx","./src/components/CreateChannelModal.tsx","./src/components/CreateServerModal.tsx","./src/components/DMChat.tsx","./src/components/EmojiPicker.tsx","./src/components/ForumView.tsx","./src/components/GiphyPicker.tsx","./src/components/InstallPrompt.tsx","./src/components/InviteModal.tsx","./src/components/JoinServer.tsx","./src/components/JoinServerModal.tsx","./src/components/Layout.tsx","./src/components/LoginForm.tsx","./src/components/MemberContextMenu.tsx","./src/components/MemberList.tsx","./src/components/MemberRoleAssign.tsx","./src/components/MentionDropdown.tsx","./src/components/MentionPopup.tsx","./src/components/MessageSearch.tsx","./src/components/MobileDrawer.tsx","./src/components/MobileNav.tsx","./src/components/NewConversationModal.tsx","./src/components/ReactionBar.tsx","./src/components/ReplyBar.tsx","./src/components/RoleManager.tsx","./src/components/ServerBar.tsx","./src/components/ServerSettingsModal.tsx","./src/components/SlashCommandPopup.tsx","./src/components/ThemeToggle.tsx","./src/components/ThreadListPanel.tsx","./src/components/ThreadPanel.tsx","./src/components/TypingIndicator.tsx","./src/components/UserProfileModal.tsx","./src/components/UserSettings.tsx","./src/components/VoiceChannel.tsx","./src/components/VoiceControls.tsx","./src/components/VoicePanel.tsx","./src/lib/api.ts","./src/lib/usePermissions.ts","./src/stores/auth.ts","./src/stores/bot.ts","./src/stores/channel.ts","./src/stores/conversation.ts","./src/stores/layout.ts","./src/stores/member.ts","./src/stores/message.ts","./src/stores/moderation.ts","./src/stores/permissions.ts","./src/stores/presence.ts","./src/stores/push.ts","./src/stores/role.ts","./src/stores/server.ts","./src/stores/thread.ts","./src/stores/typing.ts","./src/stores/voice.ts","./src/stores/ws.ts"],"version":"5.9.3"}