import { useEffect, useState } from 'react'
import { HardDrive, History, Images, KeyRound, LogOut, PieChart, UserCog } from 'lucide-react'
import { run, useStore } from './store'
import { Anmelden } from './pages/Anmelden'
import { Galerie } from './pages/Galerie'
import { Speicher } from './pages/Speicher'
import { Tokens } from './pages/Tokens'
import { Konto } from './pages/Konto'
import { Verlauf } from './pages/Verlauf'
import { Meldungen } from './components/Meldungen'
import { Avatar } from './components/Avatar'
// Ein winziger Router über die History-API statt einer Bibliothek.
//
// Echte Pfade und keine Reiter im Zustand, weil der Dienst dafür schon gebaut
// ist: index.ts liefert auf alles Unbekannte die index.html aus, damit ein
// Neuladen auf /tokens im Router landet und nicht im 404.
const seiten = [
{ pfad: '/', name: 'Galerie', kind: Images, Inhalt: Galerie },
{ pfad: '/verlauf', name: 'Verlauf', kind: History, Inhalt: Verlauf },
{ pfad: '/speicher', name: 'Speicher', kind: PieChart, Inhalt: Speicher },
{ pfad: '/tokens', name: 'Token', kind: KeyRound, Inhalt: Tokens },
{ pfad: '/konto', name: 'Konto', kind: UserCog, Inhalt: Konto },
] as const
function usePfad(): [string, (p: string) => void] {
const [pfad, setPfad] = useState(window.location.pathname)
useEffect(() => {
const zurueck = () => setPfad(window.location.pathname)
window.addEventListener('popstate', zurueck)
return () => window.removeEventListener('popstate', zurueck)
}, [])
return [
pfad,
(p: string) => {
window.history.pushState(null, '', p)
setPfad(p)
},
]
}
export function App() {
// Einzeln ausgewählt und nicht als ganzer Laden: `useStore()` ohne
// Auswahlfunktion abonniert ALLES, und dann zeichnet jede Meldung das
// ganze Dashboard neu — bei 60 Kacheln mit Bildern ist das spürbar.
const user = useStore((s) => s.user)
const checking = useStore((s) => s.checking)
const checkSession = useStore((s) => s.checkSession)
const logout = useStore((s) => s.logout)
const [pfad, gehZu] = usePfad()
useEffect(() => {
void checkSession()
}, [checkSession])
// Solange nicht feststeht, ob eine Sitzung besteht, wird NICHTS gezeigt.
// Sonst blitzt bei jedem Neuladen kurz das Anmeldeformular auf, obwohl man
// angemeldet ist — und das sieht aus wie ein Fehler.
if (checking) {
return (
)
}
if (!user) {
return (
<>
)
}
const aktiv = seiten.find((s) => s.pfad === pfad) ?? seiten[0]
const Inhalt = aktiv.Inhalt
return (
)
}