FlowyLabs/llink
1
0
Fork 0
Code Issues 71 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: restructure state, routing, and more

Browse Source
This commit is contained in:
talksik
2026-03-18 13:11:29 -07:00
parent 0149450bc4
commit 092d142a56
16 changed files with 218 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/src/features/layoutwithpath.tsx
+126
View File
@@ -0,0 +1,126 @@
import { WindowControls } from "@/components/window-controls";
import { Button } from "@/components/ui/button";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { Home, Settings } from "lucide-react";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { useNetworks } from "@/hooks/use-networks";
function NetworkBreadcrumbContent({ networkId }: { networkId: string }) {
const { data: networks } = useNetworks();
const network = networks?.find((n) => n.id === networkId);
const name = network?.name ?? networkId;
const initials = name.slice(0, 2).toUpperCase();
return (
<span className="flex items-center gap-1.5">
<Avatar size="sm">
<AvatarFallback className="bg-primary/10 text-primary text-[10px] font-medium">
{initials}
</AvatarFallback>
</Avatar>
{name}
</span>
);
}
function TopBar() {
const navigate = useNavigate();
const segments = useLocation().pathname.split("/").filter(Boolean);
const networkId = segments[0] ?? null;
return (
<div className="drag-region flex items-center gap-3 border-b px-3 py-1">
<WindowControls />
<Breadcrumb className="no-drag">
<BreadcrumbList>
<BreadcrumbItem className="text-xs">
{segments.length === 0 ? (
<BreadcrumbPage className="flex items-center gap-1">
<Home className="size-3.5" />
</BreadcrumbPage>
) : (
<BreadcrumbLink
className="flex cursor-pointer items-center gap-1"
onClick={() => navigate("/")}
>
<Home className="size-3.5" />
</BreadcrumbLink>
)}
</BreadcrumbItem>
{networkId && (
<span className="contents">
<BreadcrumbSeparator />
<BreadcrumbItem className="text-xs">
{segments.length === 1 ? (
<BreadcrumbPage>
<NetworkBreadcrumbContent networkId={networkId} />
</BreadcrumbPage>
) : (
<BreadcrumbLink
className="cursor-pointer"
onClick={() => navigate(`/${networkId}`)}
>
<NetworkBreadcrumbContent networkId={networkId} />
</BreadcrumbLink>
)}
</BreadcrumbItem>
</span>
)}
{segments.slice(1).map((segment, index) => {
const isLast = index === segments.length - 2;
const path = `/${segments.slice(0, index + 2).join("/")}`;
return (
<span key={path} className="contents">
<BreadcrumbSeparator />
<BreadcrumbItem className="text-xs">
{isLast ? (
<BreadcrumbPage>{segment}</BreadcrumbPage>
) : (
<BreadcrumbLink
className="cursor-pointer"
onClick={() => navigate(path)}
>
{segment}
</BreadcrumbLink>
)}
</BreadcrumbItem>
</span>
);
})}
</BreadcrumbList>
</Breadcrumb>
<div className="flex-1" />
<Button
variant="ghost"
size="sm"
className="no-drag text-muted-foreground"
onClick={() => navigate("/settings")}
>
<Settings className="size-3.5" />
</Button>
</div>
);
}
export default function LayoutWithPath() {
return (
<div className="flex h-screen flex-col">
<TopBar />
<Outlet />
</div>
);
}
js/src/features/network-root.tsx
+18
View File
@@ -0,0 +1,18 @@
import { useParams } from "react-router-dom";
import { particlePath } from "@/lib/particle-path";
import { ParticleListView } from "@/features/particles/particle-list-view";
/**
* Route-level component for /:networkId (index).
* Shows root-level particles for the selected network.
*/
export default function NetworkRoot() {
const { networkId } = useParams();
const path = particlePath(networkId!, []);
return (
<div className="flex-1 overflow-hidden">
<ParticleListView path={path} />
</div>
);
}
js/src/features/network-selector.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ function NetworkRow({
);
}
export function NetworkSelector() {
export default function NetworkSelector() {
const navigate = useNavigate();
const { data, isPending, error } = useNetworks();
js/src/features/particles/folder-view.tsx
+6 -6
View File
@@ -1,19 +1,19 @@
import { Particle } from "@/api/types";
import { useParticleChildren } from "@/hooks/use-particle-children";
import { useLiveParticleChildren } from "@/hooks/use-particle";
import type { ParticlePath } from "@/lib/particle-path";
interface FolderViewProps {
folderParticle: Particle;
networkId: string;
particleSegments: string[];
path: ParticlePath;
}
export function FolderView({ networkId, particleSegments, folderParticle }: FolderViewProps) {
const { children, error, isLoading } = useParticleChildren(networkId, particleSegments);
export function FolderView({ path, folderParticle }: FolderViewProps) {
const { children, error, isLoading } = useLiveParticleChildren(path);
return (
<div className="flex h-full items-center justify-center">
<p className="text-muted-foreground text-sm">
Folder view — {networkId}/{particleSegments.join("/")}
Folder view — {folderParticle.id}
</p>
</div>
);
js/src/features/particles/particle-list-view.tsx
+8 -7
View File
@@ -1,15 +1,16 @@
import { useParticleChildren } from "@/hooks/use-particle-children";
import { useLiveParticleChildren } from "@/hooks/use-particle";
import type { ParticlePath } from "@/lib/particle-path";
import ControlsIndicator from "@/features/send/controls-indicator";
interface ParticleListViewProps {
networkId: string;
particleSegments: string[];
path: ParticlePath;
}
/**
* Grid/list of child particles for a container (folder, stream root, or network root).
*/
export function ParticleListView({ networkId, particleSegments }: ParticleListViewProps) {
const { children, isLoading } = useParticleChildren(networkId, particleSegments);
export function ParticleListView({ path }: ParticleListViewProps) {
const { children, isLoading } = useLiveParticleChildren(path);
if (isLoading) {
return (
@@ -21,8 +22,8 @@ export function ParticleListView({ networkId, particleSegments }: ParticleListVi
if (children.length === 0) {
return (
<div className="flex h-full items-center justify-center">
<p className="text-muted-foreground text-sm">No particles yet</p>
<div className="flex flex-col h-full items-center justify-center gap-2">
<ControlsIndicator type={"new"} />
</div>
);
}
js/src/features/particles/particle-view-resolver.tsx
+19 -20
View File
@@ -1,20 +1,22 @@
import { useParticle } from "@/hooks/use-particle";
import { StreamView } from "./stream-view";
import { FolderView } from "./folder-view";
import { ParticleListView } from "./particle-list-view";
import { useParams } from "react-router-dom";
import { useLiveParticle } from "@/hooks/use-particle";
import { particlePath } from "@/lib/particle-path";
import { isContainerType } from "@/api/types";
interface ParticleViewResolverProps {
networkId: string;
particleSegments: string[];
}
import { StreamView } from "@/features/particles/stream-view";
import { FolderView } from "@/features/particles/folder-view";
import { ParticleListView } from "@/features/particles/particle-list-view";
/**
* Resolves a particle by its path segments and renders the appropriate view
* based on particle type (e.g. stream would show clips in story mode, folder would list files, etc.)
* Route-level component for /:networkId/*.
* Reads params from the router, resolves the particle, and renders
* the appropriate view based on particle type.
*/
export function ParticleViewResolver({ networkId, particleSegments }: ParticleViewResolverProps) {
const { particle, isLoading, error } = useParticle(networkId, particleSegments);
export default function ParticleViewResolver() {
const { networkId, "*": rest } = useParams();
const segments = (rest ?? "").split("/").filter(Boolean);
const path = particlePath(networkId!, segments);
const { particle, isLoading, error } = useLiveParticle(path);
if (isLoading) {
return (
@@ -32,12 +34,11 @@ export function ParticleViewResolver({ networkId, particleSegments }: ParticleVi
);
}
// While the hook is stubbed, particle will be null — show a placeholder
if (!particle) {
return (
<div className="flex h-full items-center justify-center">
<p className="text-muted-foreground text-sm">
Particle: {particleSegments.join(" / ")}
Particle: {segments.join(" / ")}
</p>
</div>
);
@@ -45,15 +46,13 @@ export function ParticleViewResolver({ networkId, particleSegments }: ParticleVi
switch (particle.type) {
case "stream":
return <StreamView streamParticle={particle} networkId={networkId} particleSegments={particleSegments} />;
return <StreamView streamParticle={particle} path={path} />;
case "folder":
return <FolderView folderParticle={particle} networkId={networkId} particleSegments={particleSegments} />;
return <FolderView folderParticle={particle} path={path} />;
default:
// For container types we haven't built a view for, fall back to list
if (isContainerType(particle.type)) {
return <ParticleListView networkId={networkId} particleSegments={particleSegments} />;
return <ParticleListView path={path} />;
}
// Leaf particle — placeholder
return (
<div className="flex h-full items-center justify-center">
<p className="text-muted-foreground text-sm">
js/src/features/particles/stream-view.tsx
+6 -6
View File
@@ -1,19 +1,19 @@
import { Particle } from "@/api/types";
import { useParticleChildren } from "@/hooks/use-particle-children";
import { useLiveParticleChildren } from "@/hooks/use-particle";
import type { ParticlePath } from "@/lib/particle-path";
interface StreamViewProps {
streamParticle: Particle;
networkId: string;
particleSegments: string[];
path: ParticlePath;
}
export function StreamView({ networkId, particleSegments, streamParticle }: StreamViewProps) {
const { children, error, isLoading } = useParticleChildren(networkId, particleSegments);
export function StreamView({ path, streamParticle }: StreamViewProps) {
const { children, error, isLoading } = useLiveParticleChildren(path);
return (
<div className="flex h-full items-center justify-center">
<p className="text-muted-foreground text-sm">
Stream view — {networkId}/{particleSegments.join("/")}
Stream view — {streamParticle.id}
</p>
{isLoading && <p className="text-muted-foreground text-sm">Loading stream data...</p>}
js/src/features/send/use-recorder.ts
+17 -18
View File
@@ -36,7 +36,6 @@ export function useRecorder(
const setMediaStream = useRecordingStore((s) => s.setMediaStream);
const setReviewBlob = useRecordingStore((s) => s.setReviewBlob);
const resetRecording = useRecordingStore((s) => s.reset);
const addParticleToStream = useAppStore((s) => s.addParticleToStream);
const stopTracks = useCallback(() => {
streamRef.current?.getTracks().forEach((t) => t.stop());
@@ -73,29 +72,29 @@ export function useRecorder(
await apiClient.confirmUpload(object_id);
const particle = await apiClient.createStreamParticle(streamId, {
type: "media",
data: {
object_id,
duration_ms: reviewDurationMs,
mime_type: mimeType,
},
});
// const particle = await apiClient.createStreamParticle(streamId, {
// type: "media",
// data: {
// object_id,
// duration_ms: reviewDurationMs,
// mime_type: mimeType,
// },
// });
//
// addParticleToStream(streamId, particle);
addParticleToStream(streamId, particle);
const playbackState = usePlaybackStore.getState();
if (playbackState.streamId === streamId) {
usePlaybackStore.setState({
particles: [...playbackState.particles, particle],
});
}
// const playbackState = usePlaybackStore.getState();
// if (playbackState.streamId === streamId) {
// usePlaybackStore.setState({
// particles: [...playbackState.particles, particle],
// });
// }
resetRecording();
} catch (err) {
setError(err instanceof Error ? err.message : "Upload failed");
}
}, [streamId, networkId, setStatus, setError, resetRecording, addParticleToStream]);
}, [streamId, networkId, setStatus, setError, resetRecording]);
const startRecording = useCallback(async () => {
const currentStatus = useRecordingStore.getState().status;
js/src/features/settings-page.tsx
+139
View File
@@ -0,0 +1,139 @@
import { useNavigate } from "react-router-dom";
import { ChevronRight, LogOut, User, Info, Shield } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import { WindowControls } from "@/components/window-controls";
import { Button } from "@/components/ui/button";
import { Muted } from "@/components/ui/typography";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useAuthStore } from "@/stores/auth-store";
import { ArrowLeft } from "lucide-react";
interface SettingsRowProps {
icon: React.ReactNode;
label: string;
detail?: string;
onClick?: () => void;
destructive?: boolean;
}
function SettingsRow({
icon,
label,
detail,
onClick,
destructive,
}: SettingsRowProps) {
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 ${destructive ? "text-destructive" : ""}`}
>
<span className="text-muted-foreground flex size-5 items-center justify-center">
{icon}
</span>
<span className="min-w-0 flex-1 text-sm font-medium">{label}</span>
{detail && <Muted className="text-xs">{detail}</Muted>}
{onClick && !destructive && (
<ChevronRight className="text-muted-foreground size-4" />
)}
</button>
);
}
function SettingsGroup({
title,
children,
}: {
title: string;
children: React.ReactNode;
}) {
return (
<div>
<p className="text-muted-foreground px-4 pb-1 pt-4 text-xs font-medium uppercase tracking-wider">
{title}
</p>
<div>{children}</div>
</div>
);
}
export default function SettingsPage() {
const navigate = useNavigate();
const user = useAuthStore((s) => s.user);
const signOut = useAuthStore((s) => s.signOut);
const initials = user?.email_prefix?.slice(0, 2).toUpperCase() ?? "?";
return (
<div className="flex h-screen flex-col">
<div className="drag-region flex items-center gap-3 border-b px-3 py-1">
<WindowControls />
<Button
variant="ghost"
size="sm"
className="no-drag text-muted-foreground"
onClick={() => navigate(-1)}
>
<ArrowLeft className="size-3.5" />
</Button>
<span className="text-sm font-medium">Settings</span>
<div className="flex-1" />
</div>
<ScrollArea className="flex-1">
{/* Profile header */}
<div className="flex items-center gap-3 px-4 py-5">
<Avatar size="lg">
<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">
{user?.email_prefix}
</p>
<Muted className="text-xs">{user?.email}</Muted>
</div>
</div>
<Separator />
<SettingsGroup title="Account">
<SettingsRow
icon={<User className="size-4" />}
label="Profile"
detail={user?.email_prefix}
/>
<Separator className="mx-4" />
<SettingsRow
icon={<Shield className="size-4" />}
label="Privacy"
/>
</SettingsGroup>
<Separator className="mt-4" />
<SettingsGroup title="About">
<SettingsRow
icon={<Info className="size-4" />}
label="Version"
detail="1.0.0"
/>
</SettingsGroup>
<Separator className="mt-4" />
<div className="py-4">
<SettingsRow
icon={<LogOut className="size-4" />}
label="Sign out"
onClick={signOut}
destructive
/>
</div>
</ScrollArea>
</div>
);
}