lew/character-records-generator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(share): moves the share button into the right split, rather than the header

Browse source
This commit is contained in:
Lewis Wynne 2026-03-23 19:40:21 +00:00
parent 8875b70a14
commit 5e89d0e64f
3 changed files with 38 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/lib/components/Header.svelte
View file

@ -1,26 +1,13 @@
<script lang="ts">
import { Sun, Moon, Share2, Check } from 'lucide-svelte';
import { Sun, Moon } from 'lucide-svelte';
import { theme } from '$lib/theme.svelte';
import { roster } from '$lib/state.svelte';
import { presets } from '$lib/presets';
import { encodeCharacterURL } from '$lib/sharing';
import CharacterSwitcher from './CharacterSwitcher.svelte';
let copied = $state(false);
async function createCharacter() {
await roster.create(presets[0]);
}
async function share() {
const char = roster.active;
if (!char) return;
const encoded = encodeCharacterURL(char);
const url = `${window.location.origin}${window.location.pathname}#${encoded}`;
await navigator.clipboard.writeText(url);
copied = true;
setTimeout(() => { copied = false; }, 2000);
}
</script>
<header class="flex items-center gap-3 px-4 py-3 border-b shrink-0" style="border-color: var(--border); background: var(--bg-card);">
@ -35,16 +22,6 @@
{#if roster.saveStatus === 'saving'}Saving...{:else if roster.saveStatus === 'saved'}Saved{/if}
</span>
{#if roster.active}
<button onclick={share} class="p-1 rounded hover:opacity-80" title="Copy share link">
{#if copied}
<Check size={18} />
{:else}
<Share2 size={18} />
{/if}
</button>
{/if}
<button
onclick={createCharacter}
class="px-3 py-1 rounded text-sm border hover:opacity-80"

11
src/lib/components/OutputPanel.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import type { Character } from '$lib/types';
import { generateRecord } from '$lib/output';
import { encodeCharacterURL } from '$lib/sharing';
import { species } from '$lib/data';
import OutputTab from './OutputTab.svelte';
@ -21,10 +22,16 @@
let output = $derived(
activeTab ? generateRecord(character.template, character.data, activeTab, species) : ''
);
async function share() {
const encoded = encodeCharacterURL(character);
const url = `${window.location.origin}${window.location.pathname}#${encoded}`;
await navigator.clipboard.writeText(url);
}
</script>
<div class="flex flex-col h-full min-h-0 rounded border" style="border-color: var(--border); background: var(--bg-card);">
<div class="flex border-b" style="border-color: var(--border);">
<div class="flex border-b shrink-0" style="border-color: var(--border);">
{#each tabs as tab}
<button
onclick={() => { activeTab = tab.type; }}
@ -38,5 +45,5 @@
{/each}
</div>
<OutputTab {output} />
<OutputTab {output} onShare={share} />
</div>

37
src/lib/components/OutputTab.svelte
View file

@ -1,9 +1,10 @@
<script lang="ts">
import { Copy, Check } from 'lucide-svelte';
import { Copy, Check, Share2 } from 'lucide-svelte';
let { output }: { output: string } = $props();
let { output, onShare }: { output: string; onShare?: () => void } = $props();
let copied = $state(false);
let shared = $state(false);
let wordCount = $derived(
output.trim() ? output.trim().split(/\s+/).length : 0
@ -14,18 +15,36 @@
copied = true;
setTimeout(() => { copied = false; }, 2000);
}
async function share() {
if (!onShare) return;
await onShare();
shared = true;
setTimeout(() => { shared = false; }, 2000);
}
</script>
<div class="flex flex-col h-full min-h-0">
<div class="flex items-center justify-between px-3 py-2 text-sm" style="color: var(--text-muted);">
<div class="flex items-center justify-between px-3 py-2 text-sm shrink-0" style="color: var(--text-muted);">
<span>{wordCount} words</span>
<button onclick={copy} class="flex items-center gap-1 px-2 py-1 rounded border hover:opacity-80" style="border-color: var(--border);">
{#if copied}
<Check size={14} /> Copied
{:else}
<Copy size={14} /> Copy
<div class="flex items-center gap-2">
<button onclick={copy} class="flex items-center gap-1 px-2 py-1 rounded border hover:opacity-80" style="border-color: var(--border);">
{#if copied}
<Check size={14} /> Copied
{:else}
<Copy size={14} /> Copy
{/if}
</button>
{#if onShare}
<button onclick={share} class="flex items-center gap-1 px-2 py-1 rounded border hover:opacity-80" style="border-color: var(--border);">
{#if shared}
<Check size={14} /> Link Copied
{:else}
<Share2 size={14} /> Share
{/if}
</button>
{/if}
</button>
</div>
</div>
<pre class="flex-1 overflow-auto px-4 py-3 text-sm whitespace-pre-wrap font-mono" style="background: var(--bg); color: var(--text);">{output}</pre>
</div>