From 132f1810af0950bf49be66dc899dc5705310beae Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 18 Oct 2025 22:57:09 +0000
Subject: [PATCH] Add AdminSpotlightManager to manage community spotlights

cgen-b90eba3198e34bfd91668440537fa77a
---
 .../admin/AdminSpotlightManager.tsx           | 151 ++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 client/components/admin/AdminSpotlightManager.tsx

diff --git a/client/components/admin/AdminSpotlightManager.tsx b/client/components/admin/AdminSpotlightManager.tsx
new file mode 100644
index 00000000..06327f87
--- /dev/null
+++ b/client/components/admin/AdminSpotlightManager.tsx
@@ -0,0 +1,151 @@
+import { useEffect, useMemo, useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import type { AethexUserProfile } from "@/lib/aethex-database-adapter";
+import { ArrowDown, ArrowUp, Plus, Save, Trash2, Users } from "lucide-react";
+
+interface SpotlightEntry {
+  id: string;
+  type: "developer" | "group";
+  label: string;
+  url?: string;
+  realms?: ("game_developer" | "client" | "community_member" | "customer" | "staff")[];
+}
+
+const STORAGE_KEY = "aethex_spotlights";
+
+function loadSpotlights(): SpotlightEntry[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveSpotlights(entries: SpotlightEntry[]) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
+}
+
+export default function AdminSpotlightManager({ profiles }: { profiles: AethexUserProfile[] }) {
+  const [entries, setEntries] = useState<SpotlightEntry[]>([]);
+  const [newGroupName, setNewGroupName] = useState("");
+  const [newGroupUrl, setNewGroupUrl] = useState("");
+  const [selectedProfileId, setSelectedProfileId] = useState<string>("");
+
+  useEffect(() => {
+    setEntries(loadSpotlights());
+  }, []);
+
+  const devOptions = useMemo(() => profiles.map(p => ({ id: p.id, label: p.full_name || p.username || p.email || "Unknown" })), [profiles]);
+
+  const addDeveloper = () => {
+    if (!selectedProfileId) return;
+    const profile = profiles.find(p => p.id === selectedProfileId);
+    if (!profile) return;
+    const label = profile.full_name || profile.username || profile.email || selectedProfileId;
+    setEntries(prev => [...prev, { id: selectedProfileId, type: "developer", label }]);
+    setSelectedProfileId("");
+  };
+
+  const addGroup = () => {
+    if (!newGroupName.trim()) return;
+    setEntries(prev => [...prev, { id: crypto.randomUUID(), type: "group", label: newGroupName.trim(), url: newGroupUrl.trim() || undefined }]);
+    setNewGroupName("");
+    setNewGroupUrl("");
+  };
+
+  const move = (index: number, dir: -1 | 1) => {
+    setEntries(prev => {
+      const next = prev.slice();
+      const j = index + dir;
+      if (j < 0 || j >= next.length) return prev;
+      const tmp = next[index];
+      next[index] = next[j];
+      next[j] = tmp;
+      return next;
+    });
+  };
+
+  const remove = (index: number) => {
+    setEntries(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const saveAll = () => saveSpotlights(entries);
+
+  return (
+    <Card className="bg-card/60 border-border/40 backdrop-blur">
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Users className="h-5 w-5 text-aethex-300" />
+          <CardTitle>Community spotlight</CardTitle>
+        </div>
+        <CardDescription>Feature developers and groups on the Community page. Persists locally for now.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <div className="text-sm font-medium">Add developer</div>
+            <div className="flex gap-2">
+              <Select value={selectedProfileId} onValueChange={setSelectedProfileId}>
+                <SelectTrigger className="flex-1">
+                  <SelectValue placeholder="Select a profile" />
+                </SelectTrigger>
+                <SelectContent>
+                  {devOptions.map(opt => (
+                    <SelectItem key={opt.id} value={opt.id}>{opt.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button onClick={addDeveloper}><Plus className="h-4 w-4" /></Button>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-sm font-medium">Add group</div>
+            <div className="grid gap-2 md:grid-cols-2">
+              <Input placeholder="Group name" value={newGroupName} onChange={e => setNewGroupName(e.target.value)} />
+              <Input placeholder="Link (optional)" value={newGroupUrl} onChange={e => setNewGroupUrl(e.target.value)} />
+            </div>
+            <Button onClick={addGroup} className="mt-1"><Plus className="h-4 w-4 mr-2" />Add group</Button>
+          </div>
+        </div>
+
+        <div className="rounded border border-border/40 bg-background/40">
+          <div className="flex items-center justify-between p-3">
+            <div className="text-sm font-medium">Spotlight queue</div>
+            <Button size="sm" variant="outline" onClick={saveAll}><Save className="h-4 w-4 mr-2" /> Save</Button>
+          </div>
+          <ScrollArea className="max-h-64">
+            <ul className="grid gap-2 p-3">
+              {entries.map((e, i) => (
+                <li key={`${e.type}-${e.id}-${i}`} className="flex items-center justify-between gap-2 rounded border border-border/30 bg-background/40 p-2">
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline" className="capitalize">{e.type}</Badge>
+                    <span className="text-sm text-foreground">{e.label}</span>
+                    {e.url ? <a className="text-xs text-aethex-300 underline" href={e.url} target="_blank" rel="noreferrer">open</a> : null}
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Button size="icon" variant="outline" onClick={() => move(i, -1)}><ArrowUp className="h-4 w-4" /></Button>
+                    <Button size="icon" variant="outline" onClick={() => move(i, +1)}><ArrowDown className="h-4 w-4" /></Button>
+                    <Button size="icon" variant="outline" onClick={() => remove(i)}><Trash2 className="h-4 w-4" /></Button>
+                  </div>
+                </li>
+              ))}
+              {!entries.length && (
+                <li className="text-sm text-muted-foreground px-3 pb-3">No spotlight entries yet.</li>
+              )}
+            </ul>
+          </ScrollArea>
+        </div>
+
+        <p className="text-xs text-muted-foreground">Tip: After saving, visit /community#featured-developers or /community#featured-studios. A backend table can replace local persistence later.</p>
+      </CardContent>
+    </Card>
+  );
+}