feat: compose new stream full flow
This commit is contained in:
talksik
@@ -0,0 +1,31 @@
|
||||
import * as React from "react"
|
||||
import { Checkbox as CheckboxPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
|
||||
>
|
||||
<CheckIcon
|
||||
/>
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
@@ -1,7 +1,11 @@
|
||||
import { useComposeStore } from "@/stores/compose-store";
|
||||
import { useAuthStore } from "@/stores/auth-store";
|
||||
import { useCreateParticle } from "@/hooks/use-create-particle";
|
||||
import { particlePath, toFirestoreChildrenPath } from "@/lib/particle-path";
|
||||
import { RecordingOverlay } from "@/features/compose/recording-overlay";
|
||||
import { TextComposeStep } from "@/features/compose/text-compose-step";
|
||||
import { ConfigureStreamStep } from "@/features/compose/configure-stream-step";
|
||||
import { useCallback } from "react";
|
||||
|
||||
/**
|
||||
* Renders the current compose step as a fullscreen overlay.
|
||||
@@ -19,6 +23,31 @@ export function ComposeOverlay() {
|
||||
const reviewBlob = useComposeStore((s) => s.reviewBlob);
|
||||
const error = useComposeStore((s) => s.error);
|
||||
|
||||
const userEmail = useAuthStore((s) => s.user?.email);
|
||||
const createParticle = useCreateParticle();
|
||||
|
||||
const handleStreamSubmit = useCallback(
|
||||
async (streamName: string, visibleTo: string[]) => {
|
||||
if (!networkId || !userEmail) return;
|
||||
|
||||
const collectionPath = toFirestoreChildrenPath(particlePath(networkId));
|
||||
|
||||
await createParticle.mutateAsync({
|
||||
collectionPath,
|
||||
type: "stream",
|
||||
properties: {
|
||||
name: streamName,
|
||||
status: "open",
|
||||
visible_to: visibleTo,
|
||||
},
|
||||
createdByEmail: userEmail,
|
||||
});
|
||||
|
||||
cancel();
|
||||
},
|
||||
[networkId, userEmail, createParticle, cancel],
|
||||
);
|
||||
|
||||
if (step === "idle") return null;
|
||||
|
||||
return (
|
||||
@@ -42,7 +71,11 @@ export function ComposeOverlay() {
|
||||
/>
|
||||
)}
|
||||
{step === "configuring" && (
|
||||
<ConfigureStreamStep networkId={networkId} onCancel={cancel} />
|
||||
<ConfigureStreamStep
|
||||
networkId={networkId}
|
||||
onCancel={cancel}
|
||||
onSubmit={handleStreamSubmit}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,43 +1,30 @@
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useNetworks } from "@/hooks/use-networks";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Check } from "lucide-react";
|
||||
import { generateRandomName } from "@/lib/random-name";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
|
||||
interface ConfigureStreamStepProps {
|
||||
networkId: string | null;
|
||||
onCancel: () => void;
|
||||
onSubmit: (streamName: string, visibleTo: string[]) => void;
|
||||
}
|
||||
|
||||
export function ConfigureStreamStep({
|
||||
networkId,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
}: ConfigureStreamStepProps) {
|
||||
|
||||
const { data: networks } = useNetworks();
|
||||
const network = networks?.find((n) => n.id === networkId);
|
||||
const members = network?.humans ?? [];
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [name, setName] = useState(() => generateRandomName());
|
||||
const [everyone, setEveryone] = useState(true);
|
||||
const [selectedEmails, setSelectedEmails] = useState<Set<string>>(new Set());
|
||||
// -1 = name input is focused, 0+ = member list index
|
||||
const [focusedIndex, setFocusedIndex] = useState(-1);
|
||||
const nameRef = useRef<HTMLInputElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
nameRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
// Return focus to the name input when navigating back up
|
||||
useEffect(() => {
|
||||
if (focusedIndex === -1) {
|
||||
nameRef.current?.focus();
|
||||
} else {
|
||||
// Blur the input so arrow keys don't move the cursor
|
||||
nameRef.current?.blur();
|
||||
containerRef.current?.focus();
|
||||
}
|
||||
}, [focusedIndex]);
|
||||
|
||||
const toggleMember = useCallback((email: string) => {
|
||||
setSelectedEmails((prev) => {
|
||||
@@ -48,11 +35,15 @@ export function ConfigureStreamStep({
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleSubmit = useCallback(async () => {
|
||||
const buildVisibleTo = useCallback((): string[] => {
|
||||
if (everyone && networkId) return [`network:${networkId}`];
|
||||
return Array.from(selectedEmails).map((e) => `human:${e}`);
|
||||
}, [everyone, networkId, selectedEmails]);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (!name.trim() || !networkId) return;
|
||||
// TODO: create stream particle, then attach recorded/text content
|
||||
onCancel();
|
||||
}, [name, networkId, onCancel]);
|
||||
onSubmit(name.trim(), buildVisibleTo());
|
||||
}, [name, networkId, onSubmit, buildVisibleTo]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
@@ -66,124 +57,105 @@ export function ConfigureStreamStep({
|
||||
if (e.metaKey || e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
} else if (focusedIndex === -1 && name.trim() && members.length > 0) {
|
||||
// Enter in name input → move to member list
|
||||
e.preventDefault();
|
||||
setFocusedIndex(0);
|
||||
}
|
||||
return;
|
||||
|
||||
case "ArrowDown":
|
||||
e.preventDefault();
|
||||
setFocusedIndex((i) => Math.min(i + 1, members.length - 1));
|
||||
return;
|
||||
|
||||
case "ArrowUp":
|
||||
e.preventDefault();
|
||||
setFocusedIndex((i) => Math.max(i - 1, -1));
|
||||
return;
|
||||
|
||||
case " ":
|
||||
if (focusedIndex >= 0) {
|
||||
e.preventDefault();
|
||||
toggleMember(members[focusedIndex].email);
|
||||
}
|
||||
return;
|
||||
}
|
||||
},
|
||||
[onCancel, handleSubmit, focusedIndex, members, name, toggleMember],
|
||||
[onCancel, handleSubmit, members, name, toggleMember],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="absolute inset-0 z-50 flex items-center justify-center bg-black/90"
|
||||
className="absolute inset-0 z-50 flex flex-col bg-black/90 pt-16"
|
||||
onKeyDown={handleKeyDown}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<div className="w-full max-w-sm space-y-4 px-6">
|
||||
<div className="mx-auto w-full max-w-sm space-y-4 px-6">
|
||||
{/* Stream name */}
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">
|
||||
Stream name
|
||||
</label>
|
||||
<input
|
||||
ref={nameRef}
|
||||
<Label className="mb-1 text-xs text-white/50">Stream name</Label>
|
||||
<Input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
setName(e.target.value);
|
||||
setFocusedIndex(-1);
|
||||
}}
|
||||
onFocus={() => setFocusedIndex(-1)}
|
||||
placeholder="Give it a name..."
|
||||
className="w-full rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-white placeholder-white/30 outline-none focus:border-white/30"
|
||||
className="border-white/10 bg-white/5 text-white placeholder-white/30 focus-visible:border-white/30 focus-visible:ring-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Member selection */}
|
||||
{members.length > 0 && (
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">
|
||||
Visible to
|
||||
</label>
|
||||
<div className="space-y-0.5 rounded-md border border-white/10 p-1">
|
||||
{members.map((member, index) => {
|
||||
const isSelected = selectedEmails.has(member.email);
|
||||
const isFocused = focusedIndex === index;
|
||||
const initials = member.email_prefix
|
||||
.slice(0, 2)
|
||||
.toUpperCase();
|
||||
|
||||
return (
|
||||
<button
|
||||
key={member.email}
|
||||
type="button"
|
||||
onClick={() => toggleMember(member.email)}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm transition-colors",
|
||||
isFocused
|
||||
? "bg-white/10 text-white"
|
||||
: "text-white/70 hover:bg-white/5",
|
||||
)}
|
||||
>
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/10 text-[10px] font-medium">
|
||||
{initials}
|
||||
</span>
|
||||
<span className="flex-1 truncate">
|
||||
{member.email_prefix}
|
||||
</span>
|
||||
{isSelected && (
|
||||
<Check className="h-3.5 w-3.5 text-white/70" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{/* Visibility */}
|
||||
<div>
|
||||
<Label className="mb-1 text-xs text-white/50">Visible to</Label>
|
||||
<div className="rounded-md border border-white/10">
|
||||
{/* Everyone in network */}
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => setEveryone((prev) => !prev)}
|
||||
className={cn(
|
||||
"flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors",
|
||||
"text-white/70 hover:bg-white/5",
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={everyone}
|
||||
onCheckedChange={(checked) => setEveryone(checked === true)}
|
||||
tabIndex={-1}
|
||||
className="pointer-events-none"
|
||||
/>
|
||||
<span className="font-medium">Everyone in network</span>
|
||||
</div>
|
||||
|
||||
{/* Per-member selection */}
|
||||
{!everyone && members.length > 0 && (
|
||||
<ScrollArea className="max-h-48">
|
||||
<div className="space-y-0.5 p-1">
|
||||
{members.map((member, index) => {
|
||||
const isSelected = selectedEmails.has(member.email);
|
||||
const initials = member.email_prefix
|
||||
.slice(0, 2)
|
||||
.toUpperCase();
|
||||
|
||||
return (
|
||||
<div
|
||||
key={member.email}
|
||||
role="button"
|
||||
onClick={() => toggleMember(member.email)}
|
||||
className={cn(
|
||||
"flex w-full cursor-pointer items-center gap-2.5 rounded px-3 py-1.5 text-left text-sm transition-colors",
|
||||
"text-white/70 hover:bg-white/5",
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
tabIndex={-1}
|
||||
className="pointer-events-none"
|
||||
/>
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/10 text-[10px] font-medium">
|
||||
{initials}
|
||||
</span>
|
||||
<span className="flex-1 truncate">
|
||||
{member.email_prefix}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keyboard hints */}
|
||||
<div className="absolute bottom-8 flex items-center gap-4 text-sm text-white/50">
|
||||
<div className="absolute bottom-8 left-0 right-0 flex items-center justify-center gap-4 text-sm text-white/50">
|
||||
<span>
|
||||
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
||||
Esc
|
||||
</kbd>{" "}
|
||||
cancel
|
||||
</span>
|
||||
<span>
|
||||
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
||||
↑↓
|
||||
</kbd>{" "}
|
||||
navigate
|
||||
</span>
|
||||
<span>
|
||||
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
||||
Space
|
||||
</kbd>{" "}
|
||||
toggle
|
||||
</span>
|
||||
<span>
|
||||
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
||||
⌘+Enter
|
||||
@@ -191,6 +163,6 @@ export function ConfigureStreamStep({
|
||||
create
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,8 +12,22 @@ import { useParams } from "react-router-dom";
|
||||
*/
|
||||
export function useComposeKeyboard() {
|
||||
const networkId = useParams()["networkId"];
|
||||
const recordingMode = useComposeStore((s) => s.recordingMode);
|
||||
const setMediaStream = useComposeStore((s) => s.setMediaStream);
|
||||
const finishRecording = useComposeStore((s) => s.finishRecording);
|
||||
const setError = useComposeStore((s) => s.setError);
|
||||
const beginRecording = useComposeStore((s) => s.startRecording);
|
||||
const beginTyping = useComposeStore((s) => s.startTyping);
|
||||
const cancel = useComposeStore((s) => s.cancel);
|
||||
const advanceToConfigure = useComposeStore((s) => s.advanceToConfigure);
|
||||
|
||||
const { startRecording, stopRecording, cancelRecording } = useRecorder();
|
||||
const { startRecording, stopRecording, cancelRecording } = useRecorder({
|
||||
mode: recordingMode,
|
||||
onStreamReady: (stream) => setMediaStream(stream),
|
||||
onStreamCleanup: () => setMediaStream(null),
|
||||
onFinish: (blob, durationMs) => finishRecording(blob, durationMs),
|
||||
onError: (message) => setError(message),
|
||||
});
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
@@ -37,11 +51,11 @@ export function useComposeKeyboard() {
|
||||
if (!networkId) return;
|
||||
if (e.key === "`" && !e.repeat) {
|
||||
e.preventDefault();
|
||||
useComposeStore.getState().startRecording(networkId);
|
||||
beginRecording(networkId);
|
||||
startRecording();
|
||||
} else if (e.key === "t" || e.key === "T") {
|
||||
e.preventDefault();
|
||||
useComposeStore.getState().startTyping(networkId);
|
||||
beginTyping(networkId);
|
||||
}
|
||||
break;
|
||||
}
|
||||
@@ -50,7 +64,7 @@ export function useComposeKeyboard() {
|
||||
if (e.key === "q" || e.key === "Q" || e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
cancelRecording();
|
||||
useComposeStore.getState().cancel();
|
||||
cancel();
|
||||
}
|
||||
break;
|
||||
}
|
||||
@@ -59,16 +73,16 @@ export function useComposeKeyboard() {
|
||||
if (e.key === "q" || e.key === "Q" || e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
cancelRecording();
|
||||
useComposeStore.getState().cancel();
|
||||
cancel();
|
||||
} else if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
useComposeStore.getState().advanceToConfigure();
|
||||
advanceToConfigure();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
[networkId, startRecording, cancelRecording],
|
||||
[networkId, startRecording, cancelRecording, beginRecording, beginTyping, cancel, advanceToConfigure],
|
||||
);
|
||||
|
||||
const handleKeyUp = useCallback(
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
import { useComposeStore } from "@/stores/compose-store";
|
||||
import type { RecordingMode } from "@/stores/compose-store";
|
||||
|
||||
const VIDEO_PREFERRED_MIME = "video/webm;codecs=vp9,opus";
|
||||
const VIDEO_FALLBACK_MIME = "video/webm";
|
||||
@@ -17,47 +17,62 @@ function getMediaMime(mode: "video" | "audio"): string {
|
||||
: VIDEO_FALLBACK_MIME;
|
||||
}
|
||||
|
||||
interface UseRecorderOptions {
|
||||
mode: RecordingMode;
|
||||
onStreamReady: (stream: MediaStream) => void;
|
||||
onStreamCleanup: () => void;
|
||||
onFinish: (blob: Blob, durationMs: number) => void;
|
||||
onError: (message: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Manages MediaRecorder lifecycle and writes results to compose-store.
|
||||
*
|
||||
* Does NOT handle uploads or particle creation — that responsibility
|
||||
* belongs to the configure step after the user finalizes stream metadata.
|
||||
* Manages MediaRecorder lifecycle. Pure media utility — knows nothing
|
||||
* about application state. The consumer provides callbacks for all outputs.
|
||||
*/
|
||||
export function useRecorder() {
|
||||
export function useRecorder({
|
||||
mode,
|
||||
onStreamReady,
|
||||
onStreamCleanup,
|
||||
onFinish,
|
||||
onError,
|
||||
}: UseRecorderOptions) {
|
||||
const recorderRef = useRef<MediaRecorder | null>(null);
|
||||
const streamRef = useRef<MediaStream | null>(null);
|
||||
const chunksRef = useRef<Blob[]>([]);
|
||||
const startTimeRef = useRef<number>(0);
|
||||
|
||||
const recordingMode = useComposeStore((s) => s.recordingMode);
|
||||
const setMediaStream = useComposeStore((s) => s.setMediaStream);
|
||||
const setError = useComposeStore((s) => s.setError);
|
||||
const finishRecording = useComposeStore((s) => s.finishRecording);
|
||||
// Refs to avoid stale closures in MediaRecorder event handlers
|
||||
const onStreamCleanupRef = useRef(onStreamCleanup);
|
||||
const onFinishRef = useRef(onFinish);
|
||||
const onErrorRef = useRef(onError);
|
||||
useEffect(() => {
|
||||
onStreamCleanupRef.current = onStreamCleanup;
|
||||
onFinishRef.current = onFinish;
|
||||
onErrorRef.current = onError;
|
||||
});
|
||||
|
||||
const stopTracks = useCallback(() => {
|
||||
streamRef.current?.getTracks().forEach((t) => t.stop());
|
||||
streamRef.current = null;
|
||||
recorderRef.current = null;
|
||||
chunksRef.current = [];
|
||||
setMediaStream(null);
|
||||
}, [setMediaStream]);
|
||||
onStreamCleanupRef.current();
|
||||
}, []);
|
||||
|
||||
const startRecording = useCallback(async () => {
|
||||
try {
|
||||
const constraints =
|
||||
recordingMode === "video"
|
||||
? { video: true, audio: true }
|
||||
: { audio: true };
|
||||
mode === "video" ? { video: true, audio: true } : { audio: true };
|
||||
|
||||
const mediaStream =
|
||||
await navigator.mediaDevices.getUserMedia(constraints);
|
||||
|
||||
streamRef.current = mediaStream;
|
||||
setMediaStream(mediaStream);
|
||||
onStreamReady(mediaStream);
|
||||
chunksRef.current = [];
|
||||
startTimeRef.current = Date.now();
|
||||
|
||||
const mime = getMediaMime(recordingMode);
|
||||
const mime = getMediaMime(mode);
|
||||
const recorder = new MediaRecorder(mediaStream, { mimeType: mime });
|
||||
recorderRef.current = recorder;
|
||||
|
||||
@@ -71,18 +86,18 @@ export function useRecorder() {
|
||||
stopTracks();
|
||||
|
||||
if (blob.size > 0) {
|
||||
finishRecording(blob, durationMs);
|
||||
onFinishRef.current(blob, durationMs);
|
||||
}
|
||||
};
|
||||
|
||||
recorder.start();
|
||||
} catch (err) {
|
||||
stopTracks();
|
||||
setError(
|
||||
onErrorRef.current(
|
||||
err instanceof Error ? err.message : "Failed to start recording",
|
||||
);
|
||||
}
|
||||
}, [recordingMode, setMediaStream, setError, finishRecording, stopTracks]);
|
||||
}, [mode, onStreamReady, stopTracks]);
|
||||
|
||||
const stopRecording = useCallback(() => {
|
||||
if (recorderRef.current?.state === "recording") {
|
||||
|
||||
@@ -1,26 +1,73 @@
|
||||
import { useMemo } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Radio } from "lucide-react";
|
||||
import { useLiveParticleChildren } from "@/hooks/use-particle";
|
||||
import type { ParticlePath } from "@/lib/particle-path";
|
||||
import { parseParticlePath, type ParticlePath } from "@/lib/particle-path";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Small } from "@/components/ui/typography";
|
||||
import ControlsIndicator from "@/features/compose/controls-indicator";
|
||||
import type { Particle, StreamProperties } from "@/api/types";
|
||||
|
||||
function StreamRow({
|
||||
particle,
|
||||
onClick,
|
||||
}: {
|
||||
particle: Particle & { type: "stream"; properties: StreamProperties };
|
||||
onClick: () => void;
|
||||
}) {
|
||||
const initials = particle.properties.name.slice(0, 2).toUpperCase();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent"
|
||||
>
|
||||
<Avatar>
|
||||
<AvatarFallback className="bg-primary/10 text-primary font-medium">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{particle.properties.name}
|
||||
</p>
|
||||
<div className="text-muted-foreground flex items-center gap-1">
|
||||
<Radio className="size-3" />
|
||||
<Small className="text-muted-foreground">
|
||||
{particle.properties.status}
|
||||
</Small>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
interface ParticleListViewProps {
|
||||
path: ParticlePath;
|
||||
}
|
||||
|
||||
/**
|
||||
* Grid/list of child particles for a container (folder, stream root, or network root).
|
||||
* List of stream particles for a container (network root, folder, etc.).
|
||||
*/
|
||||
export function ParticleListView({ path }: ParticleListViewProps) {
|
||||
const { children, isLoading } = useLiveParticleChildren(path);
|
||||
const { networkId } = parseParticlePath(path);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const streams = useMemo(
|
||||
() => children.filter((c) => c.type === "stream"),
|
||||
[children],
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-muted-foreground text-sm">Loading particles...</p>
|
||||
</div>
|
||||
);
|
||||
return <Progress />;
|
||||
}
|
||||
|
||||
if (children.length === 0) {
|
||||
if (streams.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col h-full items-center justify-center gap-2">
|
||||
<ControlsIndicator type={"new"} />
|
||||
@@ -29,16 +76,18 @@ export function ParticleListView({ path }: ParticleListViewProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-3 p-4">
|
||||
{children.map((child) => (
|
||||
<div
|
||||
key={child.id}
|
||||
className="rounded-lg border p-3 text-sm"
|
||||
>
|
||||
<p className="font-medium">{child.id}</p>
|
||||
<p className="text-muted-foreground text-xs">{child.type}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<ScrollArea className="h-full">
|
||||
<div className="py-1">
|
||||
{streams.map((stream, index) => (
|
||||
<div key={stream.id}>
|
||||
<StreamRow
|
||||
particle={stream}
|
||||
onClick={() => navigate(`/${networkId}/${stream.id}`)}
|
||||
/>
|
||||
{index < streams.length - 1 && <Separator className="mx-4" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@ interface CreateParticleParams<T extends ParticleType = ParticleType> {
|
||||
type: T;
|
||||
properties: ParticlePropertiesMap[T];
|
||||
createdByEmail: string;
|
||||
visibleTo: string[];
|
||||
}
|
||||
|
||||
export function useCreateParticle() {
|
||||
@@ -18,7 +17,6 @@ export function useCreateParticle() {
|
||||
params.type,
|
||||
params.properties,
|
||||
params.createdByEmail,
|
||||
params.visibleTo,
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
const ADJECTIVES = [
|
||||
"amber", "bold", "calm", "crisp", "dark", "eager", "faint", "gentle",
|
||||
"hasty", "icy", "jade", "keen", "lush", "misty", "nimble", "opal",
|
||||
"pale", "quiet", "rapid", "sharp", "taut", "vivid", "warm", "zesty",
|
||||
"bright", "clear", "deep", "fresh", "grand", "swift",
|
||||
];
|
||||
|
||||
const NOUNS = [
|
||||
"arrow", "bloom", "cedar", "drift", "ember", "flint", "grove", "harbor",
|
||||
"iris", "jewel", "knoll", "lake", "moss", "nova", "orbit", "petal",
|
||||
"quartz", "ridge", "spark", "trail", "vale", "wave", "yarn", "zenith",
|
||||
"brook", "cliff", "delta", "frost", "glow", "reef",
|
||||
];
|
||||
|
||||
export function generateRandomName(): string {
|
||||
const adj = ADJECTIVES[Math.floor(Math.random() * ADJECTIVES.length)];
|
||||
const noun = NOUNS[Math.floor(Math.random() * NOUNS.length)];
|
||||
return `${adj}-${noun}`;
|
||||
}
|
||||
Reference in New Issue
Block a user