feat(studio): add 'only unplaced items' filter toggle to organize imports dialog

src/components/admin/studio/organize-imports-dialog.tsx

@@ -124,6 +124,7 @@ export function OrganizeImportsDialog({
 	const [points, setPoints] = useState(0);
 	const [pointsType, setPointsType] = useState(0);
 	const [groupSearchQuery, setGroupSearchQuery] = useState("");
+	const [onlyUnplaced, setOnlyUnplaced] = useState(false);
 	const [batchLayout, setBatchLayout] = useState<CatalogLayout>("default_3x3");
 	const [batchPrefix, setBatchPrefix] = useState("");
 
@@ -284,14 +285,15 @@ export function OrganizeImportsDialog({
 
 	const filteredGroups = useMemo(() => {
 		const q = groupSearchQuery.trim().toLowerCase();
-		if (!q) return groups;
 		return groups.filter((g) => {
+			if (onlyUnplaced && g.added === 0 && g.moved === 0) return false;
+			if (!q) return true;
 			if (g.name.toLowerCase().includes(q)) return true;
 			const caption = overrides[g.name]?.caption?.toLowerCase();
 			if (caption?.includes(q)) return true;
 			return g.thumbs.some((t) => t.itemName.toLowerCase().includes(q));
 		});
-	}, [groups, groupSearchQuery, overrides]);
+	}, [groups, groupSearchQuery, onlyUnplaced, overrides]);
 
 	const handleCreate = async () => {
 		if (isCreating) return;
@@ -624,6 +626,15 @@ export function OrganizeImportsDialog({
 												onChange={(e) => setGroupSearchQuery(e.target.value)}
 											/>
 										</div>
+										<label className="flex cursor-pointer items-center gap-1.5 select-none rounded border bg-background/50 px-2 py-1.5 text-[10px] text-muted-foreground transition-colors hover:text-foreground">
+											<input
+												type="checkbox"
+												checked={onlyUnplaced}
+												onChange={(e) => setOnlyUnplaced(e.target.checked)}
+												className="h-3 w-3 rounded border-gray-300"
+											/>
+											<span>{t("onlyUnplaced")}</span>
+										</label>
 										<Button
 											type="button"
 											variant="outline"