#1127 multiple ids in search params

inlang/source-code/editor/src/pages/@host/@owner/@repository/+Page.tsx

@@ -167,8 +167,7 @@ function TheActualPage() {
 						<div
 							class="flex flex-col h-[calc(100vh_-_324px)] grow justify-center items-center min-w-full gap-2"
 							classList={{
-								["hidden"]:
-									messageCount() !== 0,
+								["hidden"]: messageCount() !== 0,
 							}}
 						>
 							<NoMatchPlaceholder />

inlang/source-code/editor/src/pages/@host/@owner/@repository/Message.tsx

@@ -11,7 +11,7 @@ import { sortLanguageTags } from "./helper/sortLanguageTags.js"
 import { setMessageCount } from "./+Page.jsx"
 
 export function Message(props: { id: string }) {
-	const { project, filteredLanguageTags, filteredId, filteredMessageLintRules, textSearch } =
+	const { project, filteredLanguageTags, filteredIds, filteredMessageLintRules, textSearch } =
 		useEditorState()
 	const [message, setMessage] = createSignal<MessageType>()
 	const [lintReports, setLintReports] = createSignal<Readonly<MessageLintReport[]>>([])
@@ -57,9 +57,9 @@ export function Message(props: { id: string }) {
 
 	createEffect(
 		on(
-			[filteredLanguageTags, filteredMessageLintRules, filteredId, textSearch, hasBeenLinted],
+			[filteredLanguageTags, filteredMessageLintRules, filteredIds, textSearch, hasBeenLinted],
 			() => {
-				setShouldMessageBeShown(prev => {
+				setShouldMessageBeShown((prev) => {
 					const result = !showFilteredMessage(message())
 					// check if message count changed and update the global message count
 					if (result !== prev && result === true) {
@@ -103,7 +103,11 @@ export function Message(props: { id: string }) {
 								"?id=" +
 								message()?.id
 						),
-							showToast({ variant: "success", title: "Message ID link copied to clipboard", duration: 3000 })
+							showToast({
+								variant: "success",
+								title: "Message ID link copied to clipboard",
+								duration: 3000,
+							})
 					}}
 					class="opacity-0 transition-all group-hover:opacity-100 text-info/70 h-7 w-7 text-sm rounded flex items-center justify-center hover:bg-on-background/10 hover:text-info cursor-pointer"
 				>

inlang/source-code/editor/src/pages/@host/@owner/@repository/State.tsx

@@ -83,8 +83,8 @@ type EditorStateSchema = {
 	/**
 	 * Id to filter messages
 	 */
-	filteredId: () => string
-	setFilteredId: Setter<string>
+	filteredIds: () => string[]
+	setFilteredIds: Setter<string[]>
 
 	/**
 	 * TextSearch to filter messages
@@ -206,9 +206,9 @@ export function EditorStateProvider(props: { children: JSXElement }) {
 	//set filter with search params
 	const params = new URL(document.URL).searchParams
 
-	const [filteredId, setFilteredId] = createSignal<string>((params.get("id") || "") as string)
+	const [filteredIds, setFilteredIds] = createSignal<string[]>(params.getAll("id") as string[])
 	createEffect(() => {
-		setSearchParams({ key: "id", value: filteredId() })
+		setSearchParams({ key: "id", value: filteredIds() })
 	})
 
 	const [textSearch, setTextSearch] = createSignal<string>((params.get("search") || "") as string)
@@ -319,7 +319,10 @@ export function EditorStateProvider(props: { children: JSXElement }) {
 			if (args.repo?.nodeishFs === undefined) return []
 			const projects = await listProjects(args.repo?.nodeishFs, "/")
 
-			if (searchParams().project && projects.some((project) => project.projectPath === searchParams().project)) {
+			if (
+				searchParams().project &&
+				projects.some((project) => project.projectPath === searchParams().project)
+			) {
 				setActiveProject(searchParams().project)
 			} else if (projects.length === 1) {
 				setActiveProject(projects[0]?.projectPath)
@@ -529,8 +532,8 @@ export function EditorStateProvider(props: { children: JSXElement }) {
 					githubRepositoryInformation,
 					routeParams,
 					searchParams,
-					filteredId,
-					setFilteredId,
+					filteredIds,
+					setFilteredIds,
 					textSearch,
 					setTextSearch,
 					fsChange,

inlang/source-code/editor/src/pages/@host/@owner/@repository/components/Listheader.tsx

@@ -12,8 +12,8 @@ export const ListHeader = () => {
 		setFilteredMessageLintRules,
 		filteredMessageLintRules,
 		filteredLanguageTags,
-		filteredId,
-		setFilteredId,
+		filteredIds,
+		setFilteredIds,
 		setTourStep,
 		tourStep,
 	} = useEditorState()
@@ -22,7 +22,7 @@ export const ListHeader = () => {
 		const summary = new Map<string, number>() // Use a Map with explicit types for better performance
 		const filteredRules = new Set<string>(filteredMessageLintRules())
 		const filteredTags = new Set<string>(filteredLanguageTags())
-		const filteredIdValue = filteredId()
+		const filteredIdsValue = filteredIds()
 
 		for (const report of project()?.query.messageLintReports.getAll() || []) {
 			const ruleId = report.ruleId
@@ -32,7 +32,7 @@ export const ListHeader = () => {
 			if (
 				(filteredRules.size === 0 || filteredRules.has(ruleId)) &&
 				(filteredTags.size === 0 || filteredTags.has(languageTag)) &&
-				(filteredIdValue === "" || filteredIdValue === messageId)
+				(filteredIdsValue.length === 0 || filteredIdsValue.includes(messageId))
 			) {
 				summary.set(ruleId, (summary.get(ruleId) || 0) + 1)
 			}
@@ -55,23 +55,21 @@ export const ListHeader = () => {
 	return (
 		<div class="w-full bg-background border border-surface-3 rounded-t-md flex flex-wrap items-center justify-between gap-2 p-4 animate-blendIn z-[1] relative">
 			<Show
-				when={filteredId() === ""}
+				when={filteredIds().length === 0}
 				fallback={
 					<div class="flex gap-2 items-center">
-						<sl-button prop:size="small" onClick={() => setFilteredId("")}>
+						<sl-button prop:size="small" onClick={() => setFilteredIds([])}>
 							{/* @ts-ignore */}
 							<IconArrowLeft slot="prefix" />
 							Back to all messages
 						</sl-button>
 						<div class="h-[30px] px-3 flex gap-2 font-medium items-center rounded-md text-xs bg-hover-primary/10 text-primary">
-							Isolated view (single ID)
+							Isolated view
 						</div>
 					</div>
 				}
 			>
-				<div class="font-medium text-on-surface">
-					{messageCount() + " Messages"}
-				</div>
+				<div class="font-medium text-on-surface">{messageCount() + " Messages"}</div>
 			</Show>
 
 			<div class="flex flex-wrap gap-2">

inlang/source-code/editor/src/pages/@host/@owner/@repository/helper/setSearchParams.ts

@@ -2,7 +2,7 @@
 
 type SearchParams = {
 	search?: string
-	id?: string
+	id?: string[]
 	lint?: `${string}.${string}`[]
 	lang?: string[]
 	branch?: string
@@ -26,7 +26,7 @@ type ProjectType = {
 
 type idType = {
 	key: "id"
-	value: string
+	value: string[]
 }
 
 type LintType = {
@@ -48,7 +48,7 @@ export const setSearchParams = ({ key, value }: SearchParamsType) => {
 	//extract search params from url
 	const searchParamsObj: SearchParams = {
 		search: currentUrl.searchParams.get("search") || "",
-		id: currentUrl.searchParams.get("id") || "",
+		id: currentUrl.searchParams.getAll("id"),
 		branch: currentUrl.searchParams.get("branch") || "",
 		project: currentUrl.searchParams.get("project") || "",
 		lint: currentUrl.searchParams.getAll("lint") as `${string}.${string}`[],
@@ -61,7 +61,8 @@ export const setSearchParams = ({ key, value }: SearchParamsType) => {
 			searchParamsObj.search = value as string
 			break
 		case "id":
-			searchParamsObj.id = value as string
+			searchParamsObj.id = []
+			searchParamsObj.id = [...value]
 			break
 		case "lint":
 			searchParamsObj.lint = []

inlang/source-code/editor/src/pages/@host/@owner/@repository/helper/showFilteredMessage.ts

@@ -1,7 +1,7 @@
 import type { MessageLintReport, Message } from "@inlang/sdk"
 import { useEditorState } from "../State.jsx"
 export const showFilteredMessage = (message: Message | undefined) => {
-	const { filteredMessageLintRules, filteredLanguageTags, filteredId, textSearch, project } =
+	const { filteredMessageLintRules, filteredLanguageTags, filteredIds, textSearch, project } =
 		useEditorState()
 
 	// Early exit if variants are empty
@@ -41,7 +41,7 @@ export const showFilteredMessage = (message: Message | undefined) => {
 
 	// filteredById
 	const filteredById =
-		filteredId() === "" || (message !== undefined && message.id === filteredId())
+		filteredIds().length === 0 || (message !== undefined && filteredIds().includes(message.id))
 			? filteredByLanguage
 			: false