hypercross/ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: improve completions loading and UI handling

Browse Source 
Refactor the completions system to support both CLI mode (via
`/__COMPLETIONS.json`) and a client-side fallback scan for dev mode.

- Implement client-side scanning of the file index for dice and headings
- Add `ensureCompletions` to allow components to await data readiness
- Update `JournalInput` to handle "no results" states in the dropdown
- Improve keyboard navigation (Tab to accept, Enter to select)
- Update dice regex to support `:md-dice[...]` syntax
This commit is contained in:
hypercross
2026-07-06 17:13:11 +08:00
parent 4c5add2414
commit e0d61cf91e
3 changed files with 327 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/journal/JournalInput.tsx
+209 -88
View File
@@ -5,17 +5,37 @@
* - Plain text → "narrative" type
* - `/roll 3d6kh1` → "roll.request" type
* - `/link path#section` → "article.reveal" type
* - `/` alone opens completions dropdown (populated from /__COMPLETIONS.json)
* - `/` alone opens completions dropdown (populated from /__COMPLETIONS.json
* in CLI mode, or client-side scan of the in-memory file index in dev mode)
*/
import { Component, createSignal, onMount, onCleanup, Show, For } from "solid-js";
import { sendMessage, revertLatest, canRevert, useJournalStream } from "../stores/journalStream";
import { useJournalCompletions, type DiceCompletion, type LinkCompletion } from "./completions";
import {
Component,
createSignal,
onMount,
onCleanup,
Show,
For,
Switch,
Match,
} from "solid-js";
import {
sendMessage,
revertLatest,
canRevert,
useJournalStream,
} from "../stores/journalStream";
import {
useJournalCompletions,
ensureCompletions,
type CompletionsState,
} from "./completions";
// ---- Helpers ----
interface CompletionItem {
label: string;
/** "command" | "value" — used for styling and insertion */
kind: "command" | "value";
kind: "command" | "value" | "no-results";
insertText: string;
}
@@ -25,9 +45,42 @@ interface ParsedInput {
error?: string;
}
function parseInput(raw: string): ParsedInput {
if (raw.startsWith("/roll ")) {
const notation = raw.slice("/roll ".length).trim();
if (!notation)
return {
type: "roll.request",
payload: {},
error: "Dice notation required",
};
return { type: "roll.request", payload: { notation, label: notation } };
}
if (raw.startsWith("/link ")) {
const arg = raw.slice("/link ".length).trim();
if (!arg)
return { type: "article.reveal", payload: {}, error: "Path required" };
const hashIdx = arg.indexOf("#");
const path = hashIdx === -1 ? arg : arg.slice(0, hashIdx);
const section =
hashIdx === -1 ? undefined : arg.slice(hashIdx + 1) || undefined;
return { type: "article.reveal", payload: { path, section } };
}
// /roll or /link with no space — need to complete, don't send
if (raw === "/roll" || raw === "/link") {
return { type: "narrative", payload: {}, error: "Complete the command" };
}
return { type: "narrative", payload: { text: raw } };
}
// ---- Component ----
export const JournalInput: Component = () => {
const stream = useJournalStream();
const completions = useJournalCompletions();
const comp = useJournalCompletions();
const [text, setText] = createSignal("");
const [error, setError] = createSignal<string | null>(null);
@@ -38,38 +91,12 @@ export const JournalInput: Component = () => {
let textareaRef!: HTMLTextAreaElement;
let completionsRef!: HTMLDivElement;
// ---------- Parsing ----------
// Ensure completions are loading on mount
onMount(() => {
void ensureCompletions();
});
function parseInput(raw: string): ParsedInput {
if (raw.startsWith("/roll ")) {
const notation = raw.slice("/roll ".length).trim();
if (!notation) return { type: "roll.request", payload: {}, error: "Dice notation required" };
return { type: "roll.request", payload: { notation, label: notation } };
}
if (raw.startsWith("/link ")) {
const arg = raw.slice("/link ".length).trim();
if (!arg) return { type: "article.reveal", payload: {}, error: "Path required" };
const [path, section] = parseLinkArg(arg);
return { type: "article.reveal", payload: { path, section: section ?? undefined } };
}
// /roll or /link with no space — show completions, don't send
if (raw === "/roll" || raw === "/link") {
return { type: "narrative", payload: {}, error: "Complete the command" };
}
return { type: "narrative", payload: { text: raw } };
}
/** Parse "path#section" or just "path" */
function parseLinkArg(arg: string): [string, string | null] {
const hashIdx = arg.indexOf("#");
if (hashIdx === -1) return [arg, null];
return [arg.slice(0, hashIdx), arg.slice(hashIdx + 1) || null];
}
// ---------- Send ----------
// ---- Send ----
function handleSend() {
const raw = text().trim();
@@ -99,10 +126,11 @@ export const JournalInput: Component = () => {
revertLatest();
}
// ---------- Completions ----------
// ---- Completions ----
function buildCompletions(): CompletionItem[] {
const raw = text().trim();
const data = comp.data;
// Show commands when user types /
if (raw === "" || raw === "/") {
@@ -115,38 +143,48 @@ export const JournalInput: Component = () => {
// After /roll — show dice suggestions
if (raw.startsWith("/roll ")) {
const prefix = raw.slice("/roll ".length).toLowerCase();
return completions.dice
const matches = data.dice
.filter(
(d) =>
d.notation.toLowerCase().includes(prefix) ||
d.label.toLowerCase().includes(prefix),
)
.slice(0, 8)
.map((d) => ({
label: d.notation,
kind: "value" as const,
insertText: "/roll " + d.notation,
}));
.slice(0, 8);
if (matches.length === 0) {
return [{ label: "No dice found", kind: "no-results", insertText: "" }];
}
return matches.map((d) => ({
label: d.notation,
kind: "value" as const,
insertText: "/roll " + d.notation,
}));
}
// After /link — show article and heading suggestions
if (raw.startsWith("/link ")) {
const prefix = raw.slice("/link ".length).toLowerCase();
return completions.links
const matches = data.links
.filter(
(l) =>
l.path.toLowerCase().includes(prefix) ||
l.label.toLowerCase().includes(prefix),
)
.slice(0, 8)
.map((l) => {
const insert = l.section ? `/link ${l.path}#${l.section}` : `/link ${l.path}`;
return {
label: l.label,
kind: "value" as const,
insertText: insert,
};
});
.slice(0, 8);
if (matches.length === 0) {
return [
{ label: "No links found", kind: "no-results", insertText: "" },
];
}
return matches.map((l) => {
const insert = l.section
? `/link ${l.path}#${l.section}`
: `/link ${l.path}`;
return {
label: l.label,
kind: "value" as const,
insertText: insert,
};
});
}
return [];
@@ -157,6 +195,7 @@ export const JournalInput: Component = () => {
}
function acceptCompletion(item: CompletionItem) {
if (item.kind === "no-results") return;
setText(item.insertText);
setShowCompletions(false);
textareaRef?.focus();
@@ -171,22 +210,53 @@ export const JournalInput: Component = () => {
});
}
// ---------- Keyboard ----------
// ---- Keyboard ----
function handleKeyDown(e: KeyboardEvent) {
const comps = currentCompletions();
const open = showCompletions();
// Completions: navigate & accept
// When opening completions with Tab, if the text matches a command prefix
// and there are options, accept the first. Otherwise just show.
if (e.key === "Tab") {
if (open) {
e.preventDefault();
if (comps.length > 0 && comps[selectedIdx()].kind !== "no-results") {
acceptCompletion(comps[selectedIdx()]);
}
return;
}
// If not open and typing /, open completions
const raw = text();
if (raw === "/" || raw.startsWith("/roll") || raw.startsWith("/link")) {
e.preventDefault();
setShowCompletions(true);
setSelectedIdx(0);
return;
}
return;
}
if (open && comps.length > 0) {
if (e.key === "ArrowDown") { e.preventDefault(); selectCompletion("down"); return; }
if (e.key === "ArrowUp") { e.preventDefault(); selectCompletion("up"); return; }
if (e.key === "Tab" || e.key === "Enter") {
if (e.key === "ArrowDown") {
e.preventDefault();
selectCompletion("down");
return;
}
if (e.key === "ArrowUp") {
e.preventDefault();
selectCompletion("up");
return;
}
if (e.key === "Enter" && comps[selectedIdx()].kind !== "no-results") {
e.preventDefault();
acceptCompletion(comps[selectedIdx()]);
return;
}
if (e.key === "Escape") { setShowCompletions(false); return; }
if (e.key === "Escape") {
setShowCompletions(false);
return;
}
}
// Send
@@ -196,11 +266,19 @@ export const JournalInput: Component = () => {
}
}
function handleInput() {
const raw = text();
function handleInput(e: InputEvent) {
const input = e.currentTarget as HTMLTextAreaElement;
const raw = input.value;
setText(raw);
// Show completions when user types / at the start
if (raw === "/" || raw.startsWith("/roll ") || raw.startsWith("/link ")) {
// Completions visibility
if (
raw === "/" ||
raw.startsWith("/roll ") ||
raw.startsWith("/link ") ||
raw === "/roll" ||
raw === "/link"
) {
setShowCompletions(true);
setSelectedIdx(0);
} else {
@@ -212,7 +290,7 @@ export const JournalInput: Component = () => {
textareaRef.style.height = Math.min(textareaRef.scrollHeight, 150) + "px";
}
// ---------- Click outside ----------
// ---- Click outside ----
onMount(() => {
const handler = (e: MouseEvent) => {
@@ -226,24 +304,34 @@ export const JournalInput: Component = () => {
const showRevert = () => canRevert() && stream.myName === "gm";
return (
<div class="border-t border-gray-200 bg-white relative">
{/* Completions dropdown — positioned above the textarea */}
<Show when={showCompletions() && currentCompletions().length > 0}>
<div
ref={completionsRef}
class="absolute bottom-full left-0 right-0 bg-white border border-gray-200 rounded-t shadow-lg mb-0.5 max-h-40 overflow-y-auto z-50"
>
<For each={currentCompletions()}>
{(item, idx) => (
<div
class={`flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm ${
idx() === selectedIdx()
// Completions placeholder — shown in the dropdown area when no matches
function renderCompletionsDropdown() {
const comps = currentCompletions();
if (comps.length === 0) return null;
return (
<div
ref={completionsRef}
class="absolute bottom-full left-0 right-0 bg-white border border-gray-200 rounded-t shadow-lg mb-0.5 max-h-40 overflow-y-auto z-50"
>
<For each={comps}>
{(item, idx) => (
<div
class={`flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm ${
item.kind === "no-results"
? "text-gray-400 italic cursor-default"
: idx() === selectedIdx()
? "bg-blue-50 text-blue-700"
: "hover:bg-gray-100 text-gray-700"
}`}
onClick={() => acceptCompletion(item)}
onMouseEnter={() => setSelectedIdx(idx())}
}`}
onClick={() => acceptCompletion(item)}
onMouseEnter={() =>
item.kind !== "no-results" && setSelectedIdx(idx())
}
>
<Show
when={item.kind !== "no-results"}
fallback={<span class="text-xs text-gray-300 shrink-0">—</span>}
>
<span
class={`text-xs px-1 rounded shrink-0 ${
@@ -254,11 +342,44 @@ export const JournalInput: Component = () => {
>
{item.kind === "command" ? "cmd" : "val"}
</span>
<span class="font-mono truncate flex-1">{item.label}</span>
</div>
)}
</For>
</div>
</Show>
<span class="font-mono truncate flex-1">{item.label}</span>
</div>
)}
</For>
</div>
);
}
return (
<div class="border-t border-gray-200 bg-white relative">
{/* Completions loading / error / empty teaser */}
<Show when={showCompletions()}>
<Switch>
<Match when={comp.state.status === "loading"}>
<div
ref={completionsRef}
class="absolute bottom-full left-0 right-0 bg-white border border-gray-200 rounded-t shadow-lg mb-0.5 z-50 px-3 py-2 text-xs text-gray-400 italic"
>
Loading completions…
</div>
</Match>
<Match when={comp.state.status === "error"}>
<div
ref={completionsRef}
class="absolute bottom-full left-0 right-0 bg-white border border-red-200 rounded-t shadow-lg mb-0.5 z-50 px-3 py-2 text-xs text-red-500"
>
{(comp.state as any).message || "Failed to load completions"}
</div>
</Match>
<Match
when={
comp.state.status === "empty" || comp.state.status === "loaded"
}
>
{renderCompletionsDropdown()}
</Match>
</Switch>
</Show>
{/* Textarea + actions */}