Des tonnes de modifications notamment VIM / Couleurs / typos
This commit is contained in:
119
templates/about.html
Normal file
119
templates/about.html
Normal file
@ -0,0 +1,119 @@
|
||||
<div id="about-content" style="padding: 3rem; max-width: 900px; margin: 0 auto;">
|
||||
<div style="text-align: center; margin-bottom: 3rem;">
|
||||
<h1 style="font-size: 2.5rem; color: #c792ea; margin-bottom: 1rem;">
|
||||
📝 About Project Notes
|
||||
</h1>
|
||||
<p style="font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem;">
|
||||
Un gestionnaire de notes Markdown moderne et puissant
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 3rem;">
|
||||
<h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
|
||||
🚀 Démarrage rapide
|
||||
</h2>
|
||||
<div style="display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
|
||||
<h3 style="color: #89ddff; margin-bottom: 0.5rem;">📁 Parcourir</h3>
|
||||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
|
||||
Explorez vos notes dans l'arborescence à gauche
|
||||
</p>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
|
||||
<h3 style="color: #c3e88d; margin-bottom: 0.5rem;">🔍 Rechercher</h3>
|
||||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
|
||||
Utilisez la barre de recherche en haut pour trouver vos notes
|
||||
</p>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
|
||||
<h3 style="color: #ffcb6b; margin-bottom: 0.5rem;">⚡ Slash commands</h3>
|
||||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
|
||||
Tapez <code style="color: #f07178;">/</code> dans l'éditeur pour insérer du Markdown
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 3rem;">
|
||||
<h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
|
||||
✨ Fonctionnalités
|
||||
</h2>
|
||||
<ul style="color: var(--text-secondary); line-height: 2; list-style: none; padding: 0;">
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
|
||||
<span style="color: #c792ea;">◆</span> Éditeur Markdown avec coloration syntaxique (CodeMirror)
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
|
||||
<span style="color: #82aaff;">◆</span> Prévisualisation en temps réel avec scroll synchronisé
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
|
||||
<span style="color: #89ddff;">◆</span> Organisation par dossiers avec arborescence dynamique
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
|
||||
<span style="color: #c3e88d;">◆</span> Recherche avancée par tag, titre ou contenu
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
|
||||
<span style="color: #ffcb6b;">◆</span> Thème Material Darker pour vos yeux
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0;">
|
||||
<span style="color: #f07178;">◆</span> Sauvegarde automatique avec Ctrl/Cmd+S
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 3rem; text-align: center; padding: 2rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-primary);">
|
||||
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
||||
💡 Astuce : Cliquez sur une note dans l'arborescence pour commencer à éditer
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 3rem;">
|
||||
<h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
|
||||
⌨️ Raccourcis clavier
|
||||
</h2>
|
||||
<div style="display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary); font-size: 0.9rem;">Ouvrir la recherche</span>
|
||||
<kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + K</kbd>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary); font-size: 0.9rem;">Sauvegarder la note</span>
|
||||
<kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + S</kbd>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary); font-size: 0.9rem;">Ouvrir la note du jour</span>
|
||||
<kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + D</kbd>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary); font-size: 0.9rem;">Créer une nouvelle note</span>
|
||||
<kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + N</kbd>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary); font-size: 0.9rem;">Retour à la page d'accueil</span>
|
||||
<kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + H</kbd>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary); font-size: 0.9rem;">Afficher/Masquer la sidebar</span>
|
||||
<kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + B</kbd>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary); font-size: 0.9rem;">Ouvrir les paramètres</span>
|
||||
<kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + ,</kbd>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary); font-size: 0.9rem;">Toggle prévisualisation</span>
|
||||
<kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + P</kbd>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary); font-size: 0.9rem;">Créer un nouveau dossier</span>
|
||||
<kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + Shift + F</kbd>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary); font-size: 0.9rem;">Fermer les modales</span>
|
||||
<kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Escape</kbd>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color: var(--text-muted); font-size: 0.85rem; text-align: center; margin-top: 1.5rem;">
|
||||
💡 Sur Mac, utilisez Cmd au lieu de Ctrl
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
55
templates/daily-calendar.html
Normal file
55
templates/daily-calendar.html
Normal file
@ -0,0 +1,55 @@
|
||||
<div class="daily-calendar" id="daily-calendar">
|
||||
<div class="daily-calendar-header">
|
||||
<button class="calendar-nav-btn"
|
||||
hx-get="/api/daily/calendar/{{.PrevMonth}}"
|
||||
hx-target="#daily-calendar"
|
||||
hx-swap="outerHTML"
|
||||
title="Mois précédent">
|
||||
‹
|
||||
</button>
|
||||
<span class="calendar-month-year">{{.MonthName}} {{.Year}}</span>
|
||||
<button class="calendar-nav-btn"
|
||||
hx-get="/api/daily/calendar/{{.NextMonth}}"
|
||||
hx-target="#daily-calendar"
|
||||
hx-swap="outerHTML"
|
||||
title="Mois suivant">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="calendar-grid">
|
||||
<!-- En-tête des jours -->
|
||||
<div class="calendar-weekday-header">L</div>
|
||||
<div class="calendar-weekday-header">M</div>
|
||||
<div class="calendar-weekday-header">M</div>
|
||||
<div class="calendar-weekday-header">J</div>
|
||||
<div class="calendar-weekday-header">V</div>
|
||||
<div class="calendar-weekday-header">S</div>
|
||||
<div class="calendar-weekday-header">D</div>
|
||||
|
||||
<!-- Jours du calendrier -->
|
||||
{{range .Weeks}}
|
||||
{{range .}}
|
||||
<div class="calendar-day {{if not .InMonth}}calendar-day-other-month{{end}} {{if .IsToday}}calendar-day-today{{end}} {{if .HasNote}}calendar-day-has-note calendar-day-clickable{{else}}{{if .InMonth}}calendar-day-no-note{{end}}{{end}}"
|
||||
{{if and .InMonth .HasNote}}
|
||||
data-date="{{.Date.Format "2006-01-02"}}"
|
||||
hx-get="/api/daily/{{.Date.Format "2006-01-02"}}"
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML"
|
||||
{{end}}
|
||||
title="{{if .HasNote}}Note du {{.Date.Format "02/01/2006"}}{{else}}{{.Date.Format "02/01/2006"}} - Pas de note{{end}}">
|
||||
<span class="calendar-day-number">{{.Day}}</span>
|
||||
{{if .HasNote}}<span class="calendar-day-indicator">●</span>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<button class="daily-today-btn"
|
||||
hx-get="/api/daily/today"
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML"
|
||||
title="Ouvrir la note du jour">
|
||||
📅 Aujourd'hui
|
||||
</button>
|
||||
</div>
|
||||
22
templates/daily-recent.html
Normal file
22
templates/daily-recent.html
Normal file
@ -0,0 +1,22 @@
|
||||
<div class="daily-recent" id="daily-recent">
|
||||
{{if .Notes}}
|
||||
{{range .Notes}}
|
||||
<a href="#"
|
||||
class="daily-recent-item"
|
||||
hx-get="/api/daily/{{.Date.Format "2006-01-02"}}"
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML"
|
||||
title="Note du {{.Date.Format "02/01/2006"}}">
|
||||
<span class="daily-recent-icon">📄</span>
|
||||
<div class="daily-recent-content">
|
||||
<span class="daily-recent-weekday">{{.DayOfWeek}}</span>
|
||||
<span class="daily-recent-title">{{.Title}}</span>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<p style="color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 1rem;">
|
||||
Aucune note récente
|
||||
</p>
|
||||
{{end}}
|
||||
</div>
|
||||
37
templates/favorites.html
Normal file
37
templates/favorites.html
Normal file
@ -0,0 +1,37 @@
|
||||
{{if .Favorites}}
|
||||
{{range .Favorites}}
|
||||
<div class="favorite-item" data-path="{{.Path}}">
|
||||
{{if .IsDir}}
|
||||
<div class="favorite-folder" data-path="{{.Path}}">
|
||||
<span class="favorite-icon">⭐</span>
|
||||
<span class="favorite-folder-icon">{{.Icon}}</span>
|
||||
<span class="favorite-name">{{.Title}}</span>
|
||||
<button class="favorite-remove"
|
||||
onclick="removeFavorite('{{.Path}}')"
|
||||
title="Retirer des favoris">×</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<a href="#"
|
||||
class="favorite-file"
|
||||
data-path="{{.Path}}"
|
||||
hx-get="/api/notes/{{.Path}}"
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML">
|
||||
<span class="favorite-icon">⭐</span>
|
||||
<span class="favorite-file-icon">{{.Icon}}</span>
|
||||
<span class="favorite-name">{{.Title}}</span>
|
||||
<button class="favorite-remove"
|
||||
onclick="event.preventDefault(); event.stopPropagation(); removeFavorite('{{.Path}}')"
|
||||
title="Retirer des favoris">×</button>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<p class="favorites-empty">
|
||||
Aucun favori.<br>
|
||||
<span style="font-size: 0.75rem; color: var(--text-muted);">
|
||||
Cliquez sur ⭐ à côté d'une note ou d'un dossier pour l'ajouter.
|
||||
</span>
|
||||
</p>
|
||||
{{end}}
|
||||
@ -1,10 +1,8 @@
|
||||
<!-- Zone de drop racine -->
|
||||
<div class="root-drop-zone folder-item" data-path="" data-is-dir="true" data-is-root="true">
|
||||
<div class="folder-header root-folder-header">
|
||||
<span class="folder-icon">🏠</span>
|
||||
<span class="folder-name">Racine</span>
|
||||
<span class="root-hint">(notes/)</span>
|
||||
</div>
|
||||
<!-- Indicateur de racine (non cliquable) -->
|
||||
<div class="root-indicator">
|
||||
<span class="folder-icon">🏠</span>
|
||||
<span class="folder-name">Racine</span>
|
||||
<span class="root-hint">(notes/)</span>
|
||||
</div>
|
||||
|
||||
<hr style="border: none; border-top: 1px solid var(--border-primary); margin: 0.75rem 0;">
|
||||
@ -24,6 +22,7 @@
|
||||
{{if .IsDir}}
|
||||
<div class="folder-item" data-path="{{.Path}}" data-is-dir="true">
|
||||
<div class="folder-header">
|
||||
<input type="checkbox" class="selection-checkbox folder-checkbox" data-path="{{.Path}}" data-is-dir="true" style="display: none;">
|
||||
<span class="folder-toggle">▶</span>
|
||||
<span class="folder-icon">📁</span>
|
||||
<span class="folder-name">{{.Name}}</span>
|
||||
@ -35,16 +34,19 @@
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<a href="#"
|
||||
class="file-item"
|
||||
data-path="{{.Path}}"
|
||||
data-is-dir="false"
|
||||
hx-get="/api/notes/{{.Path}}"
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML"
|
||||
draggable="true">
|
||||
📄 {{.Name}}
|
||||
</a>
|
||||
<div class="file-item-wrapper">
|
||||
<input type="checkbox" class="selection-checkbox file-checkbox" data-path="{{.Path}}" data-is-dir="false" style="display: none;">
|
||||
<a href="#"
|
||||
class="file-item"
|
||||
data-path="{{.Path}}"
|
||||
data-is-dir="false"
|
||||
hx-get="/api/notes/{{.Path}}"
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML"
|
||||
draggable="true">
|
||||
📄 {{.Name}}
|
||||
</a>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
@ -1,71 +0,0 @@
|
||||
<div id="home-content" style="padding: 3rem; max-width: 900px; margin: 0 auto;">
|
||||
<div style="text-align: center; margin-bottom: 3rem;">
|
||||
<h1 style="font-size: 2.5rem; color: #c792ea; margin-bottom: 1rem;">
|
||||
📝 Project Notes
|
||||
</h1>
|
||||
<p style="font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem;">
|
||||
Bienvenue dans votre espace de notes Markdown
|
||||
</p>
|
||||
<button onclick="showNewNoteModal()" style="font-size: 1.1rem; padding: 1rem 2rem;">
|
||||
✨ Créer une nouvelle note
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 3rem;">
|
||||
<h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
|
||||
🚀 Démarrage rapide
|
||||
</h2>
|
||||
<div style="display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
|
||||
<h3 style="color: #89ddff; margin-bottom: 0.5rem;">📁 Parcourir</h3>
|
||||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
|
||||
Explorez vos notes dans l'arborescence à gauche
|
||||
</p>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
|
||||
<h3 style="color: #c3e88d; margin-bottom: 0.5rem;">🔍 Rechercher</h3>
|
||||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
|
||||
Utilisez la barre de recherche en haut pour trouver vos notes
|
||||
</p>
|
||||
</div>
|
||||
<div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
|
||||
<h3 style="color: #ffcb6b; margin-bottom: 0.5rem;">⚡ Slash commands</h3>
|
||||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
|
||||
Tapez <code style="color: #f07178;">/</code> dans l'éditeur pour insérer du Markdown
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 3rem;">
|
||||
<h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
|
||||
✨ Fonctionnalités
|
||||
</h2>
|
||||
<ul style="color: var(--text-secondary); line-height: 2; list-style: none; padding: 0;">
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
|
||||
<span style="color: #c792ea;">◆</span> Éditeur Markdown avec coloration syntaxique (CodeMirror)
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
|
||||
<span style="color: #82aaff;">◆</span> Prévisualisation en temps réel avec scroll synchronisé
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
|
||||
<span style="color: #89ddff;">◆</span> Organisation par dossiers avec arborescence dynamique
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
|
||||
<span style="color: #c3e88d;">◆</span> Recherche avancée par tag, titre ou contenu
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
|
||||
<span style="color: #ffcb6b;">◆</span> Thème Material Darker pour vos yeux
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0;">
|
||||
<span style="color: #f07178;">◆</span> Sauvegarde automatique avec Ctrl/Cmd+S
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 3rem; text-align: center; padding: 2rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-primary);">
|
||||
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
||||
💡 Astuce : Cliquez sur une note dans l'arborescence pour commencer à éditer
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -4,7 +4,11 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Project Notes</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/theme.css" />
|
||||
<link rel="stylesheet" href="/static/themes.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/theme/material-darker.min.css" />
|
||||
@ -12,11 +16,16 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||||
<script src="/frontend/src/theme-manager.js"></script>
|
||||
<script src="/frontend/src/font-manager.js"></script>
|
||||
<script src="/frontend/src/vim-mode-manager.js"></script>
|
||||
<script src="/frontend/src/favorites.js"></script>
|
||||
<script src="/frontend/src/keyboard-shortcuts.js"></script>
|
||||
<script type="module" src="/static/dist/project-notes-frontend.es.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<button id="toggle-sidebar-btn" title="Afficher/Masquer la barre latérale" style="background: none; border: none; padding: 0; margin-right: 1rem; cursor: pointer; color: var(--text-primary); display: flex; align-items: center;">
|
||||
<button id="toggle-sidebar-btn" title="Afficher/Masquer la barre latérale (Ctrl/Cmd+B)" style="background: none; border: none; padding: 0; margin-right: 1rem; cursor: pointer; color: var(--text-primary); display: flex; align-items: center;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
</button>
|
||||
<h1>📝 Project Notes</h1>
|
||||
@ -35,10 +44,18 @@
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML"
|
||||
style="white-space: nowrap;"
|
||||
title="Retour à la page d'accueil">
|
||||
title="Retour à la page d'accueil (Ctrl/Cmd+H)">
|
||||
🏠 Accueil
|
||||
</button>
|
||||
<button onclick="showNewNoteModal()" style="white-space: nowrap;">
|
||||
<button
|
||||
hx-get="/api/daily/today"
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML"
|
||||
style="white-space: nowrap;"
|
||||
title="Note du jour (Ctrl/Cmd+D)">
|
||||
📅 Note du jour
|
||||
</button>
|
||||
<button onclick="showNewNoteModal()" style="white-space: nowrap;" title="Créer une nouvelle note (Ctrl/Cmd+N)">
|
||||
✨ Nouvelle note
|
||||
</button>
|
||||
<div id="search-spinner" class="htmx-indicator">
|
||||
@ -101,13 +118,357 @@
|
||||
<!-- Overlay pour fermer la sidebar sur mobile -->
|
||||
<div class="sidebar-overlay" onclick="toggleSidebar()"></div>
|
||||
|
||||
<!-- Toolbar de sélection (masquée par défaut) -->
|
||||
<div id="selection-toolbar" class="selection-toolbar" style="display: none;">
|
||||
<div class="toolbar-content">
|
||||
<span id="selection-count" class="selection-count">0 élément(s) sélectionné(s)</span>
|
||||
<div class="toolbar-actions">
|
||||
<button onclick="deleteSelected()" class="danger-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
</svg>
|
||||
Supprimer
|
||||
</button>
|
||||
<button onclick="cancelSelection()" class="secondary">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modale de confirmation de suppression -->
|
||||
<div id="delete-confirmation-modal" style="display: none;">
|
||||
<div class="modal-overlay" onclick="hideDeleteConfirmationModal()"></div>
|
||||
<div class="modal-content">
|
||||
<h2 style="color: var(--error);">⚠️ Confirmer la suppression</h2>
|
||||
<p>Vous êtes sur le point de supprimer <strong id="delete-count">0</strong> élément(s) :</p>
|
||||
<div id="delete-items-list" style="max-height: 300px; overflow-y: auto; margin: 1rem 0; padding: 0.5rem; background: var(--bg-tertiary); border-radius: var(--radius-md);">
|
||||
<!-- Liste des éléments à supprimer -->
|
||||
</div>
|
||||
<p style="color: var(--warning); font-size: 0.9rem;">
|
||||
⚠️ Cette action est <strong>irréversible</strong>. Les dossiers seront supprimés avec tout leur contenu.
|
||||
</p>
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
|
||||
<button onclick="confirmDelete()" class="danger-button">Confirmer la suppression</button>
|
||||
<button type="button" class="secondary" onclick="hideDeleteConfirmationModal()">Annuler</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modale de sélection de thème et police -->
|
||||
<div id="theme-modal" style="display: none;">
|
||||
<div class="theme-modal-overlay" onclick="closeThemeModal()"></div>
|
||||
<div class="theme-modal-content">
|
||||
<h2>
|
||||
⚙️ Paramètres d'apparence
|
||||
</h2>
|
||||
|
||||
<!-- Onglets -->
|
||||
<div class="settings-tabs">
|
||||
<button class="settings-tab active" onclick="switchSettingsTab('themes')">
|
||||
🎨 Thèmes
|
||||
</button>
|
||||
<button class="settings-tab" onclick="switchSettingsTab('fonts')">
|
||||
🔤 Polices
|
||||
</button>
|
||||
<button class="settings-tab" onclick="switchSettingsTab('editor')">
|
||||
⌨️ Éditeur
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Section Thèmes -->
|
||||
<div id="themes-section" class="settings-section">
|
||||
<div class="theme-grid">
|
||||
<!-- Material Dark -->
|
||||
<div class="theme-card active" data-theme="material-dark" onclick="selectTheme('material-dark')">
|
||||
<div class="theme-card-header">
|
||||
<span class="theme-card-icon">🌙</span>
|
||||
<span class="theme-card-name">Material Dark</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
</div>
|
||||
<p class="theme-description">Thème professionnel inspiré de Material Design</p>
|
||||
</div>
|
||||
|
||||
<!-- Monokai Dark -->
|
||||
<div class="theme-card" data-theme="monokai-dark" onclick="selectTheme('monokai-dark')">
|
||||
<div class="theme-card-header">
|
||||
<span class="theme-card-icon">🎨</span>
|
||||
<span class="theme-card-name">Monokai Dark</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
</div>
|
||||
<p class="theme-description">Palette Monokai classique pour les développeurs</p>
|
||||
</div>
|
||||
|
||||
<!-- Dracula -->
|
||||
<div class="theme-card" data-theme="dracula" onclick="selectTheme('dracula')">
|
||||
<div class="theme-card-header">
|
||||
<span class="theme-card-icon">🧛</span>
|
||||
<span class="theme-card-name">Dracula</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
</div>
|
||||
<p class="theme-description">Thème sombre élégant avec des accents violets et cyan</p>
|
||||
</div>
|
||||
|
||||
<!-- One Dark -->
|
||||
<div class="theme-card" data-theme="one-dark" onclick="selectTheme('one-dark')">
|
||||
<div class="theme-card-header">
|
||||
<span class="theme-card-icon">⚡</span>
|
||||
<span class="theme-card-name">One Dark</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
</div>
|
||||
<p class="theme-description">Thème populaire d'Atom avec des couleurs douces</p>
|
||||
</div>
|
||||
|
||||
<!-- Solarized Dark -->
|
||||
<div class="theme-card" data-theme="solarized-dark" onclick="selectTheme('solarized-dark')">
|
||||
<div class="theme-card-header">
|
||||
<span class="theme-card-icon">☀️</span>
|
||||
<span class="theme-card-name">Solarized Dark</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
</div>
|
||||
<p class="theme-description">Palette scientifiquement optimisée pour réduire la fatigue oculaire</p>
|
||||
</div>
|
||||
|
||||
<!-- Nord -->
|
||||
<div class="theme-card" data-theme="nord" onclick="selectTheme('nord')">
|
||||
<div class="theme-card-header">
|
||||
<span class="theme-card-icon">❄️</span>
|
||||
<span class="theme-card-name">Nord</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
</div>
|
||||
<p class="theme-description">Palette arctique apaisante avec des tons bleus froids</p>
|
||||
</div>
|
||||
|
||||
<!-- Catppuccin -->
|
||||
<div class="theme-card" data-theme="catppuccin" onclick="selectTheme('catppuccin')">
|
||||
<div class="theme-card-header">
|
||||
<span class="theme-card-icon">🌸</span>
|
||||
<span class="theme-card-name">Catppuccin</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
</div>
|
||||
<p class="theme-description">Thème pastel doux et chaleureux avec des accents roses et bleus</p>
|
||||
</div>
|
||||
|
||||
<!-- Everforest -->
|
||||
<div class="theme-card" data-theme="everforest" onclick="selectTheme('everforest')">
|
||||
<div class="theme-card-header">
|
||||
<span class="theme-card-icon">🌲</span>
|
||||
<span class="theme-card-name">Everforest</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
</div>
|
||||
<p class="theme-description">Palette naturelle inspirée de la forêt avec des tons verts et beiges</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section Polices -->
|
||||
<div id="fonts-section" class="settings-section" style="display: none;">
|
||||
<div class="font-grid">
|
||||
<!-- Fira Code -->
|
||||
<div class="font-card" data-font="fira-code" onclick="selectFont('fira-code')">
|
||||
<div class="font-card-header">
|
||||
<span class="font-card-icon">💻</span>
|
||||
<span class="font-card-name">Fira Code</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Fira Code', monospace;">
|
||||
AaBbCc 123 != ==
|
||||
</div>
|
||||
<p class="font-description">Police pour code avec ligatures</p>
|
||||
</div>
|
||||
|
||||
<!-- Sans-serif -->
|
||||
<div class="font-card" data-font="sans-serif" onclick="selectFont('sans-serif')">
|
||||
<div class="font-card-header">
|
||||
<span class="font-card-icon">📝</span>
|
||||
<span class="font-card-name">Sans-serif</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: -apple-system, sans-serif;">
|
||||
AaBbCc 123
|
||||
</div>
|
||||
<p class="font-description">Police système par défaut</p>
|
||||
</div>
|
||||
|
||||
<!-- Inter -->
|
||||
<div class="font-card" data-font="inter" onclick="selectFont('inter')">
|
||||
<div class="font-card-header">
|
||||
<span class="font-card-icon">✨</span>
|
||||
<span class="font-card-name">Inter</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Inter', sans-serif;">
|
||||
AaBbCc 123
|
||||
</div>
|
||||
<p class="font-description">Moderne et optimisée pour écrans</p>
|
||||
</div>
|
||||
|
||||
<!-- Poppins -->
|
||||
<div class="font-card" data-font="poppins" onclick="selectFont('poppins')">
|
||||
<div class="font-card-header">
|
||||
<span class="font-card-icon">🎯</span>
|
||||
<span class="font-card-name">Poppins</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Poppins', sans-serif;">
|
||||
AaBbCc 123
|
||||
</div>
|
||||
<p class="font-description">Géométrique et élégante</p>
|
||||
</div>
|
||||
|
||||
<!-- Public Sans -->
|
||||
<div class="font-card" data-font="public-sans" onclick="selectFont('public-sans')">
|
||||
<div class="font-card-header">
|
||||
<span class="font-card-icon">🏛️</span>
|
||||
<span class="font-card-name">Public Sans</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Public Sans', sans-serif;">
|
||||
AaBbCc 123
|
||||
</div>
|
||||
<p class="font-description">Claire et professionnelle</p>
|
||||
</div>
|
||||
|
||||
<!-- JetBrains Mono -->
|
||||
<div class="font-card active" data-font="jetbrains-mono" onclick="selectFont('jetbrains-mono')">
|
||||
<div class="font-card-header">
|
||||
<span class="font-card-icon">⚡</span>
|
||||
<span class="font-card-name">JetBrains Mono</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'JetBrains Mono', monospace;">
|
||||
AaBbCc 123 != ==
|
||||
</div>
|
||||
<p class="font-description">Développée pour les IDE</p>
|
||||
</div>
|
||||
|
||||
<!-- Cascadia Code -->
|
||||
<div class="font-card" data-font="cascadia-code" onclick="selectFont('cascadia-code')">
|
||||
<div class="font-card-header">
|
||||
<span class="font-card-icon">🪟</span>
|
||||
<span class="font-card-name">Cascadia Code</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Cascadia Code', monospace;">
|
||||
AaBbCc 123 != ==
|
||||
</div>
|
||||
<p class="font-description">Police Microsoft avec ligatures</p>
|
||||
</div>
|
||||
|
||||
<!-- Source Code Pro -->
|
||||
<div class="font-card" data-font="source-code-pro" onclick="selectFont('source-code-pro')">
|
||||
<div class="font-card-header">
|
||||
<span class="font-card-icon">🔧</span>
|
||||
<span class="font-card-name">Source Code Pro</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Source Code Pro', monospace;">
|
||||
AaBbCc 123 != ==
|
||||
</div>
|
||||
<p class="font-description">Classique Adobe pour le code</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sélecteur de taille de police -->
|
||||
<div style="margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border-primary);">
|
||||
<h3 style="font-size: 1rem; color: var(--text-primary); margin-bottom: var(--spacing-md);">📏 Taille de police</h3>
|
||||
<div class="font-size-selector">
|
||||
<button class="font-size-option" data-size="small" onclick="selectFontSize('small')">
|
||||
<span class="size-label">Petite</span>
|
||||
<span class="size-preview" style="font-size: 14px;">Aa</span>
|
||||
</button>
|
||||
<button class="font-size-option active" data-size="medium" onclick="selectFontSize('medium')">
|
||||
<span class="size-label">Moyenne</span>
|
||||
<span class="size-preview" style="font-size: 16px;">Aa</span>
|
||||
</button>
|
||||
<button class="font-size-option" data-size="large" onclick="selectFontSize('large')">
|
||||
<span class="size-label">Grande</span>
|
||||
<span class="size-preview" style="font-size: 18px;">Aa</span>
|
||||
</button>
|
||||
<button class="font-size-option" data-size="x-large" onclick="selectFontSize('x-large')">
|
||||
<span class="size-label">Très grande</span>
|
||||
<span class="size-preview" style="font-size: 20px;">Aa</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section Éditeur -->
|
||||
<div id="editor-section" class="settings-section" style="display: none;">
|
||||
<h3 style="font-size: 1.1rem; color: var(--text-primary); margin-bottom: var(--spacing-lg);">⌨️ Mode d'édition</h3>
|
||||
|
||||
<!-- Toggle Mode Vim -->
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-lg); background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-primary);">
|
||||
<div style="flex: 1;">
|
||||
<div style="font-weight: 500; color: var(--text-primary); margin-bottom: 0.5rem; font-size: 1rem;">
|
||||
Mode Vim
|
||||
</div>
|
||||
<div style="font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5;">
|
||||
Active les raccourcis clavier Vim dans l'éditeur CodeMirror<br>
|
||||
<span style="font-size: 0.85rem; color: var(--text-muted);">
|
||||
Utilisez hjkl pour la navigation, modes insert/normal/visual, etc.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<label class="toggle-switch" style="margin-left: var(--spacing-lg);">
|
||||
<input type="checkbox" id="vim-mode-toggle" onchange="toggleVimMode()">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: var(--spacing-md); padding: var(--spacing-md); background: var(--bg-tertiary); border-radius: var(--radius-sm); border-left: 3px solid var(--accent-primary);">
|
||||
<p style="font-size: 0.85rem; color: var(--text-muted); margin: 0;">
|
||||
💡 <strong>Astuce :</strong> Le mode Vim sera appliqué immédiatement à l'éditeur actuel. Si vous ouvrez une nouvelle note, le mode restera activé.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="theme-modal-footer">
|
||||
<button type="button" class="secondary" onclick="closeThemeModal()">Fermer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-layout">
|
||||
<aside>
|
||||
<aside id="sidebar">
|
||||
<button class="sidebar-close-btn" onclick="toggleSidebar()" title="Fermer le menu">
|
||||
✕
|
||||
</button>
|
||||
<section>
|
||||
<h2>🔍 Recherche</h2>
|
||||
<h2 class="sidebar-section-title">🔍 Recherche</h2>
|
||||
<div id="search-results">
|
||||
<!-- Les résultats de la recherche apparaîtront ici -->
|
||||
</div>
|
||||
@ -116,15 +477,86 @@
|
||||
<hr>
|
||||
|
||||
<section>
|
||||
<h2>📚 Notes</h2>
|
||||
<button onclick="showNewFolderModal()" class="folder-create-btn">
|
||||
📁 Nouveau dossier
|
||||
</button>
|
||||
<h2 class="sidebar-section-title">⭐ Favoris</h2>
|
||||
<div id="favorites-list"
|
||||
hx-get="/api/favorites"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<!-- Les favoris apparaîtront ici -->
|
||||
<p style="color: var(--text-muted); font-size: 0.85rem; text-align: center;">Chargement...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section>
|
||||
<h2 class="sidebar-section-title">📅 Daily Notes</h2>
|
||||
<div id="daily-calendar-container"
|
||||
hx-get="/api/daily/calendar/{{.Now.Format "2006/01"}}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<!-- Le calendrier apparaîtra ici -->
|
||||
<p style="color: var(--text-muted); font-size: 0.85rem; text-align: center;">Chargement...</p>
|
||||
</div>
|
||||
|
||||
<h3 style="font-size: 0.8rem; margin-top: var(--spacing-md); margin-bottom: var(--spacing-sm); color: var(--text-secondary);">Récentes</h3>
|
||||
<div id="daily-recent-container"
|
||||
hx-get="/api/daily/recent"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<!-- Les notes récentes apparaîtront ici -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-sm);">
|
||||
<h2 class="sidebar-section-title" style="margin: 0;">📚 Notes</h2>
|
||||
<button id="toggle-selection-mode" onclick="toggleSelectionMode()" class="icon-button" title="Mode sélection">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="9 11 12 14 22 4"></polyline>
|
||||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="file-tree" hx-get="/api/tree" hx-trigger="load" hx-swap="innerHTML">
|
||||
<!-- L'arborescence des fichiers apparaîtra ici -->
|
||||
<p style="color: var(--text-muted); font-size: 0.85rem;">Chargement...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bouton Nouveau dossier avant les paramètres -->
|
||||
<button onclick="showNewFolderModal()" class="folder-create-btn sidebar-action-btn" title="Créer un nouveau dossier (Ctrl/Cmd+Shift+F)">
|
||||
📁 Nouveau dossier
|
||||
</button>
|
||||
|
||||
<!-- Boutons du bas de la sidebar -->
|
||||
<div style="display: flex; gap: 0.5rem; align-items: stretch;">
|
||||
<!-- Bouton Paramètres (thèmes) -->
|
||||
<button id="theme-settings-btn" class="sidebar-action-btn" onclick="openThemeModal()" title="Ouvrir les paramètres (Ctrl/Cmd+,)" style="flex: 1; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; font-size: 0.85rem;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<path d="M12 1v6m0 6v6m-6-6h6m6 0h-6m-5.3-5.3l4.2 4.2m4.2 4.2l4.2 4.2m0-12.6l-4.2 4.2m-4.2 4.2L2.7 19.3"></path>
|
||||
</svg>
|
||||
<span>Paramètres</span>
|
||||
</button>
|
||||
|
||||
<!-- Bouton À propos -->
|
||||
<button
|
||||
class="sidebar-action-btn"
|
||||
title="À propos de Project Notes"
|
||||
hx-get="/api/about"
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML"
|
||||
style="display: flex; align-items: center; justify-content: center; padding: 0.6rem; min-width: auto; opacity: 0.7;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<main id="main-content">
|
||||
<div id="editor-container"
|
||||
@ -142,6 +574,58 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Fonction pour changer d'onglet dans les paramètres
|
||||
window.switchSettingsTab = function(tabName) {
|
||||
// Gérer les onglets
|
||||
document.querySelectorAll('.settings-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
|
||||
// Gérer les sections
|
||||
document.querySelectorAll('.settings-section').forEach(section => {
|
||||
section.style.display = 'none';
|
||||
});
|
||||
|
||||
if (tabName === 'themes') {
|
||||
document.getElementById('themes-section').style.display = 'block';
|
||||
} else if (tabName === 'fonts') {
|
||||
document.getElementById('fonts-section').style.display = 'block';
|
||||
|
||||
// Marquer la police active
|
||||
if (window.fontManager) {
|
||||
const currentFont = window.fontManager.getCurrentFont();
|
||||
document.querySelectorAll('.font-card').forEach(card => {
|
||||
card.classList.remove('active');
|
||||
});
|
||||
const activeCard = document.querySelector(`.font-card[data-font="${currentFont}"]`);
|
||||
if (activeCard) {
|
||||
activeCard.classList.add('active');
|
||||
}
|
||||
|
||||
// Marquer la taille active
|
||||
const currentSize = window.fontManager.getCurrentSize();
|
||||
document.querySelectorAll('.font-size-option').forEach(option => {
|
||||
option.classList.remove('active');
|
||||
});
|
||||
const activeSize = document.querySelector(`.font-size-option[data-size="${currentSize}"]`);
|
||||
if (activeSize) {
|
||||
activeSize.classList.add('active');
|
||||
}
|
||||
}
|
||||
} else if (tabName === 'editor') {
|
||||
document.getElementById('editor-section').style.display = 'block';
|
||||
|
||||
// Initialiser l'état du toggle Vim
|
||||
if (window.vimModeManager) {
|
||||
const checkbox = document.getElementById('vim-mode-toggle');
|
||||
if (checkbox) {
|
||||
checkbox.checked = window.vimModeManager.isEnabled();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Fonction pour gérer l'accordéon des dossiers dans la page d'accueil
|
||||
window.toggleFolder = function(folderId) {
|
||||
const content = document.getElementById('folder-' + folderId);
|
||||
|
||||
Reference in New Issue
Block a user