apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-21 18:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

add see more/less toggle on prompt cards for long content

Browse source
This commit is contained in:
CREDO23 2026-03-30 20:31:19 +02:00
parent bcb202dfe1
commit a73bab89d9
2 changed files with 30 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

22
surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx
View file

@ -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

14
surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
View file

@ -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