From a73bab89d986e6b34f731729f6e3890a1c6d65ac Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Mon, 30 Mar 2026 20:31:19 +0200
Subject: [PATCH] add see more/less toggle on prompt cards for long content

---
 .../components/CommunityPromptsContent.tsx    | 22 ++++++++++++++-----
 .../components/PromptsContent.tsx             | 14 +++++++++++-
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx
index 4ae47dbfc..363919b43 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx
@@ -12,6 +12,7 @@ export function CommunityPromptsContent() {
 	const [prompts, setPrompts] = useState<PublicPromptRead[]>([]);
 	const [isLoading, setIsLoading] = useState(true);
 	const [copyingId, setCopyingId] = useState<number | null>(null);
+	const [expandedId, setExpandedId] = useState<number | null>(null);
 
 	useEffect(() => {
 		promptsApiService
@@ -73,12 +74,23 @@ export function CommunityPromptsContent() {
 									<span className="rounded-full border px-2 py-0.5 text-[10px] text-muted-foreground">
 										{prompt.mode}
 									</span>
+									{prompt.author_name && (
+										<span className="text-[11px] text-muted-foreground/60">
+											by {prompt.author_name}
+										</span>
+									)}
 								</div>
-								<p className="mt-1 text-xs text-muted-foreground line-clamp-2">{prompt.prompt}</p>
-								{prompt.author_name && (
-									<p className="mt-1.5 text-[11px] text-muted-foreground/60">
-										by {prompt.author_name}
-									</p>
+								<p className={`mt-1 text-xs text-muted-foreground ${expandedId === prompt.id ? "whitespace-pre-wrap" : "line-clamp-2"}`}>
+									{prompt.prompt}
+								</p>
+								{prompt.prompt.length > 100 && (
+									<button
+										type="button"
+										onClick={() => setExpandedId(expandedId === prompt.id ? null : prompt.id)}
+										className="mt-1 text-[11px] text-primary hover:underline cursor-pointer"
+									>
+										{expandedId === prompt.id ? "See less" : "See more"}
+									</button>
 								)}
 							</div>
 							<Button
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
index fee46192e..c2f9c7123 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
@@ -27,6 +27,7 @@ export function PromptsContent() {
 	const [editingId, setEditingId] = useState<number | null>(null);
 	const [formData, setFormData] = useState<PromptFormData>(EMPTY_FORM);
 	const [isSaving, setIsSaving] = useState(false);
+	const [expandedId, setExpandedId] = useState<number | null>(null);
 
 	useEffect(() => {
 		promptsApiService
@@ -227,7 +228,18 @@ export function PromptsContent() {
 										</span>
 									)}
 								</div>
-								<p className="mt-1 text-xs text-muted-foreground line-clamp-2">{prompt.prompt}</p>
+								<p className={`mt-1 text-xs text-muted-foreground ${expandedId === prompt.id ? "whitespace-pre-wrap" : "line-clamp-2"}`}>
+									{prompt.prompt}
+								</p>
+								{prompt.prompt.length > 100 && (
+									<button
+										type="button"
+										onClick={() => setExpandedId(expandedId === prompt.id ? null : prompt.id)}
+										className="mt-1 text-[11px] text-primary hover:underline cursor-pointer"
+									>
+										{expandedId === prompt.id ? "See less" : "See more"}
+									</button>
+								)}
 							</div>
 							<div className="hidden group-hover:flex items-center gap-1 shrink-0">
 								<button