44r0n7
0265afa054
Import the runnable game code, content, docs, scripts, and repo guidance while leaving local agent state, dependency installs, build output, and backup copies out of the published tree.
101 lines
1.9 KiB
Svelte
101 lines
1.9 KiB
Svelte
<script>
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
export let docs = [];
|
|
export let selectedDoc = null;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
</script>
|
|
|
|
<section class="panel-grid">
|
|
<aside class="list">
|
|
<header>
|
|
<h2>Docs</h2>
|
|
<span>{docs.length} indexed</span>
|
|
</header>
|
|
|
|
{#each docs as doc}
|
|
<button class:selected={doc.id === selectedDoc?.id} on:click={() => !doc.locked && dispatch('select', doc.id)} disabled={doc.locked}>
|
|
<div>{doc.title}</div>
|
|
<small>{doc.locked ? 'locked' : 'available'}</small>
|
|
</button>
|
|
{/each}
|
|
</aside>
|
|
|
|
<article class="detail">
|
|
{#if selectedDoc}
|
|
<h3>{selectedDoc.title}</h3>
|
|
<div class="body">{selectedDoc.content}</div>
|
|
{:else}
|
|
<p class="empty">Select an unlocked document to read it.</p>
|
|
{/if}
|
|
</article>
|
|
</section>
|
|
|
|
<style>
|
|
.panel-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.list,
|
|
.detail {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 24px;
|
|
padding: 1rem;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
align-content: start;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
h2, h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.list button {
|
|
text-align: left;
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 0.9rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: inherit;
|
|
}
|
|
|
|
.list button:disabled {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
}
|
|
|
|
.list button.selected {
|
|
border-color: rgba(214, 104, 56, 0.45);
|
|
background: rgba(214, 104, 56, 0.1);
|
|
}
|
|
|
|
.body,
|
|
.empty,
|
|
small {
|
|
white-space: pre-wrap;
|
|
line-height: 1.6;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.panel-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|