From 15ff5f507e89f26f6dd07af528b8398a9236d590 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Thu, 29 Jan 2026 21:57:06 +0000
Subject: [PATCH] Merge pull request #99 from flo-bit/button

Button
---
 .claude/settings.local.json | 3 ++-
 src/lib/cards/index.ts | 2 ++
 src/lib/cards/ButtonCard/ButtonCard.svelte | 41 +++++++++++++++++++++++++++++++++++++++++
 src/lib/cards/ButtonCard/ButtonCardSettings.svelte | 34 ++++++++++++++++++++++++++++++++++
 src/lib/cards/ButtonCard/EditingButtonCard.svelte | 15 +++++++++++++++
 src/lib/cards/ButtonCard/index.ts | 31 +++++++++++++++++++++++++++++++
 6 file(s) changed, 125 insertion(s)(+), 1 deletion(s)(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -22,7 +22,8 @@
 			"Bash(pnpm config:*)",
 			"Bash(lsof:*)",
 			"Bash(pnpm dev)",
-			"Bash(pnpm exec svelte-kit:*)"
+			"Bash(pnpm exec svelte-kit:*)",
+			"Bash(pnpm build:*)"
 		]
 	}
 }
diff --git a/src/lib/cards/index.ts b/src/lib/cards/index.ts
--- a/src/lib/cards/index.ts
+++ b/src/lib/cards/index.ts
@@ -31,9 +31,11 @@
 import { DrawCardDefinition } from './DrawCard';
 import { TimerCardDefinition } from './TimerCard';
 import { SpotifyCardDefinition } from './SpotifyCard';
+import { ButtonCardDefinition } from './ButtonCard';
 // import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
+	ButtonCardDefinition,
 	ImageCardDefinition,
 	VideoCardDefinition,
 	TextCardDefinition,
diff --git a/src/lib/cards/ButtonCard/ButtonCard.svelte b/src/lib/cards/ButtonCard/ButtonCard.svelte
new file mode 100644
--- /dev/null
+++ b/src/lib/cards/ButtonCard/ButtonCard.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { user } from '$lib/atproto';
+	import { getHandleOrDid } from '$lib/atproto/methods';
+	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
+	import type { ContentComponentProps } from '../types';
+
+	let { item }: ContentComponentProps = $props();
+</script>
+
+{#snippet content()}
+	<span
+		class="text-base-950 dark:text-base-50 line-clamp-1 inline-flex items-center justify-center px-4 text-2xl font-semibold"
+	>
+		{item.cardData.text || 'Click me'}
+	</span>
+{/snippet}
+
+{#if item.cardData.href === '#login'}
+	<button
+		onclick={() => {
+			if (user.isLoggedIn && user.profile) {
+				goto('/' + getHandleOrDid(user.profile) + '/edit', {});
+			} else {
+				loginModalState.show();
+			}
+		}}
+		class="hover:bg-accent-100/20 flex h-full w-full cursor-pointer flex-col items-center justify-center transition-colors duration-100"
+	>
+		{@render content()}
+	</button>
+{:else}
+	<a
+		href={item.cardData.href || '#'}
+		target="_blank"
+		rel="noopener noreferrer"
+		class="hover:bg-accent-100/20 flex h-full w-full flex-col items-center justify-center transition-colors duration-100"
+	>
+		{@render content()}
+	</a>
+{/if}
diff --git a/src/lib/cards/ButtonCard/ButtonCardSettings.svelte b/src/lib/cards/ButtonCard/ButtonCardSettings.svelte
new file mode 100644
--- /dev/null
+++ b/src/lib/cards/ButtonCard/ButtonCardSettings.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import type { SettingsComponentProps } from '../types';
+	import { Input, Label } from '@foxui/core';
+
+	let { item = $bindable<Item>(), onclose }: SettingsComponentProps = $props();
+
+	function confirmUrl() {
+		let href = item.cardData.href?.trim() || '';
+		if (href && !/^https?:\/\//i.test(href) && !href.startsWith('#')) {
+			href = 'https://' + href;
+		}
+		item.cardData.href = href;
+		onclose();
+	}
+</script>
+
+<div class="flex flex-col gap-3">
+	<div class="flex flex-col gap-1">
+		<Label for="button-href" class="text-sm">Link</Label>
+		<Input
+			id="button-href"
+			bind:value={item.cardData.href}
+			placeholder="youtube.com"
+			class="text-sm mt-2"
+			onkeydown={(event) => {
+				if (event.code === 'Enter') {
+					event.preventDefault();
+					confirmUrl();
+				}
+			}}
+		/>
+	</div>
+</div>
diff --git a/src/lib/cards/ButtonCard/EditingButtonCard.svelte b/src/lib/cards/ButtonCard/EditingButtonCard.svelte
new file mode 100644
--- /dev/null
+++ b/src/lib/cards/ButtonCard/EditingButtonCard.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { ContentComponentProps } from '../types';
+	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
+
+	let { item = $bindable() }: ContentComponentProps = $props();
+</script>
+
+<div class="text-base-950 dark:text-base-50 flex h-full w-full flex-col items-center justify-center gap-2 px-4">
+	<PlainTextEditor
+		key="text"
+		bind:contentDict={item.cardData}
+		placeholder="Button text"
+		class="line-clamp-1 text-center text-2xl font-bold"
+	/>
+</div>
diff --git a/src/lib/cards/ButtonCard/index.ts b/src/lib/cards/ButtonCard/index.ts
new file mode 100644
--- /dev/null
+++ b/src/lib/cards/ButtonCard/index.ts
@@ -0,0 +1,31 @@
+import type { CardDefinition } from '../types';
+import ButtonCard from './ButtonCard.svelte';
+import EditingButtonCard from './EditingButtonCard.svelte';
+import ButtonCardSettings from './ButtonCardSettings.svelte';
+
+export const ButtonCardDefinition: CardDefinition = {
+	type: 'button',
+	contentComponent: ButtonCard,
+	editingContentComponent: EditingButtonCard,
+	settingsComponent: ButtonCardSettings,
+	sidebarButtonText: 'Button',
+
+	createNew: (card) => {
+		card.cardData = {
+			text: 'Click me'
+		};
+		card.w = 2;
+		card.h = 1;
+		card.mobileW = 4;
+		card.mobileH = 2;
+	},
+
+	defaultColor: 'transparent',
+	allowSetColor: true,
+	canHaveLabel: false,
+
+	minW: 2,
+	minH: 1,
+	maxW: 8,
+	maxH: 4
+};

--
tangled.sh