Fix review issues: idempotent migration, toggle guard, picker states

surfsense_backend/alembic/versions/112_add_prompt_library_schema.py

@@ -6,6 +6,7 @@ Revises: 111
 
 from collections.abc import Sequence
 
+import sqlalchemy as sa
 from alembic import op
 
 revision: str = "112"
@@ -31,10 +32,17 @@ def upgrade() -> None:
         "CREATE INDEX IF NOT EXISTS ix_prompts_default_prompt_slug"
         " ON prompts (default_prompt_slug)"
     )
-    op.execute(
+    conn = op.get_bind()
-        "ALTER TABLE prompts ADD CONSTRAINT uq_prompt_user_default_slug"
+    exists = conn.execute(
-        " UNIQUE (user_id, default_prompt_slug)"
+        sa.text(
-    )
+            "SELECT 1 FROM pg_constraint WHERE conname = 'uq_prompt_user_default_slug'"
+        )
+    ).scalar()
+    if not exists:
+        op.execute(
+            "ALTER TABLE prompts ADD CONSTRAINT uq_prompt_user_default_slug"
+            " UNIQUE (user_id, default_prompt_slug)"
+        )
     op.execute(
         "ALTER TABLE prompts ADD COLUMN IF NOT EXISTS"
         " version INTEGER NOT NULL DEFAULT 1"

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

@@ -48,6 +48,7 @@ export function PromptsContent() {
 	const [isSaving, setIsSaving] = useState(false);
 	const [expandedId, setExpandedId] = useState<number | null>(null);
 	const [deleteTarget, setDeleteTarget] = useState<number | null>(null);
+	const [togglingPublicIds, setTogglingPublicIds] = useState<Set<number>>(new Set());
 
 	const handleSave = useCallback(async () => {
 		if (!formData.name.trim() || !formData.prompt.trim()) {
@@ -96,13 +97,21 @@ export function PromptsContent() {
 
 	const handleTogglePublic = useCallback(
 		async (prompt: PromptRead) => {
+			if (togglingPublicIds.has(prompt.id)) return;
+			setTogglingPublicIds((prev) => new Set(prev).add(prompt.id));
 			try {
 				await updatePrompt({ id: prompt.id, is_public: !prompt.is_public });
 			} catch {
 				// toast handled by mutation atom
+			} finally {
+				setTogglingPublicIds((prev) => {
+					const next = new Set(prev);
+					next.delete(prompt.id);
+					return next;
+				});
 			}
 		},
-		[updatePrompt]
+		[updatePrompt, togglingPublicIds]
 	);
 
 	const handleCancel = useCallback(() => {
@@ -276,18 +285,21 @@ export function PromptsContent() {
 								)}
 							</div>
 							<div className="hidden group-hover:flex items-center gap-1 shrink-0">
-								<button
+							<button
-									type="button"
+								type="button"
-									title={prompt.is_public ? "Make private" : "Share with community"}
+								title={prompt.is_public ? "Make private" : "Share with community"}
-									onClick={() => handleTogglePublic(prompt)}
+								onClick={() => handleTogglePublic(prompt)}
-									className="flex items-center justify-center size-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+								disabled={togglingPublicIds.has(prompt.id)}
-								>
+								className="flex items-center justify-center size-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors disabled:opacity-50 disabled:pointer-events-none"
-									{prompt.is_public ? (
+							>
-										<Lock className="size-3.5" />
+								{togglingPublicIds.has(prompt.id) ? (
-									) : (
+									<Spinner className="size-3.5" />
-										<Globe className="size-3.5" />
+								) : prompt.is_public ? (
-									)}
+									<Lock className="size-3.5" />
-								</button>
+								) : (
+									<Globe className="size-3.5" />
+								)}
+							</button>
 								<Button
 									variant="ghost"
 									size="icon"

surfsense_web/components/new-chat/prompt-picker.tsx

@@ -14,6 +14,7 @@ import {
 
 import { promptsAtom } from "@/atoms/prompts/prompts-query.atoms";
 import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
+import { Spinner } from "@/components/ui/spinner";
 import { cn } from "@/lib/utils";
 
 export interface PromptPickerRef {
@@ -34,7 +35,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 	ref
 ) {
 	const setUserSettingsDialog = useSetAtom(userSettingsDialogAtom);
-	const { data: prompts } = useAtomValue(promptsAtom);
+	const { data: prompts, isLoading, isError } = useAtomValue(promptsAtom);
 	const [highlightedIndex, setHighlightedIndex] = useState(0);
 	const scrollContainerRef = useRef<HTMLDivElement>(null);
 	const shouldScrollRef = useRef(false);
@@ -87,10 +88,12 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 		() => ({
 			selectHighlighted: () => handleSelect(highlightedIndex),
 			moveUp: () => {
+				if (filtered.length === 0) return;
 				shouldScrollRef.current = true;
 				setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filtered.length - 1));
 			},
 			moveDown: () => {
+				if (filtered.length === 0) return;
 				shouldScrollRef.current = true;
 				setHighlightedIndex((prev) => (prev < filtered.length - 1 ? prev + 1 : 0));
 			},
@@ -103,10 +106,16 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 			className="w-64 rounded-lg border bg-popover shadow-lg overflow-hidden"
 			style={containerStyle}
 		>
-			<div ref={scrollContainerRef} className="max-h-48 overflow-y-auto py-1">
+		<div ref={scrollContainerRef} className="max-h-48 overflow-y-auto py-1">
-				{filtered.length === 0 ? (
+			{isLoading ? (
-					<p className="px-3 py-2 text-xs text-muted-foreground">No matching prompts</p>
+				<div className="flex items-center justify-center py-3">
-				) : (
+					<Spinner className="size-4" />
+				</div>
+			) : isError ? (
+				<p className="px-3 py-2 text-xs text-destructive">Failed to load prompts</p>
+			) : filtered.length === 0 ? (
+				<p className="px-3 py-2 text-xs text-muted-foreground">No matching prompts</p>
+			) : (
 					filtered.map((action, index) => (
 						<button
 							key={action.id}