From 0b02d12c104b269c2e337cb1fd3b15216b310c83 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Sat, 24 Jan 2026 11:48:01 +0100
Subject: [PATCH] add settings to section card

---
 .../SectionCard/EditingSectionCard.svelte     |   7 +-
 src/lib/cards/SectionCard/SectionCard.svelte  |   8 +-
 .../SectionCard/SectionCardSettings.svelte    | 175 ++++++++++++++++++
 src/lib/cards/SectionCard/index.ts            |  24 ++-
 4 files changed, 210 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/cards/SectionCard/SectionCardSettings.svelte

diff --git a/src/lib/cards/SectionCard/EditingSectionCard.svelte b/src/lib/cards/SectionCard/EditingSectionCard.svelte
index 448d7e6..f1575f4 100644
--- a/src/lib/cards/SectionCard/EditingSectionCard.svelte
+++ b/src/lib/cards/SectionCard/EditingSectionCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Item } from '$lib/types';
+	import { textAlignClasses, textSizeClasses, verticalAlignClasses } from '.';
 	import type { ContentComponentProps } from '../types';
 	import PlainTextEditor from '../utils/PlainTextEditor.svelte';
 
@@ -7,7 +8,11 @@
 </script>
 
 <div
-	class="line-clamp-1 inline-flex h-full w-full items-center rounded-md p-1 px-2 text-2xl font-semibold"
+	class={["line-clamp-1 inline-flex h-full w-full rounded-md p-1 px-2 font-semibold",
+		textAlignClasses[item.cardData.textAlign as string],
+		verticalAlignClasses[item.cardData.verticalAlign ?? ('center' as string)],
+		textSizeClasses[(item.cardData.textSize ?? 1) as number]
+	]}
 >
 	<PlainTextEditor bind:item key="text" class="line-clamp-1 w-full" />
 </div>
diff --git a/src/lib/cards/SectionCard/SectionCard.svelte b/src/lib/cards/SectionCard/SectionCard.svelte
index 8e6eea0..4e67e9b 100644
--- a/src/lib/cards/SectionCard/SectionCard.svelte
+++ b/src/lib/cards/SectionCard/SectionCard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { marked } from 'marked';
 	import type { ContentComponentProps } from '../types';
+	import { textAlignClasses, textSizeClasses, verticalAlignClasses } from '.';
 
 	let { item }: ContentComponentProps = $props();
 
@@ -10,7 +11,12 @@
 </script>
 
 <div
-	class="line-clamp-1 inline-flex h-full w-full items-center rounded-md p-1 px-2 text-2xl font-semibold"
+	class={[
+		'line-clamp-1 inline-flex h-full w-full rounded-md p-1 px-2 font-semibold',
+		textAlignClasses[item.cardData.textAlign as string],
+		verticalAlignClasses[item.cardData.verticalAlign ?? ('center' as string)],
+		textSizeClasses[(item.cardData.textSize ?? 1) as number]
+	]}
 >
 	{item.cardData.text}
 </div>
diff --git a/src/lib/cards/SectionCard/SectionCardSettings.svelte b/src/lib/cards/SectionCard/SectionCardSettings.svelte
new file mode 100644
index 0000000..cc04b4e
--- /dev/null
+++ b/src/lib/cards/SectionCard/SectionCardSettings.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { textSizeClasses } from '.';
+	import type { ContentComponentProps } from '../types';
+	import { ToggleGroup, ToggleGroupItem, Button } from '@foxui/core';
+
+	let { item = $bindable<Item>() }: ContentComponentProps = $props();
+
+	const classes = 'size-8 min-w-8 [&_svg]:size-3 cursor-pointer';
+</script>
+
+<div class="flex flex-col gap-2">
+	<ToggleGroup
+		type="single"
+		bind:value={
+			() => {
+				return item.cardData.verticalAlign ?? 'center';
+			},
+			(value) => {
+				if (!value) return;
+				item.cardData.verticalAlign = value;
+			}
+		}
+	>
+		<ToggleGroupItem size="sm" value="top" class={classes}
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				><rect width="6" height="16" x="4" y="6" rx="2" /><rect
+					width="6"
+					height="9"
+					x="14"
+					y="6"
+					rx="2"
+				/><path d="M22 2H2" /></svg
+			>
+		</ToggleGroupItem>
+		<ToggleGroupItem size="sm" value="center" class={classes}
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				><rect width="10" height="6" x="7" y="9" rx="2" /><path d="M22 20H2" /><path
+					d="M22 4H2"
+				/></svg
+			></ToggleGroupItem
+		>
+		<ToggleGroupItem size="sm" value="bottom" class={classes}
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				><rect width="14" height="6" x="5" y="12" rx="2" /><rect
+					width="10"
+					height="6"
+					x="7"
+					y="2"
+					rx="2"
+				/><path d="M2 22h20" /></svg
+			></ToggleGroupItem
+		>
+	</ToggleGroup>
+
+	<ToggleGroup
+		type="single"
+		bind:value={
+			() => {
+				return item.cardData.textAlign ?? 'left';
+			},
+			(value) => {
+				if (!value) return;
+				item.cardData.textAlign = value;
+			}
+		}
+	>
+		<ToggleGroupItem size="sm" value="left" class={classes}
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg
+			></ToggleGroupItem
+		>
+		<ToggleGroupItem size="sm" value="center" class={classes}
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg
+			></ToggleGroupItem
+		>
+		<ToggleGroupItem size="sm" value="right" class={classes}
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg
+			></ToggleGroupItem
+		>
+	</ToggleGroup>
+
+	<div>
+		<Button
+			variant="ghost"
+			onclick={() => {
+				item.cardData.textSize = Math.max((item.cardData.textSize ?? 1) - 1, 0);
+			}}
+			disabled={(item.cardData.textSize ?? 1) < 1}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-aarrow-down-icon lucide-a-arrow-down"
+				><path d="m14 12 4 4 4-4" /><path d="M18 16V7" /><path
+					d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
+				/><path d="M3.304 13h6.392" /></svg
+			>
+		</Button>
+		<Button
+			variant="ghost"
+			onclick={() => {
+				item.cardData.textSize = Math.min(
+					(item.cardData.textSize ?? 1) + 1,
+					textSizeClasses.length - 1
+				);
+			}}
+			disabled={(item.cardData.textSize ?? 1) >= textSizeClasses.length - 1}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-aarrow-up-icon lucide-a-arrow-up"
+				><path d="m14 11 4-4 4 4" /><path d="M18 16V7" /><path
+					d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
+				/><path d="M3.304 13h6.392" /></svg
+			>
+		</Button>
+	</div>
+</div>
diff --git a/src/lib/cards/SectionCard/index.ts b/src/lib/cards/SectionCard/index.ts
index 0cd7253..0fb965b 100644
--- a/src/lib/cards/SectionCard/index.ts
+++ b/src/lib/cards/SectionCard/index.ts
@@ -2,6 +2,7 @@ import { COLUMNS } from '$lib';
 import type { CardDefinition } from '../types';
 import EditingSectionCard from './EditingSectionCard.svelte';
 import SectionCard from './SectionCard.svelte';
+import SectionCardSettings from './SectionCardSettings.svelte';
 
 export const SectionCardDefinition = {
 	type: 'section',
@@ -10,7 +11,9 @@ export const SectionCardDefinition = {
 	createNew: (card) => {
 		card.cardType = 'section';
 		card.cardData = {
-			text: 'hello world'
+			text: 'hello world',
+			verticalAlign: 'bottom',
+			textSize: 1
 		};
 
 		card.h = 1;
@@ -22,5 +25,22 @@ export const SectionCardDefinition = {
 
 	defaultColor: 'transparent',
 	maxH: 1,
-	canResize: false
+	canResize: false,
+	settingsComponent: SectionCardSettings
 } as CardDefinition & { type: 'section' };
+
+
+
+export const textAlignClasses: Record<string, string> = {
+	left: '',
+	center: 'text-center justify-center',
+	right: 'text-end justify-end'
+};
+
+export const verticalAlignClasses: Record<string, string> = {
+	top: 'items-stretch',
+	center: 'items-center-safe',
+	bottom: 'items-end-safe'
+};
+
+export const textSizeClasses = ['text-lg', 'text-2xl', 'text-4xl', 'text-6xl'];
-- 
2.51.2