Jonas
3b910850cb
Refactor Layout.vue to implement a redesigned, responsive shell: new branding (SVG icon, title & subtitle), computed sidebar/footer routes, route-aware page title & description, improved footer visibility, and a mobile-friendly navigation drawer. Theme handling now uses a data-theme attribute, persistent storage, accessible labels and toggle controls. Added new image assets (icon.svg, icon.png, 404NotFound.png), global.css and documentation files (style.md, codexInfo.md), updated related plugins/routes/components, and removed the old logo.png. Also updated the favicon.
97 lines
8.8 KiB
Markdown
97 lines
8.8 KiB
Markdown
# Projektübersicht – self-hosted Datei- und Markdown-App
|
||
|
||
## Projektidee
|
||
Ich baue eine einfache self-hosted Web-App, die sich funktional zwischen Google Drive, Notion und Obsidian einordnet. Der Schwerpunkt liegt aber klar auf einer Google-Drive-artigen Oberfläche mit Dateien und Ordnern. Markdown-Dateien sollen direkt im Browser bearbeitet werden können, andere Dateien sollen gespeichert und – wenn möglich – als Vorschau angezeigt werden.
|
||
|
||
## Ziel des Projekts
|
||
Das Projekt ist ein kleines, bewusst einfach gehaltenes Solo-Projekt neben meiner Ausbildung. Es soll mehrere Benutzer unterstützen, aber technisch und funktional schlank bleiben. Wichtig ist ein realistisches MVP, das sauber läuft und später erweitert werden kann.
|
||
|
||
## Geplanter Tech-Stack
|
||
- Frontend: Vue 3
|
||
- Markdown-Editor: md-editor-v3
|
||
- Backend: ASP.NET Core mit C#
|
||
- Datenbank: PostgreSQL
|
||
- Dateispeicher: MinIO als S3-kompatibler Storage
|
||
- Authentifizierung: klassische Cookie-basierte Authentifizierung, keine JWTs
|
||
- Deployment: self-hosted Web-App auf meinem eigenen Server
|
||
|
||
## Kernfunktionen für das MVP
|
||
- Login mit bestehenden Accounts
|
||
- Kein öffentliches Registrieren
|
||
- Ein initialer Admin-Account wird zuerst erstellt
|
||
- Weitere Benutzer werden später nur manuell durch den Admin angelegt
|
||
- Dateien und Ordner anlegen, hochladen und öffnen
|
||
- Durch Ordnerstrukturen navigieren
|
||
- Google-Drive-artige Hauptansicht mit Dateiliste und Vorschau
|
||
- Markdown-Dateien direkt im Browser bearbeiten
|
||
- PDFs und Bilder als Vorschau anzeigen
|
||
- Andere Dateien einfach speichern und bei Bedarf herunterladen oder öffnen
|
||
|
||
## Was bewusst nicht Teil des MVP ist
|
||
- Keine Registrierung für normale Nutzer
|
||
- Kein Teilen oder Freigeben von Dateien
|
||
- Keine Suche
|
||
- Keine Versionierung oder Dateihistorie
|
||
- Keine Echtzeit-Zusammenarbeit
|
||
- Keine Desktop-App oder Mobile-App
|
||
- Keine komplizierte Rechteverwaltung
|
||
- Keine JWT-, OAuth- oder SSO-Lösung
|
||
|
||
## Gewünschter Stil der Anwendung
|
||
Die Oberfläche soll sich eher an Google Drive orientieren als an Notion oder Obsidian. Wichtig sind Übersicht, einfache Navigation und ein klarer Fokus auf Dateien, Ordner, Vorschau und Bearbeitung. Die App soll schlicht, pragmatisch und gut allein umsetzbar sein.
|
||
|
||
## Sprachregel für UI-Texte
|
||
- Umlaute sind ausdrücklich erwünscht (`ä`, `ö`, `ü`, `Ä`, `Ö`, `Ü`).
|
||
- Keine Umschreibungen mit `ae`, `oe`, `ue` in sichtbaren deutschen Texten.
|
||
|
||
## Wie die App später wirken soll
|
||
Die Anwendung soll wie eine einfache Dateiverwaltung im Browser wirken. Man meldet sich an, sieht seine Ordner und Dateien, kann sich durch die Struktur klicken, PDFs und Bilder direkt ansehen und Markdown-Dateien öffnen und bearbeiten. Der Fokus liegt auf Einfachheit statt auf vielen Sonderfunktionen.
|
||
|
||
## Technische Leitidee
|
||
Das Projekt soll möglichst einfach aufgebaut werden. Dateimetadaten liegen in PostgreSQL, die eigentlichen Dateien in MinIO. Das Backend verwaltet Login, Benutzer, Ordner, Dateien und Vorschau-Informationen. Das Frontend bildet hauptsächlich die Dateiverwaltung, Vorschau und Markdown-Bearbeitung ab. Die gesamte Architektur soll bewusst schlank bleiben, damit sie für ein Solo-Projekt realistisch ist.
|
||
|
||
## Projektbeschreibung für eine KI
|
||
Ich baue alleine neben meiner Ausbildung eine einfache self-hosted Web-App für mehrere Benutzer. Die App kombiniert eine Google-Drive-artige Dateiverwaltung mit einfacher Markdown-Bearbeitung. Benutzer sollen durch Ordner und Dateien navigieren können, Bilder und PDFs in einer Vorschau sehen und Markdown-Dateien direkt im Browser bearbeiten. Es gibt keine öffentliche Registrierung, kein Teilen, keine Suche und keine Versionierung. Benutzerkonten werden manuell angelegt, beginnend mit einem initialen Admin-Account. Der Tech-Stack besteht aus Vue 3 im Frontend, md-editor-v3 als Markdown-Editor, ASP.NET Core mit C# im Backend, PostgreSQL für Metadaten, MinIO als S3-kompatiblen Dateispeicher und Cookie-basierter Authentifizierung.
|
||
|
||
## Frontend-Designquelle (Style Guide)
|
||
- Es gibt einen zentralen Design-Guide unter `GUI/style.md`.
|
||
- Dieser Guide definiert die visuelle Richtung für Hoard: light-first, dateiorientiert, ruhige Flächen, gezielte Verwendung von Grün als Markenfarbe.
|
||
- Enthalten sind Farbpalette, Typografie, Spacing, Border-Radien, Schatten, Komponentenregeln und Interaktionsprinzipien.
|
||
|
||
## Angelegte globale CSS-Basis
|
||
- Statt `app.css` wurde eine zentrale globale Datei `GUI/src/global.css` angelegt und verwendet.
|
||
- Diese Datei wird in `GUI/src/main.ts` über `import './global.css'` eingebunden.
|
||
- Inhaltlich stellt `global.css` bereit:
|
||
- Design-Tokens als CSS-Variablen (`:root`) für Farben, Spacing, Radius, Schatten, Typografie und Statusfarben.
|
||
- Globale Basisstile für `html`, `body`, Links, Überschriften, Fokuszustände und Scrollbars.
|
||
- Vuetify-nahe globale Anpassungen für App-Shell und Standardkomponenten (Topbar, Sidebar, Cards, Buttons, Inputs, Tabellen).
|
||
- Wiederverwendbare Utility-/Pattern-Klassen für Hoard-Seiten, z. B. `hoard-panel`, `hoard-toolbar`, `hoard-list-row`, `hoard-empty-state`, `hoard-status`.
|
||
- Responsive Verhalten für kleinere Viewports per Media Query.
|
||
|
||
## Aktueller Stand
|
||
- `GUI/src/Layout.vue` wurde auf eine ruhigere, dateiorientierte App-Shell nach Style Guide umgebaut (klarere Topbar, strukturierte Sidebar, aufgeräumter Footer, responsive Drawer-Logik).
|
||
- `GUI/src/routes/404NotFound.vue` wurde als konsistenter Hoard-Error-State mit Illustration, Primäraktion zur Startseite und Zurück-Aktion neu gestaltet.
|
||
- `GUI/src/routes/authentication/Login.vue` wurde im gleichen Hoard-Schema als zweispaltige Login-Ansicht mit Branding-Bereich und fokussiertem Formular neu aufgebaut.
|
||
- Globaler Darkmode ist in `Layout.vue` integriert (Topbar-Toggle, Persistenz in `localStorage`, automatisches Laden beim Start) und durch Theme-Tokens in `GUI/src/global.css` ergänzt.
|
||
- `GUI/src/routes/Home.vue` ist jetzt eine Produkt-Startseite (Landingpage) zur App-Vorstellung statt einer Dashboard-Platzhalterkarte.
|
||
- Das Brand-Element in `GUI/src/Layout.vue` nutzt nun das App-Icon (`GUI/src/assets/images/icon.png`) statt eines Platzhalter-Buchstabens; die Darstellung wurde im Topbar-Button sichtbar vergrößert.
|
||
- Das Topbar-Icon in `GUI/src/Layout.vue` wurde nochmals deutlich größer gesetzt, damit das Branding besser sichtbar ist.
|
||
|
||
## Änderungen durch Codex
|
||
- Layout-Neubau in `GUI/src/Layout.vue` mit Brand-Bereich, Seitenkontext aus Route-Metadaten, überarbeiteter Navigation und designkonformer Footer-Struktur.
|
||
- Neue 404-Seite in `GUI/src/routes/404NotFound.vue` im bestehenden Light-first-Design mit `hoard-panel`-Look und klaren Handlungsoptionen.
|
||
- `GUI/src/Layout.vue` um Theme-Management erweitert (`light`/`dark` via Vuetify), inkl. Toggle-Button in der App-Bar und Speicherung unter `localStorage`-Key `theme`.
|
||
- `GUI/src/plugins/vuetify.ts` um ein dunkles Theme ergänzt; `GUI/src/global.css` um `:root[data-theme='dark']`-Token-Overrides erweitert.
|
||
- `GUI/src/routes/authentication/Login.vue` auf designkonforme Login-Oberfläche mit klarer Informationshierarchie, responsivem Layout und konsistenten Aktionen umgebaut.
|
||
- Darkmode-Farbwelt in `GUI/src/global.css` und `GUI/src/plugins/vuetify.ts` von grünlastig auf neutralere Schwarz-/Grau-Basis umgestellt; Grün bleibt als Akzentfarbe für aktive/primäre UI-Elemente.
|
||
- `GUI/src/routes/Home.vue` komplett als Landingpage neu gestaltet (Hero, Produktnutzen, Funktionsbereiche, Workflow, Tech-Stack, CTA), passend zur Hoard-Designsprache.
|
||
- `GUI/src/plugins/routesLayout.ts` Beschreibung der Startseite auf App-Vorstellung statt Übersichts-Text angepasst.
|
||
- Sichtbare UI-Texte in `Layout.vue`, `Home.vue`, `Login.vue`, `404NotFound.vue` und `routesLayout.ts` von Umschreibungen (`ae/oe/ue`) auf echte Umlaute (`ä/ö/ü`) umgestellt.
|
||
- Sprachregel ergänzt: In UI-Texten sind echte Umlaute gewünscht; Umschreibungen (`ae/oe/ue`) sollen vermieden werden.
|
||
- In `GUI/src/Layout.vue` wurde die Topbar-Branding-Grafik auf `GUI/src/assets/images/icon.png` umgestellt und größer skaliert.
|
||
- Icon-Größe im Topbar-Branding von `GUI/src/Layout.vue` erneut erhöht (größerer Brand-Container und größere Icon-Darstellung).
|
||
- Im Topbar-Branding von `GUI/src/Layout.vue` wurde der grüne Rahmen/Hintergrund entfernt; angezeigt wird nur noch das reine Icon.
|
||
- Darkmode-Fix für `GUI/src/routes/404NotFound.vue`: Heller Weiß-Gradient entfernt und auf theme-basierte Surface-Mischungen umgestellt, damit keine helle Fläche mehr im Darkmode erscheint.
|
||
- `GUI/src/plugins/routesLayout.ts` um `Visibility.Route` und die optionale Eigenschaft `visibilityRoute` erweitert; `GUI/src/Layout.vue` zeigt Sidebar-Einträge mit `Visibility.Route` nur noch an, wenn die aktuelle Route unter dem konfigurierten Pfad liegt (z. B. `/dash` und Unterrouten).
|
||
- In `GUI/src/plugins/routesLayout.ts` wurde ein kurzer Kommentar ergänzt, der die Nutzung von `Visibility.Public`, `Visibility.Route`, `visibilityRoute` (einzeln/mehrfach) sowie typische Szenarien für die Sidebar-Sichtbarkeit beschreibt.
|