feat: customizable column count and width

Author: MisterX2000

src/lib/stores/db.svelte.ts

@@ -61,6 +61,12 @@ class DbStore {
 	globalLanguageId = $state<string>(
 		(browser && localStorage.getItem('copypasta_local_lang')) || 'en'
 	);
+	fluidWidth = $state<boolean>(
+		(browser && localStorage.getItem('copypasta_local_fluid_width') === 'true')
+	);
+	columnCount = $state<string>(
+		(browser && localStorage.getItem('copypasta_local_column_count')) || '2'
+	);
 	editingSnippetIds = $state<string[]>([]);
 	conflictData = $state<Database | null>(null);
 	isLoading = $state(false);
@@ -76,6 +82,20 @@ class DbStore {
 		}
 	}
 
+	setFluidWidth(fluid: boolean) {
+		this.fluidWidth = fluid;
+		if (browser) {
+			localStorage.setItem('copypasta_local_fluid_width', fluid.toString());
+		}
+	}
+
+	setColumnCount(count: string) {
+		this.columnCount = count;
+		if (browser) {
+			localStorage.setItem('copypasta_local_column_count', count);
+		}
+	}
+
 	getLastSyncedAt(): number {
 		if (!browser) return 0;
 		return parseInt(localStorage.getItem('copypasta_last_synced') || '0', 10);

src/routes/+layout.svelte

@@ -22,7 +22,7 @@
 <div class="flex min-h-screen flex-col bg-base-200 pb-16 sm:pb-0">
 	<Navbar />
 
-	<main class="mx-auto w-full max-w-7xl flex-1 p-4">
+	<main class={`mx-auto w-full flex-1 p-4 ${dbStore.fluidWidth ? '' : 'max-w-7xl'}`}>
 		{@render children()}
 	</main>
 

src/routes/+page.svelte

@@ -266,10 +266,16 @@
 		<!-- Snippets Grid -->
 		<div class="flex-1">
 			<div class="mb-4 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
-				<h1 class="text-2xl font-bold">
-					{selectedCategoryId
-						? dbStore.data.categories.find((c) => c.id === selectedCategoryId)?.name
-						: 'All Snippets'}
+				<h1 class="text-2xl font-bold flex items-center">
+					{#if selectedCategoryId}
+						{@const category = dbStore.data.categories.find((c) => c.id === selectedCategoryId)}
+						{#if category?.icon}
+							<span class="mr-2">{category.icon}</span>
+						{/if}
+						{category?.name}
+					{:else}
+						All Snippets
+					{/if}
 				</h1>
 				<div class="flex w-full items-center gap-2 sm:w-auto">
 					<select
@@ -344,7 +350,8 @@
 							{/if}
 
 							<div
-								class={`grid grid-cols-1 gap-4 lg:grid-cols-2 ${isReorderMode ? 'cursor-grab active:cursor-grabbing' : ''}`}
+								class={`grid gap-4 ${isReorderMode ? 'cursor-grab active:cursor-grabbing' : ''} ${dbStore.columnCount === '1' ? 'grid-cols-1' : dbStore.columnCount === '3' ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' : dbStore.columnCount === '4' ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4' : dbStore.columnCount === 'auto' ? '' : 'grid-cols-1 lg:grid-cols-2'}`}
+								style={dbStore.columnCount === 'auto' ? 'grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));' : ''}
 								use:sortableGroup={group.categoryId}
 							>
 								{#each group.snippets as snippet (snippet.id)}

src/routes/categories/+page.svelte

@@ -97,7 +97,7 @@
 	<div class="card border border-base-200 bg-base-100 shadow-sm">
 		<div class="card-body flex-row items-center gap-4 overflow-visible p-4">
 			<div class="dropdown dropdown-bottom">
-				<div tabindex="0" role="button" class="btn w-16 btn-outline text-xl">
+				<div tabindex="0" role="button" class="btn w-16 btn-soft text-xl">
 					{newCategoryEmoji || '😀'}
 				</div>
 				<div
@@ -165,7 +165,7 @@
 
 							<div class="flex flex-1 gap-2 overflow-visible font-medium">
 								<div class="dropdown dropdown-bottom">
-									<div tabindex="0" role="button" class="btn w-12 btn-outline text-lg btn-sm">
+									<div tabindex="0" role="button" class="btn w-12 btn-soft text-lg btn-sm">
 										{category.icon || '😀'}
 									</div>
 									<div

src/routes/settings/+page.svelte

@@ -13,7 +13,8 @@
 		Download,
 		Upload,
 		DatabaseBackup,
-		Languages
+		Languages,
+		LayoutGrid
 	} from '@lucide/svelte';
 
 	let pat = $state(authStore.token);
@@ -384,6 +385,44 @@
 		</div>
 	</section>
 
+	<!-- UI Layout Settings -->
+	<section class="card border border-base-200 bg-base-100 shadow-sm">
+		<div class="card-body">
+			<h2 class="card-title">
+				<LayoutGrid class="h-5 w-5" />
+				Layout Preferences
+			</h2>
+			<p class="mb-4 text-sm text-base-content/70">
+				Customize how snippets are displayed on the main page. (Stored locally on this device)
+			</p>
+
+			<div class="flex items-center justify-between max-w-xs">
+				<span class="font-medium text-sm">Fluid Width (Full Screen)</span>
+				<input
+					type="checkbox"
+					class="toggle toggle-primary"
+					checked={dbStore.fluidWidth}
+					onchange={(e) => dbStore.setFluidWidth(e.currentTarget.checked)}
+				/>
+			</div>
+
+			<fieldset class="fieldset w-full max-w-xs mt-4">
+				<legend class="fieldset-legend font-medium">Grid Columns</legend>
+				<select
+					class="select select-bordered w-full"
+					value={dbStore.columnCount}
+					onchange={(e) => dbStore.setColumnCount(e.currentTarget.value)}
+				>
+					<option value="1">1 Column</option>
+					<option value="2">2 Columns</option>
+					<option value="3">3 Columns</option>
+					<option value="4">4 Columns</option>
+					<option value="auto">Auto-fit (Responsive)</option>
+				</select>
+			</fieldset>
+		</div>
+	</section>
+
 	<!-- Languages Settings -->
 	<section class="card border border-base-200 bg-base-100 shadow-sm">
 		<div class="card-body">