169 lines
8.9 KiB
React
169 lines
8.9 KiB
React
import { createSignal, createEffect, For, Show } from "solid-js";
|
|
|
|
export function HierarchyApp(props) {
|
|
// props.state contains springs, rivers, streams, trenches, etc.
|
|
// props.push is the function to push events to LiveView
|
|
// props.setState can be used for local updates if needed,
|
|
// but better to just use props.state and fire events.
|
|
|
|
const handleSpringClick = (springId) => {
|
|
// Optimistic update or just wait for server?
|
|
// Let's fire event to server to fetch rivers
|
|
props.push("fetch_rivers", { spring_id: springId });
|
|
// We can also update local state to show selection immediately?
|
|
// But sending `setState` from parent is cleaner.
|
|
// Wait, the parent hook has `setState`.
|
|
// We can use a local signal for UI selection state content,
|
|
// but the data (rivers) must come from server.
|
|
|
|
// Actually, let's just trigger the push.
|
|
// And ideally we also set activeSpringId in the store.
|
|
props.setState("activeSpringId", springId);
|
|
props.setState("activeRiverId", null);
|
|
props.setState("activeStreamId", null);
|
|
};
|
|
|
|
const handleRiverClick = (riverId) => {
|
|
props.push("fetch_streams", { river_id: riverId });
|
|
props.setState("activeRiverId", riverId);
|
|
// Maybe toggle expansion?
|
|
};
|
|
|
|
const handleStreamClick = (streamId) => {
|
|
props.push("fetch_trenches", { stream_id: streamId });
|
|
props.setState("activeStreamId", streamId);
|
|
};
|
|
|
|
return (
|
|
<div class="flex h-screen bg-gray-900 text-white font-sans">
|
|
{/* 1. Springs (Servers) Column */}
|
|
<div class="w-20 flex flex-col items-center py-4 bg-gray-950 border-r border-gray-800 space-y-4">
|
|
<For each={props.state.springs}>
|
|
{(spring) => (
|
|
<button
|
|
onClick={() => handleSpringClick(spring.id)}
|
|
class={`w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200 hover:rounded-2xl ${props.state.activeSpringId === spring.id
|
|
? "bg-indigo-500 rounded-2xl shadow-lg ring-2 ring-indigo-400"
|
|
: "bg-gray-800 hover:bg-indigo-600"
|
|
}`}
|
|
title={spring.name}
|
|
>
|
|
{spring.name.substring(0, 2).toUpperCase()}
|
|
</button>
|
|
)}
|
|
</For>
|
|
|
|
<button class="w-12 h-12 rounded-full bg-gray-800 hover:bg-green-600 flex items-center justify-center text-green-400 hover:text-white transition-all duration-200 hover:rounded-2xl">
|
|
<span class="text-2xl">+</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* 2. Rivers & Streams (Channels) Column */}
|
|
<Show when={props.state.activeSpringId}>
|
|
<div class="w-64 bg-gray-900 flex flex-col border-r border-gray-800">
|
|
{/* Header */}
|
|
<div class="h-12 border-b border-gray-800 flex items-center px-4 font-bold shadow-sm">
|
|
{props.state.springs.find(s => s.id === props.state.activeSpringId)?.name || "Spring"}
|
|
</div>
|
|
|
|
{/* Rivers List */}
|
|
<div class="flex-1 overflow-y-auto p-2 space-y-2">
|
|
<Show when={props.state.rivers[props.state.activeSpringId]} fallback={<div class="p-4 text-gray-500 text-sm">Loading rivers...</div>}>
|
|
<For each={props.state.rivers[props.state.activeSpringId]}>
|
|
{(river) => (
|
|
<div class="mb-2">
|
|
<div
|
|
class="px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider hover:text-gray-200 cursor-pointer flex items-center justify-between group"
|
|
onClick={() => handleRiverClick(river.id)}
|
|
>
|
|
<span>v {river.name}</span>
|
|
<span class="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-white">+</span>
|
|
</div>
|
|
|
|
{/* Streams in this river */}
|
|
<Show when={props.state.streams[river.id]}>
|
|
<div class="mt-1 space-y-0.5">
|
|
<For each={props.state.streams[river.id]}>
|
|
{(stream) => (
|
|
<div
|
|
onClick={() => handleStreamClick(stream.id)}
|
|
class={`px-2 py-1 rounded mx-2 text-gray-400 hover:bg-gray-800 hover:text-gray-100 cursor-pointer flex items-center ${props.state.activeStreamId === stream.id ? "bg-gray-800 text-white font-medium" : ""
|
|
}`}
|
|
>
|
|
<span class="mr-1 text-gray-500">#</span>
|
|
{stream.name}
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
|
|
{/* 3. Main Stream (Chat) Area */}
|
|
<div class="flex-1 flex flex-col bg-gray-800">
|
|
<Show when={props.state.activeStreamId} fallback={
|
|
<div class="flex-1 flex items-center justify-center text-gray-500 flex-col">
|
|
<div class="text-4xl mb-4">👋</div>
|
|
<p>Select a stream to start chatting</p>
|
|
</div>
|
|
}>
|
|
{/* Header */}
|
|
<div class="h-12 border-b border-gray-700 flex items-center px-4 shadow-sm bg-gray-900 justify-between">
|
|
<div class="flex items-center">
|
|
<span class="text-2xl text-gray-500 mr-2">#</span>
|
|
<span class="font-bold">
|
|
{/* Need to find stream name across all rivers? inefficient.
|
|
Better to store activeStream details? Or just find it. */}
|
|
Stream Name
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Messages */}
|
|
<div class="flex-1 overflow-y-auto p-4 space-y-4">
|
|
{/* Placeholder messages */}
|
|
<div class="flex items-start">
|
|
<div class="w-10 h-10 rounded-full bg-gray-600 mr-3"></div>
|
|
<div>
|
|
<div class="flex items-baseline">
|
|
<span class="font-bold mr-2 text-white">User A</span>
|
|
<span class="text-xs text-gray-400">10:30 AM</span>
|
|
</div>
|
|
<p class="text-gray-300">Welcome to the stream!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Show when={props.state.trenches[props.state.activeStreamId]}>
|
|
<div class="pl-12 pt-2">
|
|
<div class="text-xs font-bold text-gray-400 mb-1">Trenches (Threads):</div>
|
|
<For each={props.state.trenches[props.state.activeStreamId]}>
|
|
{(trench) => (
|
|
<div class="text-sm text-indigo-400 hover:underline cursor-pointer">
|
|
↳ {trench.name}
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
|
|
{/* Input */}
|
|
<div class="p-4 bg-gray-900">
|
|
<input
|
|
type="text"
|
|
class="w-full bg-gray-800 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
placeholder="Message #stream"
|
|
/>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|