From 5e89d0e64f7c366e63355d80faf87d557646f784 Mon Sep 17 00:00:00 2001
From: lew <lew@ily.rs>
Date: Mon, 23 Mar 2026 19:40:21 +0000
Subject: [PATCH] refactor(share): moves the share button into the right split,
 rather than the header

---
 src/lib/components/Header.svelte      | 25 +-----------------
 src/lib/components/OutputPanel.svelte | 11 ++++++--
 src/lib/components/OutputTab.svelte   | 37 ++++++++++++++++++++-------
 3 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index d303b46..97604bc 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -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"
diff --git a/src/lib/components/OutputPanel.svelte b/src/lib/components/OutputPanel.svelte
index b20b30a..b8cd98c 100644
--- a/src/lib/components/OutputPanel.svelte
+++ b/src/lib/components/OutputPanel.svelte
@@ -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>
diff --git a/src/lib/components/OutputTab.svelte b/src/lib/components/OutputTab.svelte
index 5ea434a..bfb86ca 100644
--- a/src/lib/components/OutputTab.svelte
+++ b/src/lib/components/OutputTab.svelte
@@ -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>