gpatti/MediaLore-Web-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
Garret Patti
2026-05-09 14:51:25 -04:00
parent 97fabc2c17
commit f23a8a2be6
20 changed files with 382 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/pages/SearchPage.tsx
View File

@@ -1,6 +1,6 @@
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { api, MediaItem, TagsByCategory } from "../api/client";
import { api, type MediaItem, type TagsByCategory } from "../api/client";
export default function SearchPage() {
const [q, setQ] = useState("");
@@ -31,24 +31,23 @@ export default function SearchPage() {
return (
<div style={{ padding: "2rem", maxWidth: 900 }}>
<h1>Search</h1>
<h1 style={{ color: "var(--text)" }}>Search</h1>
<form onSubmit={handleSubmit} style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
<input
placeholder="Search by filename…"
value={q}
onChange={(e) => setQ(e.target.value)}
style={{ flex: 1, minWidth: 200, padding: "6px 10px" }}
style={{ flex: 1, minWidth: 200 }}
/>
<button type="submit">Search</button>
<button type="submit" style={{ background: "var(--accent)", color: "#fff", border: "none" }}>Search</button>
</form>
{/* Tag filter */}
{grouped.length > 0 && (
<div style={{ marginBottom: 24 }}>
<div style={{ fontSize: 13, color: "#666", marginBottom: 8 }}>Filter by tag:</div>
<div style={{ fontSize: 13, color: "var(--text-secondary)", marginBottom: 8 }}>Filter by tag:</div>
{grouped.map((group) => (
<div key={group.category} style={{ marginBottom: 8 }}>
<span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "#888", marginRight: 8 }}>
<span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "var(--text-muted)", marginRight: 8 }}>
{group.category}
</span>
{group.tags.map((tag) => (
@@ -61,9 +60,9 @@ export default function SearchPage() {
borderRadius: 12,
border: "1px solid",
cursor: "pointer",
background: selectedTags.includes(tag.id) ? "#3b82f6" : "transparent",
color: selectedTags.includes(tag.id) ? "#fff" : "inherit",
borderColor: selectedTags.includes(tag.id) ? "#3b82f6" : "#ccc",
background: selectedTags.includes(tag.id) ? "var(--accent)" : "transparent",
color: selectedTags.includes(tag.id) ? "#fff" : "var(--text)",
borderColor: selectedTags.includes(tag.id) ? "var(--accent)" : "var(--border)",
fontSize: 13,
}}
>
@@ -75,24 +74,24 @@ export default function SearchPage() {
</div>
)}
{isFetching && <p>Searching…</p>}
{isFetching && <p style={{ color: "var(--text-secondary)" }}>Searching…</p>}
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 12 }}>
{results.map((item) => (
<div key={item.id} style={{ border: "1px solid #ddd", borderRadius: 6, overflow: "hidden" }}>
<div key={item.id} style={{ border: "1px solid var(--border)", borderRadius: 6, overflow: "hidden", background: "var(--bg-card)" }}>
<img
src={api.media.thumbnailUrl(item.id)}
alt={item.filename}
loading="lazy"
style={{ width: "100%", height: 110, objectFit: "cover" }}
/>
<div style={{ padding: "4px 6px", fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
<div style={{ padding: "4px 6px", fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--text)" }}>
{item.filename}
</div>
{item.tags.length > 0 && (
<div style={{ padding: "0 6px 4px", display: "flex", flexWrap: "wrap", gap: 4 }}>
{item.tags.map((t) => (
<span key={t.id} style={{ background: "#e0edff", color: "#3b82f6", borderRadius: 8, padding: "1px 6px", fontSize: 11 }}>
<span key={t.id} style={{ background: "var(--tag-bg)", color: "var(--accent-text)", borderRadius: 8, padding: "1px 6px", fontSize: 11 }}>
{t.name}
</span>
))}
@@ -103,7 +102,7 @@ export default function SearchPage() {
</div>
{submitted && !isFetching && results.length === 0 && (
<p style={{ color: "#888" }}>No results found.</p>
<p style={{ color: "var(--text-secondary)" }}>No results found.</p>
)}
</div>
);