mirror of
https://gitlab.com/ArkHost/HelixNotes.git
synced 2026-09-19 17:37:29 +02:00
v1.0.0 - Initial release
This commit is contained in:
Yuri Karamian
+309
@@ -0,0 +1,309 @@
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import type {
|
||||
AppConfig,
|
||||
NoteContent,
|
||||
NoteEntry,
|
||||
NoteMeta,
|
||||
NotebookEntry,
|
||||
NoteTitleEntry,
|
||||
SearchResult,
|
||||
VaultState,
|
||||
VaultStats,
|
||||
ImportResult,
|
||||
BackupEntry,
|
||||
VersionEntry,
|
||||
} from "./types";
|
||||
|
||||
export async function openVault(path: string): Promise<void> {
|
||||
return invoke("open_vault", { path });
|
||||
}
|
||||
|
||||
export async function getAppConfig(): Promise<AppConfig> {
|
||||
return invoke("get_app_config");
|
||||
}
|
||||
|
||||
export async function setTheme(theme: string): Promise<void> {
|
||||
return invoke("set_theme", { theme });
|
||||
}
|
||||
|
||||
export async function setAccentColor(color: string): Promise<void> {
|
||||
return invoke("set_accent_color", { color });
|
||||
}
|
||||
|
||||
export async function setFontSize(size: number): Promise<void> {
|
||||
return invoke("set_font_size", { size });
|
||||
}
|
||||
|
||||
export async function setFontFamily(family: string): Promise<void> {
|
||||
return invoke("set_font_family", { family });
|
||||
}
|
||||
|
||||
export async function getNotebooks(): Promise<NotebookEntry[]> {
|
||||
return invoke("get_notebooks");
|
||||
}
|
||||
|
||||
export async function createNotebook(
|
||||
parentRelative: string | null,
|
||||
name: string,
|
||||
): Promise<NotebookEntry> {
|
||||
return invoke("create_notebook", { parentRelative, name });
|
||||
}
|
||||
|
||||
export async function renameNotebook(
|
||||
path: string,
|
||||
newName: string,
|
||||
): Promise<string> {
|
||||
return invoke("rename_notebook", { path, newName });
|
||||
}
|
||||
|
||||
export async function deleteNotebook(path: string): Promise<void> {
|
||||
return invoke("delete_notebook", { path });
|
||||
}
|
||||
|
||||
export async function getNotes(
|
||||
notebookPath: string | null,
|
||||
): Promise<NoteEntry[]> {
|
||||
return invoke("get_notes", { notebookPath });
|
||||
}
|
||||
|
||||
export async function readNote(path: string): Promise<NoteContent> {
|
||||
return invoke("read_note", { path });
|
||||
}
|
||||
|
||||
export async function saveNote(
|
||||
path: string,
|
||||
meta: NoteMeta,
|
||||
body: string,
|
||||
): Promise<void> {
|
||||
return invoke("save_note", { path, meta, body });
|
||||
}
|
||||
|
||||
export async function createNote(
|
||||
notebookRelative: string | null,
|
||||
title: string,
|
||||
): Promise<NoteEntry> {
|
||||
return invoke("create_note", { notebookRelative, title });
|
||||
}
|
||||
|
||||
export async function renameNote(
|
||||
path: string,
|
||||
newTitle: string,
|
||||
): Promise<string> {
|
||||
return invoke("rename_note", { path, newTitle });
|
||||
}
|
||||
|
||||
export async function deleteNote(path: string): Promise<void> {
|
||||
return invoke("delete_note", { path });
|
||||
}
|
||||
|
||||
export async function moveNote(
|
||||
notePath: string,
|
||||
destNotebook: string,
|
||||
): Promise<string> {
|
||||
return invoke("move_note", { notePath, destNotebook });
|
||||
}
|
||||
|
||||
export async function getAllTags(): Promise<[string, number][]> {
|
||||
return invoke("get_all_tags");
|
||||
}
|
||||
|
||||
export async function getAllNoteTitles(): Promise<NoteTitleEntry[]> {
|
||||
return invoke("get_all_note_titles");
|
||||
}
|
||||
|
||||
export async function searchNotes(
|
||||
query: string,
|
||||
limit?: number,
|
||||
): Promise<SearchResult[]> {
|
||||
return invoke("search_notes", { query, limit });
|
||||
}
|
||||
|
||||
export async function reindex(): Promise<void> {
|
||||
return invoke("reindex");
|
||||
}
|
||||
|
||||
export async function getTrash(): Promise<NoteEntry[]> {
|
||||
return invoke("get_trash");
|
||||
}
|
||||
|
||||
export async function restoreNote(
|
||||
trashPath: string,
|
||||
destNotebook: string | null,
|
||||
): Promise<string> {
|
||||
return invoke("restore_note", { trashPath, destNotebook });
|
||||
}
|
||||
|
||||
export async function permanentDelete(path: string): Promise<void> {
|
||||
return invoke("permanent_delete", { path });
|
||||
}
|
||||
|
||||
export async function emptyTrash(): Promise<void> {
|
||||
return invoke("empty_trash");
|
||||
}
|
||||
|
||||
export async function loadVaultState(): Promise<VaultState> {
|
||||
return invoke("load_vault_state");
|
||||
}
|
||||
|
||||
export async function saveVaultState(vaultState: VaultState): Promise<void> {
|
||||
return invoke("save_vault_state", { vaultState });
|
||||
}
|
||||
|
||||
export async function saveImage(name: string, data: number[]): Promise<string> {
|
||||
return invoke("save_image", { name, data });
|
||||
}
|
||||
|
||||
export async function saveAttachment(
|
||||
name: string,
|
||||
data: number[],
|
||||
): Promise<string> {
|
||||
return invoke("save_attachment", { name, data });
|
||||
}
|
||||
|
||||
export async function getNotebookIcons(): Promise<Record<string, string>> {
|
||||
return invoke("get_notebook_icons");
|
||||
}
|
||||
|
||||
export async function setNotebookIcon(
|
||||
notebookRelative: string,
|
||||
iconRelative: string | null,
|
||||
): Promise<void> {
|
||||
return invoke("set_notebook_icon", { notebookRelative, iconRelative });
|
||||
}
|
||||
|
||||
export async function setGeneralSettings(
|
||||
compactNotes: boolean,
|
||||
timeFormat: string,
|
||||
gpuAcceleration: boolean,
|
||||
autostart: boolean,
|
||||
pdfPreview: boolean,
|
||||
pdfHeight: number,
|
||||
titleMode: string,
|
||||
hideTitleInBody: boolean,
|
||||
defaultViewMode: boolean,
|
||||
showTrayIcon: boolean,
|
||||
enableWikiLinks: boolean,
|
||||
): Promise<void> {
|
||||
return invoke("set_general_settings", {
|
||||
compactNotes,
|
||||
timeFormat,
|
||||
gpuAcceleration,
|
||||
autostart,
|
||||
pdfPreview,
|
||||
pdfHeight,
|
||||
titleMode,
|
||||
hideTitleInBody,
|
||||
defaultViewMode,
|
||||
showTrayIcon,
|
||||
enableWikiLinks,
|
||||
});
|
||||
}
|
||||
|
||||
export async function getQuickAccess(): Promise<NoteEntry[]> {
|
||||
return invoke("get_quick_access");
|
||||
}
|
||||
|
||||
export async function addQuickAccess(noteRelative: string): Promise<void> {
|
||||
return invoke("add_quick_access", { noteRelative });
|
||||
}
|
||||
|
||||
export async function removeQuickAccess(noteRelative: string): Promise<void> {
|
||||
return invoke("remove_quick_access", { noteRelative });
|
||||
}
|
||||
|
||||
export async function getVaultStats(): Promise<VaultStats> {
|
||||
return invoke("get_vault_stats");
|
||||
}
|
||||
|
||||
export async function importObsidian(): Promise<void> {
|
||||
return invoke("import_obsidian");
|
||||
}
|
||||
|
||||
export async function openFile(path: string): Promise<void> {
|
||||
return invoke("open_file", { path });
|
||||
}
|
||||
|
||||
export async function copyFileTo(
|
||||
source: string,
|
||||
destination: string,
|
||||
): Promise<void> {
|
||||
return invoke("copy_file_to", { source, destination });
|
||||
}
|
||||
|
||||
// ── Backup ──
|
||||
|
||||
export async function createBackup(): Promise<void> {
|
||||
return invoke("create_backup");
|
||||
}
|
||||
|
||||
export async function listBackups(): Promise<BackupEntry[]> {
|
||||
return invoke("list_backups");
|
||||
}
|
||||
|
||||
export async function restoreBackup(backupPath: string): Promise<void> {
|
||||
return invoke("restore_backup", { backupPath });
|
||||
}
|
||||
|
||||
export async function deleteBackup(backupPath: string): Promise<void> {
|
||||
return invoke("delete_backup", { backupPath });
|
||||
}
|
||||
|
||||
export async function setBackupSettings(
|
||||
enabled: boolean,
|
||||
frequency: string,
|
||||
maxCount: number,
|
||||
location: string | null,
|
||||
includeAttachments: boolean,
|
||||
): Promise<void> {
|
||||
return invoke("set_backup_settings", {
|
||||
enabled,
|
||||
frequency,
|
||||
maxCount,
|
||||
location,
|
||||
includeAttachments,
|
||||
});
|
||||
}
|
||||
|
||||
// ── Version History ──
|
||||
|
||||
export async function getNoteVersions(noteId: string): Promise<VersionEntry[]> {
|
||||
return invoke("get_note_versions", { noteId });
|
||||
}
|
||||
|
||||
export async function getNoteVersionContent(
|
||||
noteId: string,
|
||||
timestamp: string,
|
||||
): Promise<string> {
|
||||
return invoke("get_note_version_content", { noteId, timestamp });
|
||||
}
|
||||
|
||||
export async function createVersion(
|
||||
path: string,
|
||||
noteId: string,
|
||||
): Promise<void> {
|
||||
return invoke("create_version", { path, noteId });
|
||||
}
|
||||
|
||||
// ── AI ──
|
||||
|
||||
export async function setAiSettings(
|
||||
provider: string | null,
|
||||
apiKey: string | null,
|
||||
model: string,
|
||||
writingStyle: string | null,
|
||||
): Promise<void> {
|
||||
return invoke("set_ai_settings", { provider, apiKey, model, writingStyle });
|
||||
}
|
||||
|
||||
export async function testAiConnection(): Promise<void> {
|
||||
return invoke("test_ai_connection");
|
||||
}
|
||||
|
||||
export async function aiAsk(
|
||||
action: string,
|
||||
text: string,
|
||||
customPrompt: string | null,
|
||||
requestId: string,
|
||||
): Promise<void> {
|
||||
return invoke("ai_ask", { action, text, customPrompt, requestId });
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,288 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
import Sidebar from './Sidebar.svelte';
|
||||
import NoteList from './NoteList.svelte';
|
||||
import Editor from './Editor.svelte';
|
||||
import SearchPanel from './SearchPanel.svelte';
|
||||
import CommandPalette from './CommandPalette.svelte';
|
||||
import SettingsPanel from './SettingsPanel.svelte';
|
||||
import InfoPanel from './InfoPanel.svelte';
|
||||
import TitleBar from './TitleBar.svelte';
|
||||
import ResizeHandle from './ResizeHandle.svelte';
|
||||
import { getCurrentWindow } from '@tauri-apps/api/window';
|
||||
import {
|
||||
sidebarWidth,
|
||||
notelistWidth,
|
||||
sidebarCollapsed,
|
||||
collapsedNotebooks,
|
||||
showSearch,
|
||||
showCommandPalette,
|
||||
theme,
|
||||
focusMode,
|
||||
activeNote
|
||||
} from '$lib/stores/app';
|
||||
|
||||
const appWindow = getCurrentWindow();
|
||||
import { loadVaultState, saveVaultState } from '$lib/api';
|
||||
import { debounce } from '$lib/utils/debounce';
|
||||
import type { VaultState, FileEvent } from '$lib/types';
|
||||
|
||||
let sidebar: Sidebar;
|
||||
let noteList: NoteList;
|
||||
let editor: Editor;
|
||||
let unlistenFileChange: (() => void) | null = null;
|
||||
|
||||
const persistState = debounce(async () => {
|
||||
const state: VaultState = {
|
||||
last_open_note: null,
|
||||
sidebar_width: $sidebarWidth,
|
||||
notelist_width: $notelistWidth,
|
||||
sidebar_collapsed: $sidebarCollapsed,
|
||||
collapsed_notebooks: $collapsedNotebooks
|
||||
};
|
||||
try {
|
||||
await saveVaultState(state);
|
||||
} catch (_) {}
|
||||
}, 1000);
|
||||
|
||||
function handleSidebarResize(delta: number) {
|
||||
$sidebarWidth = Math.max(160, Math.min(400, $sidebarWidth + delta));
|
||||
persistState();
|
||||
}
|
||||
|
||||
function handleNotelistResize(delta: number) {
|
||||
$notelistWidth = Math.max(200, Math.min(500, $notelistWidth + delta));
|
||||
persistState();
|
||||
}
|
||||
|
||||
function handleNoteSelected(path: string, content: string) {
|
||||
editor?.loadNote(path, content);
|
||||
}
|
||||
|
||||
function handleViewChanged() {
|
||||
noteList?.refresh(true);
|
||||
}
|
||||
|
||||
async function createAndFocusNote() {
|
||||
await noteList?.handleCreateNote();
|
||||
editor?.focusTitle();
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.ctrlKey && !e.shiftKey && e.key === 'n') {
|
||||
e.preventDefault();
|
||||
createAndFocusNote();
|
||||
}
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'N') {
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.ctrlKey && e.key === 'f') {
|
||||
e.preventDefault();
|
||||
$showSearch = true;
|
||||
}
|
||||
if (e.ctrlKey && e.key === 'p') {
|
||||
e.preventDefault();
|
||||
$showCommandPalette = true;
|
||||
}
|
||||
if (e.ctrlKey && e.key === 's') {
|
||||
e.preventDefault();
|
||||
editor?.forceSave();
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
if ($focusMode) $focusMode = false;
|
||||
else if ($showSearch) $showSearch = false;
|
||||
else if ($showCommandPalette) $showCommandPalette = false;
|
||||
}
|
||||
}
|
||||
|
||||
function applyTheme(t: string) {
|
||||
const root = document.documentElement;
|
||||
root.classList.remove('dark');
|
||||
if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('dark');
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
applyTheme($theme);
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
$collapsedNotebooks;
|
||||
persistState();
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const state = await loadVaultState();
|
||||
$sidebarWidth = state.sidebar_width;
|
||||
$notelistWidth = state.notelist_width;
|
||||
$sidebarCollapsed = state.sidebar_collapsed;
|
||||
$collapsedNotebooks = state.collapsed_notebooks ?? [];
|
||||
} catch (_) {}
|
||||
|
||||
applyTheme($theme);
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
if ($theme === 'system') applyTheme('system');
|
||||
});
|
||||
|
||||
await sidebar?.refresh();
|
||||
await noteList?.refresh();
|
||||
|
||||
unlistenFileChange = await listen<FileEvent>('file-changed', async () => {
|
||||
await sidebar?.refresh();
|
||||
await noteList?.refresh(true);
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
unlistenFileChange?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} />
|
||||
|
||||
<div class="app-shell">
|
||||
{#if $focusMode}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="focus-topbar" onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button')) appWindow.startDragging(); }}>
|
||||
<span class="focus-title">{$activeNote?.meta.title || 'Untitled'}</span>
|
||||
<div class="focus-controls">
|
||||
<button class="focus-btn focus-active" onclick={() => ($focusMode = false)} title="Exit focus mode (Escape)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="focus-btn" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.minimize()} title="Minimize">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
<button class="focus-btn" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.toggleMaximize()} title="Maximize">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><rect x="1" y="1" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
</button>
|
||||
<button class="focus-btn focus-close" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.close()} title="Close">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1.5" y1="1.5" x2="8.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="8.5" y1="1.5" x2="1.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<TitleBar onNewNote={createAndFocusNote} />
|
||||
{/if}
|
||||
<div class="app-layout">
|
||||
{#if !$focusMode}
|
||||
<div class="sidebar-panel" style="width: {$sidebarCollapsed ? 44 : $sidebarWidth}px">
|
||||
<Sidebar bind:this={sidebar} onViewChanged={handleViewChanged} />
|
||||
</div>
|
||||
|
||||
{#if !$sidebarCollapsed}
|
||||
<ResizeHandle onResize={handleSidebarResize} />
|
||||
{/if}
|
||||
|
||||
<div class="notelist-panel" style="width: {$notelistWidth}px">
|
||||
<NoteList bind:this={noteList} onNoteSelected={handleNoteSelected} onNoteMoved={() => sidebar?.refresh()} />
|
||||
</div>
|
||||
|
||||
<ResizeHandle onResize={handleNotelistResize} />
|
||||
{/if}
|
||||
|
||||
<div class="editor-panel">
|
||||
<Editor bind:this={editor} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SearchPanel />
|
||||
<CommandPalette />
|
||||
<SettingsPanel />
|
||||
<InfoPanel />
|
||||
|
||||
<style>
|
||||
.app-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-panel {
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notelist-panel {
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-panel {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.focus-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 34px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
padding: 0 8px 0 16px;
|
||||
}
|
||||
|
||||
.focus-title {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.focus-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.focus-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
|
||||
.focus-btn.focus-active {
|
||||
color: var(--text-accent);
|
||||
background: var(--accent-light);
|
||||
}
|
||||
|
||||
.focus-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.focus-close:hover {
|
||||
background: #e81123;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,229 @@
|
||||
<script lang="ts">
|
||||
import { showCommandPalette, showSearch, theme, sourceMode } from '$lib/stores/app';
|
||||
import { setTheme, reindex } from '$lib/api';
|
||||
|
||||
interface Command {
|
||||
id: string;
|
||||
label: string;
|
||||
shortcut?: string;
|
||||
action: () => void;
|
||||
}
|
||||
|
||||
let query = $state('');
|
||||
let selectedIndex = $state(0);
|
||||
let inputEl = $state<HTMLInputElement>(null!);
|
||||
|
||||
const commands: Command[] = [
|
||||
{
|
||||
id: 'search',
|
||||
label: 'Search Notes',
|
||||
shortcut: 'Ctrl+F',
|
||||
action: () => {
|
||||
$showCommandPalette = false;
|
||||
$showSearch = true;
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'theme-light',
|
||||
label: 'Switch to Light Theme',
|
||||
action: () => {
|
||||
$theme = 'light';
|
||||
setTheme('light');
|
||||
applyTheme('light');
|
||||
$showCommandPalette = false;
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'theme-dark',
|
||||
label: 'Switch to Dark Theme',
|
||||
action: () => {
|
||||
$theme = 'dark';
|
||||
setTheme('dark');
|
||||
applyTheme('dark');
|
||||
$showCommandPalette = false;
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'theme-system',
|
||||
label: 'Use System Theme',
|
||||
action: () => {
|
||||
$theme = 'system';
|
||||
setTheme('system');
|
||||
applyTheme('system');
|
||||
$showCommandPalette = false;
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'toggle-source',
|
||||
label: 'Toggle Source/WYSIWYG Mode',
|
||||
action: () => {
|
||||
$sourceMode = !$sourceMode;
|
||||
$showCommandPalette = false;
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'reindex',
|
||||
label: 'Rebuild Search Index',
|
||||
action: async () => {
|
||||
await reindex();
|
||||
$showCommandPalette = false;
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
let filteredCommands = $derived(
|
||||
query.trim()
|
||||
? commands.filter((c) => c.label.toLowerCase().includes(query.toLowerCase()))
|
||||
: commands
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
if ($showCommandPalette && inputEl) {
|
||||
query = '';
|
||||
selectedIndex = 0;
|
||||
setTimeout(() => inputEl?.focus(), 50);
|
||||
}
|
||||
});
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
$showCommandPalette = false;
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
selectedIndex = Math.min(selectedIndex + 1, filteredCommands.length - 1);
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
selectedIndex = Math.max(selectedIndex - 1, 0);
|
||||
} else if (e.key === 'Enter' && filteredCommands.length > 0) {
|
||||
filteredCommands[selectedIndex].action();
|
||||
}
|
||||
}
|
||||
|
||||
function applyTheme(t: string) {
|
||||
const root = document.documentElement;
|
||||
root.classList.remove('dark');
|
||||
if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('dark');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $showCommandPalette}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="palette-overlay" onclick={() => ($showCommandPalette = false)} onkeydown={handleKeydown}>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="palette-panel" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
|
||||
<div class="palette-input-wrapper">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="var(--text-tertiary)">
|
||||
<path d="M3 2v4.586l7 7L14.586 9l-7-7H3zm2 1a1 1 0 110 2 1 1 0 010-2z" />
|
||||
</svg>
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
type="text"
|
||||
placeholder="Type a command..."
|
||||
bind:value={query}
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="palette-results">
|
||||
{#each filteredCommands as cmd, i (cmd.id)}
|
||||
<button
|
||||
class="cmd-item"
|
||||
class:selected={i === selectedIndex}
|
||||
onclick={() => cmd.action()}
|
||||
onmouseenter={() => (selectedIndex = i)}
|
||||
>
|
||||
<span class="cmd-label">{cmd.label}</span>
|
||||
{#if cmd.shortcut}
|
||||
<span class="cmd-shortcut">{cmd.shortcut}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.palette-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 20vh;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.palette-panel {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 480px;
|
||||
max-height: 360px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.palette-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.palette-input-wrapper input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.palette-input-wrapper input::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.palette-results {
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.cmd-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.cmd-item:hover,
|
||||
.cmd-item.selected {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.cmd-label {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.cmd-shortcut {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
background: var(--bg-tertiary);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,522 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy } from 'svelte';
|
||||
import { getAllNoteTitles, readNote } from '$lib/api';
|
||||
import { appConfig, activeNotePath } from '$lib/stores/app';
|
||||
import type { NoteTitleEntry } from '$lib/types';
|
||||
|
||||
let { onclose, onnavigate }: {
|
||||
onclose: () => void;
|
||||
onnavigate: (path: string, title: string) => void;
|
||||
} = $props();
|
||||
|
||||
let canvas = $state<HTMLCanvasElement>(null!);
|
||||
let loading = $state(true);
|
||||
|
||||
interface GraphNode {
|
||||
id: string;
|
||||
title: string;
|
||||
path: string;
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
links: string[]; // titles this note links to
|
||||
}
|
||||
|
||||
interface GraphEdge {
|
||||
source: string;
|
||||
target: string;
|
||||
}
|
||||
|
||||
let nodes: GraphNode[] = [];
|
||||
let edges: GraphEdge[] = [];
|
||||
let animFrame = 0;
|
||||
let pan = { x: 0, y: 0 };
|
||||
let zoom = 1;
|
||||
let dragging: GraphNode | null = null;
|
||||
let dragMoved = false;
|
||||
let mouseDownPos = { x: 0, y: 0 };
|
||||
let panning = false;
|
||||
let panStart = { x: 0, y: 0 };
|
||||
let hoveredNode: GraphNode | null = null;
|
||||
|
||||
const wikiLinkRegex = /\[\[([^\]]+)\]\]/g;
|
||||
|
||||
async function buildGraph() {
|
||||
loading = true;
|
||||
try {
|
||||
const titles = await getAllNoteTitles();
|
||||
const titleMap = new Map<string, NoteTitleEntry>();
|
||||
for (const t of titles) {
|
||||
titleMap.set(t.title.toLowerCase(), t);
|
||||
}
|
||||
|
||||
// Create nodes
|
||||
const w = canvas?.width ?? 800;
|
||||
const h = canvas?.height ?? 600;
|
||||
nodes = titles.map((t, i) => ({
|
||||
id: t.title.toLowerCase(),
|
||||
title: t.title,
|
||||
path: t.path,
|
||||
x: w / 2 + (Math.random() - 0.5) * Math.min(w, h) * 0.6,
|
||||
y: h / 2 + (Math.random() - 0.5) * Math.min(w, h) * 0.6,
|
||||
vx: 0,
|
||||
vy: 0,
|
||||
links: [],
|
||||
}));
|
||||
|
||||
const nodeMap = new Map<string, GraphNode>();
|
||||
for (const n of nodes) nodeMap.set(n.id, n);
|
||||
|
||||
// Read each note to extract [[wiki-links]]
|
||||
const edgeSet = new Set<string>();
|
||||
for (const node of nodes) {
|
||||
try {
|
||||
const content = await readNote(node.path);
|
||||
const body = content.content || '';
|
||||
let match;
|
||||
wikiLinkRegex.lastIndex = 0;
|
||||
while ((match = wikiLinkRegex.exec(body)) !== null) {
|
||||
const linkTitle = match[1].trim().toLowerCase();
|
||||
if (linkTitle !== node.id && nodeMap.has(linkTitle)) {
|
||||
node.links.push(linkTitle);
|
||||
const edgeKey = [node.id, linkTitle].sort().join('|');
|
||||
if (!edgeSet.has(edgeKey)) {
|
||||
edgeSet.add(edgeKey);
|
||||
edges.push({ source: node.id, target: linkTitle });
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Skip notes that can't be read
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to build graph:', e);
|
||||
}
|
||||
loading = false;
|
||||
startSimulation();
|
||||
}
|
||||
|
||||
function fitToView() {
|
||||
if (!canvas || nodes.length === 0) return;
|
||||
const w = canvas.width;
|
||||
const h = canvas.height;
|
||||
const padding = 60;
|
||||
|
||||
// Compute bounding box of all nodes
|
||||
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
||||
for (const node of nodes) {
|
||||
if (node.x < minX) minX = node.x;
|
||||
if (node.y < minY) minY = node.y;
|
||||
if (node.x > maxX) maxX = node.x;
|
||||
if (node.y > maxY) maxY = node.y;
|
||||
}
|
||||
|
||||
const graphW = maxX - minX || 1;
|
||||
const graphH = maxY - minY || 1;
|
||||
const centerGraphX = (minX + maxX) / 2;
|
||||
const centerGraphY = (minY + maxY) / 2;
|
||||
|
||||
// Compute zoom to fit
|
||||
zoom = Math.min(
|
||||
(w - padding * 2) / graphW,
|
||||
(h - padding * 2) / graphH,
|
||||
2 // max zoom
|
||||
);
|
||||
zoom = Math.max(zoom, 0.2);
|
||||
|
||||
// Center the graph
|
||||
pan.x = w / 2 - centerGraphX * zoom;
|
||||
pan.y = h / 2 - centerGraphY * zoom;
|
||||
}
|
||||
|
||||
function startSimulation() {
|
||||
if (animFrame) cancelAnimationFrame(animFrame);
|
||||
let iterations = 0;
|
||||
const maxIterations = 300;
|
||||
|
||||
function tick() {
|
||||
if (iterations >= maxIterations) {
|
||||
fitToView();
|
||||
draw();
|
||||
return;
|
||||
}
|
||||
simulate();
|
||||
draw();
|
||||
iterations++;
|
||||
animFrame = requestAnimationFrame(tick);
|
||||
}
|
||||
animFrame = requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
function simulate() {
|
||||
const nodeCount = nodes.length;
|
||||
if (nodeCount === 0) return;
|
||||
|
||||
const w = canvas?.width ?? 800;
|
||||
const h = canvas?.height ?? 600;
|
||||
const centerX = w / 2;
|
||||
const centerY = h / 2;
|
||||
|
||||
// Repulsion between all nodes
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
for (let j = i + 1; j < nodeCount; j++) {
|
||||
const a = nodes[i];
|
||||
const b = nodes[j];
|
||||
let dx = b.x - a.x;
|
||||
let dy = b.y - a.y;
|
||||
let dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
||||
const force = 800 / (dist * dist);
|
||||
const fx = (dx / dist) * force;
|
||||
const fy = (dy / dist) * force;
|
||||
a.vx -= fx;
|
||||
a.vy -= fy;
|
||||
b.vx += fx;
|
||||
b.vy += fy;
|
||||
}
|
||||
}
|
||||
|
||||
// Attraction along edges
|
||||
for (const edge of edges) {
|
||||
const a = nodes.find(n => n.id === edge.source);
|
||||
const b = nodes.find(n => n.id === edge.target);
|
||||
if (!a || !b) continue;
|
||||
let dx = b.x - a.x;
|
||||
let dy = b.y - a.y;
|
||||
let dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
||||
const force = (dist - 100) * 0.01;
|
||||
const fx = (dx / dist) * force;
|
||||
const fy = (dy / dist) * force;
|
||||
a.vx += fx;
|
||||
a.vy += fy;
|
||||
b.vx -= fx;
|
||||
b.vy -= fy;
|
||||
}
|
||||
|
||||
// Center gravity
|
||||
for (const node of nodes) {
|
||||
node.vx += (centerX - node.x) * 0.001;
|
||||
node.vy += (centerY - node.y) * 0.001;
|
||||
}
|
||||
|
||||
// Apply velocity with damping
|
||||
for (const node of nodes) {
|
||||
if (node === dragging) continue;
|
||||
node.vx *= 0.85;
|
||||
node.vy *= 0.85;
|
||||
node.x += node.vx;
|
||||
node.y += node.vy;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
const w = canvas.width;
|
||||
const h = canvas.height;
|
||||
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
ctx.save();
|
||||
ctx.translate(pan.x, pan.y);
|
||||
ctx.scale(zoom, zoom);
|
||||
|
||||
const style = getComputedStyle(document.documentElement);
|
||||
const borderColor = style.getPropertyValue('--border-color').trim() || '#444';
|
||||
const textColor = style.getPropertyValue('--text-primary').trim() || '#eee';
|
||||
const textSecondary = style.getPropertyValue('--text-tertiary').trim() || '#888';
|
||||
const accent = style.getPropertyValue('--accent').trim() || '#7b9bd4';
|
||||
const accentLight = style.getPropertyValue('--accent-light').trim() || 'rgba(123,155,212,0.15)';
|
||||
|
||||
// Draw edges
|
||||
ctx.strokeStyle = borderColor;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.globalAlpha = 0.4;
|
||||
for (const edge of edges) {
|
||||
const a = nodes.find(n => n.id === edge.source);
|
||||
const b = nodes.find(n => n.id === edge.target);
|
||||
if (!a || !b) continue;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(a.x, a.y);
|
||||
ctx.lineTo(b.x, b.y);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.globalAlpha = 1;
|
||||
|
||||
// Determine active note
|
||||
const activePath = $activeNotePath || '';
|
||||
|
||||
// Draw nodes
|
||||
for (const node of nodes) {
|
||||
const isActive = node.path === activePath;
|
||||
const isHovered = node === hoveredNode;
|
||||
const hasLinks = node.links.length > 0 || edges.some(e => e.source === node.id || e.target === node.id);
|
||||
const radius = isActive ? 7 : hasLinks ? 5 : 3.5;
|
||||
|
||||
// Node circle
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
|
||||
if (isActive) {
|
||||
ctx.fillStyle = accent;
|
||||
} else if (isHovered) {
|
||||
ctx.fillStyle = accent;
|
||||
} else if (hasLinks) {
|
||||
ctx.fillStyle = textSecondary;
|
||||
} else {
|
||||
ctx.fillStyle = borderColor;
|
||||
}
|
||||
ctx.fill();
|
||||
|
||||
// Label
|
||||
if (isActive || isHovered || hasLinks) {
|
||||
ctx.font = `${isActive || isHovered ? '12' : '10'}px -apple-system, BlinkMacSystemFont, sans-serif`;
|
||||
ctx.fillStyle = isActive || isHovered ? textColor : textSecondary;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(node.title, node.x, node.y - radius - 5);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function getNodeAt(clientX: number, clientY: number): GraphNode | null {
|
||||
if (!canvas) return null;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = (clientX - rect.left - pan.x) / zoom;
|
||||
const y = (clientY - rect.top - pan.y) / zoom;
|
||||
for (let i = nodes.length - 1; i >= 0; i--) {
|
||||
const n = nodes[i];
|
||||
const dx = n.x - x;
|
||||
const dy = n.y - y;
|
||||
if (dx * dx + dy * dy < 100) return n;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function handleMouseDown(e: MouseEvent) {
|
||||
mouseDownPos = { x: e.clientX, y: e.clientY };
|
||||
dragMoved = false;
|
||||
const node = getNodeAt(e.clientX, e.clientY);
|
||||
if (node) {
|
||||
dragging = node;
|
||||
} else {
|
||||
panning = true;
|
||||
panStart = { x: e.clientX - pan.x, y: e.clientY - pan.y };
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(e: MouseEvent) {
|
||||
const dx = e.clientX - mouseDownPos.x;
|
||||
const dy = e.clientY - mouseDownPos.y;
|
||||
if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
|
||||
dragMoved = true;
|
||||
}
|
||||
|
||||
if (dragging && dragMoved) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
dragging.x = (e.clientX - rect.left - pan.x) / zoom;
|
||||
dragging.y = (e.clientY - rect.top - pan.y) / zoom;
|
||||
dragging.vx = 0;
|
||||
dragging.vy = 0;
|
||||
draw();
|
||||
} else if (panning) {
|
||||
pan.x = e.clientX - panStart.x;
|
||||
pan.y = e.clientY - panStart.y;
|
||||
draw();
|
||||
} else if (!dragging) {
|
||||
const node = getNodeAt(e.clientX, e.clientY);
|
||||
if (node !== hoveredNode) {
|
||||
hoveredNode = node;
|
||||
if (canvas) canvas.style.cursor = node ? 'pointer' : 'grab';
|
||||
draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseUp(e: MouseEvent) {
|
||||
if (dragging && !dragMoved) {
|
||||
// It was a click, not a drag — navigate
|
||||
const node = dragging;
|
||||
dragging = null;
|
||||
onnavigate(node.path, node.title);
|
||||
return;
|
||||
}
|
||||
dragging = null;
|
||||
panning = false;
|
||||
}
|
||||
|
||||
function handleWheel(e: WheelEvent) {
|
||||
e.preventDefault();
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const mx = e.clientX - rect.left;
|
||||
const my = e.clientY - rect.top;
|
||||
const oldZoom = zoom;
|
||||
const delta = e.deltaY > 0 ? 0.9 : 1.1;
|
||||
zoom = Math.max(0.2, Math.min(5, zoom * delta));
|
||||
// Zoom toward mouse position
|
||||
pan.x = mx - (mx - pan.x) * (zoom / oldZoom);
|
||||
pan.y = my - (my - pan.y) * (zoom / oldZoom);
|
||||
draw();
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onclose();
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (canvas) {
|
||||
const rect = canvas.parentElement?.getBoundingClientRect();
|
||||
if (rect) {
|
||||
canvas.width = rect.width;
|
||||
canvas.height = rect.height;
|
||||
}
|
||||
buildGraph();
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (animFrame) cancelAnimationFrame(animFrame);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="graph-overlay" onkeydown={handleKeydown}>
|
||||
<div class="graph-panel">
|
||||
<div class="graph-header">
|
||||
<h3>Graph View</h3>
|
||||
<div class="graph-stats">
|
||||
{#if !loading}
|
||||
{nodes.length} notes, {edges.length} connections
|
||||
{/if}
|
||||
</div>
|
||||
<button class="graph-close" onclick={onclose}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="graph-body">
|
||||
{#if loading}
|
||||
<div class="graph-loading">
|
||||
<svg class="spinner" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10" opacity="0.25" />
|
||||
<path d="M12 2a10 10 0 019.95 9" />
|
||||
</svg>
|
||||
Building graph...
|
||||
</div>
|
||||
{/if}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<canvas
|
||||
bind:this={canvas}
|
||||
class="graph-canvas"
|
||||
onmousedown={handleMouseDown}
|
||||
onmousemove={handleMouseMove}
|
||||
onmouseup={handleMouseUp}
|
||||
onwheel={handleWheel}
|
||||
></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.graph-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.graph-panel {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 85vw;
|
||||
height: 75vh;
|
||||
max-width: 1200px;
|
||||
max-height: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.graph-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.graph-header h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.graph-stats {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.graph-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.graph-close:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.graph-body {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.graph-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.graph-canvas:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.graph-loading {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 13px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,388 @@
|
||||
<script lang="ts">
|
||||
import { showInfo, appConfig } from '$lib/stores/app';
|
||||
import { getVaultStats } from '$lib/api';
|
||||
import { openUrl } from '@tauri-apps/plugin-opener';
|
||||
import type { VaultStats } from '$lib/types';
|
||||
|
||||
let stats = $state<VaultStats | null>(null);
|
||||
let activeTab = $state<'about' | 'shortcuts'>('shortcuts');
|
||||
|
||||
function close() {
|
||||
$showInfo = false;
|
||||
activeTab = 'shortcuts';
|
||||
}
|
||||
|
||||
function openLink(url: string) {
|
||||
openUrl(url).catch(console.error);
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if ($showInfo) {
|
||||
getVaultStats().then((s) => { stats = s; }).catch(console.error);
|
||||
} else {
|
||||
stats = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if $showInfo}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="info-overlay" onclick={close} onkeydown={(e) => { if (e.key === 'Escape') close(); }}>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="info-panel" onclick={(e) => e.stopPropagation()}>
|
||||
<div class="info-header">
|
||||
<h2>Info</h2>
|
||||
<button class="close-btn" onclick={close}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="info-body">
|
||||
<div class="info-tabs">
|
||||
<button class="info-tab" class:active={activeTab === 'shortcuts'} onclick={() => activeTab = 'shortcuts'}>Shortcuts</button>
|
||||
<button class="info-tab" class:active={activeTab === 'about'} onclick={() => activeTab = 'about'}>About</button>
|
||||
</div>
|
||||
|
||||
{#if activeTab === 'about'}
|
||||
<div class="info-logo">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
|
||||
<rect width="48" height="48" rx="12" fill="var(--accent)" />
|
||||
<circle cx="16" cy="16" r="3.5" fill="white" opacity="0.9" />
|
||||
<circle cx="32" cy="16" r="3.5" fill="white" opacity="0.9" />
|
||||
<circle cx="16" cy="32" r="3.5" fill="white" opacity="0.9" />
|
||||
<circle cx="32" cy="32" r="3.5" fill="white" opacity="0.9" />
|
||||
<line x1="19" y1="18" x2="29" y2="30" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.7" />
|
||||
<line x1="29" y1="18" x2="19" y2="30" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="app-name">HelixNotes</h3>
|
||||
<p class="app-version">v1.0.0</p>
|
||||
<p class="app-description">A local-first markdown note-taking app.</p>
|
||||
|
||||
{#if stats}
|
||||
<div class="info-stats">
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Notes</span>
|
||||
<span class="stat-value">{stats.total_notes}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Attachments</span>
|
||||
<span class="stat-value">{stats.total_attachments}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Notes size</span>
|
||||
<span class="stat-value">{formatSize(stats.notes_size)}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Attachments size</span>
|
||||
<span class="stat-value">{formatSize(stats.attachments_size)}</span>
|
||||
</div>
|
||||
<div class="stat-row stat-total">
|
||||
<span class="stat-label">Total vault size</span>
|
||||
<span class="stat-value">{formatSize(stats.total_size)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="info-credits">
|
||||
<p>Created by <strong>Yuri Karamian</strong></p>
|
||||
<button class="info-link" onclick={() => openLink('https://helixnotes.com')}>
|
||||
<svg width="14" height="14" 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" />
|
||||
<line x1="2" y1="12" x2="22" y2="12" />
|
||||
<path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" />
|
||||
</svg>
|
||||
helixnotes.com
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="shortcuts-section">
|
||||
<h4 class="shortcuts-group-title">Keyboard Shortcuts</h4>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">New note</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>N</kbd></span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Quick open</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>P</kbd></span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Search</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>F</kbd></span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Save</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>S</kbd></span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Bold</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>B</kbd></span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Italic</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>I</kbd></span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Underline</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>U</kbd></span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Undo</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Z</kbd></span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Redo</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Exit focus mode</span><span class="shortcut-keys"><kbd>Esc</kbd></span></div>
|
||||
|
||||
<h4 class="shortcuts-group-title">Editor Commands</h4>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Slash commands</span><span class="shortcut-keys"><kbd>/</kbd></span></div>
|
||||
<div class="shortcut-row command-detail"><span class="shortcut-desc">Headings, lists, code block, table, blockquote, collapsible section, horizontal rule</span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Wiki-link to note</span><span class="shortcut-keys"><kbd>[[</kbd></span></div>
|
||||
<div class="shortcut-row command-detail"><span class="shortcut-desc">Type <kbd>[[</kbd> to search and link to another note. Close with <kbd>]]</kbd> or pick from the list.</span></div>
|
||||
|
||||
<h4 class="shortcuts-group-title">Editor Features</h4>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Right-click in editor for formatting menu</span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Right-click a table cell for table options</span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Right-click a link to open, copy, edit, or remove</span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Click an image to resize (small / medium / full)</span></div>
|
||||
<div class="shortcut-row"><span class="shortcut-desc">Drag & drop images, PDFs, or files into the editor</span></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.info-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 500px;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px 16px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.info-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.info-body {
|
||||
padding: 0 24px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 4px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.info-tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
width: 100%;
|
||||
padding: 16px 0 12px;
|
||||
background: var(--bg-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.info-tab {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.info-tab:hover {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.info-tab.active {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
.info-logo {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.app-version {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.app-description {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.info-stats {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 10px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 7px 16px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stat-total {
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.stat-total .stat-value {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.info-credits {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-credits p {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.info-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--accent);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.info-link:hover {
|
||||
background: var(--accent-light);
|
||||
}
|
||||
|
||||
.shortcuts-section {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.shortcuts-group-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-tertiary);
|
||||
margin: 16px 0 8px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.shortcuts-group-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.shortcut-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.shortcut-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.shortcut-keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.shortcut-keys kbd,
|
||||
.shortcut-desc kbd {
|
||||
display: inline-block;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.command-detail {
|
||||
padding: 0 0 4px 8px;
|
||||
}
|
||||
|
||||
.command-detail .shortcut-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,28 @@
|
||||
<script lang="ts">
|
||||
let { onResize }: { onResize: (delta: number) => void } = $props();
|
||||
let active = $state(false);
|
||||
let startX = 0;
|
||||
|
||||
function onMouseDown(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
active = true;
|
||||
startX = e.clientX;
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
window.addEventListener('mouseup', onMouseUp);
|
||||
}
|
||||
|
||||
function onMouseMove(e: MouseEvent) {
|
||||
const delta = e.clientX - startX;
|
||||
startX = e.clientX;
|
||||
onResize(delta);
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
active = false;
|
||||
window.removeEventListener('mousemove', onMouseMove);
|
||||
window.removeEventListener('mouseup', onMouseUp);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="resize-handle" class:active onmousedown={onMouseDown}></div>
|
||||
@@ -0,0 +1,383 @@
|
||||
<script lang="ts">
|
||||
import { showSearch, activeNote, activeNotePath, editorDirty, appConfig } from '$lib/stores/app';
|
||||
import { searchNotes, readNote } from '$lib/api';
|
||||
import { debounce } from '$lib/utils/debounce';
|
||||
import type { SearchResult } from '$lib/types';
|
||||
|
||||
let query = $state('');
|
||||
let results = $state<SearchResult[]>([]);
|
||||
let selectedIndex = $state(0);
|
||||
let inputEl = $state<HTMLInputElement>(null!);
|
||||
let resultsEl = $state<HTMLDivElement>(null!);
|
||||
|
||||
const doSearch = debounce(async (q: string) => {
|
||||
if (!q.trim()) {
|
||||
results = [];
|
||||
return;
|
||||
}
|
||||
try {
|
||||
results = await searchNotes(q, 20);
|
||||
selectedIndex = 0;
|
||||
} catch (e) {
|
||||
console.error('Search failed:', e);
|
||||
results = [];
|
||||
}
|
||||
}, 150);
|
||||
|
||||
$effect(() => {
|
||||
if ($showSearch && inputEl) {
|
||||
query = '';
|
||||
results = [];
|
||||
selectedIndex = 0;
|
||||
setTimeout(() => inputEl?.focus(), 50);
|
||||
}
|
||||
});
|
||||
|
||||
function handleInput() {
|
||||
doSearch(query);
|
||||
}
|
||||
|
||||
function scrollToSelected() {
|
||||
if (!resultsEl) return;
|
||||
const item = resultsEl.children[selectedIndex] as HTMLElement;
|
||||
if (item) item.scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
$showSearch = false;
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
|
||||
scrollToSelected();
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
selectedIndex = Math.max(selectedIndex - 1, 0);
|
||||
scrollToSelected();
|
||||
} else if (e.key === 'Enter' && results.length > 0) {
|
||||
openResult(results[selectedIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
function getNotebook(path: string): string {
|
||||
const vault = $appConfig?.active_vault;
|
||||
if (!vault) return '';
|
||||
let rel = path;
|
||||
if (rel.startsWith(vault + '/')) rel = rel.substring(vault.length + 1);
|
||||
const lastSlash = rel.lastIndexOf('/');
|
||||
if (lastSlash <= 0) return '';
|
||||
return rel.substring(0, lastSlash);
|
||||
}
|
||||
|
||||
function highlightSnippet(snippet: string, q: string): string {
|
||||
if (!q.trim() || !snippet) return escapeHtml(snippet);
|
||||
const words = q.trim().split(/\s+/).filter(w => w.length > 1);
|
||||
if (words.length === 0) return escapeHtml(snippet);
|
||||
const escaped = escapeHtml(snippet);
|
||||
const pattern = words.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
|
||||
const re = new RegExp(`(${pattern})`, 'gi');
|
||||
return escaped.replace(re, '<mark>$1</mark>');
|
||||
}
|
||||
|
||||
function escapeHtml(str: string): string {
|
||||
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
async function openResult(result: SearchResult) {
|
||||
try {
|
||||
const content = await readNote(result.path);
|
||||
$activeNote = content;
|
||||
$activeNotePath = result.path;
|
||||
$editorDirty = false;
|
||||
$showSearch = false;
|
||||
} catch (e) {
|
||||
console.error('Failed to open search result:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
$showSearch = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $showSearch}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="search-overlay" onclick={close} onkeydown={handleKeydown}>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="search-panel" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
|
||||
<div class="search-input-wrapper">
|
||||
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
</svg>
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
type="text"
|
||||
placeholder="Search notes..."
|
||||
bind:value={query}
|
||||
oninput={handleInput}
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
<kbd class="search-esc">Esc</kbd>
|
||||
</div>
|
||||
|
||||
{#if results.length > 0}
|
||||
<div class="search-results" bind:this={resultsEl}>
|
||||
{#each results as result, i}
|
||||
<button
|
||||
class="result-item"
|
||||
class:selected={i === selectedIndex}
|
||||
onclick={() => openResult(result)}
|
||||
onmouseenter={() => (selectedIndex = i)}
|
||||
>
|
||||
<div class="result-header">
|
||||
<svg class="result-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
<line x1="16" y1="13" x2="8" y2="13" />
|
||||
<line x1="16" y1="17" x2="8" y2="17" />
|
||||
</svg>
|
||||
<span class="result-title">{result.title}</span>
|
||||
{#if getNotebook(result.path)}
|
||||
<span class="result-notebook">{getNotebook(result.path)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if result.snippet}
|
||||
<span class="result-snippet">{@html highlightSnippet(result.snippet, query)}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="search-footer">
|
||||
<span class="search-count">{results.length} result{results.length !== 1 ? 's' : ''}</span>
|
||||
<span class="search-hints">
|
||||
<kbd>↑</kbd><kbd>↓</kbd> navigate
|
||||
<kbd>↵</kbd> open
|
||||
</span>
|
||||
</div>
|
||||
{:else if query.trim()}
|
||||
<div class="no-results">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.3">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
<line x1="8" y1="8" x2="14" y2="14" />
|
||||
<line x1="14" y1="8" x2="8" y2="14" />
|
||||
</svg>
|
||||
<span>No results for "{query}"</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="search-empty">
|
||||
<span>Type to search across all notes</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.search-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 15vh;
|
||||
z-index: 2000;
|
||||
animation: overlay-in 0.15s ease-out;
|
||||
}
|
||||
|
||||
@keyframes overlay-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes panel-in {
|
||||
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
|
||||
width: 620px;
|
||||
max-height: 460px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: panel-in 0.15s ease-out;
|
||||
}
|
||||
|
||||
:global(:root.dark) .search-panel {
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 18px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: var(--text-tertiary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-input-wrapper input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 17px;
|
||||
outline: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.search-input-wrapper input::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.search-esc {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
flex-shrink: 0;
|
||||
font-family: inherit;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
overflow-y: auto;
|
||||
padding: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.result-item.selected {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
color: var(--text-tertiary);
|
||||
flex-shrink: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.result-notebook {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
background: var(--bg-tertiary);
|
||||
padding: 1px 7px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.result-snippet {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 4px;
|
||||
margin-left: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.result-snippet :global(mark) {
|
||||
background: color-mix(in srgb, var(--accent) 25%, transparent);
|
||||
color: var(--text-accent);
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.search-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 18px;
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.search-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.search-hints {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.search-hints kbd {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 0px 5px;
|
||||
font-family: inherit;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
padding: 32px 20px;
|
||||
text-align: center;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-empty {
|
||||
padding: 24px 20px;
|
||||
text-align: center;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,762 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
notebooks,
|
||||
notes,
|
||||
tags,
|
||||
viewMode,
|
||||
activeNotebook,
|
||||
activeNotePath,
|
||||
activeNote,
|
||||
activeTag,
|
||||
showSearch,
|
||||
sidebarCollapsed,
|
||||
showSettings,
|
||||
showInfo,
|
||||
notebookIcons,
|
||||
appConfig,
|
||||
quickAccessPaths,
|
||||
collapsedNotebooks
|
||||
} from '$lib/stores/app';
|
||||
import { getNotebooks, getAllTags, createNotebook, deleteNotebook, renameNotebook, getNotebookIcons, setNotebookIcon, saveAttachment, getQuickAccess, addQuickAccess, removeQuickAccess, emptyTrash, moveNote, readNote, getNotes } from '$lib/api';
|
||||
import { open as openDialog } from '@tauri-apps/plugin-dialog';
|
||||
import { readFile } from '@tauri-apps/plugin-fs';
|
||||
import { convertFileSrc } from '@tauri-apps/api/core';
|
||||
import type { NotebookEntry } from '$lib/types';
|
||||
|
||||
let { onViewChanged = () => {} }: {
|
||||
onViewChanged?: () => void;
|
||||
} = $props();
|
||||
|
||||
let editingNotebook = $state<string | null>(null);
|
||||
let editValue = $state('');
|
||||
let newNotebookName = $state('');
|
||||
let showNewNotebook = $state(false);
|
||||
let dropTargetPath = $state<string | null>(null);
|
||||
let contextMenu = $state<{ x: number; y: number; notebook: NotebookEntry } | null>(null);
|
||||
let trashContextMenu = $state<{ x: number; y: number } | null>(null);
|
||||
function toggleCollapse(path: string, e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
if ($collapsedNotebooks.includes(path)) {
|
||||
$collapsedNotebooks = $collapsedNotebooks.filter(p => p !== path);
|
||||
} else {
|
||||
$collapsedNotebooks = [...$collapsedNotebooks, path];
|
||||
}
|
||||
}
|
||||
|
||||
export async function refresh() {
|
||||
try {
|
||||
$notebooks = await getNotebooks();
|
||||
$tags = await getAllTags();
|
||||
$notebookIcons = await getNotebookIcons();
|
||||
const qaNotes = await getQuickAccess();
|
||||
$quickAccessPaths = qaNotes.map(n => n.relative_path);
|
||||
} catch (e) {
|
||||
console.error('Failed to refresh sidebar:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function selectAllNotes() {
|
||||
$viewMode = 'all';
|
||||
$activeNotebook = null;
|
||||
$activeTag = null;
|
||||
onViewChanged();
|
||||
}
|
||||
|
||||
function selectNotebook(nb: NotebookEntry) {
|
||||
$viewMode = 'notebook';
|
||||
$activeNotebook = nb;
|
||||
$activeTag = null;
|
||||
onViewChanged();
|
||||
}
|
||||
|
||||
function selectTag(tag: string) {
|
||||
$viewMode = 'tag';
|
||||
$activeTag = tag;
|
||||
$activeNotebook = null;
|
||||
onViewChanged();
|
||||
}
|
||||
|
||||
function selectQuickAccess() {
|
||||
$viewMode = 'quickaccess';
|
||||
$activeNotebook = null;
|
||||
$activeTag = null;
|
||||
onViewChanged();
|
||||
}
|
||||
|
||||
function selectTrash() {
|
||||
$viewMode = 'trash';
|
||||
$activeNotebook = null;
|
||||
$activeTag = null;
|
||||
onViewChanged();
|
||||
}
|
||||
|
||||
async function handleCreateNotebook() {
|
||||
if (!newNotebookName.trim()) return;
|
||||
try {
|
||||
await createNotebook(null, newNotebookName.trim());
|
||||
newNotebookName = '';
|
||||
showNewNotebook = false;
|
||||
await refresh();
|
||||
} catch (e) {
|
||||
console.error('Failed to create notebook:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRename(nb: NotebookEntry) {
|
||||
if (!editValue.trim() || editValue.trim() === nb.name) {
|
||||
editingNotebook = null;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await renameNotebook(nb.path, editValue.trim());
|
||||
editingNotebook = null;
|
||||
await refresh();
|
||||
} catch (e) {
|
||||
console.error('Failed to rename:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(nb: NotebookEntry) {
|
||||
contextMenu = null;
|
||||
try {
|
||||
await deleteNotebook(nb.path);
|
||||
if ($activeNotebook?.path === nb.path) {
|
||||
selectAllNotes();
|
||||
}
|
||||
await refresh();
|
||||
} catch (e) {
|
||||
console.error('Failed to delete:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleNoteDrop(e: DragEvent, nb: NotebookEntry) {
|
||||
e.preventDefault();
|
||||
dropTargetPath = null;
|
||||
const notePath = e.dataTransfer?.getData('text/plain');
|
||||
if (!notePath) return;
|
||||
// Don't move if already in this notebook
|
||||
const noteDir = notePath.substring(0, notePath.lastIndexOf('/'));
|
||||
if (noteDir === nb.path) return;
|
||||
try {
|
||||
const newPath = await moveNote(notePath, nb.path);
|
||||
$notes = $notes.filter(n => n.path !== notePath);
|
||||
if ($activeNotePath === notePath) {
|
||||
$activeNotePath = newPath;
|
||||
$activeNote = await readNote(newPath);
|
||||
}
|
||||
await refresh();
|
||||
} catch (e) {
|
||||
console.error('Failed to move note:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function startRename(nb: NotebookEntry) {
|
||||
contextMenu = null;
|
||||
editingNotebook = nb.path;
|
||||
editValue = nb.name;
|
||||
}
|
||||
|
||||
async function handleSetIcon(nb: NotebookEntry) {
|
||||
contextMenu = null;
|
||||
try {
|
||||
const selected = await openDialog({
|
||||
multiple: false,
|
||||
filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico'] }]
|
||||
});
|
||||
if (!selected) return;
|
||||
const filePath = typeof selected === 'string' ? selected : selected;
|
||||
// Read the file and save as attachment
|
||||
const data = await readFile(filePath as string);
|
||||
const fileName = (filePath as string).split('/').pop() || 'icon.png';
|
||||
const iconRelative = await saveAttachment(`notebook-icon-${fileName}`, Array.from(data));
|
||||
await setNotebookIcon(nb.relative_path, iconRelative);
|
||||
$notebookIcons = await getNotebookIcons();
|
||||
} catch (e) {
|
||||
console.error('Failed to set notebook icon:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemoveIcon(nb: NotebookEntry) {
|
||||
contextMenu = null;
|
||||
try {
|
||||
await setNotebookIcon(nb.relative_path, null);
|
||||
$notebookIcons = await getNotebookIcons();
|
||||
} catch (e) {
|
||||
console.error('Failed to remove notebook icon:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function getNotebookIconSrc(nb: NotebookEntry): string | null {
|
||||
const iconPath = $notebookIcons[nb.relative_path];
|
||||
if (!iconPath) return null;
|
||||
const vaultRoot = $appConfig?.active_vault;
|
||||
if (!vaultRoot) return null;
|
||||
return convertFileSrc(`${vaultRoot}/${iconPath}`);
|
||||
}
|
||||
|
||||
function onContextMenu(e: MouseEvent, nb: NotebookEntry) {
|
||||
e.preventDefault();
|
||||
contextMenu = { x: e.clientX, y: e.clientY, notebook: nb };
|
||||
}
|
||||
|
||||
function closeContextMenu() {
|
||||
contextMenu = null;
|
||||
}
|
||||
|
||||
function onTrashContextMenu(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
trashContextMenu = { x: e.clientX, y: e.clientY };
|
||||
}
|
||||
|
||||
async function handleEmptyTrash() {
|
||||
trashContextMenu = null;
|
||||
try {
|
||||
await emptyTrash();
|
||||
// Clear selection and refresh the list (with cache invalidation)
|
||||
$activeNote = null;
|
||||
$activeNotePath = '';
|
||||
onViewChanged();
|
||||
} catch (e) {
|
||||
console.error('Failed to empty trash:', e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Close context menu on click outside
|
||||
function handleWindowClick() {
|
||||
if (contextMenu) contextMenu = null;
|
||||
if (trashContextMenu) trashContextMenu = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onclick={handleWindowClick} />
|
||||
|
||||
<aside class="sidebar" class:collapsed={$sidebarCollapsed}>
|
||||
<div class="sidebar-header">
|
||||
<button class="collapse-btn" onclick={() => ($sidebarCollapsed = !$sidebarCollapsed)} title="Toggle sidebar">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
{#if $sidebarCollapsed}
|
||||
<polyline points="9 6 15 12 9 18" />
|
||||
{:else}
|
||||
<polyline points="15 6 9 12 15 18" />
|
||||
{/if}
|
||||
</svg>
|
||||
</button>
|
||||
{#if !$sidebarCollapsed}
|
||||
<button class="icon-btn" onclick={() => ($showSearch = true)} title="Search (Ctrl+F)">
|
||||
<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="11" cy="11" r="8" />
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if !$sidebarCollapsed}
|
||||
<nav class="sidebar-nav">
|
||||
<button
|
||||
class="nav-item"
|
||||
class:active={$viewMode === 'all'}
|
||||
onclick={selectAllNotes}
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M16 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V8z" />
|
||||
<polyline points="14 3 14 8 21 8" />
|
||||
</svg>
|
||||
<span>All Notes</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="nav-item"
|
||||
class:active={$viewMode === 'quickaccess'}
|
||||
onclick={selectQuickAccess}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
</svg>
|
||||
<span>Quick Access</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="nav-item"
|
||||
class:active={$viewMode === 'trash'}
|
||||
onclick={selectTrash}
|
||||
oncontextmenu={onTrashContextMenu}
|
||||
>
|
||||
<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" /><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" />
|
||||
</svg>
|
||||
<span>Trash</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Notebooks</span>
|
||||
<button class="icon-btn-sm" onclick={() => (showNewNotebook = !showNewNotebook)} title="New notebook">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if showNewNotebook}
|
||||
<div class="new-notebook-input">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newNotebookName}
|
||||
placeholder="Notebook name..."
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Enter') handleCreateNotebook();
|
||||
if (e.key === 'Escape') { showNewNotebook = false; newNotebookName = ''; }
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="notebook-list">
|
||||
{#each $notebooks as nb (nb.path)}
|
||||
{@render notebookItem(nb, 0)}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $tags.length > 0}
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Tags</span>
|
||||
</div>
|
||||
<div class="tag-list">
|
||||
{#each $tags as [tag, count]}
|
||||
<button
|
||||
class="tag-item"
|
||||
class:active={$viewMode === 'tag' && $activeTag === tag}
|
||||
onclick={() => selectTag(tag)}
|
||||
>
|
||||
<span class="tag-hash">#</span>
|
||||
<span class="tag-name">{tag}</span>
|
||||
<span class="tag-count">{count}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<button class="icon-btn" onclick={() => ($showInfo = true)} title="Info">
|
||||
<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" />
|
||||
<line x1="12" y1="16" x2="12" y2="12" />
|
||||
<line x1="12" y1="8" x2="12.01" y2="8" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="sidebar-footer-right">
|
||||
<button class="icon-btn" onclick={() => ($showSettings = true)} title="Settings">
|
||||
<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" />
|
||||
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</aside>
|
||||
|
||||
{#if contextMenu}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="context-menu" style="left: {contextMenu.x}px; top: {contextMenu.y}px" onmousedown={(e) => e.stopPropagation()}>
|
||||
<button onclick={() => startRename(contextMenu!.notebook)}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" /></svg>
|
||||
Rename
|
||||
</button>
|
||||
<button onclick={() => handleSetIcon(contextMenu!.notebook)}>
|
||||
<svg width="14" height="14" 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" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" y1="9" x2="9.01" y2="9" /><line x1="15" y1="9" x2="15.01" y2="9" /></svg>
|
||||
Set Icon
|
||||
</button>
|
||||
{#if $notebookIcons[contextMenu.notebook.relative_path]}
|
||||
<button onclick={() => handleRemoveIcon(contextMenu!.notebook)}>
|
||||
<svg width="14" height="14" 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" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" /></svg>
|
||||
Remove Icon
|
||||
</button>
|
||||
{/if}
|
||||
<button class="danger" onclick={() => handleDelete(contextMenu!.notebook)}>
|
||||
<svg width="14" height="14" 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" /><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" /></svg>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if trashContextMenu}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="context-menu" style="left: {trashContextMenu.x}px; top: {trashContextMenu.y}px" onmousedown={(e) => e.stopPropagation()}>
|
||||
<button class="danger" onclick={handleEmptyTrash}>
|
||||
<svg width="14" height="14" 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" /><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" />
|
||||
</svg>
|
||||
Empty Trash
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#snippet notebookItem(nb: NotebookEntry, depth: number)}
|
||||
{@const hasChildren = nb.children.length > 0}
|
||||
{@const isCollapsed = $collapsedNotebooks.includes(nb.path)}
|
||||
{@const iconSrc = getNotebookIconSrc(nb)}
|
||||
{#if editingNotebook === nb.path}
|
||||
<div class="notebook-item" style="padding-left: {8 + depth * 16}px">
|
||||
<input
|
||||
type="text"
|
||||
class="rename-input"
|
||||
bind:value={editValue}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Enter') handleRename(nb);
|
||||
if (e.key === 'Escape') editingNotebook = null;
|
||||
}}
|
||||
onblur={() => handleRename(nb)}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
class="notebook-item"
|
||||
class:active={$viewMode === 'notebook' && $activeNotebook?.path === nb.path}
|
||||
class:drop-target={dropTargetPath === nb.path}
|
||||
style="padding-left: {8 + depth * 16}px"
|
||||
onclick={() => selectNotebook(nb)}
|
||||
oncontextmenu={(e) => onContextMenu(e, nb)}
|
||||
ondragover={(e) => { e.preventDefault(); e.dataTransfer!.dropEffect = 'move'; dropTargetPath = nb.path; }}
|
||||
ondragleave={() => { if (dropTargetPath === nb.path) dropTargetPath = null; }}
|
||||
ondrop={(e) => handleNoteDrop(e, nb)}
|
||||
>
|
||||
{#if hasChildren}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<span class="chevron" class:collapsed={isCollapsed} onclick={(e) => toggleCollapse(nb.path, e)} onkeydown={(e) => { if (e.key === 'Enter') toggleCollapse(nb.path, e); }}>
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="chevron-spacer"></span>
|
||||
{/if}
|
||||
{#if iconSrc}
|
||||
<img class="notebook-icon" src={iconSrc} alt="" />
|
||||
{:else}
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6">
|
||||
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="notebook-name">{nb.name} <span class="notebook-count">{nb.note_count}</span></span>
|
||||
</button>
|
||||
{/if}
|
||||
{#if hasChildren && !isCollapsed}
|
||||
{#each nb.children as child (child.path)}
|
||||
{@render notebookItem(child, depth + 1)}
|
||||
{/each}
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
<style>
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
min-width: 44px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 44px !important;
|
||||
min-width: 44px;
|
||||
max-width: 44px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 8px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
padding: 8px 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: var(--accent-light);
|
||||
color: var(--text-accent);
|
||||
}
|
||||
|
||||
.section {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px 4px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.icon-btn, .icon-btn-sm {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon-btn:hover, .icon-btn-sm:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.new-notebook-input {
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.new-notebook-input input, .rename-input {
|
||||
width: 100%;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-size: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.notebook-list {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.notebook-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
padding: 5px 8px;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.notebook-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.notebook-item.active {
|
||||
background: var(--accent-light);
|
||||
color: var(--text-accent);
|
||||
}
|
||||
|
||||
.notebook-item.drop-target {
|
||||
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
outline: 2px dashed var(--accent);
|
||||
outline-offset: -2px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
color: var(--text-tertiary);
|
||||
transition: transform 0.15s ease;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chevron:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chevron.collapsed {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.chevron-spacer {
|
||||
width: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notebook-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notebook-name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notebook-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
padding: 4px 12px;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.tag-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.tag-item.active {
|
||||
background: var(--accent-light);
|
||||
color: var(--text-accent);
|
||||
}
|
||||
|
||||
.tag-hash {
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tag-name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tag-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 8px;
|
||||
border-top: 1px solid var(--border-light);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-footer-right {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: 4px;
|
||||
z-index: 1000;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.context-menu button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.context-menu button:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.context-menu button.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.context-menu button.danger:hover {
|
||||
background: color-mix(in srgb, var(--danger) 10%, transparent);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,222 @@
|
||||
<script lang="ts">
|
||||
import { getCurrentWindow } from '@tauri-apps/api/window';
|
||||
import { vaultReady, focusMode } from '$lib/stores/app';
|
||||
|
||||
let { onNewNote = () => {} }: {
|
||||
onNewNote?: () => void;
|
||||
} = $props();
|
||||
|
||||
const appWindow = getCurrentWindow();
|
||||
let maximized = $state(false);
|
||||
|
||||
async function checkMaximized() {
|
||||
maximized = await appWindow.isMaximized();
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
checkMaximized();
|
||||
const unlisten = appWindow.onResized(() => checkMaximized());
|
||||
return () => { unlisten.then(fn => fn()); };
|
||||
});
|
||||
|
||||
let lastMouseDown = 0;
|
||||
|
||||
function handleMouseDown(e: MouseEvent) {
|
||||
if (e.button !== 0) return;
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.closest('.titlebar-controls') || target.closest('.titlebar-actions')) return;
|
||||
|
||||
const now = Date.now();
|
||||
if (now - lastMouseDown < 300) {
|
||||
// Double-click detected — maximize/restore
|
||||
appWindow.toggleMaximize();
|
||||
lastMouseDown = 0;
|
||||
return;
|
||||
}
|
||||
lastMouseDown = now;
|
||||
appWindow.startDragging();
|
||||
}
|
||||
|
||||
async function minimize() {
|
||||
await appWindow.minimize();
|
||||
}
|
||||
|
||||
async function toggleMaximize() {
|
||||
await appWindow.toggleMaximize();
|
||||
}
|
||||
|
||||
async function close() {
|
||||
await appWindow.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="titlebar" onmousedown={handleMouseDown}>
|
||||
<div class="titlebar-brand">
|
||||
<svg width="18" height="18" viewBox="0 0 48 48" fill="none">
|
||||
<rect width="48" height="48" rx="12" fill="var(--accent)" />
|
||||
<circle cx="16" cy="16" r="3.5" fill="white" opacity="0.9" />
|
||||
<circle cx="32" cy="16" r="3.5" fill="white" opacity="0.9" />
|
||||
<circle cx="16" cy="32" r="3.5" fill="white" opacity="0.9" />
|
||||
<circle cx="32" cy="32" r="3.5" fill="white" opacity="0.9" />
|
||||
<line x1="19" y1="18" x2="29" y2="30" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.7" />
|
||||
<line x1="29" y1="18" x2="19" y2="30" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.7" />
|
||||
</svg>
|
||||
<span class="titlebar-title">HelixNotes</span>
|
||||
</div>
|
||||
<div class="titlebar-actions">
|
||||
<button class="switch-vault-btn" onclick={() => ($vaultReady = false)} title="Switch Vault">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="switch-vault-btn" onclick={() => ($focusMode = true)} title="Focus mode">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="new-note-btn" onclick={onNewNote} title="New Note (Ctrl+N)">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
|
||||
</svg>
|
||||
New Note
|
||||
</button>
|
||||
</div>
|
||||
<div class="titlebar-controls">
|
||||
<button class="titlebar-btn" onclick={minimize} title="Minimize">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="titlebar-btn" onclick={toggleMaximize} title={maximized ? 'Restore' : 'Maximize'}>
|
||||
{#if maximized}
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<rect x="2.5" y="0.5" width="7" height="7" rx="1" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
<rect x="0.5" y="2.5" width="7" height="7" rx="1" fill="var(--bg-secondary)" stroke="currentColor" stroke-width="1.2" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<rect x="1" y="1" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
<button class="titlebar-btn titlebar-close" onclick={close} title="Close">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<line x1="1.5" y1="1.5" x2="8.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
|
||||
<line x1="8.5" y1="1.5" x2="1.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 34px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.titlebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-left: 14px;
|
||||
pointer-events: none;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.titlebar-title {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.titlebar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-right: 8px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.switch-vault-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.switch-vault-btn:hover {
|
||||
background: var(--bg-tertiary, var(--bg-hover));
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.new-note-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 12px 4px 10px;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||||
transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.new-note-btn:hover {
|
||||
background: var(--accent-hover);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.new-note-btn:active {
|
||||
transform: scale(0.97);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.titlebar-controls {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.titlebar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
|
||||
.titlebar-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.titlebar-close:hover {
|
||||
background: #e81123;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,263 @@
|
||||
<script lang="ts">
|
||||
import { open } from '@tauri-apps/plugin-dialog';
|
||||
import { getCurrentWindow } from '@tauri-apps/api/window';
|
||||
import { openVault, getAppConfig } from '$lib/api';
|
||||
import { appConfig, vaultReady } from '$lib/stores/app';
|
||||
import type { VaultConfig } from '$lib/types';
|
||||
|
||||
const appWindow = getCurrentWindow();
|
||||
|
||||
let recentVaults: VaultConfig[] = $derived($appConfig?.vaults ?? []);
|
||||
let loading = $state(false);
|
||||
let error = $state('');
|
||||
|
||||
async function pickFolder() {
|
||||
const selected = await open({ directory: true, multiple: false, title: 'Choose Notes Folder' });
|
||||
if (selected) {
|
||||
await openSelectedVault(selected as string);
|
||||
}
|
||||
}
|
||||
|
||||
async function openSelectedVault(path: string) {
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
await openVault(path);
|
||||
const config = await getAppConfig();
|
||||
$appConfig = config;
|
||||
$vaultReady = true;
|
||||
} catch (e) {
|
||||
error = String(e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="vault-picker" onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button, .picker-card')) appWindow.startDragging(); }}>
|
||||
<div class="window-controls">
|
||||
<button class="window-close" onclick={() => appWindow.close()} title="Close">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<line x1="1.5" y1="1.5" x2="8.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
|
||||
<line x1="8.5" y1="1.5" x2="1.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="picker-card">
|
||||
<div class="logo">
|
||||
<svg width="72" height="72" viewBox="0 0 48 48" fill="none">
|
||||
<rect width="48" height="48" rx="12" fill="var(--accent)" />
|
||||
<circle cx="16" cy="16" r="3.5" fill="white" opacity="0.9" />
|
||||
<circle cx="32" cy="16" r="3.5" fill="white" opacity="0.9" />
|
||||
<circle cx="16" cy="32" r="3.5" fill="white" opacity="0.9" />
|
||||
<circle cx="32" cy="32" r="3.5" fill="white" opacity="0.9" />
|
||||
<line x1="19" y1="18" x2="29" y2="30" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.7" />
|
||||
<line x1="29" y1="18" x2="19" y2="30" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1>HelixNotes</h1>
|
||||
<p class="subtitle">Local-first markdown notes</p>
|
||||
<p class="description">Your notes are stored as standard Markdown (.md) files. Pick any folder — existing .md files will be recognized automatically.</p>
|
||||
|
||||
{#if error}
|
||||
<div class="error">{error}</div>
|
||||
{/if}
|
||||
|
||||
<button class="btn-primary" onclick={pickFolder} disabled={loading}>
|
||||
{#if loading}
|
||||
Opening...
|
||||
{:else}
|
||||
Open Notes Folder
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if $appConfig?.active_vault}
|
||||
<button class="btn-back" onclick={() => ($vaultReady = true)}>
|
||||
Back
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if recentVaults.length > 0}
|
||||
<div class="recent">
|
||||
<span class="recent-label">Recent</span>
|
||||
{#each recentVaults as vault}
|
||||
<button class="vault-item" onclick={() => openSelectedVault(vault.path)}>
|
||||
<span class="vault-name">{vault.name}</span>
|
||||
<span class="vault-path">{vault.path}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.vault-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.window-controls {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.window-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
|
||||
.window-close:hover {
|
||||
background: #e81123;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.picker-card {
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
padding: 48px 32px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: color-mix(in srgb, var(--danger) 10%, transparent);
|
||||
color: var(--danger);
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.recent {
|
||||
margin-top: 32px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.recent-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-tertiary);
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.vault-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
margin-bottom: 6px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.vault-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.vault-name {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.vault-path {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
@@ -0,0 +1,97 @@
|
||||
import { writable, derived } from "svelte/store";
|
||||
import type {
|
||||
AppConfig,
|
||||
NoteEntry,
|
||||
NoteContent,
|
||||
NotebookEntry,
|
||||
VaultState,
|
||||
ViewMode,
|
||||
SortMode,
|
||||
} from "$lib/types";
|
||||
|
||||
// App state
|
||||
export const appConfig = writable<AppConfig | null>(null);
|
||||
export const vaultReady = writable(false);
|
||||
|
||||
// UI state
|
||||
export const viewMode = writable<ViewMode>("all");
|
||||
export const sortMode = writable<SortMode>("modified");
|
||||
export const sidebarCollapsed = writable(false);
|
||||
export const sidebarWidth = writable(220);
|
||||
export const notelistWidth = writable(280);
|
||||
export const searchQuery = writable("");
|
||||
export const showCommandPalette = writable(false);
|
||||
export const showSearch = writable(false);
|
||||
export const showSettings = writable(false);
|
||||
export const showInfo = writable(false);
|
||||
export const notebookIcons = writable<Record<string, string>>({});
|
||||
export const quickAccessPaths = writable<string[]>([]);
|
||||
export const collapsedNotebooks = writable<string[]>([]);
|
||||
|
||||
// Data
|
||||
export const notebooks = writable<NotebookEntry[]>([]);
|
||||
export const notes = writable<NoteEntry[]>([]);
|
||||
export const tags = writable<[string, number][]>([]);
|
||||
export const activeNote = writable<NoteContent | null>(null);
|
||||
export const activeNotePath = writable<string | null>(null);
|
||||
export const activeNotebook = writable<NotebookEntry | null>(null);
|
||||
export const activeTag = writable<string | null>(null);
|
||||
|
||||
// Editor state
|
||||
export const editorDirty = writable(false);
|
||||
export const sourceMode = writable(false);
|
||||
export const focusMode = writable(false);
|
||||
|
||||
// Theme
|
||||
export const theme = writable<string>("system");
|
||||
|
||||
// Derived
|
||||
export const sortedNotes = derived([notes, sortMode], ([$notes, $sortMode]) => {
|
||||
const pinned = $notes.filter((n) => n.meta.pinned);
|
||||
const unpinned = $notes.filter((n) => !n.meta.pinned);
|
||||
|
||||
const sortFn = (a: NoteEntry, b: NoteEntry) => {
|
||||
switch ($sortMode) {
|
||||
case "title":
|
||||
return a.meta.title.localeCompare(b.meta.title);
|
||||
case "created":
|
||||
return (
|
||||
new Date(b.meta.created).getTime() -
|
||||
new Date(a.meta.created).getTime()
|
||||
);
|
||||
case "modified":
|
||||
default:
|
||||
return (
|
||||
new Date(b.meta.modified).getTime() -
|
||||
new Date(a.meta.modified).getTime()
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return [...pinned.sort(sortFn), ...unpinned.sort(sortFn)];
|
||||
});
|
||||
|
||||
export const vaultState = derived(
|
||||
[
|
||||
activeNotePath,
|
||||
sidebarWidth,
|
||||
notelistWidth,
|
||||
sidebarCollapsed,
|
||||
collapsedNotebooks,
|
||||
],
|
||||
([
|
||||
$activeNotePath,
|
||||
$sidebarWidth,
|
||||
$notelistWidth,
|
||||
$sidebarCollapsed,
|
||||
$collapsedNotebooks,
|
||||
]) => {
|
||||
return {
|
||||
last_open_note: $activeNotePath,
|
||||
sidebar_width: $sidebarWidth,
|
||||
notelist_width: $notelistWidth,
|
||||
sidebar_collapsed: $sidebarCollapsed,
|
||||
collapsed_notebooks: $collapsedNotebooks,
|
||||
} satisfies VaultState;
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,132 @@
|
||||
export interface NoteMeta {
|
||||
id: string;
|
||||
title: string;
|
||||
tags: string[];
|
||||
pinned: boolean;
|
||||
created: string;
|
||||
modified: string;
|
||||
}
|
||||
|
||||
export interface NoteEntry {
|
||||
path: string;
|
||||
relative_path: string;
|
||||
meta: NoteMeta;
|
||||
preview: string;
|
||||
}
|
||||
|
||||
export interface NotebookEntry {
|
||||
name: string;
|
||||
path: string;
|
||||
relative_path: string;
|
||||
children: NotebookEntry[];
|
||||
note_count: number;
|
||||
}
|
||||
|
||||
export interface NoteContent {
|
||||
path: string;
|
||||
meta: NoteMeta;
|
||||
content: string;
|
||||
raw: string;
|
||||
}
|
||||
|
||||
export interface VaultConfig {
|
||||
path: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface AppConfig {
|
||||
vaults: VaultConfig[];
|
||||
active_vault: string | null;
|
||||
theme: string;
|
||||
accent_color: string | null;
|
||||
font_size: number | null;
|
||||
font_family: string | null;
|
||||
compact_notes: boolean;
|
||||
time_format: string;
|
||||
gpu_acceleration: boolean;
|
||||
autostart: boolean;
|
||||
pdf_preview: boolean;
|
||||
pdf_height: number;
|
||||
title_mode: string;
|
||||
hide_title_in_body: boolean;
|
||||
backup_enabled: boolean;
|
||||
backup_frequency: string;
|
||||
backup_max_count: number;
|
||||
backup_location: string | null;
|
||||
last_backup_time: string | null;
|
||||
backup_include_attachments: boolean;
|
||||
max_versions_per_note: number;
|
||||
ai_provider: string | null;
|
||||
ai_api_key: string | null;
|
||||
openai_api_key: string | null;
|
||||
ai_model: string;
|
||||
ai_writing_style: string | null;
|
||||
default_view_mode: boolean;
|
||||
show_tray_icon: boolean;
|
||||
enable_wiki_links: boolean;
|
||||
}
|
||||
|
||||
export interface VaultState {
|
||||
last_open_note: string | null;
|
||||
sidebar_width: number;
|
||||
notelist_width: number;
|
||||
sidebar_collapsed: boolean;
|
||||
collapsed_notebooks: string[];
|
||||
}
|
||||
|
||||
export interface SearchResult {
|
||||
path: string;
|
||||
title: string;
|
||||
snippet: string;
|
||||
score: number;
|
||||
}
|
||||
|
||||
export interface FileEvent {
|
||||
event_type: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
export interface ImportResult {
|
||||
files_converted: number;
|
||||
links_converted: number;
|
||||
}
|
||||
|
||||
export interface VaultStats {
|
||||
total_notes: number;
|
||||
total_attachments: number;
|
||||
notes_size: number;
|
||||
attachments_size: number;
|
||||
total_size: number;
|
||||
}
|
||||
|
||||
export interface BackupEntry {
|
||||
filename: string;
|
||||
path: string;
|
||||
size: number;
|
||||
created: string;
|
||||
}
|
||||
|
||||
export interface VersionEntry {
|
||||
timestamp: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export interface AiStreamEvent {
|
||||
event_type: string;
|
||||
text: string | null;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export interface NoteTitleEntry {
|
||||
title: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
export type SortMode = "modified" | "title" | "created";
|
||||
export type ViewMode =
|
||||
| "all"
|
||||
| "notebook"
|
||||
| "tag"
|
||||
| "trash"
|
||||
| "search"
|
||||
| "quickaccess";
|
||||
@@ -0,0 +1,7 @@
|
||||
export function debounce<T extends (...args: any[]) => any>(fn: T, ms: number): T {
|
||||
let timeout: ReturnType<typeof setTimeout>;
|
||||
return ((...args: any[]) => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => fn(...args), ms);
|
||||
}) as T;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
export function formatRelativeTime(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const seconds = Math.floor(diff / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (seconds < 60) return 'just now';
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
if (days < 7) return `${days}d ago`;
|
||||
|
||||
return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
export function formatDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleDateString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user