expandedCards

src/components/delete-function-modal.tsx

@@ -23,7 +23,7 @@ type Props = {
 export function DeleteFunctionModal({ onClose, isOpen, functionId }: Props) {
 	const { func, removeFunction } = useFunction(functionId);
 	const navigate = Route.useNavigate();
-	const { path, flags, filters } = Route.useSearch();
+	const { path, flags, filters, expandedCards } = Route.useSearch();
 
 	return (
 		<Modal onClose={onClose} isOpen={isOpen} isCentered>
@@ -62,6 +62,7 @@ export function DeleteFunctionModal({ onClose, isOpen, functionId }: Props) {
 												: pathString,
 										) ?? ["1"],
 										filters,
+										expandedCards,
 										flags: flags,
 									},
 								});

src/components/function-card.tsx

@@ -4,7 +4,7 @@ import { Card, Flex, IconButton, Skeleton, Stack, Text } from "@kvib/react";
 import { FunctionCardEdit } from "./function-card-edit";
 import { FunctionCardExpandableContent } from "./function-card-expandable-content";
 import { EditAndSelectButtons } from "./edit-and-select-buttons";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useHasFunctionAccess } from "@/hooks/use-has-function-access";
 
 export function FunctionCard({
@@ -17,10 +17,19 @@ export function FunctionCard({
 	const search = Route.useSearch();
 	const navigate = Route.useNavigate();
 
-	const [isCardExpanded, setIsCardExpanded] = useState(false);
+	const isCardExpanded = useMemo(() => {
+		return search.expandedCards?.includes(functionId) ?? false;
+	}, [functionId, search.expandedCards]);
 
 	const toggleCardExpanded = () => {
-		setIsCardExpanded((prev) => !prev);
+		navigate({
+			search: {
+				...search,
+				expandedCards: isCardExpanded
+					? search.expandedCards?.filter((id) => id !== functionId)
+					: [...(search.expandedCards ?? []), functionId],
+			},
+		});
 	};
 
 	const [bottomMargin, setBottomMargin] = useState(0);
@@ -65,6 +74,7 @@ export function FunctionCard({
 								? [func?.data?.path.slice(0, func?.data?.path.lastIndexOf("."))]
 								: [`${func?.data?.path}`]),
 						],
+						expandedCards: search.expandedCards,
 						filters: search.filters,
 						edit: search.edit,
 						flags: search.flags,

src/components/search-field.tsx

@@ -23,7 +23,15 @@ export function SearchField() {
 				}}
 				onChange={(newFunc: { value: string } | null) => {
 					if (newFunc) {
-						navigate({ search: { ...search, path: [newFunc.value] } });
+						const newPath = newFunc.value;
+						const newId = Number.parseInt(newPath.split(".").pop() ?? "1");
+						navigate({
+							search: {
+								...search,
+								path: [newFunc.value],
+								expandedCards: [newId],
+							},
+						});
 					}
 				}}
 				placeholder="Søk på funksjonsnavnet her..."

src/effects/create-and-redirect-effect.ts

@@ -13,6 +13,7 @@ export function CreateAndRedirectEffect() {
 		newMetadataKey,
 		newMetadataValue,
 		redirect,
+		expandedCards,
 	} = Route.useSearch();
 
 	const { func } = useFunction(functionId ?? 1);
@@ -35,7 +36,13 @@ export function CreateAndRedirectEffect() {
 					if (redirect) {
 						window.location.href = redirect;
 					} else {
-						navigate({ search: { path: path, flags: flags } });
+						navigate({
+							search: {
+								path: path,
+								flags: flags,
+								expandedCards: expandedCards,
+							},
+						});
 					}
 				});
 		}
@@ -47,6 +54,7 @@ export function CreateAndRedirectEffect() {
 		path,
 		flags,
 		addMetadata,
+		expandedCards,
 		navigate,
 	]);
 

src/routes/index.tsx

@@ -20,6 +20,7 @@ const functionSearchSchema = object({
 		),
 		["1"],
 	),
+	expandedCards: array(number()).optional(),
 	functionId: number().optional(),
 	edit: number().optional(),
 	newMetadataKey: string().optional(),