feat: update session creation to hydrate data immediately

Update `createSession` to return the session ID, allowing the UI to
automatically set the active session and trigger a server hydration
immediately after creation. This ensures the UI reflects the new
session state without a manual refresh.
This commit is contained in:
hypercross 2026-07-11 09:32:26 +08:00
parent f71af6a06d
commit e437d20d73
4 changed files with 21 additions and 7 deletions

View File

@ -25,7 +25,11 @@ export const ConnectionBar: Component = () => {
const handleCreateSession = () => { const handleCreateSession = () => {
const name = newSessionName().trim(); const name = newSessionName().trim();
if (!name) return; if (!name) return;
createSession(name); const id = createSession(name);
if (id) {
setSessionId(id);
hydrateFromServer(id).catch(() => {});
}
setNewSessionName(""); setNewSessionName("");
setShowNewSession(false); setShowNewSession(false);
}; };

View File

@ -2,7 +2,7 @@
* CreateSessionDialog modal for naming a new session * CreateSessionDialog modal for naming a new session
*/ */
import { Component, createSignal, onMount } from "solid-js"; import { Component, createSignal, onMount } from "solid-js";
import { createSession } from "../stores/journalStream"; import { createSession, setSessionId, hydrateFromServer } from "../stores/journalStream";
interface CreateSessionDialogProps { interface CreateSessionDialogProps {
onClose: () => void; onClose: () => void;
@ -12,13 +12,21 @@ export const CreateSessionDialog: Component<CreateSessionDialogProps> = (
props, props,
) => { ) => {
const [name, setName] = createSignal(""); const [name, setName] = createSignal("");
const [creating, setCreating] = createSignal(false);
let inputRef!: HTMLInputElement; let inputRef!: HTMLInputElement;
const handleCreate = () => { const handleCreate = async () => {
const trimmed = name().trim(); const trimmed = name().trim();
if (!trimmed) return; if (!trimmed) return;
createSession(trimmed); setCreating(true);
const id = createSession(trimmed);
if (id) {
setSessionId(id);
// Hydrate the new (empty) session so the UI reflects it immediately
await hydrateFromServer(id).catch(() => {});
}
setName(""); setName("");
setCreating(false);
props.onClose(); props.onClose();
}; };

View File

@ -254,7 +254,7 @@ export const StatsView: Component = () => {
{/* Sheet picker — only show if sheets are available */} {/* Sheet picker — only show if sheets are available */}
<Show when={sheets().length > 0}> <Show when={sheets().length > 0}>
<div class="absolute bottom-3 right-3"> <div class="sticky bottom-3 flex justify-end pr-3">
{/* Dropdown trigger */} {/* Dropdown trigger */}
<button <button
class="bg-white border border-gray-300 rounded-full w-8 h-8 flex items-center justify-center shadow-sm hover:bg-gray-50 transition-colors text-gray-500" class="bg-white border border-gray-300 rounded-full w-8 h-8 flex items-center justify-center shadow-sm hover:bg-gray-50 transition-colors text-gray-500"

View File

@ -370,8 +370,8 @@ export async function connectStream(
* Create a new session by publishing retained metadata to its meta topic. * Create a new session by publishing retained metadata to its meta topic.
* The server picks it up and adds it to the $SESSIONS manifest. * The server picks it up and adds it to the $SESSIONS manifest.
*/ */
export function createSession(name: string, players: string[] = []): void { export function createSession(name: string, players: string[] = []): string | null {
if (!_mqttClient || !_mqttConnected) return; if (!_mqttClient || !_mqttConnected) return null;
const id = const id =
name name
@ -385,6 +385,8 @@ export function createSession(name: string, players: string[] = []): void {
qos: 1, qos: 1,
retain: true, retain: true,
}); });
return id;
} }
/** /**