WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

feat(ui): wire screens to live API data; add thumbnail lazy-loading: screens-projects.jsx

Browse source
This commit is contained in:
Zac Gaetano 2026-05-22 10:04:25 -04:00
parent 07af51b05c
commit 69f0d130ee
1 changed files with 25 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
services/web-ui/public/screens-projects.jsx
View file

@ -1,10 +1,9 @@
// screens-projects.jsx — projects browse + project detail
const { PROJECTS: ALL_PROJECTS, ASSETS } = window.ZAMPP_DATA;
// screens-projects.jsx
function Projects({ onOpenProject, navigate }) {
const [search, setSearch] = React.useState("");
const [view, setView] = React.useState("grid");
const { PROJECTS: ALL_PROJECTS, ASSETS } = window.ZAMPP_DATA;
const [search, setSearch] = React.useState('');
const [view, setView] = React.useState('grid');
let projects = ALL_PROJECTS;
if (search) projects = projects.filter(p => p.name.toLowerCase().includes(search.toLowerCase()));
@ -19,40 +18,32 @@ function Projects({ onOpenProject, navigate }) {
<input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search projects…" />
</div>
<div className="tab-group">
<button className={view === "grid" ? "active" : ""} onClick={() => setView("grid")}><Icon name="grid" size={12} /></button>
<button className={view === "list" ? "active" : ""} onClick={() => setView("list")}><Icon name="list" size={12} /></button>
<button className={view === 'grid' ? 'active' : ''} onClick={() => setView('grid')}><Icon name="grid" size={12} /></button>
<button className={view === 'list' ? 'active' : ''} onClick={() => setView('list')}><Icon name="list" size={12} /></button>
</div>
<button className="btn primary"><Icon name="plus" />New project</button>
</div>
<div className="page-body">
{view === "grid" ? (
{projects.length === 0 ? (
<div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>No projects yet. Create one to get started.</div>
) : view === 'grid' ? (
<div className="projects-grid">
{projects.map(p => <ProjectCard key={p.id} project={p} onOpen={() => onOpenProject(p)} />)}
{projects.map(p => <ProjectCard key={p.id} project={p} assets={ASSETS} onOpen={() => onOpenProject(p)} />)}
</div>
) : (
<div className="panel">
<div className="list-row head" style={{ padding: "12px 16px", gridTemplateColumns: "1fr 100px 120px 120px 100px 80px" }}>
<div>Project</div>
<div>Assets</div>
<div>Storage</div>
<div>Updated</div>
<div>Members</div>
<div></div>
<div className="list-row head" style={{ padding: '12px 16px', gridTemplateColumns: '1fr 100px 120px 120px 80px' }}>
<div>Project</div><div>Assets</div><div>Storage</div><div>Updated</div><div></div>
</div>
{projects.map(p => (
<div key={p.id} className="list-row" style={{ padding: "12px 16px", gridTemplateColumns: "1fr 100px 120px 120px 100px 80px", borderBottom: "1px solid var(--border)" }} onClick={() => onOpenProject(p)}>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div key={p.id} className="list-row" style={{ padding: '12px 16px', gridTemplateColumns: '1fr 100px 120px 120px 80px', borderBottom: '1px solid var(--border)', cursor: 'pointer' }} onClick={() => onOpenProject(p)}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<div style={{ width: 8, height: 32, borderRadius: 2, background: p.color }} />
<div className="name">{p.name}</div>
<div>{p.name}</div>
</div>
<div className="col-sub">{p.assets}</div>
<div className="col-sub">{(p.assets * 1.8).toFixed(1)} GB</div>
<div className="col-sub">—</div>
<div className="col-sub">{p.updated}</div>
<div style={{ display: "flex" }}>
{["KM", "ZG", "JT"].slice(0, 3).map((a, i) => (
<div key={i} className="avatar" style={{ width: 22, height: 22, fontSize: 10, marginLeft: i > 0 ? -6 : 0, background: avatarColor(a), border: "2px solid var(--bg-1)" }}>{a}</div>
))}
</div>
<button className="icon-btn" onClick={e => e.stopPropagation()}><Icon name="more" /></button>
</div>
))}
@ -63,19 +54,21 @@ function Projects({ onOpenProject, navigate }) {
);
}
function ProjectCard({ project, onOpen }) {
const thumbs = ASSETS.slice(0, project.thumbs || 4);
function ProjectCard({ project, assets, onOpen }) {
const thumbAssets = assets.filter(a => a.project_id === project.id).slice(0, 4);
return (
<div className="project-card" onClick={onOpen}>
<div className="project-thumb-grid">
{thumbs.map((a, i) => (
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="project-thumb-cell">
<FauxFrame seed={(a.seed + i) % 6} />
{thumbAssets[i]
? <AssetThumb asset={thumbAssets[i]} />
: <FauxFrame />}
</div>
))}
</div>
<div className="project-card-body">
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ width: 10, height: 10, borderRadius: 2, background: project.color }} />
<span style={{ fontWeight: 600, fontSize: 14 }}>{project.name}</span>
</div>
@ -85,9 +78,8 @@ function ProjectCard({ project, onOpen }) {
<span>updated {project.updated}</span>
</div>
<div className="project-bar">
<div className="project-segment" style={{ width: "60%", background: "#5B7CFA" }} />
<div className="project-segment" style={{ width: "25%", background: "#2DD4A8" }} />
<div className="project-segment" style={{ width: "10%", background: "#FF3B30" }} />
<div className="project-segment" style={{ width: '70%', background: project.color }} />
<div className="project-segment" style={{ width: '20%', background: 'var(--bg-4)' }} />
</div>
</div>
</div>