added claim/owner routes and components, test fiber page

app/api/claims/route.ts

@@ -0,0 +1,58 @@
+// app/api/claims/route.ts
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+
+const API =
+process.env.DIRECTUS_URL /* server-only */ ??
+process.env.NEXT_PUBLIC_API_BASE_URL /* fallback */;
+
+const ALLOWED = new Set([
+    'settings_fiber',
+    'settings_uv',
+    'settings_co2gal',
+    'settings_co2gan',
+    'projects',
+]);
+
+export async function POST(req: Request) {
+    let body: any;
+    try {
+        body = await req.json();
+    } catch {
+        return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
+    }
+
+    const { target_collection, target_id } = body ?? {};
+    if (!ALLOWED.has(String(target_collection)) || target_id == null) {
+        return NextResponse.json({ error: 'Invalid target' }, { status: 400 });
+    }
+
+    const token =
+    cookies().get('directus_access_token')?.value ??
+    cookies().get('ma_at')?.value ??
+    '';
+
+    if (!token) {
+        return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const r = await fetch(`${API}/items/user_claims`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+            Accept: 'application/json',
+        },
+        body: JSON.stringify({ target_collection, target_id }),
+                          cache: 'no-store',
+                          next: { revalidate: 0 },
+    });
+
+    const data = await r.json().catch(() => ({}));
+    if (!r.ok) {
+        const msg = data?.errors?.[0]?.message ?? data?.message ?? 'Directus error';
+        return NextResponse.json({ error: msg }, { status: r.status });
+    }
+
+    return NextResponse.json({ ok: true, data }, { status: 200 });
+}

app/settings/fiber/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
@@ -18,22 +18,51 @@ export default function FiberSettingsPage() {
   const detailHref = (id: string | number) => `/settings/fiber/${id}`;
 
   useEffect(() => {
-    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    const t = setTimeout(() => setDebouncedQuery(query), 300);
-    return () => clearTimeout(timer);
+    return () => clearTimeout(t);
   }, [query]);
 
   useEffect(() => {
-    fetch(
+    // Include owner fields now that settings have an M2O "owner"
-      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber?fields=submission_id,setting_title,uploader,photo.id,photo.title,mat.name,mat_coat.name,source.model,lens.field_size&limit=-1`
+    const url =
-    )
+    `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber` +
+    `?fields=` +
+    [
+      "submission_id",
+      "setting_title",
+      "uploader",
+      "owner.display_name",
+      "owner.first_name",
+      "owner.last_name",
+      "owner.email",
+      "photo.id",
+      "photo.title",
+      "mat.name",
+      "mat_coat.name",
+      "source.model",
+      "lens.field_size",
+    ].join(",") +
+    `&limit=-1`;
+
+    fetch(url, { cache: "no-store" })
     .then((res) => res.json())
     .then((data) => {
-      setSettings(data.data || []);
+      setSettings(data?.data || []);
       setLoading(false);
     })
     .catch(() => setLoading(false));
   }, []);
 
+  const ownerName = (row: any) => {
+    const o = row?.owner || {};
+    return (
+      o.display_name ||
+      [o.first_name, o.last_name].filter(Boolean).join(" ") ||
+      o.email ||
+      "—"
+    );
+  };
+
   const highlight = (text?: string) => {
     if (!debouncedQuery) return text || "";
     const regex = new RegExp(`(${debouncedQuery})`, "gi");
@@ -46,19 +75,22 @@ export default function FiberSettingsPage() {
       const fieldsToSearch = [
         entry.setting_title,
         entry.uploader,
+        ownerName(entry),
                            entry.mat?.name,
                            entry.mat_coat?.name,
                            entry.source?.model,
                            entry.lens?.field_size,
       ];
-      return fieldsToSearch.filter(Boolean).some((field: string) =>
+      return fieldsToSearch
-      String(field).toLowerCase().includes(q)
+      .filter(Boolean)
-      );
+      .some((field: string) => String(field).toLowerCase().includes(q));
     });
   }, [settings, debouncedQuery]);
 
   const totalSettings = settings.length;
-  const uniqueMaterials = new Set(settings.map((s) => s.mat?.name).filter(Boolean)).size;
+  const uniqueMaterials = new Set(
+    settings.map((s) => s.mat?.name).filter(Boolean)
+  ).size;
 
   const commonLens = settings.reduce((acc: Record<string, number>, cur) => {
     const lens = cur.lens?.field_size;
@@ -67,7 +99,9 @@ export default function FiberSettingsPage() {
     return acc;
   }, {});
   const mostCommonLens =
-  Object.entries(commonLens).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+  Object.entries(commonLens).sort(
+    (a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0)
+  )[0]?.[0] || "—";
 
   const sourceModels = settings.reduce((acc: Record<string, number>, cur) => {
     const model = cur.source?.model;
@@ -76,10 +110,12 @@ export default function FiberSettingsPage() {
     return acc;
   }, {});
   const mostCommonSource =
-  Object.entries(sourceModels).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+  Object.entries(sourceModels).sort(
+    (a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0)
+  )[0]?.[0] || "—";
 
   const recentSettings = [...settings]
-  .sort((a, b) => b.submission_id - a.submission_id)
+  .sort((a, b) => Number(b.submission_id) - Number(a.submission_id))
   .slice(0, 5);
 
   return (
@@ -93,6 +129,7 @@ export default function FiberSettingsPage() {
       }
       `}</style>
 
+      {/* Header + Search */}
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
       <div className="card bg-card text-card-foreground p-4">
       <h1 className="text-2xl font-bold mb-2">Fiber Laser Settings</h1>
@@ -100,24 +137,20 @@ export default function FiberSettingsPage() {
       type="search"
       value={query}
       onChange={(e) => setQuery(e.target.value)}
-      placeholder="Search settings by material, uploader, etc..."
+      placeholder="Search by material, owner, uploader, model, etc…"
       className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
       />
-      <p className="text-sm text-muted-foreground mb-2">
+      <p className="text-sm text-muted-foreground">
       View and explore detailed fiber laser settings with context.
       </p>
-      <a
-      href="/"
-      className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
-      >
-      ← Back to Main Menu
-      </a>
       </div>
 
       <div className="card bg-card text-card-foreground p-4">
       <h2 className="text-lg font-semibold mb-2">How to Use</h2>
       <p className="text-sm">
-      Browse real-world fiber laser settings from the community. Use the search to narrow results. Click any setting to view its full configuration, notes, and photos. Click any linked term to find related settings.
+      Browse community fiber laser settings. Use the search to narrow
+      results. Click any setting title to view its full configuration,
+      notes, and photos.
       </p>
       </div>
 
@@ -136,10 +169,16 @@ export default function FiberSettingsPage() {
       <ul className="text-sm space-y-1">
       {recentSettings.map((s) => (
         <li key={s.submission_id}>
-        <Link href={detailHref(s.submission_id)} className="underline text-accent">
+        <Link
+        href={detailHref(s.submission_id)}
+        className="underline text-accent"
+        >
         {s.setting_title || "Untitled"}
         </Link>{" "}
-        by {s.uploader || "—"}
+        {/* keep uploader for now while claims/owners migrate */}
+        <span className="text-muted-foreground">
+        by {ownerName(s) !== "—" ? ownerName(s) : s.uploader || "—"}
+        </span>
         </li>
       ))}
       </ul>
@@ -180,23 +219,9 @@ export default function FiberSettingsPage() {
       </li>
       </ul>
       </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 Setting</h2>
-      <p className="text-sm text-muted-foreground mb-2">
-      Have a reliable fiber setting to share? Contribute to the community database.
-      </p>
-      </div>
-      <Link
-      href="/submit/settings?target=settings_fiber"
-      className="bg-accent text-background text-sm px-4 py-2 rounded hover:opacity-90 transition"
-      >
-      Submit a Setting
-      </Link>
-      </div>
       </div>
 
+      {/* Table */}
       {loading ? (
         <p className="text-muted">Loading settings...</p>
       ) : filtered.length === 0 ? (
@@ -208,6 +233,7 @@ export default function FiberSettingsPage() {
         <tr>
         <th className="px-2 py-2 text-left">Photo</th>
         <th className="px-2 py-2 text-left">Title</th>
+        <th className="px-2 py-2 text-left">Owner</th>
         <th className="px-2 py-2 text-left">Uploader</th>
         <th className="px-2 py-2 text-left">Material</th>
         <th className="px-2 py-2 text-left">Coating</th>
@@ -231,6 +257,7 @@ export default function FiberSettingsPage() {
             "—"
           )}
           </td>
+
           <td className="px-2 py-2 whitespace-nowrap">
           <Link
           href={detailHref(setting.submission_id)}
@@ -240,25 +267,45 @@ export default function FiberSettingsPage() {
           }}
           />
           </td>
+
           <td
           className="px-2 py-2 whitespace-nowrap"
-          dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }}
+          dangerouslySetInnerHTML={{ __html: highlight(ownerName(setting)) }}
           />
+
           <td
           className="px-2 py-2 whitespace-nowrap"
-          dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }}
+          dangerouslySetInnerHTML={{
+            __html: highlight(setting.uploader || "—"),
+          }}
           />
+
           <td
           className="px-2 py-2 whitespace-nowrap"
-          dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }}
+          dangerouslySetInnerHTML={{
+            __html: highlight(setting.mat?.name || "—"),
+          }}
           />
+
           <td
           className="px-2 py-2 whitespace-nowrap"
-          dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }}
+          dangerouslySetInnerHTML={{
+            __html: highlight(setting.mat_coat?.name || "—"),
+          }}
           />
+
           <td
           className="px-2 py-2 whitespace-nowrap"
-          dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.field_size || "—") }}
+          dangerouslySetInnerHTML={{
+            __html: highlight(setting.source?.model || "—"),
+          }}
+          />
+
+          <td
+          className="px-2 py-2 whitespace-nowrap"
+          dangerouslySetInnerHTML={{
+            __html: highlight(setting.lens?.field_size || "—"),
+          }}
           />
           </tr>
         ))}

app/settings/fiber/page.tsx.bak

@@ -11,9 +11,12 @@ export default function FiberSettingsPage() {
 
   const [query, setQuery] = useState(initialQuery);
   const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
-  const [settings, setSettings] = useState([]);
+  const [settings, setSettings] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
 
+  // canonical detail href builder (no modal yet)
+  const detailHref = (id: string | number) => `/settings/fiber/${id}`;
+
   useEffect(() => {
     const timer = setTimeout(() => setDebouncedQuery(query), 300);
     return () => clearTimeout(timer);
@@ -21,7 +24,7 @@ export default function FiberSettingsPage() {
 
   useEffect(() => {
     fetch(
-      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber?fields=submission_id,setting_title,uploader,photo.filename_disk,photo.title,mat.name,mat_coat.name,source.model,lens.field_size&limit=-1`
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber?fields=submission_id,setting_title,uploader,photo.id,photo.title,mat.name,mat_coat.name,source.model,lens.field_size&limit=-1`
     )
     .then((res) => res.json())
     .then((data) => {
@@ -31,10 +34,10 @@ export default function FiberSettingsPage() {
     .catch(() => setLoading(false));
   }, []);
 
-  const highlight = (text) => {
+  const highlight = (text?: string) => {
-    if (!debouncedQuery) return text;
+    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 filtered = useMemo(() => {
@@ -48,32 +51,32 @@ export default function FiberSettingsPage() {
         entry.source?.model,
         entry.lens?.field_size,
       ];
-      return fieldsToSearch.filter(Boolean).some((field) =>
+      return fieldsToSearch.filter(Boolean).some((field: string) =>
-        field.toLowerCase().includes(q)
+      String(field).toLowerCase().includes(q)
       );
     });
   }, [settings, debouncedQuery]);
 
   const totalSettings = settings.length;
-  const uniqueMaterials = new Set(settings.map(s => s.mat?.name).filter(Boolean)).size;
+  const uniqueMaterials = new Set(settings.map((s) => s.mat?.name).filter(Boolean)).size;
 
-  const commonLens = settings.reduce((acc, cur) => {
+  const commonLens = settings.reduce((acc: Record<string, number>, cur) => {
     const lens = cur.lens?.field_size;
     if (!lens) return acc;
     acc[lens] = (acc[lens] || 0) + 1;
     return acc;
   }, {});
-  const mostCommonLens = Object.entries(commonLens)
+  const mostCommonLens =
-    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+  Object.entries(commonLens).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
 
-  const sourceModels = settings.reduce((acc, cur) => {
+  const sourceModels = settings.reduce((acc: Record<string, number>, cur) => {
     const model = cur.source?.model;
     if (!model) return acc;
     acc[model] = (acc[model] || 0) + 1;
     return acc;
   }, {});
-  const mostCommonSource = Object.entries(sourceModels)
+  const mostCommonSource =
-    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
+  Object.entries(sourceModels).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || "—";
 
   const recentSettings = [...settings]
   .sort((a, b) => b.submission_id - a.submission_id)
@@ -133,9 +136,10 @@ export default function FiberSettingsPage() {
       <ul className="text-sm space-y-1">
       {recentSettings.map((s) => (
         <li key={s.submission_id}>
-                <Link href={`/fiber-settings/${s.submission_id}`} className="underline text-accent">
+        <Link href={detailHref(s.submission_id)} className="underline text-accent">
         {s.setting_title || "Untitled"}
-                </Link> by {s.uploader || "—"}
+        </Link>{" "}
+        by {s.uploader || "—"}
         </li>
       ))}
       </ul>
@@ -145,13 +149,34 @@ export default function FiberSettingsPage() {
       <h2 className="text-lg font-semibold mb-2">Resources</h2>
       <ul className="text-sm space-y-1">
       <li>
-              <a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">Material Safety Guide</a>
+      <a
+      href="/materials"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="underline text-accent"
+      >
+      Material Safety Guide
+      </a>
       </li>
       <li>
-              <a href="https://lasereverything.net/scripts/laspwrconvert.php" target="_blank" rel="noopener noreferrer" className="underline text-accent">Laser Parameter Calculator</a>
+      <a
+      href="https://lasereverything.net/scripts/laspwrconvert.php"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="underline text-accent"
+      >
+      Laser Parameter Calculator
+      </a>
       </li>
       <li>
-              <a href="https://jptoe.com/downloads" target="_blank" rel="noopener noreferrer" className="underline text-accent">JPT Datasheets</a>
+      <a
+      href="https://jptoe.com/downloads"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="underline text-accent"
+      >
+      JPT Datasheets
+      </a>
       </li>
       </ul>
       </div>
@@ -163,9 +188,12 @@ export default function FiberSettingsPage() {
       Have a reliable fiber setting to share? Contribute 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">
+      <Link
-            Coming Soon
+      href="/submit/settings?target=settings_fiber"
-          </button>
+      className="bg-accent text-background text-sm px-4 py-2 rounded hover:opacity-90 transition"
+      >
+      Submit a Setting
+      </Link>
       </div>
       </div>
 
@@ -191,9 +219,9 @@ export default function FiberSettingsPage() {
         {filtered.map((setting) => (
           <tr key={setting.submission_id} className="border-t border-border">
           <td className="px-2 py-2">
-                    {setting.photo?.filename_disk ? (
+          {setting.photo?.id ? (
             <Image
-                        src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
+            src={`https://forms.lasereverything.net/assets/${setting.photo.id}`}
             alt={setting.photo.title || "laser preview"}
             width={64}
             height={64}
@@ -205,16 +233,33 @@ export default function FiberSettingsPage() {
           </td>
           <td className="px-2 py-2 whitespace-nowrap">
           <Link
-                      href={`/fiber-settings/${setting.submission_id}`}
+          href={detailHref(setting.submission_id)}
           className="text-accent underline"
-                      dangerouslySetInnerHTML={{ __html: highlight(setting.setting_title || "—") }}
+          dangerouslySetInnerHTML={{
+            __html: highlight(setting.setting_title || "—"),
+          }}
           />
           </td>
-                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }} />
+          <td
-                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }} />
+          className="px-2 py-2 whitespace-nowrap"
-                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }} />
+          dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }}
-                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }} />
+          />
-                  <td className="px-2 py-2 whitespace-nowrap" dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.field_size || "—") }} />
+          <td
+          className="px-2 py-2 whitespace-nowrap"
+          dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }}
+          />
+          <td
+          className="px-2 py-2 whitespace-nowrap"
+          dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }}
+          />
+          <td
+          className="px-2 py-2 whitespace-nowrap"
+          dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }}
+          />
+          <td
+          className="px-2 py-2 whitespace-nowrap"
+          dangerouslySetInnerHTML={{ __html: highlight(setting.lens?.field_size || "—") }}
+          />
           </tr>
         ))}
         </tbody>
@@ -224,4 +269,3 @@ export default function FiberSettingsPage() {
       </div>
   );
 }
-

components/claims/ClaimButton.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function ClaimButton({
+    collection,
+    id,
+    disabledReason,
+}: {
+    collection: 'settings_fiber' | 'settings_uv' | 'settings_co2gal' | 'settings_co2gan' | 'projects' | string;
+    id: string | number;
+    disabledReason?: string;
+}) {
+    const [busy, setBusy] = useState(false);
+    const [msg, setMsg] = useState<string | null>(null);
+
+    const submit = async () => {
+        setBusy(true);
+        setMsg(null);
+        try {
+            const res = await fetch('/api/claims', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ target_collection: collection, target_id: id }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (res.ok) setMsg('✅ Claim submitted for review.');
+            else setMsg(data?.message || '❌ Could not submit claim.');
+        } catch {
+            setMsg('❌ Network/auth error. Please sign in and try again.');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <div className="flex flex-col gap-1">
+        <button
+        onClick={submit}
+        disabled={busy || !!disabledReason}
+        className={`px-3 py-1 rounded-md text-sm border ${
+            disabledReason
+            ? 'opacity-60 cursor-not-allowed'
+            : 'bg-accent text-background hover:opacity-90'
+        }`}
+        >
+        {busy ? 'Submitting…' : 'Claim Ownership'}
+        </button>
+        {disabledReason ? <span className="text-xs text-muted-foreground">{disabledReason}</span> : null}
+        {msg ? <span className="text-xs">{msg}</span> : null}
+        </div>
+    );
+}

components/common/OwnerBadge.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+export default function OwnerBadge({
+    owner,
+    uploader,
+    className = '',
+}: {
+    owner?: { id?: string | number; display_name?: string } | null;
+    uploader?: string | null;
+    className?: string;
+}) {
+    const hasOwner = !!owner?.id;
+    const label = hasOwner ? 'Owner' : 'Uploader';
+    const name = owner?.display_name ?? uploader ?? '—';
+
+    return (
+        <span
+        className={`inline-flex items-center gap-2 text-xs px-2 py-1 rounded-md border border-border bg-card ${className}`}
+        title={hasOwner ? 'Owner' : (uploader ? 'Original uploader' : '')}
+        >
+        <span className="opacity-70">{label}:</span>
+        <span className="font-medium">{name}</span>
+        </span>
+    );
+}