dnoulet/go-tell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

content page

Browse source
This commit is contained in:
Daniel Noulet 2026-09-19 15:14:16 +02:00
parent 36b2c56987
commit 381ed6270e
8 changed files with 59 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
ui/app/src/App.tsx
View file

@ -1,6 +1,6 @@
import { useEffect, useRef, useState } from 'react'
import { Link, Navigate, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom'
import { getContent, listCategories, listContent, updateContent, type Category, type Content, type ContentUpdate } from './api'
import { getContent, listBadges, listCategories, listContent, updateContent, type Badge, type Category, type Content, type ContentUpdate } from './api'
import { useAuth } from './auth'
function Shell({ children }: { children: React.ReactNode }) {
@ -47,6 +47,7 @@ function ContentList() {
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [categories, setCategories] = useState<Category[]>([])
const [badgeOptions, setBadgeOptions] = useState<Badge[]>([])
const [category, setCategory] = useState('')
const [badges, setBadges] = useState<string[]>([])
const [badgeInput, setBadgeInput] = useState('')
@ -75,7 +76,11 @@ function ContentList() {
}
}
}
useEffect(() => { void listCategories().then(setCategories).catch(() => setCategories([])) }, [])
useEffect(() => {
void Promise.all([listCategories(), listBadges()])
.then(([nextCategories, nextBadges]) => { setCategories(nextCategories); setBadgeOptions(nextBadges) })
.catch(() => { setCategories([]); setBadgeOptions([]) })
}, [])
useEffect(() => {
loadingMore.current = false
setItems([])
@ -102,13 +107,14 @@ function ContentList() {
<label className="badge-filter">Badges
<div className="badge-input">
{badges.map(badge => <span className="filter-pill" key={badge}>{badge}<button type="button" aria-label={`Remove ${badge}`} onClick={() => setBadges(current => current.filter(value => value !== badge))}>×</button></span>)}
<input value={badgeInput} placeholder="Type a badge and press Enter" onChange={event => setBadgeInput(event.target.value)} onKeyDown={event => {
<input list="badge-options" value={badgeInput} placeholder="Type a badge and press Enter" onChange={event => setBadgeInput(event.target.value)} onKeyDown={event => {
if (event.key !== 'Enter') return
event.preventDefault()
const badge = badgeInput.trim().toLowerCase()
if (badge && !badges.includes(badge)) setBadges(current => [...current, badge])
setBadgeInput('')
}} />
<datalist id="badge-options">{badgeOptions.filter(item => !badges.includes(item.name)).map(item => <option value={item.name} key={item.id}>{item.name}</option>)}</datalist>
</div>
</label>
</div>

6
ui/app/src/api.ts
View file

@ -115,12 +115,18 @@ export async function listContent(cursor?: string | null, category = '', badges:
}
export type Category = { id: string; slug: string; name: string }
export type Badge = { id: string; name: string }
export async function listCategories(): Promise<Category[]> {
const response = await contentRequest<{ items?: Array<Category & { ID?: string; Slug?: string; Name?: string }> }>('/categories')
return (response.items ?? []).map(item => ({ id: item.id ?? item.ID ?? '', slug: item.slug ?? item.Slug ?? '', name: item.name ?? item.Name ?? '' }))
}
export async function listBadges(): Promise<Badge[]> {
const response = await contentRequest<{ items?: Array<Badge & { ID?: string; Name?: string }> }>('/badges')
return (response.items ?? []).map(item => ({ id: item.id ?? item.ID ?? '', name: item.name ?? item.Name ?? '' }))
}
export function getContent(id: string): Promise<Content> {
return contentRequest<Content>(`/${encodeURIComponent(id)}`).then(value => normalizeContent(value as Content & { ID?: string; Slug?: string; Title?: string; Summary?: string; Body?: string; Status?: string }))
}

4
ui/app/src/styles.css
View file

@ -30,7 +30,7 @@ p { line-height: 1.6; }
.filter-pill, .badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 9px; color: #344f9b; background: #eef2ff; font-size: .78rem; font-weight: 650; }
.filter-pill button { border: 0; padding: 0 2px; color: #536fc4; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; }
.badge-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.content-card { padding: 26px; background: #fff; border: 1px solid #e3e8f0; border-radius: 14px; box-shadow: 0 10px 30px #17203308; }
.content-card h2 { margin: 12px 0 8px; font-size: 1.3rem; letter-spacing: -.025em; }
.content-card h2 a { color: #172033; text-decoration: none; }
@ -60,5 +60,5 @@ p { line-height: 1.6; }
.inline-button { margin-top: 22px; }
.protected-card { text-align: center; }
@media (max-width: 480px) { .shell { padding: 0 16px; } .card { padding: 28px 22px; } }
@media (max-width: 640px) { .content-grid { grid-template-columns: 1fr; } .content-page, .detail-page { padding-top: 3vh; } .edit-button { position: static; margin-top: 10px; } }
@media (max-width: 640px) { .content-page, .detail-page { padding-top: 3vh; } .edit-button { position: static; margin-top: 10px; } }
@media (max-width: 640px) { .filters { grid-template-columns: 1fr; } }