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

19
frontend/src/components/FileBrowser/FileBrowser.tsx
View File

@@ -1,6 +1,6 @@
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { api, BrowseResult } from "../../api/client";
import { api, type BrowseResult } from "../../api/client";
import MediaViewer from "../MediaViewer/MediaViewer";
interface Props {
@@ -27,15 +27,15 @@ export default function FileBrowser({ libraryId }: Props) {
<div style={{ padding: "1rem" }}>
{/* Breadcrumb */}
<nav style={{ marginBottom: 16, display: "flex", gap: 4, alignItems: "center", flexWrap: "wrap" }}>
<button onClick={() => navigate("")} style={{ background: "none", border: "none", cursor: "pointer", fontWeight: 600 }}>
<button onClick={() => navigate("")} style={{ background: "none", border: "none", cursor: "pointer", fontWeight: 600, color: "var(--text)", padding: "2px 4px" }}>
Root
</button>
{pathParts.map((part, i) => {
const partPath = pathParts.slice(0, i + 1).join("/");
return (
<span key={partPath} style={{ display: "flex", alignItems: "center", gap: 4 }}>
<span style={{ color: "#888" }}>/</span>
<button onClick={() => navigate(partPath)} style={{ background: "none", border: "none", cursor: "pointer" }}>
<span style={{ color: "var(--text-muted)" }}>/</span>
<button onClick={() => navigate(partPath)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text)", padding: "2px 4px" }}>
{part}
</button>
</span>
@@ -43,7 +43,7 @@ export default function FileBrowser({ libraryId }: Props) {
})}
</nav>
{isLoading && <p>Loading…</p>}
{isLoading && <p style={{ color: "var(--text-secondary)" }}>Loading…</p>}
{/* Grid */}
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 12 }}>
@@ -55,14 +55,15 @@ export default function FileBrowser({ libraryId }: Props) {
else if (entry.media_item_id) setViewingId(entry.media_item_id);
}}
style={{
cursor: "pointer",
border: "1px solid #ddd",
cursor: entry.type === "dir" || entry.media_item_id ? "pointer" : "default",
border: "1px solid var(--border)",
borderRadius: 6,
overflow: "hidden",
background: "#fafafa",
background: "var(--bg-card)",
display: "flex",
flexDirection: "column",
alignItems: "center",
opacity: entry.type !== "dir" && !entry.media_item_id ? 0.5 : 1,
}}
>
{entry.type === "dir" ? (
@@ -76,7 +77,7 @@ export default function FileBrowser({ libraryId }: Props) {
onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
/>
)}
<div style={{ padding: "4px 6px", fontSize: 12, width: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
<div style={{ padding: "4px 6px", fontSize: 12, width: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--text)" }}>
{entry.name}
</div>
</div>