modal redirect fixes for [id]s

app/projects/page.tsx

@@ -5,13 +5,23 @@ import { useSearchParams } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
 
+type ProjectRow = {
+  id: string | number;
+  submission_id?: string | number;
+  title?: string;
+  uploader?: string;
+  category?: string;
+  tags?: string[];
+  p_image?: { filename_disk?: string; title?: string };
+};
+
 export default function ProjectsPage() {
   const searchParams = useSearchParams();
   const initialQuery = searchParams.get("query") || "";
 
   const [query, setQuery] = useState(initialQuery);
   const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
-  const [projects, setProjects] = useState<any[]>([]);
+  const [projects, setProjects] = useState<ProjectRow[]>([]);
   const [loading, setLoading] = useState(true);
   const [categories] = useState([
     "assets",
@@ -20,7 +30,7 @@ export default function ProjectsPage() {
     "projects",
     "templates",
     "test files",
-    "tools"
+    "tools",
   ]);
 
   useEffect(() => {
@@ -30,13 +40,16 @@ export default function ProjectsPage() {
 
   useEffect(() => {
     const url = new URL(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/projects`);
-    url.searchParams.set("fields", "submission_id,title,uploader,category,tags,p_image.filename_disk,p_image.title");
+    url.searchParams.set(
+      "fields",
+      "submission_id,id,title,uploader,category,tags,p_image.filename_disk,p_image.title"
+    );
     url.searchParams.set("limit", "-1");
 
     fetch(url.toString(), { cache: "no-store" })
     .then((res) => res.json())
     .then((data) => {
-      setProjects(data.data || []);
+      setProjects((data?.data as ProjectRow[]) || []);
       setLoading(false);
     })
     .catch(() => setLoading(false));
@@ -45,10 +58,10 @@ export default function ProjectsPage() {
   const highlight = (text: string) => {
     if (!debouncedQuery) return text;
     const regex = new RegExp(`(${debouncedQuery})`, "gi");
-    return text?.replace(regex, '<mark>$1</mark>');
+    return text?.replace(regex, "<mark>$1</mark>");
   };
 
-  const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
+  const normalize = (str: unknown) => String(str ?? "").toLowerCase().replace(/[_\s]/g, "");
 
   const filtered = useMemo(() => {
     const q = normalize(debouncedQuery);
@@ -59,9 +72,7 @@ export default function ProjectsPage() {
         entry.category ?? "",
         Array.isArray(entry.tags) ? entry.tags.join(" ") : "",
       ];
-      return fieldsToSearch.filter(Boolean).some((field) =>
-      normalize(field).includes(q)
-      );
+      return fieldsToSearch.filter(Boolean).some((field) => normalize(field).includes(q));
     });
   }, [projects, debouncedQuery]);
 
@@ -83,7 +94,10 @@ export default function ProjectsPage() {
   .map(([tag]) => tag);
 
   const recentTags = [...projects]
-  .sort((a, b) => b.submission_id - a.submission_id)
+  .sort(
+    (a, b) =>
+    Number(b.submission_id ?? b.id ?? 0) - Number(a.submission_id ?? a.id ?? 0)
+  )
   .slice(0, 10)
   .flatMap((p) => p.tags || [])
   .filter((tag, i, self) => self.indexOf(tag) === i)
@@ -92,6 +106,12 @@ export default function ProjectsPage() {
   const uniqueUploaders = new Set(projects.map((p) => p.uploader).filter(Boolean)).size;
   const totalTags = Object.keys(tagCounts).length;
 
+  const detailHref = (p: ProjectRow) => `/projects/${p.submission_id ?? p.id}`;
+  const imageSrc = (p: ProjectRow) =>
+  p.p_image?.filename_disk
+  ? `https://forms.lasereverything.net/assets/${p.p_image.filename_disk}`
+  : null;
+
   return (
     <div className="p-6 max-w-7xl mx-auto">
     <style jsx global>{`
@@ -119,6 +139,7 @@ export default function ProjectsPage() {
         width: 150px;
         height: 150px;
         object-fit: cover;
+        background: #111;
       }
       .project-content {
         padding: 0.75rem;
@@ -169,6 +190,7 @@ export default function ProjectsPage() {
       ← Back to Main Menu
       </Link>
       </div>
+
       <div className="card bg-card text-card-foreground p-4">
       <h2 className="text-md font-semibold mb-2">Popular Tags</h2>
       {popularTags.length > 0 ? (
@@ -183,6 +205,7 @@ export default function ProjectsPage() {
         <p className="text-sm text-muted-foreground">No tags yet.</p>
       )}
       </div>
+
       <div className="card bg-card text-card-foreground p-4">
       <h2 className="text-md font-semibold mb-2">Recent Tags</h2>
       {recentTags.length > 0 ? (
@@ -197,12 +220,14 @@ export default function ProjectsPage() {
         <p className="text-sm text-muted-foreground">No recent tags.</p>
       )}
       </div>
+
       <div className="card bg-card text-card-foreground p-4">
       <h2 className="text-md font-semibold mb-2">Project Stats</h2>
       <p className="text-sm text-muted-foreground">Total Projects: {projects.length}</p>
       <p className="text-sm text-muted-foreground">Unique Uploaders: {uniqueUploaders}</p>
       <p className="text-sm text-muted-foreground">Total Tags: {totalTags}</p>
       </div>
+
       <div className="card bg-card text-card-foreground p-4">
       <h2 className="text-md font-semibold mb-2">Browse by Category</h2>
       <div className="flex flex-wrap">
@@ -213,6 +238,7 @@ export default function ProjectsPage() {
       ))}
       </div>
       </div>
+
       <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
       <div>
       <h2 className="text-md font-semibold mb-2">Submit a Project</h2>
@@ -220,7 +246,10 @@ export default function ProjectsPage() {
       Have a cool design, tool, or jig to share? Submit it to the community database.
       </p>
       </div>
-      <button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
+      <button
+      disabled
+      className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed"
+      >
       Coming Soon
       </button>
       </div>
@@ -234,39 +263,65 @@ export default function ProjectsPage() {
         <p className="text-muted">No projects found.</p>
       ) : (
         <div className="card-grid">
-        {filtered.map((project) => (
-          <div key={project.submission_id} className="project-card">
-          <Image
-          src={`https://forms.lasereverything.net/assets/${project.p_image?.filename_disk}`}
-          alt={project.p_image?.title || "Project image"}
-          width={150}
-          height={150}
-          className="project-image"
-          />
-          <div className="project-content">
-          <div>
-          <Link href={`/projects/${project.submission_id}`} className="text-base font-semibold text-accent underline">
-          {project.title || "Untitled"}
-          </Link>
-          <p className="text-xs text-muted-foreground">Uploaded by: {project.uploader || "—"}</p>
-          <p className="text-xs text-muted-foreground">Category: {project.category || "—"}</p>
-          </div>
-          <div className="project-tags">
-          {Array.isArray(project.tags) && project.tags.length > 0
-            ? project.tags.map((tag, i) => (
-              <span
-              key={i}
-              onClick={() => setQuery(tag)}
-              title={tag}
-              >
-              {tag}
-              </span>
-            ))
-            : ""}
+        {filtered.map((project) => {
+          const key = String(project.submission_id ?? project.id);
+          const href = detailHref(project);
+          const src = imageSrc(project);
+          return (
+            <div key={key} className="project-card">
+            {src ? (
+              <Image
+              src={src}
+              alt={project.p_image?.title || "Project image"}
+              width={150}
+              height={150}
+              className="project-image"
+              />
+            ) : (
+              <div className="project-image flex items-center justify-center text-xs text-muted-foreground">
+              No image
+              </div>
+            )}
+            <div className="project-content">
+            <div>
+            <Link href={href} className="text-base font-semibold text-accent underline">
+            {/* highlight title if searching */}
+            <span
+            dangerouslySetInnerHTML={{
+              __html: highlight(project.title || "Untitled"),
+            }}
+            />
+            </Link>
+            <p className="text-xs text-muted-foreground">
+            Uploaded by:{" "}
+            <span
+            dangerouslySetInnerHTML={{
+              __html: highlight(project.uploader || "—"),
+            }}
+            />
+            </p>
+            <p className="text-xs text-muted-foreground">
+            Category:{" "}
+            <span
+            dangerouslySetInnerHTML={{
+              __html: highlight(project.category || "—"),
+            }}
+            />
+            </p>
             </div>
-            </div>
-            </div>
-        ))}
+            <div className="project-tags">
+            {Array.isArray(project.tags) && project.tags.length > 0
+              ? project.tags.map((tag, i) => (
+                <span key={i} onClick={() => setQuery(tag)} title={tag}>
+                {tag}
+                </span>
+              ))
+              : ""}
+              </div>
+              </div>
+              </div>
+          );
+        })}
         </div>
       )}
       </div>