From d4df6f5c11a1a220e53b4160dcd0aff118fd9cee Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Sun, 20 Apr 2025 03:19:01 +0200
Subject: [PATCH] feat: Implement useId hook for generating unique IDs

---
 app/components/Icon.tsx         |  5 +++--
 app/components/Logo.tsx         |  4 ++--
 app/components/Search.tsx       | 23 +++--------------------
 app/hooks/useId.tsx             |  6 ++++++
 app/partials/HeroBackground.tsx |  4 ++--
 5 files changed, 16 insertions(+), 26 deletions(-)
 create mode 100644 app/hooks/useId.tsx

diff --git a/app/components/Icon.tsx b/app/components/Icon.tsx
index 619109c..262bdda 100644
--- a/app/components/Icon.tsx
+++ b/app/components/Icon.tsx
@@ -7,7 +7,8 @@ import { PluginsIcon } from "@/icons/PluginsIcon";
 import { PresetsIcon } from "@/icons/PresetsIcon";
 import { ThemingIcon } from "@/icons/ThemingIcon";
 import { WarningIcon } from "@/icons/WarningIcon";
-import { createUniqueId, For } from "solid-js";
+import { useId } from "@/hooks/useId";
+import { For } from "solid-js";
 import clsx from "clsx";
 
 const icons = {
@@ -34,7 +35,7 @@ export type IconProps = JSX.IntrinsicElements["svg"] & {
 };
 
 export function Icon(props: IconProps) {
-	const id = createUniqueId();
+	const id = useId();
 	const IconComponent = icons[props.icon];
 
 	return (
diff --git a/app/components/Logo.tsx b/app/components/Logo.tsx
index 60acc0e..eb21db2 100644
--- a/app/components/Logo.tsx
+++ b/app/components/Logo.tsx
@@ -1,9 +1,9 @@
 import type { JSX } from "solid-js";
 
-import { createUniqueId } from "solid-js";
+import { useId } from "@/hooks/useId";
 
 function LogomarkPaths() {
-	const id = createUniqueId();
+	const id = useId();
 
 	return (
 		<>
diff --git a/app/components/Search.tsx b/app/components/Search.tsx
index cb35b0e..1f13165 100644
--- a/app/components/Search.tsx
+++ b/app/components/Search.tsx
@@ -1,16 +1,7 @@
 import type { SearchResult } from "@/services/FlexSearchService";
 import type { JSX, Accessor, Setter } from "solid-js";
 
-// import React, {
-// 	useId,
-// 	createSignal,
-// 	createEffect,
-// 	createContext,
-// 	useContext,
-// 	Fragment,
-// } from "react";
 import {
-	createUniqueId,
 	createContext,
 	useContext,
 	For,
@@ -20,9 +11,9 @@ import {
 import { Dialog, DialogPanel } from "terracotta";
 import { useDebounce } from "@/hooks/useDebounce";
 import { Highlighter } from "solid-highlight-words";
-// import { navigation } from "@/lib/navigation";
 import { navigate } from "vike/client/router";
 import { onSearch } from "./Search.telefunc";
+import { useId } from "@/hooks/useId";
 import clsx from "clsx";
 
 const SearchContext = createContext<{
@@ -56,7 +47,7 @@ function SearchIcon(props: JSX.IntrinsicElements["svg"]) {
 }
 
 function LoadingIcon(props: JSX.IntrinsicElements["svg"]) {
-	const id = createUniqueId();
+	const id = useId();
 
 	return (
 		<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
@@ -135,15 +126,7 @@ function HighlightQuery({ text, query }: { text: string; query: string }) {
 
 function SearchResultItem(props: { result: SearchResult; query: string }) {
 	const { close } = useContext(SearchContext);
-	const id = createUniqueId();
-
-	// const sectionTitle = navigation.find((section) =>
-	// 	section.links.find((link) => link.href === result.url.split("#")[0]),
-	// )?.title;
-
-	// const hierarchy = [sectionTitle, result.pageTitle].filter(
-	// 	(x): x is string => typeof x === "string",
-	// );
+	const id = useId();
 
 	return (
 		<li
diff --git a/app/hooks/useId.tsx b/app/hooks/useId.tsx
new file mode 100644
index 0000000..8aa4aa1
--- /dev/null
+++ b/app/hooks/useId.tsx
@@ -0,0 +1,6 @@
+import { createUniqueId } from "solid-js";
+
+export function useId() {
+	const id = createUniqueId();
+	return `memento-${id}`;
+}
diff --git a/app/partials/HeroBackground.tsx b/app/partials/HeroBackground.tsx
index 3da6dde..55382b9 100644
--- a/app/partials/HeroBackground.tsx
+++ b/app/partials/HeroBackground.tsx
@@ -1,9 +1,9 @@
 import type { JSX } from "solid-js";
 
-import { createUniqueId } from "solid-js";
+import { useId } from "@/hooks/useId";
 
 export function HeroBackground(props: JSX.IntrinsicElements["svg"]) {
-	const id = createUniqueId();
+	const id = useId();
 
 	return (
 		<svg