670 lines
35 KiB
HTML
670 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<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" />
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
<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 (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>
|
|
<input
|
|
type="search"
|
|
name="query"
|
|
placeholder="Rechercher une note (mot-clé, tag:projet, title:... )"
|
|
hx-get="/api/search"
|
|
hx-trigger="keyup changed delay:500ms, search"
|
|
hx-target="#search-results"
|
|
hx-indicator="#search-spinner"
|
|
style="flex-grow: 1; max-width: 350px;"
|
|
/>
|
|
<button
|
|
hx-get="/api/home"
|
|
hx-target="#editor-container"
|
|
hx-swap="innerHTML"
|
|
style="white-space: nowrap;"
|
|
title="Retour à la page d'accueil (Ctrl/Cmd+H)">
|
|
🏠 Accueil
|
|
</button>
|
|
<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">
|
|
<progress></progress>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Modal pour nouvelle note -->
|
|
<div id="new-note-modal" style="display: none;">
|
|
<div class="modal-overlay" onclick="hideNewNoteModal()"></div>
|
|
<div class="modal-content">
|
|
<h2>📝 Nouvelle note</h2>
|
|
<form onsubmit="handleNewNote(event)">
|
|
<label for="note-name">Nom de la note</label>
|
|
<input
|
|
type="text"
|
|
id="note-name"
|
|
placeholder="ma-note.md"
|
|
autocomplete="off"
|
|
autofocus
|
|
required
|
|
/>
|
|
<p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem;">
|
|
💡 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>
|
|
<button type="button" class="secondary" onclick="hideNewNoteModal()">Annuler</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal pour nouveau dossier -->
|
|
<div id="new-folder-modal" style="display: none;">
|
|
<div class="modal-overlay" onclick="hideNewFolderModal()"></div>
|
|
<div class="modal-content">
|
|
<h2>📁 Nouveau dossier</h2>
|
|
<form onsubmit="handleNewFolder(event)">
|
|
<label for="folder-name">Nom du dossier</label>
|
|
<input
|
|
type="text"
|
|
id="folder-name"
|
|
placeholder="mon-dossier"
|
|
autocomplete="off"
|
|
autofocus
|
|
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
|
|
</p>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
|
|
<button type="submit">Créer</button>
|
|
<button type="button" class="secondary" onclick="hideNewFolderModal()">Annuler</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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 id="sidebar">
|
|
<button class="sidebar-close-btn" onclick="toggleSidebar()" title="Fermer le menu">
|
|
✕
|
|
</button>
|
|
<section>
|
|
<h2 class="sidebar-section-title">🔍 Recherche</h2>
|
|
<div id="search-results">
|
|
<!-- Les résultats de la recherche apparaîtront ici -->
|
|
</div>
|
|
</section>
|
|
|
|
<hr>
|
|
|
|
<section>
|
|
<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"
|
|
hx-get="/api/home"
|
|
hx-trigger="load"
|
|
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>
|
|
<p style="font-size: 1.1rem; margin: 0;">Chargement...</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</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);
|
|
const icon = document.getElementById('icon-' + folderId);
|
|
|
|
if (content && icon) {
|
|
if (content.style.display === 'none') {
|
|
content.style.display = 'block';
|
|
icon.textContent = '📁';
|
|
localStorage.setItem('folder-' + folderId, 'open');
|
|
} else {
|
|
content.style.display = 'none';
|
|
icon.textContent = '📂';
|
|
localStorage.setItem('folder-' + folderId, 'closed');
|
|
}
|
|
}
|
|
};
|
|
|
|
// Restaurer l'état des dossiers depuis localStorage
|
|
window.restoreFolderStates = function() {
|
|
document.querySelectorAll('.folder-content').forEach(function(content) {
|
|
const folderId = content.id.replace('folder-', '');
|
|
const state = localStorage.getItem('folder-' + folderId);
|
|
const icon = document.getElementById('icon-' + folderId);
|
|
|
|
if (state === 'closed' && icon) {
|
|
content.style.display = 'none';
|
|
icon.textContent = '📂';
|
|
}
|
|
});
|
|
};
|
|
|
|
// Restaurer les états des dossiers après chargement de la page d'accueil
|
|
document.body.addEventListener('htmx:afterSwap', function(event) {
|
|
if (event.detail.target.id === 'editor-container') {
|
|
// Attendre un peu que le DOM soit prêt
|
|
setTimeout(restoreFolderStates, 100);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |