chore: update Angular cache and TypeScript build info

README.md

@@ -1,74 +1,104 @@
-# ObsiViewer · Obsidian Vault Viewer
+# 🌌 ObsiViewer — Explorateur de voûte Obsidian
 
-ObsiViewer est une application Angular permettant de consulter un coffre (**vault**) Obsidian en lecture seule : exploration des fichiers, rendu Markdown enrichi, graphe des liens et visualisation des tags. Le projet utilise des données mockées pour démontrer l’interface, sans connexion à un véritable backend.
+ObsiViewer est une application **Angular 20** qui permet de parcourir une voûte Obsidian en lecture seule : navigation dans l’arborescence des notes, rendu Markdown enrichi, visualisation du graphe et filtrage avancé par tags ou dates.
 
-## Architecture du projet
+> 📝 **Mode démo par défaut** : l’interface repose sur des données générées par `VaultService`. Vous pouvez connecter ObsiViewer à vos fichiers Markdown via le serveur Express fourni.
 
-- `src/` : composants Angular (`app.component.*`, `components/`, `services/`, `types.ts`).
-- `docker/` : Dockerfiles et scripts PowerShell/Bash pour la construction et le déploiement d’images.
-- `docker-compose/` : orchestration d'un conteneur `obsi-viewer-angular` avec gestion des volumes pour la voûte Obsidian.
-- `index.tsx` : point d’entrée Angular (bootstrap sans zone).
-- `metadata.json` : métadonnées descriptives pour l’intégration AI Studio.
+---
 
-## Prérequis
+## 🚀 Aperçu rapide
 
-- **Node.js 20+** et **npm** (`node --version`).
-- **Angular CLI** (`npm install -g @angular/cli`) recommandé pour les commandes `ng` locales.
-- Optionnel : **Docker Engine** (et **WSL Debian** sur Windows) si vous utilisez les scripts de conteneurisation.
+- **Framework** : Angular + TailwindCSS
+- **Rendu Markdown** : `MarkdownService` (supporte Mermaid, KaTeX, surlignage de code)
+- **Visualisations** :
+  - Explorateur de fichiers (`app/components/file-explorer/`)
+  - Graphe de liens (`app/components/graph-view/`)
+  - Vue tags (`app/components/tags-view/`)
+  - Recherche + calendrier (intégré à `app.component.simple.html`)
+- **Backend optionnel** : serveur Express (`server/index.mjs`) qui lit la voûte physique (`vault/`) et expose une API REST.
 
-## Configuration des variables d’environnement
+---
 
-- Copiez `.env.local` (ou créez-le) et renseignez vos propres clés, notamment `GEMINI_API_KEY`. Ce fichier est ignoré par Git.
-- Pour Docker Compose, dupliquez `docker-compose/.env.example` en `docker-compose/.env` et remplacez toutes les valeurs de démonstration avant toute mise en production. **Ne stockez pas de secrets réels dans le dépôt.**
+## 🧰 Prérequis
 
-## Lancement en développement (Angular CLI)
+- Node.js **20+** et npm (`node --version`)
+- Angular CLI (facultatif mais pratique) : `npm install -g @angular/cli`
+- Docker (facultatif) pour utiliser les scripts situés dans `docker/` et `docker-compose/`
+
+---
+
+## ⚙️ Installation & scripts utiles
 
 ```bash
-npm install
-npm run dev
+npm install      # Installe toutes les dépendances
+npm run dev      # Lance l'app en mode développement (http://localhost:3000)
+npm run build    # Compile la version production dans dist/
+npm run preview  # Sert la build de prod avec ng serve
 ```
 
-- L’application est servie sur `http://localhost:3000/` (voir `angular.json`).
-- Les données proviennent exclusivement de `src/services/vault.service.ts`.
+👉 Le port de dev et la configuration de build sont définis dans `angular.json`.
 
-## Build de production
+---
+
+## 🗂️ Structure du dépôt
+
+- `src/` : composant principal `app.component.ts`, vue simplifiée, composants UI, services, types
+- `server/` : serveur Express pour charger vos notes locales et fournir l’API `/api`
+- `vault/` : emplacement attendu des fichiers Markdown (créé au démarrage du serveur)
+- `docker/` & `docker-compose/` : scripts et configurations pour l’exécution en conteneurs
+- `index.tsx` : point d’entrée Angular (bootstrap sans zone)
+- `metadata.json` : métadonnées pour l’intégration AI Studio
+
+---
+
+## 🔌 Configurer l’API locale (optionnel)
 
 ```bash
-npm run build
+npm run build            # génère dist/
+node server/index.mjs    # lance l'API + serveur statique sur http://localhost:4000
 ```
 
-- La commande appelle `ng build --configuration=production` et génère la sortie dans `dist/` selon `angular.json`.
-- Vous pouvez servir le dossier `dist/` avec un serveur statique de votre choix (`npx http-server dist` par exemple).
+Assurez-vous que vos notes Markdown se trouvent dans `vault/`. L’API expose :
 
-## Conteneurisation
+- `GET /api/health`
+- `GET /api/vault`
+- `GET /api/files/metadata`
+- `GET /api/files/by-date?date=2025-01-01`
+- `GET /api/files/by-date-range?start=...&end=...`
 
-### Construction d’une image locale
+---
 
-- Sur Windows, exécutez `docker/build-img.ps1` (PowerShell) pour construire `ObsiViewer-angular:latest` via WSL Debian. Ajoutez `-full` pour une construction sans cache.
-- En environnement Linux, utilisez directement `docker/Dockerfile.origi` : `docker build -t obsi-viewer:latest -f docker/Dockerfile.origi .`
-- Le `Dockerfile` fourni part d’une image Node 20, construit l’application puis attend un serveur Node (`server/index.mjs`). Si vous n’avez pas ce backend, servez simplement les fichiers `dist/` avec un serveur HTTP statique.
+## 🐳 Exécution avec Docker (facultatif)
 
-### Utilisation de Docker Compose
+- `docker/build-img.ps1` / `docker/deploy-img.ps1` pour construire et pousser une image locale
+- `docker/Dockerfile.origi` pour une build manuelle (`docker build ...`)
+- `docker-compose/docker-compose.yml` pour orchestrer un conteneur préconfiguré
 
-- `docker-compose/docker-compose.yml` référence une image distante `docker-registry.dev.home:5000/newtube-angular:latest` et monte des volumes applicatifs.
-- Avant d’exécuter `docker compose up -d`, préparez `docker-compose/.env` (via `init.sh` ou manuellement) et assurez-vous que le registre et les chemins montés existent.
+💡 Pensez à personnaliser les fichiers `.env` (`.env.local`, `docker-compose/.env`) avant toute utilisation réelle.
 
-### Scripts de déploiement
+---
 
-- `docker/deploy-img.sh` (appelé via `deploy-img.ps1`) versionne et pousse l’image locale vers un registre HTTP (insecure). Vérifiez la configuration `insecure-registries` de Docker avant utilisation.
+## 🧪 Tests & qualité
 
-## Tests
+- Aucun test automatisé n’est fourni pour l’instant.
+- Ajoutez vos propres suites (`ng test`, `ng e2e`) selon vos besoins.
 
-- Aucun test automatisé n’est fourni. Ajoutez vos propres suites (ex. `ng test`, `ng e2e`) selon vos besoins.
+---
 
-## Limitations connues
+## ⚠️ Points d’attention
 
-- Les scripts Docker supposent l’existence d’un dossier `server/` et d’un schéma `db/schema.sql` non inclus ici (héritage AI Studio).
-- Les clés présentes dans `docker-compose/.env` et `init.sh` sont des valeurs de démonstration : remplacez-les impérativement.
-- Le rendu Markdown est volontairement simplifié (`MarkdownService`) et peut nécessiter des adaptations pour un vault complet.
+- Les scripts Docker hérités supposent la présence d’un dossier `server/` et d’un schéma `db/schema.sql` (non inclus ici).
+- Les secrets fournis en exemple dans les fichiers `.env` doivent être remplacés avant toute utilisation en production.
+- Le rendu Markdown peut nécessiter des adaptations pour des voûtes Obsidian complexes.
 
-## Ressources utiles
+---
 
-- Documentation officielle Angular : [https://angular.dev/](https://angular.dev/)
-- Documentation `ng serve` : [https://angular.dev/cli/serve](https://angular.dev/cli/serve)
-- Guide Docker Compose : [docker-compose/README.md](docker-compose/README.md)
+## 📚 Ressources
+
+- Angular : <https://angular.dev/>
+- CLI Angular (`ng serve`) : <https://angular.dev/cli/serve>
+- Guide Docker Compose : voir `docker-compose/README.md`
+
+---
+
+✨ Bonne exploration dans ObsiViewer !

src/components/tags-view/tags-view.component.ts

@@ -18,6 +18,44 @@ interface TagSection {
 @Component({
   selector: 'app-tags-view',
   imports: [CommonModule],
+  styles: [
+    `
+      :host {
+        --tv-scroll-thumb-light: rgba(22, 28, 35, 0.35);
+        --tv-scroll-thumb-dark: rgba(156, 163, 175, 0.35);
+        --tv-scroll-track: transparent;
+      }
+
+      :host .custom-scrollbar {
+        scrollbar-width: thin;
+        scrollbar-color: var(--tv-scroll-thumb-light) var(--tv-scroll-track);
+      }
+
+      :host([data-theme='dark']) .custom-scrollbar,
+      :host-context(.dark) .custom-scrollbar {
+        scrollbar-color: var(--tv-scroll-thumb-dark) var(--tv-scroll-track);
+      }
+
+      :host .custom-scrollbar::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      :host .custom-scrollbar::-webkit-scrollbar-track {
+        background: var(--tv-scroll-track);
+      }
+
+      :host .custom-scrollbar::-webkit-scrollbar-thumb {
+        background-color: var(--tv-scroll-thumb-light);
+        border-radius: 9999px;
+      }
+
+      :host([data-theme='dark']) .custom-scrollbar::-webkit-scrollbar-thumb,
+      :host-context(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
+        background-color: var(--tv-scroll-thumb-dark);
+      }
+    `,
+  ],
   template: `
     <div class="flex h-full flex-col gap-4 p-3">
       <div class="rounded-lg border border-obs-l-border/60 bg-obs-l-bg-secondary/70 px-3 py-2 shadow-sm dark:border-obs-d-border/60 dark:bg-obs-d-bg-secondary/70">
@@ -50,7 +88,7 @@ interface TagSection {
       </div>
 
       <div class="flex flex-1 gap-3 overflow-hidden">
-        <div class="flex-1 overflow-y-auto pr-1">
+        <div class="custom-scrollbar flex-1 overflow-y-auto pr-1">
           @if (displayedSections().length > 0) {
             <div class="space-y-4">
               @for (section of displayedSections(); track section.letter) {
@@ -88,13 +126,13 @@ interface TagSection {
           }
         </div>
 
-        <nav class="sticky top-0 flex h-full w-10 flex-col items-center justify-start gap-1 self-start rounded-lg border border-obs-l-border/60 bg-obs-l-bg-secondary/70 px-2 py-3 text-xs font-medium text-obs-l-text-muted shadow-sm dark:border-obs-d-border/60 dark:bg-obs-d-bg-secondary/70 dark:text-obs-d-text-muted">
+        <nav class="custom-scrollbar sticky top-0 flex h-full w-12 flex-col items-center justify-start gap-2 self-start rounded-lg border border-obs-l-border/60 bg-obs-l-bg-secondary/70 px-2 py-3 text-[0.7rem] font-medium text-obs-l-text-muted shadow-sm dark:border-obs-d-border/60 dark:bg-obs-d-bg-secondary/70 dark:text-obs-d-text-muted overflow-y-auto">
           <span class="text-[0.6rem] uppercase tracking-wide text-obs-l-text-muted/70 dark:text-obs-d-text-muted/70">A–Z</span>
-          <div class="mt-2 grid grid-cols-1 gap-1">
+          <div class="grid grid-cols-1 gap-1">
             @for (letter of availableLetters(); track letter) {
               <button
                 type="button"
-                class="flex h-7 w-7 items-center justify-center rounded-full transition"
+                class="flex h-7 w-7 items-center justify-center rounded-full text-[0.7rem] transition"
                 [class.bg-obs-l-bg-main]="activeLetter() === letter"
                 [class.dark:bg-obs-d-bg-main]="activeLetter() === letter"
                 [class.text-obs-l-text-main]="activeLetter() === letter"