Change d'interface plus légére, modification side barre
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
<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 PersoNotes
|
||||
<i data-lucide="file-text" class="icon-md"></i> About PersoNotes
|
||||
</h1>
|
||||
<p style="font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem;">
|
||||
Un gestionnaire de notes Markdown moderne et puissant
|
||||
@ -10,23 +10,23 @@
|
||||
|
||||
<div style="margin-top: 3rem;">
|
||||
<h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
|
||||
🚀 Démarrage rapide
|
||||
<i data-lucide="rocket" class="icon-sm"></i> 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>
|
||||
<h3 style="color: #89ddff; margin-bottom: 0.5rem;"><i data-lucide="folder-open" class="icon-sm"></i> 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>
|
||||
<h3 style="color: #c3e88d; margin-bottom: 0.5rem;"><i data-lucide="search" class="icon-sm"></i> 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>
|
||||
<h3 style="color: #ffcb6b; margin-bottom: 0.5rem;"><i data-lucide="zap" class="icon-sm"></i> 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>
|
||||
@ -36,7 +36,7 @@
|
||||
|
||||
<div style="margin-top: 3rem;">
|
||||
<h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
|
||||
✨ Fonctionnalités
|
||||
<i data-lucide="sparkles" class="icon-sm"></i> 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);">
|
||||
@ -62,13 +62,13 @@
|
||||
|
||||
<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
|
||||
<i data-lucide="lightbulb" class="icon-sm"></i> 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
|
||||
<i data-lucide="keyboard" class="icon-sm"></i> 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;">
|
||||
@ -113,7 +113,7 @@
|
||||
</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
|
||||
<i data-lucide="lightbulb" class="icon-sm"></i> Sur Mac, utilisez Cmd au lieu de Ctrl
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -57,7 +57,7 @@
|
||||
data-i18n="calendar.today"
|
||||
title="Ouvrir la note du jour (Ctrl/Cmd+D)"
|
||||
style="flex: 1; padding: 0.5rem; font-size: 0.85rem;">
|
||||
📅 Aujourd'hui
|
||||
<i data-lucide="calendar-check" class="icon-sm"></i> Aujourd'hui
|
||||
</button>
|
||||
<button class="daily-today-btn"
|
||||
hx-get="/api/daily/calendar/{{.CurrentMonth}}"
|
||||
@ -66,7 +66,7 @@
|
||||
data-i18n="calendar.thisMonth"
|
||||
title="Revenir au mois actuel"
|
||||
style="flex: 1; padding: 0.5rem; font-size: 0.85rem;">
|
||||
🗓️ Ce mois
|
||||
<i data-lucide="calendar-days" class="icon-sm"></i> Ce mois
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</label>
|
||||
{{if .IsHome}}
|
||||
<button type="button" class="toggle-preview-btn" hx-get="/api/home" hx-target="#editor-container" hx-swap="innerHTML" hx-push-url="true" data-i18n="editor.refresh" title="Actualiser la page d'accueil">
|
||||
🔄 Actualiser
|
||||
<i data-lucide="refresh-cw" class="icon-sm"></i> Actualiser
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" id="toggle-preview-btn" class="toggle-preview-btn" onclick="togglePreview()" data-i18n-title="editor.togglePreview" title="Mode: Éditeur + Preview (cliquer pour Éditeur seul)">
|
||||
@ -36,12 +36,12 @@
|
||||
</div>
|
||||
{{if .Backlinks}}
|
||||
<div id="backlinks-section" class="backlinks-section">
|
||||
<h3 class="backlinks-title">🔗 Référencé par</h3>
|
||||
<h3 class="backlinks-title"><i data-lucide="link" class="icon-sm"></i> Référencé par</h3>
|
||||
<ul class="backlinks-list">
|
||||
{{range .Backlinks}}
|
||||
<li class="backlink-item">
|
||||
<a href="#" onclick="return false;" hx-get="/api/notes/{{.Path}}" hx-target="#editor-container" hx-swap="innerHTML" hx-push-url="true" class="backlink-link">
|
||||
📄 {{.Title}}
|
||||
<i data-lucide="file-text" class="icon-sm"></i> {{.Title}}
|
||||
</a>
|
||||
</li>
|
||||
{{end}}
|
||||
@ -54,6 +54,17 @@
|
||||
<div class="editor-actions">
|
||||
<div class="editor-actions-primary">
|
||||
<button type="submit" data-i18n="editor.save">Enregistrer</button>
|
||||
<button
|
||||
id="toggle-public-btn"
|
||||
type="button"
|
||||
class="secondary {{if .IsPublic}}public-active{{end}}"
|
||||
data-path="{{.Filename}}"
|
||||
data-is-public="{{.IsPublic}}"
|
||||
data-i18n-title="{{if .IsPublic}}public.titlePublic{{else}}public.titlePrivate{{end}}"
|
||||
title="{{if .IsPublic}}This note is public - Click to make it private{{else}}This note is private - Click to make it public{{end}}"
|
||||
>
|
||||
{{if .IsPublic}}<span data-i18n="public.buttonPublic"><i data-lucide="globe" class="icon-sm"></i> Public</span>{{else}}<span data-i18n="public.buttonPrivate"><i data-lucide="lock" class="icon-sm"></i> Private</span>{{end}}
|
||||
</button>
|
||||
<button
|
||||
hx-delete="/api/notes/{{.Filename}}"
|
||||
hx-confirm="Êtes-vous sûr de vouloir supprimer cette note ({{.Filename}}) ?"
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
<div class="favorite-item" data-path="{{.Path}}">
|
||||
{{if .IsDir}}
|
||||
<div class="favorite-folder" data-path="{{.Path}}">
|
||||
<span class="favorite-icon">⭐</span>
|
||||
<span class="favorite-icon"><i data-lucide="star" class="icon-sm"></i></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>
|
||||
<button class="favorite-remove"
|
||||
onclick="removeFavorite('{{.Path}}')"
|
||||
title="Retirer des favoris"><i data-lucide="x" class="icon-xs"></i></button>
|
||||
</div>
|
||||
{{else}}
|
||||
<a href="#"
|
||||
@ -18,12 +18,12 @@
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML"
|
||||
hx-push-url="true">
|
||||
<span class="favorite-icon">⭐</span>
|
||||
<span class="favorite-icon"><i data-lucide="star" class="icon-sm"></i></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>
|
||||
<button class="favorite-remove"
|
||||
onclick="event.preventDefault(); event.stopPropagation(); removeFavorite('{{.Path}}')"
|
||||
title="Retirer des favoris"><i data-lucide="x" class="icon-xs"></i></button>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
@ -32,7 +32,7 @@
|
||||
<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.
|
||||
Cliquez sur <i data-lucide="star" class="icon-sm" style="display: inline; width: 14px; height: 14px; vertical-align: middle;"></i> à côté d'une note ou d'un dossier pour l'ajouter.
|
||||
</span>
|
||||
</p>
|
||||
{{end}}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!-- Indicateur de racine (maintenant cliquable et rétractable) -->
|
||||
<div class="sidebar-section-header" data-section="notes" data-path="" data-is-dir="true" onclick="toggleSidebarSection('notes', event)" style="cursor: pointer;">
|
||||
<span class="section-toggle expanded">▶</span>
|
||||
<span class="folder-icon">🏠</span>
|
||||
<span class="folder-icon"><i data-lucide="home" class="icon-sm"></i></span>
|
||||
<span class="folder-name">Racine</span>
|
||||
<span class="root-hint">(notes/)</span>
|
||||
</div>
|
||||
@ -28,7 +28,7 @@
|
||||
<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-icon"><i data-lucide="folder" class="icon-sm"></i></span>
|
||||
<span class="folder-name">{{.Name}}</span>
|
||||
</div>
|
||||
<div class="folder-children" style="display: none;">
|
||||
@ -49,7 +49,7 @@
|
||||
hx-swap="innerHTML"
|
||||
hx-push-url="true"
|
||||
draggable="true">
|
||||
📄 {{.Name}}
|
||||
<i data-lucide="file-text" class="icon-sm"></i> {{.Name}}
|
||||
</a>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
@ -16,13 +16,15 @@
|
||||
<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>
|
||||
<!-- Lucide Icons - Professional SVG icons -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<script src="/static/sidebar-resize.js"></script>
|
||||
<script type="module" src="/static/dist/personotes-frontend.es.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
<i data-lucide="menu" style="width: 24px; height: 24px;"></i>
|
||||
</button>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<img src="/static/images/logo.svg" alt="Logo" style="width: 40px; height: 40px;">
|
||||
@ -46,10 +48,10 @@
|
||||
style="white-space: nowrap;"
|
||||
data-i18n="menu.home"
|
||||
title="Retour à la page d'accueil (Ctrl/Cmd+H)">
|
||||
🏠 Accueil
|
||||
<i data-lucide="home" class="icon-sm"></i> Accueil
|
||||
</button>
|
||||
<button onclick="showNewNoteModal()" style="white-space: nowrap;" data-i18n="menu.newNote" title="Créer une nouvelle note (Ctrl/Cmd+N)">
|
||||
✨ Nouvelle note
|
||||
<i data-lucide="file-plus" class="icon-sm"></i> Nouvelle note
|
||||
</button>
|
||||
</header>
|
||||
|
||||
@ -57,7 +59,7 @@
|
||||
<div id="new-note-modal" style="display: none;">
|
||||
<div class="modal-overlay" onclick="hideNewNoteModal()"></div>
|
||||
<div class="modal-content">
|
||||
<h2>📝 Nouvelle note</h2>
|
||||
<h2><i data-lucide="file-text" class="icon-md"></i> Nouvelle note</h2>
|
||||
<form onsubmit="handleNewNote(event)">
|
||||
<label for="note-name">Nom de la note</label>
|
||||
<input
|
||||
@ -69,7 +71,7 @@
|
||||
required
|
||||
/>
|
||||
<p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem;">
|
||||
💡 Si la note existe déjà, elle sera ouverte.
|
||||
<i data-lucide="lightbulb" class="icon-sm"></i> Si la note existe déjà, elle sera ouverte.
|
||||
</p>
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
|
||||
<button type="submit">Créer / Ouvrir</button>
|
||||
@ -83,7 +85,7 @@
|
||||
<div id="new-folder-modal" style="display: none;">
|
||||
<div class="modal-overlay" onclick="hideNewFolderModal()"></div>
|
||||
<div class="modal-content">
|
||||
<h2>📁 Nouveau dossier</h2>
|
||||
<h2><i data-lucide="folder-plus" class="icon-md"></i> Nouveau dossier</h2>
|
||||
<form onsubmit="handleNewFolder(event)">
|
||||
<label for="folder-name">Nom du dossier</label>
|
||||
<input
|
||||
@ -95,7 +97,7 @@
|
||||
required
|
||||
/>
|
||||
<p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem;">
|
||||
💡 Vous pouvez créer des sous-dossiers avec "/", ex: projets/backend
|
||||
<i data-lucide="lightbulb" class="icon-sm"></i> Vous pouvez créer des sous-dossiers avec "/", ex: projets/backend
|
||||
</p>
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
|
||||
<button type="submit">Créer</button>
|
||||
@ -114,10 +116,7 @@
|
||||
<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>
|
||||
<i data-lucide="trash-2" class="icon-sm"></i>
|
||||
Supprimer
|
||||
</button>
|
||||
<button onclick="cancelSelection()" class="secondary">
|
||||
@ -131,13 +130,13 @@
|
||||
<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>
|
||||
<h2 style="color: var(--error);"><i data-lucide="alert-triangle" class="icon-md"></i> 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.
|
||||
<i data-lucide="alert-triangle" class="icon-sm"></i> 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>
|
||||
@ -151,22 +150,22 @@
|
||||
<div class="theme-modal-overlay" onclick="closeThemeModal()"></div>
|
||||
<div class="theme-modal-content">
|
||||
<h2>
|
||||
⚙️ Paramètres d'apparence
|
||||
<i data-lucide="settings" class="icon-md"></i> Paramètres d'apparence
|
||||
</h2>
|
||||
|
||||
|
||||
<!-- Onglets -->
|
||||
<div class="settings-tabs">
|
||||
<button class="settings-tab active" onclick="switchSettingsTab('themes')">
|
||||
🎨 Thèmes
|
||||
<i data-lucide="palette" class="icon-sm"></i> Thèmes
|
||||
</button>
|
||||
<button class="settings-tab" onclick="switchSettingsTab('fonts')">
|
||||
🔤 Polices
|
||||
<i data-lucide="type" class="icon-sm"></i> Polices
|
||||
</button>
|
||||
<button class="settings-tab" onclick="switchSettingsTab('editor')">
|
||||
⌨️ Éditeur
|
||||
<i data-lucide="keyboard" class="icon-sm"></i> Éditeur
|
||||
</button>
|
||||
<button class="settings-tab" onclick="switchSettingsTab('other')">
|
||||
⚙️ Autre
|
||||
<i data-lucide="settings" class="icon-sm"></i> Autre
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -176,7 +175,7 @@
|
||||
<!-- 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-icon"><i data-lucide="moon" class="icon-sm"></i></span>
|
||||
<span class="theme-card-name">Material Dark</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
@ -191,7 +190,7 @@
|
||||
<!-- 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-icon"><i data-lucide="palette" class="icon-sm"></i></span>
|
||||
<span class="theme-card-name">Monokai Dark</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
@ -206,7 +205,7 @@
|
||||
<!-- 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-icon"><i data-lucide="moon-star" class="icon-sm"></i></span>
|
||||
<span class="theme-card-name">Dracula</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
@ -221,7 +220,7 @@
|
||||
<!-- 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-icon"><i data-lucide="zap" class="icon-sm"></i></span>
|
||||
<span class="theme-card-name">One Dark</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
@ -236,7 +235,7 @@
|
||||
<!-- 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-icon"><i data-lucide="sun" class="icon-sm"></i></span>
|
||||
<span class="theme-card-name">Solarized Dark</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
@ -251,7 +250,7 @@
|
||||
<!-- 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-icon"><i data-lucide="snowflake" class="icon-sm"></i></span>
|
||||
<span class="theme-card-name">Nord</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
@ -266,7 +265,7 @@
|
||||
<!-- 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-icon"><i data-lucide="flower" class="icon-sm"></i></span>
|
||||
<span class="theme-card-name">Catppuccin</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
@ -281,7 +280,7 @@
|
||||
<!-- 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-icon"><i data-lucide="tree-deciduous" class="icon-sm"></i></span>
|
||||
<span class="theme-card-name">Everforest</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
@ -301,7 +300,7 @@
|
||||
<!-- 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-icon"><i data-lucide="code" class="icon-sm"></i></span>
|
||||
<span class="font-card-name">Fira Code</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Fira Code', monospace;">
|
||||
@ -313,7 +312,7 @@
|
||||
<!-- 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-icon"><i data-lucide="type" class="icon-sm"></i></span>
|
||||
<span class="font-card-name">Sans-serif</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: -apple-system, sans-serif;">
|
||||
@ -325,7 +324,7 @@
|
||||
<!-- 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-icon"><i data-lucide="sparkles" class="icon-sm"></i></span>
|
||||
<span class="font-card-name">Inter</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Inter', sans-serif;">
|
||||
@ -337,7 +336,7 @@
|
||||
<!-- 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-icon"><i data-lucide="target" class="icon-sm"></i></span>
|
||||
<span class="font-card-name">Poppins</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Poppins', sans-serif;">
|
||||
@ -349,7 +348,7 @@
|
||||
<!-- 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-icon"><i data-lucide="building" class="icon-sm"></i></span>
|
||||
<span class="font-card-name">Public Sans</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Public Sans', sans-serif;">
|
||||
@ -361,7 +360,7 @@
|
||||
<!-- 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-icon"><i data-lucide="zap" class="icon-sm"></i></span>
|
||||
<span class="font-card-name">JetBrains Mono</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'JetBrains Mono', monospace;">
|
||||
@ -373,7 +372,7 @@
|
||||
<!-- 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-icon"><i data-lucide="square" class="icon-sm"></i></span>
|
||||
<span class="font-card-name">Cascadia Code</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Cascadia Code', monospace;">
|
||||
@ -385,7 +384,7 @@
|
||||
<!-- 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-icon"><i data-lucide="wrench" class="icon-sm"></i></span>
|
||||
<span class="font-card-name">Source Code Pro</span>
|
||||
</div>
|
||||
<div class="font-preview" style="font-family: 'Source Code Pro', monospace;">
|
||||
@ -397,7 +396,7 @@
|
||||
|
||||
<!-- 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>
|
||||
<h3 style="font-size: 1rem; color: var(--text-primary); margin-bottom: var(--spacing-md);"><i data-lucide="ruler" class="icon-sm"></i> 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>
|
||||
@ -421,7 +420,7 @@
|
||||
|
||||
<!-- 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>
|
||||
<h3 style="font-size: 1.1rem; color: var(--text-primary); margin-bottom: var(--spacing-lg);"><i data-lucide="keyboard" class="icon-sm"></i> 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);">
|
||||
@ -444,21 +443,21 @@
|
||||
|
||||
<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é.
|
||||
<i data-lucide="lightbulb" class="icon-sm"></i> <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>
|
||||
|
||||
<!-- Section Autre (Langue) -->
|
||||
<div id="other-section" class="settings-section" style="display: none;">
|
||||
<h3 style="font-size: 1.1rem; color: var(--text-primary); margin-bottom: var(--spacing-lg);">🌍 Langue / Language</h3>
|
||||
<h3 style="font-size: 1.1rem; color: var(--text-primary); margin-bottom: var(--spacing-lg);"><i data-lucide="languages" class="icon-sm"></i> Langue / Language</h3>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: var(--spacing-md);">
|
||||
<label class="language-option" style="display: flex; align-items: center; padding: var(--spacing-lg); background: var(--bg-secondary); border-radius: var(--radius-md); border: 2px solid var(--border-primary); cursor: pointer; transition: all 0.2s ease;">
|
||||
<input type="radio" name="language" value="en" style="margin-right: var(--spacing-md); width: 20px; height: 20px; cursor: pointer;">
|
||||
<div style="flex: 1;">
|
||||
<div style="font-weight: 500; color: var(--text-primary); margin-bottom: 0.25rem; font-size: 1rem;">
|
||||
🇬🇧 English
|
||||
English
|
||||
</div>
|
||||
<div style="font-size: 0.85rem; color: var(--text-secondary);">
|
||||
English interface
|
||||
@ -470,7 +469,7 @@
|
||||
<input type="radio" name="language" value="fr" style="margin-right: var(--spacing-md); width: 20px; height: 20px; cursor: pointer;">
|
||||
<div style="flex: 1;">
|
||||
<div style="font-weight: 500; color: var(--text-primary); margin-bottom: 0.25rem; font-size: 1rem;">
|
||||
🇫🇷 Français
|
||||
Français
|
||||
</div>
|
||||
<div style="font-size: 0.85rem; color: var(--text-secondary);">
|
||||
Interface en français
|
||||
@ -489,10 +488,10 @@
|
||||
<div class="main-layout">
|
||||
<aside id="sidebar">
|
||||
<button class="sidebar-close-btn" onclick="toggleSidebar()" title="Fermer le menu">
|
||||
✕
|
||||
<i data-lucide="x" class="icon-md"></i>
|
||||
</button>
|
||||
<section>
|
||||
<h2 class="sidebar-section-title">🔍 Recherche</h2>
|
||||
<h2 class="sidebar-section-title"><i data-lucide="search" class="icon-sm"></i> Recherche</h2>
|
||||
<div id="search-results">
|
||||
<!-- Les résultats de la recherche apparaîtront ici -->
|
||||
</div>
|
||||
@ -503,7 +502,7 @@
|
||||
<section>
|
||||
<div class="sidebar-section-header" data-section="favorites" onclick="toggleSidebarSection('favorites', event)" style="cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0;">
|
||||
<span class="section-toggle expanded">▶</span>
|
||||
<h2 class="sidebar-section-title" data-i18n="sidebar.favorites" style="margin: 0; flex: 1;">⭐ Favoris</h2>
|
||||
<h2 class="sidebar-section-title" data-i18n="sidebar.favorites" style="margin: 0; flex: 1;"><i data-lucide="star" class="icon-sm"></i> Favoris</h2>
|
||||
</div>
|
||||
<div class="sidebar-section-content" id="favorites-content" style="display: block;">
|
||||
<div id="favorites-list"
|
||||
@ -521,7 +520,7 @@
|
||||
<section>
|
||||
<div class="sidebar-section-header" data-section="daily-notes" onclick="toggleSidebarSection('daily-notes', event)" style="cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0;">
|
||||
<span class="section-toggle expanded">▶</span>
|
||||
<h2 class="sidebar-section-title" data-i18n="sidebar.daily" style="margin: 0; flex: 1;">📅 Daily Notes</h2>
|
||||
<h2 class="sidebar-section-title" data-i18n="sidebar.daily" style="margin: 0; flex: 1;"><i data-lucide="calendar" class="icon-sm"></i> Daily Notes</h2>
|
||||
</div>
|
||||
<div class="sidebar-section-content" id="daily-notes-content" style="display: block;">
|
||||
<div id="daily-calendar-container"
|
||||
@ -546,12 +545,9 @@
|
||||
|
||||
<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>
|
||||
<h2 class="sidebar-section-title" style="margin: 0;"><i data-lucide="notebook" class="icon-sm"></i> 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>
|
||||
<i data-lucide="check-square" style="width: 18px; height: 18px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="file-tree" hx-get="/api/tree" hx-trigger="load once delay:250ms" hx-swap="innerHTML">
|
||||
@ -562,33 +558,26 @@
|
||||
|
||||
<!-- Bouton Nouveau dossier avant les paramètres -->
|
||||
<button onclick="showNewFolderModal()" class="folder-create-btn sidebar-action-btn" data-i18n="fileTree.newFolder" title="Créer un nouveau dossier (Ctrl/Cmd+Shift+F)">
|
||||
📁 Nouveau dossier
|
||||
<i data-lucide="folder-plus" class="icon-sm"></i> 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>
|
||||
<i data-lucide="settings" style="width: 16px; height: 16px;"></i>
|
||||
<span data-i18n="settings.title">Paramètres</span>
|
||||
</button>
|
||||
|
||||
<!-- Bouton À propos -->
|
||||
<button
|
||||
class="sidebar-action-btn"
|
||||
<button
|
||||
class="sidebar-action-btn"
|
||||
title="À propos de PersoNotes"
|
||||
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>
|
||||
<i data-lucide="info" style="width: 16px; height: 16px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
@ -598,9 +587,7 @@
|
||||
hx-trigger="load once"
|
||||
hx-swap="innerHTML">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50vh; text-align: center; color: var(--text-secondary);">
|
||||
<svg style="width: 64px; height: 64px; margin-bottom: 1rem; opacity: 0.5;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
<i data-lucide="file-text" style="width: 64px; height: 64px; margin-bottom: 1rem; opacity: 0.5;"></i>
|
||||
<p style="font-size: 1.1rem; margin: 0;">Chargement...</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -695,5 +682,33 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Lucide Icons Initialization & htmx Integration -->
|
||||
<script>
|
||||
// Initialize Lucide icons on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
|
||||
// Reinitialize Lucide icons after htmx swaps
|
||||
document.body.addEventListener('htmx:afterSwap', function(event) {
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons({
|
||||
nameAttr: 'data-lucide'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Reinitialize after out-of-band swaps (file-tree updates)
|
||||
document.body.addEventListener('htmx:oobAfterSwap', function(event) {
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons({
|
||||
nameAttr: 'data-lucide'
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -12,7 +12,7 @@
|
||||
hx-target="#editor-container"
|
||||
hx-swap="innerHTML"
|
||||
hx-push-url="true">
|
||||
<div class="search-result-icon">📄</div>
|
||||
<div class="search-result-icon"><i data-lucide="file-text" class="icon-md"></i></div>
|
||||
<div class="search-result-content">
|
||||
<div class="search-result-header">
|
||||
<span class="search-result-title">{{.Title}}</span>
|
||||
@ -40,14 +40,14 @@
|
||||
</ul>
|
||||
{{else}}
|
||||
<div class="search-no-results">
|
||||
<div class="search-no-results-icon">🔍</div>
|
||||
<div class="search-no-results-icon"><i data-lucide="search" class="icon-lg"></i></div>
|
||||
<p class="search-no-results-text">Aucun résultat pour « <strong>{{.Query}}</strong> »</p>
|
||||
<p class="search-no-results-hint">Essayez d'autres mots-clés ou utilisez les filtres</p>
|
||||
</div>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<div class="search-help">
|
||||
<p class="search-help-title">💡 Recherche avancée</p>
|
||||
<p class="search-help-title"><i data-lucide="lightbulb" class="icon-sm"></i> Recherche avancée</p>
|
||||
<p class="search-help-text">Saisissez des mots-clés pour rechercher dans vos notes</p>
|
||||
<div class="search-help-examples">
|
||||
<div class="search-help-example">
|
||||
|
||||
Reference in New Issue
Block a user