first attempt at stream sidebar, tasks, and events

2026-06-11 22:38:55 -07:00
parent 9e3a30f74e
commit 1baae790c6
219 changed files with 7463 additions and 809 deletions
@@ -0,0 +1,126 @@
+import { useCallback, useState } from 'react';
+import type { EventProperties } from '@/api/types';
+import { metaKey } from '@/lib/platform';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { KeyHint } from '@/components/key-hint';
+import { toDatetimeLocalValue } from '@/features/particles/event-particle-view';
+
+interface EventComposeStepProps {
+  onCancel: () => void;
+  onSubmit: (properties: EventProperties) => void;
+}
+
+function nextFullHour(): Date {
+  const date = new Date();
+  date.setMinutes(0, 0, 0);
+  date.setHours(date.getHours() + 1);
+  return date;
+}
+
+const dateInputClass =
+  'w-full rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white outline-none [color-scheme:dark] focus:border-white/30';
+
+export function EventComposeStep({
+  onCancel,
+  onSubmit,
+}: EventComposeStepProps) {
+  const [title, setTitle] = useState('');
+  const [startAt, setStartAt] = useState(() =>
+    toDatetimeLocalValue(nextFullHour()),
+  );
+  const [endAt, setEndAt] = useState('');
+  const [notes, setNotes] = useState('');
+
+  const handleSubmit = useCallback(() => {
+    const trimmed = title.trim();
+    if (!trimmed || !startAt) return;
+    onSubmit({
+      title: trimmed,
+      start_at: new Date(startAt),
+      ...(endAt && { end_at: new Date(endAt) }),
+      ...(notes.trim() && { notes: notes.trim() }),
+    });
+  }, [title, startAt, endAt, notes, onSubmit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [onCancel, handleSubmit],
+  );
+
+  return (
+    <div
+      className="absolute inset-0 z-50 flex flex-col bg-black/90 pt-16"
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+    >
+      <div className="mx-auto w-full max-w-sm space-y-4 px-6">
+        <div>
+          <Label className="mb-1 text-xs text-white/50">Event</Label>
+          <Input
+            type="text"
+            autoFocus
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="What's happening?"
+            className="border-white/10 bg-white/5 text-white placeholder-white/30 focus-visible:border-white/30 focus-visible:ring-0"
+          />
+        </div>
+
+        <div className="flex gap-3">
+          <div className="flex-1">
+            <Label className="mb-1 text-xs text-white/50">Starts</Label>
+            <input
+              type="datetime-local"
+              value={startAt}
+              onChange={(e) => setStartAt(e.target.value)}
+              className={dateInputClass}
+            />
+          </div>
+          <div className="flex-1">
+            <Label className="mb-1 text-xs text-white/50">Ends</Label>
+            <input
+              type="datetime-local"
+              value={endAt}
+              min={startAt}
+              onChange={(e) => setEndAt(e.target.value)}
+              className={dateInputClass}
+            />
+          </div>
+        </div>
+
+        <div>
+          <Label className="mb-1 text-xs text-white/50">Notes</Label>
+          <Textarea
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            placeholder="Optional details…"
+            className="min-h-20 border-white/10 bg-white/5 text-white placeholder:text-white/30 focus-visible:border-white/30 focus-visible:ring-0 dark:bg-white/5"
+          />
+        </div>
+      </div>
+
+      <div className="absolute bottom-8 left-0 right-0 flex items-center justify-center gap-4 text-sm text-white/50">
+        <KeyHint keys="Esc" onClick={onCancel} title="Cancel (or press Esc)">
+          cancel
+        </KeyHint>
+        <KeyHint
+          keys={`${metaKey}+Enter`}
+          onClick={handleSubmit}
+          title={`Create event (or press ${metaKey}+Enter)`}
+        >
+          create
+        </KeyHint>
+      </div>
+    </div>
+  );
+}