mirror of
https://gitlab.com/ArkHost/HelixNotes.git
synced 2026-07-24 15:55:55 +02:00
435 lines
14 KiB
Svelte
435 lines
14 KiB
Svelte
<script lang="ts">
|
|
import { showInfo, appConfig } from '$lib/stores/app';
|
|
import { getVaultStats } from '$lib/api';
|
|
import { openUrl } from '$lib/api';
|
|
import { getVersion } from '@tauri-apps/api/app';
|
|
import type { VaultStats } from '$lib/types';
|
|
|
|
const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
|
|
const isMobile = /android|iphone|ipad|ipod/i.test(navigator.userAgent);
|
|
|
|
let stats = $state<VaultStats | null>(null);
|
|
let activeTab = $state<'about' | 'shortcuts'>(isMobile ? 'about' : 'shortcuts');
|
|
let appVersion = $state('...');
|
|
|
|
getVersion().then(v => appVersion = v).catch(() => appVersion = '0.0.0');
|
|
|
|
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">
|
|
{#if !isMobile}
|
|
<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}
|
|
|
|
{#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">v{appVersion}</p>
|
|
<p class="app-description">A local 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">General</h4>
|
|
<div class="shortcut-row"><span class="shortcut-desc">New note</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>N</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Save</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>S</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Quick open</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>P</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Find in note</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>F</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Search vault</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Open note in new window</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>W</kbd></span></div>
|
|
|
|
<h4 class="shortcuts-group-title">Interface</h4>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Toggle sidebar</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>\</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Toggle dark / light theme</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Toggle focus mode</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>E</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Toggle read-only</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Toggle source / WYSIWYG</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>M</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Toggle fullscreen</span><span class="shortcut-keys"><kbd>F11</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Close panel / exit focus</span><span class="shortcut-keys"><kbd>Esc</kbd></span></div>
|
|
|
|
<h4 class="shortcuts-group-title">Navigation</h4>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Go back</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>←</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Go forward</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>→</kbd></span></div>
|
|
|
|
<h4 class="shortcuts-group-title">Formatting</h4>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Bold</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>B</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Italic</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>I</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Underline</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>U</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Strikethrough</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Code</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>E</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Link</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>K</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Undo</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Z</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Redo</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></span></div>
|
|
<div class="shortcut-row"><span class="shortcut-desc">Move line up / down</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>↑↓</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;
|
|
height: 80vh;
|
|
max-height: 600px;
|
|
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 16px;
|
|
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-top: 12px;
|
|
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;
|
|
}
|
|
|
|
/* Mobile */
|
|
@media (max-width: 600px) {
|
|
.info-panel {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
border-radius: 0;
|
|
border: none;
|
|
}
|
|
|
|
.info-header {
|
|
padding-top: calc(env(safe-area-inset-top, 12px) + 12px);
|
|
}
|
|
}
|
|
</style>
|