From 1c0359e5401ea371fe98d37769b72bb1586418c6 Mon Sep 17 00:00:00 2001
From: Yuri Karamian <yuri@arkhost.com>
Date: Mon, 3 Aug 2026 01:33:38 +0200
Subject: [PATCH] Add custom icon size guidance

---
 src/lib/components/Sidebar.svelte | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index ad59a66..a71869b 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -992,6 +992,7 @@
 				{/each}
 			</div>
 			<div class="icon-picker-actions">
+				<p class="icon-picker-recommendation">Recommended custom image size: <strong>128 × 128 px</strong></p>
 				<button onclick={() => handleCustomIcon(iconPickerNotebook!)}>
 					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" /></svg>
 					Custom image...
@@ -1785,11 +1786,21 @@
 
 	.icon-picker-actions {
 		display: flex;
+		flex-wrap: wrap;
 		gap: 8px;
 		padding: 12px 14px 14px;
 		border-top: 1px solid var(--border-light);
 	}
 
+	.icon-picker-recommendation {
+		flex: 0 0 100%;
+		margin: 0 0 2px;
+		color: var(--text-tertiary);
+		font-size: 12px;
+		line-height: 1.4;
+		text-align: center;
+	}
+
 	.icon-picker-actions button {
 		flex: 1;
 		display: flex;