feat(ui): add teams, tools, feature flags, temp files, logo to settings dialog

- Add Teams section with CRUD (create, rename, delete) and member count display
- Add Tools section with per-tool enable/disable toggles grouped by category
- Add logo upload/delete, experimental tools toggle, file management settings to System Settings
- Replace free-text team input with dropdown populated from teams API in People section
- Filter disabled/experimental tools in tool panel, pipeline builder, and fullscreen grid
- Display custom logo in mobile header and sidebar when configured
This commit is contained in:
Siddharth Kumar Sah
2026-03-26 01:10:51 +08:00
parent ffb676d648
commit 4b2621d9f2
5 changed files with 699 additions and 29 deletions
+26 -4
View File
@@ -2,25 +2,47 @@ import type { CategoryInfo, Tool } from "@stirling-image/shared";
import { CATEGORIES, TOOLS } from "@stirling-image/shared";
import * as icons from "lucide-react";
import { Eye, EyeOff, FileImage, LayoutGrid, List, Search } from "lucide-react";
import { useMemo, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { apiGet } from "@/lib/api";
import { cn } from "@/lib/utils";
export function FullscreenGridPage() {
const [search, setSearch] = useState("");
const [showDetails, setShowDetails] = useState(false);
const navigate = useNavigate();
const [disabledTools, setDisabledTools] = useState<string[]>([]);
const [experimentalEnabled, setExperimentalEnabled] = useState(false);
useEffect(() => {
apiGet<{ settings: Record<string, string> }>("/v1/settings")
.then((data) => {
setDisabledTools(
data.settings.disabledTools ? JSON.parse(data.settings.disabledTools) : [],
);
setExperimentalEnabled(data.settings.enableExperimentalTools === "true");
})
.catch(() => {});
}, []);
const visibleTools = useMemo(() => {
return TOOLS.filter((t) => {
if (disabledTools.includes(t.id)) return false;
if (t.experimental && !experimentalEnabled) return false;
return true;
});
}, [disabledTools, experimentalEnabled]);
const filteredTools = useMemo(() => {
if (!search) return TOOLS;
if (!search) return visibleTools;
const q = search.toLowerCase();
return TOOLS.filter(
return visibleTools.filter(
(t) =>
t.name.toLowerCase().includes(q) ||
t.description.toLowerCase().includes(q) ||
t.category.toLowerCase().includes(q),
);
}, [search]);
}, [search, visibleTools]);
const groupedTools = useMemo(() => {
const groups = new Map<string, Tool[]>();