Compare commits

...
13 Commits
Author SHA1 Message Date
Yuri Karamian 3453d406fc v1.1.6 - Multi-window, single-instance file handling, line height setting 2026-02-23 11:16:16 +01:00
Yuri Karamian 73a53dcb85 Update README to v1.1.5, add screenshots 2026-02-21 23:40:18 +01:00
Yuri Karamian abac0985bc Update README to v1.1.5, add screenshots 2026-02-21 23:38:56 +01:00
Yuri Karamian af394c0b43 Update README to v1.1.5, add screenshots 2026-02-21 23:37:44 +01:00
Yuri Karamian 8f4f6f5f0e Scheduled backups, fixed settings/info panel sizing, added source mode shortcut, removed unused title mode setting 2026-02-21 22:46:52 +01:00
Yuri Karamian 74f1c7f6b0 v1.1.5 - Fix collapsible section collapsing when typing in content 2026-02-21 22:09:06 +01:00
Yuri Karamian 3b5cdf22eb v1.1.5 - Revert editor changes, fix is AppImage post-build pixbuf removal 2026-02-21 20:03:55 +01:00
Yuri Karamian 31f4867e91 Fix AppImage crash when inserting images by using Tauri native file dialog instead of GTK file chooser 2026-02-21 19:46:50 +01:00
Yuri Karamian 8baa976a02 v1.1.4 2026-02-19 22:59:37 +01:00
Yuri Karamian b4824973a5 v1.1.4 - Hide asset folders, notebook path in All Notes, nested notebook creation UX
- Hide asset folders (_res, _resources, _attachments, _assets, assets) from notebook listing
- Show notebook path in "All Notes" view
- Sub-notebook context menu + smart parent detection for nested notebook creation
2026-02-19 21:47:22 +01:00
Yuri Karamian a3229d451e v1.1.3 - Line numbers scroll fix, source mode undo/redo, Ctrl+K links, hard break fixes 2026-02-19 01:24:36 +01:00
Yuri Karamian c1faf0b0f5 v1.1.3 - Line numbers scroll fix, source mode undo/redo, Ctrl+K links, hard break fixes
- Line numbers scroll fix: source mode line numbers now scroll properly with content
- Source mode undo/redo: custom history stack for Ctrl+Z / Ctrl+Shift+Z in markdown mode
- Shift+Enter hard breaks in source mode (inserts trailing spaces + newline)
- Ctrl+K link shortcut: global keybinding for inserting/editing links
- Link modal improvements: auto-prepends https://, preserves selection range
- Hard break serialization fix: trailing spaces preserved in markdown output
- Drag prevention: prevents native text drag (copy-instead-of-move issue in Tauri webview)
2026-02-18 19:30:02 +01:00
Yuri Karamian 564c28904f Update README: add AUR and APT install instructions, bump to v1.1.2 2026-02-17 00:54:52 +01:00
30 changed files with 2430 additions and 526 deletions
+30 -8
View File
@@ -5,25 +5,37 @@ A local markdown note-taking app built with Tauri, SvelteKit, and Rust.
Your notes are stored as standard Markdown files on your local filesystem. Your notes are stored as standard Markdown files on your local filesystem.
No cloud, no lock-in. No cloud, no lock-in.
## Download ## Download (v1.1.5)
### Linux ### Linux
#### Arch / Manjaro / Fedora / openSUSE #### Arch / Manjaro (AUR)
[Download AppImage](https://download.helixnotes.com/releases/v1.1.1/HelixNotes_1.1.1_amd64.AppImage) ```bash
yay -S helixnotes-appimage-bin
```
#### Debian / Ubuntu / Mint #### Debian / Ubuntu / Mint (APT)
[Download .deb](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.1/HelixNotes_1.1.1_amd64.deb) — Ubuntu 22.04+ ```bash
curl -fsSL https://repo.arkhost.com/gpg.key | sudo gpg --dearmor -o /usr/share/keyrings/arkhost.gpg && echo "deb [signed-by=/usr/share/keyrings/arkhost.gpg arch=amd64] https://repo.arkhost.com stable main" | sudo tee /etc/apt/sources.list.d/helixnotes.list && sudo apt update && sudo apt install helix-notes
```
#### AppImage (Arch, Fedora 43+, openSUSE Tumbleweed)
[Download AppImage](https://download.helixnotes.com/releases/v1.1.5/HelixNotes_1.1.5_amd64.AppImage)
#### .deb (manual)
[Download .deb](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.5/HelixNotes_1.1.5_amd64.deb) — Ubuntu 22.04+
### Windows ### Windows
[Download Installer](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.1/HelixNotes_1.1.1_x64-setup.exe) — Windows 10/11 [Download Installer](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.5/HelixNotes_1.1.5_x64-setup.exe) — Windows 10/11
### macOS ### macOS
[Download .dmg](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.1/HelixNotes_1.1.1_x64.dmg) — macOS 12+ (Intel, runs on Apple Silicon via Rosetta) [Download .dmg](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.5/HelixNotes_1.1.5_x64.dmg) — macOS (Intel, runs on Apple Silicon via Rosetta)
--- ---
@@ -31,9 +43,10 @@ All releases: [codeberg.org/ArkHost/HelixNotes/releases](https://codeberg.org/Ar
## Features ## Features
- **Markdown editor** with rich formatting toolbar, slash commands, and source mode - **Markdown editor** with rich formatting toolbar, slash commands, source mode toggle, and code syntax highlighting
- **Wiki-links** — link notes with `[[Note Title]]` syntax - **Wiki-links** — link notes with `[[Note Title]]` syntax
- **Graph view** — visualize connections between your notes - **Graph view** — visualize connections between your notes
- **Outline panel** — heading navigation for long notes
- **Full-text search** powered by Tantivy - **Full-text search** powered by Tantivy
- **Math support** — KaTeX rendering for inline and block equations - **Math support** — KaTeX rendering for inline and block equations
- **Daily notes** — one-click button to create or open today's note - **Daily notes** — one-click button to create or open today's note
@@ -49,6 +62,8 @@ All releases: [codeberg.org/ArkHost/HelixNotes/releases](https://codeberg.org/Ar
- **View mode** — read-only toggle for distraction-free reading - **View mode** — read-only toggle for distraction-free reading
- **Local** — everything stays on your machine - **Local** — everything stays on your machine
Full documentation: [helixnotes.com/docs](https://helixnotes.com/docs.html)
## Tech Stack ## Tech Stack
- **Frontend**: SvelteKit (Svelte 5) + TailwindCSS v4 + TipTap v3 - **Frontend**: SvelteKit (Svelte 5) + TailwindCSS v4 + TipTap v3
@@ -77,6 +92,13 @@ pnpm tauri dev
pnpm tauri build pnpm tauri build
``` ```
## Screenshots
![Editor](https://cdn.helixnotes.com/assets/screenshots/screenshot-1.png)
![Settings](https://cdn.helixnotes.com/assets/screenshots/screenshot-2.png)
![Graph View](https://cdn.helixnotes.com/assets/screenshots/screenshot-3.png)
![AI Actions](https://cdn.helixnotes.com/assets/screenshots/screenshot-4.png)
## License ## License
[AGPL-3.0](https://codeberg.org/ArkHost/HelixNotes/src/branch/main/LICENSE) [AGPL-3.0](https://codeberg.org/ArkHost/HelixNotes/src/branch/main/LICENSE)
+1 -1
View File
@@ -2,7 +2,7 @@
"name": "helixnotes", "name": "helixnotes",
"private": true, "private": true,
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"version": "1.1.2", "version": "1.1.6",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
+454 -353
View File
File diff suppressed because it is too large Load Diff
+6 -3
View File
@@ -1,6 +1,6 @@
[package] [package]
name = "helixnotes" name = "helixnotes"
version = "1.1.2" version = "1.1.6"
description = "Local markdown note-taking app" description = "Local markdown note-taking app"
authors = ["HelixNotes"] authors = ["HelixNotes"]
license = "AGPL-3.0-or-later" license = "AGPL-3.0-or-later"
@@ -20,7 +20,6 @@ tauri-plugin-log = "2"
tauri-plugin-dialog = "2" tauri-plugin-dialog = "2"
tauri-plugin-fs = "2" tauri-plugin-fs = "2"
tauri-plugin-opener = "2" tauri-plugin-opener = "2"
tauri-plugin-updater = "2"
serde = { version = "1", features = ["derive"] } serde = { version = "1", features = ["derive"] }
serde_json = "1" serde_json = "1"
serde_yaml = "0.9" serde_yaml = "0.9"
@@ -35,7 +34,11 @@ tokio = { version = "1", features = ["full"] }
dirs = "6" dirs = "6"
regex = "1" regex = "1"
zip = { version = "2", default-features = false, features = ["deflate"] } zip = { version = "2", default-features = false, features = ["deflate"] }
reqwest = { version = "0.12", features = ["json", "stream"] } reqwest = { version = "0.12", default-features = false, features = ["json", "stream", "rustls-tls"] }
futures = "0.3" futures = "0.3"
rayon = "1" rayon = "1"
rustls = { version = "0.23", default-features = false, features = ["ring", "logging", "std", "tls12"] }
[target.'cfg(not(target_os = "android"))'.dependencies]
tauri-plugin-updater = "2"
tauri-plugin-single-instance = "2" tauri-plugin-single-instance = "2"
+4 -3
View File
@@ -2,7 +2,7 @@
"$schema": "../gen/schemas/desktop-schema.json", "$schema": "../gen/schemas/desktop-schema.json",
"identifier": "default", "identifier": "default",
"description": "HelixNotes default capabilities", "description": "HelixNotes default capabilities",
"windows": ["main"], "windows": ["main", "note-*"],
"permissions": [ "permissions": [
"core:default", "core:default",
"core:window:default", "core:window:default",
@@ -12,6 +12,8 @@
"core:window:allow-close", "core:window:allow-close",
"core:window:allow-is-maximized", "core:window:allow-is-maximized",
"core:window:allow-set-decorations", "core:window:allow-set-decorations",
"core:window:allow-set-title",
"core:webview:allow-create-webview-window",
"dialog:default", "dialog:default",
"dialog:allow-open", "dialog:allow-open",
"dialog:allow-save", "dialog:allow-save",
@@ -44,7 +46,6 @@
{ "url": "mailto:*" } { "url": "mailto:*" }
] ]
}, },
"opener:allow-reveal-item-in-dir", "opener:allow-reveal-item-in-dir"
"updater:default"
] ]
} }
+10
View File
@@ -0,0 +1,10 @@
{
"$schema": "../gen/schemas/desktop-schema.json",
"identifier": "desktop",
"description": "Desktop-only capabilities",
"platforms": ["linux", "macOS", "windows"],
"windows": ["main"],
"permissions": [
"updater:default"
]
}
+27 -2
View File
@@ -45,6 +45,12 @@ pub fn get_app_config(state: State<'_, AppState>) -> Result<AppConfig, String> {
Ok(config.clone()) Ok(config.clone())
} }
#[tauri::command]
pub fn get_pending_open_file(state: State<'_, AppState>) -> Result<Option<String>, String> {
let mut pending = state.pending_open_file.lock().map_err(|e| e.to_string())?;
Ok(pending.take())
}
#[tauri::command] #[tauri::command]
pub fn set_theme(state: State<'_, AppState>, theme: String) -> Result<(), String> { pub fn set_theme(state: State<'_, AppState>, theme: String) -> Result<(), String> {
let mut config = state.config.lock().map_err(|e| e.to_string())?; let mut config = state.config.lock().map_err(|e| e.to_string())?;
@@ -77,6 +83,14 @@ pub fn set_font_family(state: State<'_, AppState>, family: String) -> Result<(),
Ok(()) Ok(())
} }
#[tauri::command]
pub fn set_line_height(state: State<'_, AppState>, height: f64) -> Result<(), String> {
let mut config = state.config.lock().map_err(|e| e.to_string())?;
config.line_height = Some(height);
save_app_config(&config)?;
Ok(())
}
// ── Notebooks ── // ── Notebooks ──
#[tauri::command] #[tauri::command]
@@ -1450,9 +1464,20 @@ pub fn ai_ask(
// ── Helpers ── // ── Helpers ──
static ANDROID_CONFIG_DIR: std::sync::OnceLock<std::path::PathBuf> = std::sync::OnceLock::new();
pub fn set_android_config_dir(path: std::path::PathBuf) {
let _ = ANDROID_CONFIG_DIR.set(path);
}
fn app_config_path() -> Result<std::path::PathBuf, String> { fn app_config_path() -> Result<std::path::PathBuf, String> {
let config_dir = dirs::config_dir().ok_or("Cannot find config directory")?; let app_dir = if let Some(config_dir) = dirs::config_dir() {
let app_dir = config_dir.join("helixnotes"); config_dir.join("helixnotes")
} else if let Some(android_dir) = ANDROID_CONFIG_DIR.get() {
android_dir.join("helixnotes")
} else {
return Err("Config directory not available yet".to_string());
};
std::fs::create_dir_all(&app_dir).map_err(|e| e.to_string())?; std::fs::create_dir_all(&app_dir).map_err(|e| e.to_string())?;
Ok(app_dir.join("config.json")) Ok(app_dir.join("config.json"))
} }
+95 -12
View File
@@ -8,32 +8,33 @@ mod types;
mod vault; mod vault;
use state::AppState; use state::AppState;
#[allow(unused_imports)]
use tauri::{Emitter, Manager};
#[cfg(not(target_os = "android"))]
use tauri::{ use tauri::{
image::Image, image::Image,
menu::{MenuBuilder, MenuItemBuilder}, menu::{MenuBuilder, MenuItemBuilder},
tray::TrayIconBuilder, tray::TrayIconBuilder,
Manager,
}; };
#[cfg_attr(mobile, tauri::mobile_entry_point)] #[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() { pub fn run() {
rustls::crypto::ring::default_provider()
.install_default()
.expect("Failed to install rustls crypto provider");
let config = commands::load_app_config(); let config = commands::load_app_config();
#[cfg(not(target_os = "android"))]
let show_tray = config.show_tray_icon; let show_tray = config.show_tray_icon;
#[cfg(not(target_os = "android"))]
let close_to_tray = config.close_to_tray && show_tray; let close_to_tray = config.close_to_tray && show_tray;
let app_state = AppState::new(config); let app_state = AppState::new(config);
let mut builder = tauri::Builder::default() let mut builder = tauri::Builder::default()
.plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
if let Some(window) = app.get_webview_window("main") {
let _ = window.show();
let _ = window.unminimize();
let _ = window.set_focus();
}
}))
.plugin(tauri_plugin_dialog::init()) .plugin(tauri_plugin_dialog::init())
.plugin(tauri_plugin_fs::init()) .plugin(tauri_plugin_fs::init())
.plugin(tauri_plugin_opener::init()) .plugin(tauri_plugin_opener::init())
.plugin(tauri_plugin_updater::Builder::new().build())
.setup(move |app| { .setup(move |app| {
if cfg!(debug_assertions) { if cfg!(debug_assertions) {
app.handle().plugin( app.handle().plugin(
@@ -43,10 +44,43 @@ pub fn run() {
)?; )?;
} }
// On Android, set config dir from Tauri's path resolver
#[cfg(target_os = "android")]
{
if let Ok(config_dir) = app.path().config_dir() {
commands::set_android_config_dir(config_dir);
} else if let Ok(data_dir) = app.path().data_dir() {
commands::set_android_config_dir(data_dir);
}
}
#[cfg(not(target_os = "android"))]
if show_tray { if show_tray {
setup_tray(app)?; setup_tray(app)?;
} }
// Check CLI args for a .md file path on initial launch
#[cfg(not(target_os = "android"))]
{
let file_arg = std::env::args().skip(1).find(|a| {
let a = a.trim();
!a.starts_with('-') && a.ends_with(".md")
});
if let Some(path) = file_arg {
let resolved = if std::path::Path::new(&path).is_absolute() {
std::path::PathBuf::from(&path)
} else {
std::env::current_dir().unwrap_or_default().join(&path)
};
if let Some(resolved_str) = resolved.to_str() {
let app_state = app.state::<AppState>();
let _ = app_state.pending_open_file.lock().map(|mut p| {
*p = Some(resolved_str.to_string());
});
}
}
}
Ok(()) Ok(())
}) })
.manage(app_state) .manage(app_state)
@@ -57,6 +91,7 @@ pub fn run() {
commands::set_accent_color, commands::set_accent_color,
commands::set_font_size, commands::set_font_size,
commands::set_font_family, commands::set_font_family,
commands::set_line_height,
commands::get_notebooks, commands::get_notebooks,
commands::create_notebook, commands::create_notebook,
commands::rename_notebook, commands::rename_notebook,
@@ -105,14 +140,61 @@ pub fn run() {
commands::test_ai_connection, commands::test_ai_connection,
commands::ai_ask, commands::ai_ask,
commands::get_install_type, commands::get_install_type,
commands::get_pending_open_file,
]); ]);
if close_to_tray { #[cfg(not(target_os = "android"))]
builder = builder.on_window_event(|window, event| { {
if let tauri::WindowEvent::CloseRequested { api, .. } = event { builder = builder.plugin(tauri_plugin_single_instance::init(|app, args, cwd| {
// Always show/focus the main window
if let Some(window) = app.get_webview_window("main") {
let _ = window.show();
let _ = window.unminimize();
let _ = window.set_focus();
}
// Extract .md file path from args (args[0] is the binary)
let file_path = args.iter().skip(1).find(|arg| {
let a = arg.trim();
!a.starts_with('-') && a.ends_with(".md")
});
if let Some(path) = file_path {
let resolved = if std::path::Path::new(path.as_str()).is_absolute() {
std::path::PathBuf::from(path)
} else {
std::path::Path::new(&cwd).join(path)
};
if let Some(resolved_str) = resolved.to_str() {
let _ = app.emit("open-file", resolved_str.to_string());
}
}
}));
builder = builder.plugin(tauri_plugin_updater::Builder::new().build());
builder = builder.on_window_event(move |window, event| {
match event {
tauri::WindowEvent::CloseRequested { api, .. } => {
// Only hide to tray for the main window
if close_to_tray && window.label() == "main" {
api.prevent_close(); api.prevent_close();
let _ = window.hide(); let _ = window.hide();
} }
}
tauri::WindowEvent::Destroyed => {
// When main window is destroyed, close all note windows
if window.label() == "main" {
let app = window.app_handle();
for (label, win) in app.webview_windows() {
if label.starts_with("note-") {
let _ = win.close();
}
}
}
}
_ => {}
}
}); });
} }
@@ -121,6 +203,7 @@ pub fn run() {
.expect("error while running tauri application"); .expect("error while running tauri application");
} }
#[cfg(not(target_os = "android"))]
fn setup_tray(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> { fn setup_tray(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> {
let show = MenuItemBuilder::with_id("show", "Show HelixNotes").build(app)?; let show = MenuItemBuilder::with_id("show", "Show HelixNotes").build(app)?;
let quit = MenuItemBuilder::with_id("quit", "Quit").build(app)?; let quit = MenuItemBuilder::with_id("quit", "Quit").build(app)?;
+26 -9
View File
@@ -5,7 +5,10 @@ use std::fs;
use std::path::Path; use std::path::Path;
use std::sync::Mutex; use std::sync::Mutex;
use tantivy::collector::TopDocs; use tantivy::collector::TopDocs;
#[cfg(not(target_os = "android"))]
use tantivy::directory::MmapDirectory; use tantivy::directory::MmapDirectory;
#[cfg(target_os = "android")]
use tantivy::directory::RamDirectory;
use tantivy::query::QueryParser; use tantivy::query::QueryParser;
use tantivy::schema::*; use tantivy::schema::*;
use tantivy::{Index, IndexWriter, TantivyDocument}; use tantivy::{Index, IndexWriter, TantivyDocument};
@@ -24,9 +27,6 @@ pub struct SearchIndex {
impl SearchIndex { impl SearchIndex {
pub fn new(vault_path: &str) -> Result<Self, String> { pub fn new(vault_path: &str) -> Result<Self, String> {
let index_dir = helixnotes_dir(vault_path).join("search_index");
fs::create_dir_all(&index_dir).map_err(|e| e.to_string())?;
let mut schema_builder = Schema::builder(); let mut schema_builder = Schema::builder();
let path_field = schema_builder.add_text_field("path", STRING | STORED); let path_field = schema_builder.add_text_field("path", STRING | STORED);
let title_field = schema_builder.add_text_field("title", TEXT | STORED); let title_field = schema_builder.add_text_field("title", TEXT | STORED);
@@ -34,12 +34,27 @@ impl SearchIndex {
let tags_field = schema_builder.add_text_field("tags", TEXT | STORED); let tags_field = schema_builder.add_text_field("tags", TEXT | STORED);
let schema = schema_builder.build(); let schema = schema_builder.build();
// Android: use in-memory index (flock doesn't work on /storage/emulated FUSE filesystem)
// Desktop: use mmap directory for persistent index on disk
#[cfg(target_os = "android")]
let index = {
let dir = RamDirectory::create();
Index::open_or_create(dir, schema.clone()).map_err(|e| e.to_string())?
};
#[cfg(not(target_os = "android"))]
let index = {
let index_dir = helixnotes_dir(vault_path).join("search_index");
fs::create_dir_all(&index_dir).map_err(|e| e.to_string())?;
let dir = MmapDirectory::open(&index_dir).map_err(|e| e.to_string())?; let dir = MmapDirectory::open(&index_dir).map_err(|e| e.to_string())?;
let index = Index::open_or_create(dir, schema.clone()).map_err(|e| e.to_string())?; Index::open_or_create(dir, schema.clone()).map_err(|e| e.to_string())?
};
let writer = index #[cfg(target_os = "android")]
.writer(50_000_000) let heap_size = 15_000_000;
.map_err(|e| e.to_string())?; #[cfg(not(target_os = "android"))]
let heap_size = 50_000_000;
let writer = index.writer(heap_size).map_err(|e| e.to_string())?;
Ok(Self { Ok(Self {
index, index,
@@ -135,8 +150,10 @@ impl SearchIndex {
let reader = self.index.reader().map_err(|e| e.to_string())?; let reader = self.index.reader().map_err(|e| e.to_string())?;
let searcher = reader.searcher(); let searcher = reader.searcher();
let query_parser = let query_parser = QueryParser::for_index(
QueryParser::for_index(&self.index, vec![self.title_field, self.body_field, self.tags_field]); &self.index,
vec![self.title_field, self.body_field, self.tags_field],
);
let query = query_parser let query = query_parser
.parse_query(query_str) .parse_query(query_str)
+2
View File
@@ -9,6 +9,7 @@ pub struct AppState {
pub search_index: Mutex<Option<SearchIndex>>, pub search_index: Mutex<Option<SearchIndex>>,
pub watcher: Mutex<Option<RecommendedWatcher>>, pub watcher: Mutex<Option<RecommendedWatcher>>,
pub importing: AtomicBool, pub importing: AtomicBool,
pub pending_open_file: Mutex<Option<String>>,
} }
impl AppState { impl AppState {
@@ -18,6 +19,7 @@ impl AppState {
search_index: Mutex::new(None), search_index: Mutex::new(None),
watcher: Mutex::new(None), watcher: Mutex::new(None),
importing: AtomicBool::new(false), importing: AtomicBool::new(false),
pending_open_file: Mutex::new(None),
} }
} }
} }
+3
View File
@@ -54,6 +54,8 @@ pub struct AppConfig {
#[serde(default)] #[serde(default)]
pub font_family: Option<String>, pub font_family: Option<String>,
#[serde(default)] #[serde(default)]
pub line_height: Option<f64>,
#[serde(default)]
pub compact_notes: bool, pub compact_notes: bool,
#[serde(default)] #[serde(default)]
pub time_format: String, pub time_format: String,
@@ -142,6 +144,7 @@ impl Default for AppConfig {
accent_color: None, accent_color: None,
font_size: None, font_size: None,
font_family: None, font_family: None,
line_height: None,
compact_notes: false, compact_notes: false,
time_format: "relative".to_string(), time_format: "relative".to_string(),
gpu_acceleration: true, gpu_acceleration: true,
+27 -2
View File
@@ -77,6 +77,29 @@ pub fn parse_note(raw: &str, filename: &str) -> (NoteMeta, String) {
(meta, content) (meta, content)
} }
/// Ensure the body starts with `# Title` heading for external app compatibility.
/// If the body already starts with `# Title`, leave it as-is.
fn ensure_title_heading(body: &str, title: &str) -> String {
let trimmed = body.trim_start();
// Check if body already starts with `# Title`
if let Some(rest) = trimmed.strip_prefix("# ") {
let first_line_end = rest.find('\n').unwrap_or(rest.len());
let heading_text = rest[..first_line_end].trim();
if heading_text.eq_ignore_ascii_case(title.trim()) {
return body.to_string();
}
}
// Don't add heading to empty notes (new/blank notes)
if trimmed.is_empty() {
return body.to_string();
}
// Prepend `# Title` heading
format!("# {}\n\n{}", title, body)
}
pub fn serialize_frontmatter(meta: &NoteMeta) -> String { pub fn serialize_frontmatter(meta: &NoteMeta) -> String {
let tags_str = if meta.tags.is_empty() { let tags_str = if meta.tags.is_empty() {
"[]".to_string() "[]".to_string()
@@ -104,7 +127,8 @@ pub fn serialize_frontmatter(meta: &NoteMeta) -> String {
pub fn update_note_raw(meta: &NoteMeta, body: &str) -> String { pub fn update_note_raw(meta: &NoteMeta, body: &str) -> String {
let fm = serialize_frontmatter(meta); let fm = serialize_frontmatter(meta);
format!("{}{}", fm, body) let body_with_heading = ensure_title_heading(body, &meta.title);
format!("{}{}", fm, body_with_heading)
} }
/// Merge NoteMeta fields into existing frontmatter, preserving unknown YAML keys. /// Merge NoteMeta fields into existing frontmatter, preserving unknown YAML keys.
@@ -163,7 +187,8 @@ pub fn merge_frontmatter(original_raw: &str, meta: &NoteMeta, body: &str) -> Str
Err(_) => return update_note_raw(meta, body), Err(_) => return update_note_raw(meta, body),
}; };
format!("---\n{}---\n{}", yaml_str, body) let body_with_heading = ensure_title_heading(body, &meta.title);
format!("---\n{}---\n{}", yaml_str, body_with_heading)
} }
fn filename_to_title(filename: &str) -> String { fn filename_to_title(filename: &str) -> String {
+7 -1
View File
@@ -114,7 +114,13 @@ fn count_notes_in_dir(dir: &Path) -> usize {
fn is_hidden(path: &Path) -> bool { fn is_hidden(path: &Path) -> bool {
path.file_name() path.file_name()
.and_then(|n| n.to_str()) .and_then(|n| n.to_str())
.map(|n| n.starts_with('.')) .map(|n| {
n.starts_with('.')
|| matches!(
n,
"_res" | "_resources" | "_attachments" | "_assets" | "assets" | "node_modules"
)
})
.unwrap_or(false) .unwrap_or(false)
} }
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"$schema": "../node_modules/@tauri-apps/cli/config.schema.json", "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
"productName": "HelixNotes", "productName": "HelixNotes",
"version": "1.1.2", "version": "1.1.6",
"identifier": "com.helixnotes.app", "identifier": "com.helixnotes.app",
"build": { "build": {
"frontendDist": "../build", "frontendDist": "../build",
+21
View File
@@ -158,3 +158,24 @@ body.resizing .ProseMirror {
body.resizing { body.resizing {
user-select: none; user-select: none;
} }
/* ── Mobile (Android/iOS) ── */
@media (max-width: 768px) {
html,
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
::-webkit-scrollbar {
display: none;
}
.resize-handle {
display: none !important;
}
}
+4 -1
View File
@@ -2,7 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no, maximum-scale=1"
/>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
+8
View File
@@ -38,6 +38,10 @@ export async function setFontFamily(family: string): Promise<void> {
return invoke("set_font_family", { family }); return invoke("set_font_family", { family });
} }
export async function setLineHeight(height: number): Promise<void> {
return invoke("set_line_height", { height });
}
export async function getNotebooks(): Promise<NotebookEntry[]> { export async function getNotebooks(): Promise<NotebookEntry[]> {
return invoke("get_notebooks"); return invoke("get_notebooks");
} }
@@ -330,3 +334,7 @@ export async function aiAsk(
export async function getInstallType(): Promise<string> { export async function getInstallType(): Promise<string> {
return invoke("get_install_type"); return invoke("get_install_type");
} }
export async function getPendingOpenFile(): Promise<string | null> {
return invoke("get_pending_open_file");
}
+331 -5
View File
@@ -23,26 +23,60 @@
readOnly, readOnly,
activeNote, activeNote,
activeNotePath, activeNotePath,
activeNotebook,
editorDirty, editorDirty,
showInfo, showInfo,
showSettings, showSettings,
sourceMode sourceMode,
mobileView,
appConfig
} from '$lib/stores/app'; } from '$lib/stores/app';
const appWindow = getCurrentWindow(); const appWindow = getCurrentWindow();
const isMac = navigator.platform.startsWith('Mac'); const isMac = navigator.platform.startsWith('Mac');
import { loadVaultState, saveVaultState, readNote, createDailyNote } from '$lib/api'; const isMobile = /android|ios/i.test(navigator.userAgent);
import { loadVaultState, saveVaultState, readNote, createDailyNote, createBackup, getPendingOpenFile } from '$lib/api';
import { debounce } from '$lib/utils/debounce'; import { debounce } from '$lib/utils/debounce';
import { openNoteWindow } from '$lib/utils/window';
import { get } from 'svelte/store';
import type { VaultState, FileEvent } from '$lib/types'; import type { VaultState, FileEvent } from '$lib/types';
let sidebar: Sidebar; let sidebar: Sidebar;
let noteList: NoteList; let noteList: NoteList;
let editor: Editor; let editor: Editor;
let unlistenFileChange: (() => void) | null = null; let unlistenFileChange: (() => void) | null = null;
let unlistenOpenFile: (() => void) | null = null;
let backupInterval: ReturnType<typeof setInterval> | null = null;
let navigatingFromHistory = false; let navigatingFromHistory = false;
let noteHistory: string[] = []; let noteHistory: string[] = [];
let noteHistoryIndex = -1; let noteHistoryIndex = -1;
function parseFrequencyMs(freq: string): number {
switch (freq) {
case '6h': return 6 * 60 * 60 * 1000;
case '12h': return 12 * 60 * 60 * 1000;
case '7d': return 7 * 24 * 60 * 60 * 1000;
case '24h': default: return 24 * 60 * 60 * 1000;
}
}
async function checkScheduledBackup() {
const config = get(appConfig);
if (!config?.backup_enabled) return;
const interval = parseFrequencyMs(config.backup_frequency);
const last = config.last_backup_time ? new Date(config.last_backup_time).getTime() : 0;
if (Date.now() - last >= interval) {
const unlisten = await listen('backup-done', (event: any) => {
if (event.payload?.success) {
const cur = get(appConfig);
if (cur) appConfig.set({ ...cur, last_backup_time: new Date().toISOString() });
}
unlisten();
});
try { await createBackup(); } catch (_) { unlisten(); }
}
}
// Track note navigation in history stack // Track note navigation in history stack
$effect(() => { $effect(() => {
const path = $activeNotePath; const path = $activeNotePath;
@@ -73,6 +107,22 @@
}); });
} }
async function handleOpenFile(filePath: string) {
if (!filePath || !filePath.endsWith('.md')) return;
const config = get(appConfig);
const vaultRoot = config?.active_vault;
if (!vaultRoot || !filePath.startsWith(vaultRoot)) return;
try {
const content = await readNote(filePath);
$activeNote = content;
$activeNotePath = filePath;
$editorDirty = false;
editor?.loadNote(filePath, content.content);
} catch (e) {
console.error('Failed to open file:', e);
}
}
const persistState = debounce(async () => { const persistState = debounce(async () => {
const state: VaultState = { const state: VaultState = {
last_open_note: null, last_open_note: null,
@@ -98,15 +148,19 @@
function handleNoteSelected(path: string, content: string) { function handleNoteSelected(path: string, content: string) {
editor?.loadNote(path, content); editor?.loadNote(path, content);
if (isMobile) $mobileView = 'editor';
} }
function handleViewChanged() { function handleViewChanged() {
noteList?.refresh(true); noteList?.refresh(true);
if (isMobile) $mobileView = 'notelist';
} }
async function createAndFocusNote() { async function createAndFocusNote() {
if (isMobile && $mobileView !== 'notelist') $mobileView = 'notelist';
await noteList?.handleCreateNote(); await noteList?.handleCreateNote();
editor?.focusTitle(); editor?.focusTitle();
if (isMobile) $mobileView = 'editor';
} }
async function handleDailyNote() { async function handleDailyNote() {
@@ -119,11 +173,17 @@
editor?.loadNote(entry.path, content.content); editor?.loadNote(entry.path, content.content);
noteList?.refresh(); noteList?.refresh();
sidebar?.refresh(); sidebar?.refresh();
if (isMobile) $mobileView = 'editor';
} catch (e) { } catch (e) {
console.error('Failed to create/open daily note:', e); console.error('Failed to create/open daily note:', e);
} }
} }
function mobileBack() {
if ($mobileView === 'editor') $mobileView = 'notelist';
else if ($mobileView === 'notelist') $mobileView = 'sidebar';
}
function handleMouseDown(e: MouseEvent) { function handleMouseDown(e: MouseEvent) {
if (e.button === 3) { e.preventDefault(); navigateHistory(-1); } if (e.button === 3) { e.preventDefault(); navigateHistory(-1); }
if (e.button === 4) { e.preventDefault(); navigateHistory(1); } if (e.button === 4) { e.preventDefault(); navigateHistory(1); }
@@ -170,10 +230,20 @@
e.preventDefault(); e.preventDefault();
editor?.forceSave(); editor?.forceSave();
} }
if (mod && e.key === 'k' && !e.shiftKey && $activeNotePath && !$sourceMode) {
e.preventDefault();
editor?.addLinkFromToolbar();
}
if (mod && e.shiftKey && e.key === 'M') { if (mod && e.shiftKey && e.key === 'M') {
e.preventDefault(); e.preventDefault();
$sourceMode = !$sourceMode; $sourceMode = !$sourceMode;
} }
if (mod && e.shiftKey && e.key === 'W') {
e.preventDefault();
if ($activeNotePath && $activeNote) {
openNoteWindow($activeNotePath, $activeNote.meta.title);
}
}
if (e.key === 'Escape') { if (e.key === 'Escape') {
if ($showSettings) $showSettings = false; if ($showSettings) $showSettings = false;
else if ($showInfo) $showInfo = false; else if ($showInfo) $showInfo = false;
@@ -222,16 +292,150 @@
await sidebar?.refresh(); await sidebar?.refresh();
await noteList?.refresh(true); await noteList?.refresh(true);
}); });
// Listen for file open events (from single-instance or OS file associations)
unlistenOpenFile = await listen<string>('open-file', async (event) => {
await handleOpenFile(event.payload);
});
// Check for pending file from first-launch CLI args
try {
const pending = await getPendingOpenFile();
if (pending) await handleOpenFile(pending);
} catch (_) {}
// Scheduled backup: check on startup and every 5 minutes
checkScheduledBackup();
backupInterval = setInterval(checkScheduledBackup, 5 * 60 * 1000);
}); });
onDestroy(() => { onDestroy(() => {
unlistenFileChange?.(); unlistenFileChange?.();
unlistenOpenFile?.();
if (backupInterval) clearInterval(backupInterval);
}); });
</script> </script>
<svelte:window onkeydown={handleKeydown} onmousedown={handleMouseDown} /> <svelte:window onkeydown={handleKeydown} onmousedown={isMobile ? undefined : handleMouseDown} />
<div class="app-shell"> {#if isMobile}
<!-- ═══ MOBILE LAYOUT ═══ -->
<div class="mobile-shell">
<!-- Mobile Header -->
<div class="mobile-header">
{#if $mobileView !== 'sidebar'}
<button class="mobile-header-btn" onclick={mobileBack}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 18l-6-6 6-6"/>
</svg>
</button>
{:else}
<div class="mobile-header-brand">
<svg width="22" height="22" 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" />
</svg>
</div>
{/if}
<span class="mobile-header-title">
{#if $mobileView === 'sidebar'}
HelixNotes
{:else if $mobileView === 'notelist'}
{$activeNotebook?.name || 'All Notes'}
{:else}
{$activeNote?.meta.title || 'Untitled'}
{/if}
</span>
<div class="mobile-header-actions">
{#if $mobileView === 'editor'}
<button class="mobile-header-btn" class:active={$readOnly} onclick={() => ($readOnly = !$readOnly)}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
{#if $readOnly}
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
<circle cx="12" cy="12" r="3" />
{:else}
<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" />
{/if}
</svg>
</button>
{:else}
<button class="mobile-header-btn" onclick={createAndFocusNote}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<path d="M12 5v14M5 12h14" />
</svg>
</button>
{/if}
<button class="mobile-header-btn" onclick={() => ($showInfo = true)} title="Info">
<svg width="18" height="18" 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>
<button class="mobile-header-btn" onclick={() => ($showSettings = true)} title="Settings">
<svg width="18" height="18" 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 01-2.83 2.83l-.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>
<!-- Mobile Content -->
<div class="mobile-content">
<div class="mobile-panel" class:active={$mobileView === 'sidebar'}>
<Sidebar bind:this={sidebar} onViewChanged={handleViewChanged} />
</div>
<div class="mobile-panel" class:active={$mobileView === 'notelist'}>
<NoteList bind:this={noteList} onNoteSelected={handleNoteSelected} onNoteMoved={() => sidebar?.refresh()} />
</div>
<div class="mobile-panel" class:active={$mobileView === 'editor'}>
<Editor bind:this={editor} />
</div>
</div>
<!-- Mobile Bottom Nav -->
{#if $mobileView !== 'editor'}
<div class="mobile-bottom-nav">
<button class="mobile-nav-item" class:active={$mobileView === 'sidebar'} onclick={() => ($mobileView = 'sidebar')}>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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>
<span>Notebooks</span>
</button>
<button class="mobile-nav-item" onclick={() => $showSearch = true}>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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>
<span>Search</span>
</button>
<button class="mobile-nav-item" onclick={handleDailyNote}>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
<line x1="16" y1="2" x2="16" y2="6" />
<line x1="8" y1="2" x2="8" y2="6" />
<line x1="3" y1="10" x2="21" y2="10" />
</svg>
<span>Daily</span>
</button>
<button class="mobile-nav-item" onclick={() => ($showSettings = true)}>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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 01-2.83 2.83l-.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>
<span>Settings</span>
</button>
</div>
{/if}
</div>
{:else}
<!-- ═══ DESKTOP LAYOUT ═══ -->
<div class="app-shell">
{#if $focusMode} {#if $focusMode}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="focus-topbar" class:macos={isMac} onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button')) appWindow.startDragging(); }}> <div class="focus-topbar" class:macos={isMac} onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button')) appWindow.startDragging(); }}>
@@ -291,7 +495,8 @@
<Editor bind:this={editor} /> <Editor bind:this={editor} />
</div> </div>
</div> </div>
</div> </div>
{/if}
<SearchPanel /> <SearchPanel />
<CommandPalette /> <CommandPalette />
@@ -299,6 +504,7 @@
<InfoPanel /> <InfoPanel />
<style> <style>
/* ═══ DESKTOP STYLES ═══ */
.app-shell { .app-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -390,4 +596,124 @@
.focus-topbar.macos { .focus-topbar.macos {
padding-left: 78px; padding-left: 78px;
} }
/* ═══ MOBILE STYLES ═══ */
.mobile-shell {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background: var(--bg-primary);
}
.mobile-header {
display: flex;
align-items: center;
height: 52px;
padding: 0 8px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
gap: 4px;
}
.mobile-header-brand {
display: flex;
align-items: center;
padding: 0 8px;
}
.mobile-header-title {
flex: 1;
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 4px;
}
.mobile-header-actions {
display: flex;
align-items: center;
gap: 2px;
}
.mobile-header-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: none;
color: var(--text-secondary);
border-radius: 10px;
cursor: pointer;
}
.mobile-header-btn:active {
background: var(--bg-hover);
}
.mobile-header-btn.active {
color: var(--accent);
}
.mobile-content {
flex: 1;
overflow: hidden;
position: relative;
}
.mobile-panel {
position: absolute;
inset: 0;
overflow: hidden;
visibility: hidden;
pointer-events: none;
display: flex;
flex-direction: column;
}
.mobile-panel.active {
visibility: visible;
pointer-events: auto;
}
.mobile-bottom-nav {
display: flex;
align-items: center;
justify-content: space-around;
height: 56px;
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
flex-shrink: 0;
padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 16px;
border: none;
background: none;
color: var(--text-tertiary);
font-size: 10px;
font-weight: 500;
cursor: pointer;
border-radius: 8px;
transition: color 0.15s;
}
.mobile-nav-item:active {
background: var(--bg-hover);
}
.mobile-nav-item.active {
color: var(--accent);
}
</style> </style>
+462 -36
View File
@@ -39,19 +39,32 @@
import { openFile, copyFileTo } from '$lib/api'; import { openFile, copyFileTo } from '$lib/api';
import { save as saveDialog } from '@tauri-apps/plugin-dialog'; import { save as saveDialog } from '@tauri-apps/plugin-dialog';
import { activeNote, activeNotePath, appConfig, editorDirty, sourceMode, focusMode, readOnly, quickAccessPaths, notes } from '$lib/stores/app'; import { activeNote, activeNotePath, appConfig, editorDirty, sourceMode, focusMode, readOnly, quickAccessPaths, notes } from '$lib/stores/app';
import { saveNote, saveImage, saveAttachment, addQuickAccess, removeQuickAccess, getQuickAccess, getNoteVersions, getNoteVersionContent, createVersion, aiAsk, getAllNoteTitles, readNote } from '$lib/api'; import { saveNote, saveImage, saveAttachment, addQuickAccess, removeQuickAccess, getQuickAccess, getNoteVersions, getNoteVersionContent, createVersion, aiAsk, getAllNoteTitles, readNote, renameNote } from '$lib/api';
import type { VersionEntry, AiStreamEvent, NoteTitleEntry } from '$lib/types'; import type { VersionEntry, AiStreamEvent, NoteTitleEntry } from '$lib/types';
import { listen } from '@tauri-apps/api/event'; import { listen } from '@tauri-apps/api/event';
import { debounce } from '$lib/utils/debounce'; import { debounce } from '$lib/utils/debounce';
import GraphView from './GraphView.svelte'; import GraphView from './GraphView.svelte';
const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'; const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
const isMobile = /android|ios/i.test(navigator.userAgent);
// Track virtual keyboard height on mobile via visualViewport
let keyboardHeight = $state(0);
if (isMobile && typeof window !== 'undefined' && window.visualViewport) {
const vv = window.visualViewport;
const update = () => { keyboardHeight = Math.max(0, Math.round(window.innerHeight - vv.height)); };
vv.addEventListener('resize', update);
vv.addEventListener('scroll', update);
}
let editorElement = $state<HTMLDivElement>(null!); let editorElement = $state<HTMLDivElement>(null!);
let sourceElement = $state<HTMLTextAreaElement>(null!); let sourceElement = $state<HTMLTextAreaElement>(null!);
let editor: Editor | null = null; let editor: Editor | null = null;
let editorReady = $state(false); let editorReady = $state(false);
let sourceContent = $state(''); let sourceContent = $state('');
let sourceHistory: Array<{ content: string; cursor: number }> = [];
let sourceHistoryIndex = -1;
let sourceHistoryTimer: ReturnType<typeof setTimeout> | null = null;
let loadedPath = ''; let loadedPath = '';
let pendingContent = $state<string | null>(null); let pendingContent = $state<string | null>(null);
let ignoreNextUpdate = false; let ignoreNextUpdate = false;
@@ -181,6 +194,8 @@
let linkModal = $state(false); let linkModal = $state(false);
let linkModalUrl = $state(''); let linkModalUrl = $state('');
let linkModalInput = $state<HTMLInputElement>(null!); let linkModalInput = $state<HTMLInputElement>(null!);
let linkSelectionFrom = 0;
let linkSelectionTo = 0;
let textContextMenu = $state<{ x: number; y: number } | null>(null); let textContextMenu = $state<{ x: number; y: number } | null>(null);
let tableContextMenu = $state<{ x: number; y: number } | null>(null); let tableContextMenu = $state<{ x: number; y: number } | null>(null);
let tablePickerOpen = $state(false); let tablePickerOpen = $state(false);
@@ -1195,6 +1210,7 @@
if (editor) editor.setEditable(!shouldBeReadOnly); if (editor) editor.setEditable(!shouldBeReadOnly);
if ($sourceMode) { if ($sourceMode) {
sourceContent = stripTitleH1(content); sourceContent = stripTitleH1(content);
resetSourceHistory(sourceContent);
isLoadingNote = false; isLoadingNote = false;
} else if (editorElement && editor) { } else if (editorElement && editor) {
// Editor already exists, just swap content // Editor already exists, just swap content
@@ -1470,7 +1486,7 @@
} else if (child.type.name === 'mathInline') { } else if (child.type.name === 'mathInline') {
parts.push(`$${child.attrs.tex || ''}$`); parts.push(`$${child.attrs.tex || ''}$`);
} else if (child.type.name === 'hardBreak') { } else if (child.type.name === 'hardBreak') {
parts.push('\n'); parts.push(' \n');
} }
}); });
return parts.join(''); return parts.join('');
@@ -1548,6 +1564,69 @@
sourceElement.scrollTop = Math.max(0, targetScroll); sourceElement.scrollTop = Math.max(0, targetScroll);
} }
function resetSourceHistory(content: string) {
sourceHistory = [{ content, cursor: content.length }];
sourceHistoryIndex = 0;
if (sourceHistoryTimer) {
clearTimeout(sourceHistoryTimer);
sourceHistoryTimer = null;
}
}
function pushSourceHistoryImmediate() {
if (!sourceElement) return;
if (sourceHistoryTimer) {
clearTimeout(sourceHistoryTimer);
sourceHistoryTimer = null;
}
const entry = { content: sourceContent, cursor: sourceElement.selectionStart };
// Don't push duplicate
if (sourceHistoryIndex >= 0 && sourceHistory[sourceHistoryIndex]?.content === entry.content) return;
// Truncate any redo history
sourceHistory = sourceHistory.slice(0, sourceHistoryIndex + 1);
sourceHistory.push(entry);
sourceHistoryIndex++;
// Limit stack size
if (sourceHistory.length > 200) {
sourceHistory.shift();
sourceHistoryIndex--;
}
}
function pushSourceHistoryDebounced() {
if (sourceHistoryTimer) clearTimeout(sourceHistoryTimer);
sourceHistoryTimer = setTimeout(() => {
sourceHistoryTimer = null;
pushSourceHistoryImmediate();
}, 300);
}
function sourceUndo() {
// Flush any pending debounced snapshot first
if (sourceHistoryTimer) {
clearTimeout(sourceHistoryTimer);
sourceHistoryTimer = null;
pushSourceHistoryImmediate();
}
if (sourceHistoryIndex <= 0) return;
sourceHistoryIndex--;
const entry = sourceHistory[sourceHistoryIndex];
sourceContent = entry.content;
tick().then(() => {
sourceElement?.setSelectionRange(entry.cursor, entry.cursor);
});
}
function sourceRedo() {
if (sourceHistoryIndex >= sourceHistory.length - 1) return;
sourceHistoryIndex++;
const entry = sourceHistory[sourceHistoryIndex];
sourceContent = entry.content;
tick().then(() => {
sourceElement?.setSelectionRange(entry.cursor, entry.cursor);
});
}
function applySearchDecorations() { function applySearchDecorations() {
if (!editor) return; if (!editor) return;
const decorations = noteSearchResults.map((m, i) => const decorations = noteSearchResults.map((m, i) =>
@@ -1964,7 +2043,7 @@
PdfEmbed, PdfEmbed,
MathBlock, MathBlock,
MathInline, MathInline,
Details.configure({ persist: true, HTMLAttributes: { class: 'editor-details' } }), Details.configure({ persist: false, HTMLAttributes: { class: 'editor-details' } }),
DetailsSummary, DetailsSummary,
DetailsContent, DetailsContent,
TextAlign.configure({ types: ['heading', 'paragraph'] }), TextAlign.configure({ types: ['heading', 'paragraph'] }),
@@ -1989,6 +2068,14 @@
} }
} }
}, },
// Prevent native text drag — it causes copy-instead-of-move in Tauri's webview.
// File drops from OS are handled by Tauri's onDragDropEvent listener instead.
dragstart: (_view, event) => {
const dt = event.dataTransfer;
if (!dt || dt.files.length === 0) {
event.preventDefault();
}
},
}, },
handleDrop: (_view, event) => handleFileDrop(event), handleDrop: (_view, event) => handleFileDrop(event),
handlePaste: (_view, event) => handleFilePaste(event), handlePaste: (_view, event) => handleFilePaste(event),
@@ -2023,8 +2110,11 @@
} }
} }
function addLinkFromToolbar() { export function addLinkFromToolbar() {
if (!editor) return; if (!editor) return;
const { from, to } = editor.state.selection;
linkSelectionFrom = from;
linkSelectionTo = to;
const previousUrl = editor.getAttributes('link').href || ''; const previousUrl = editor.getAttributes('link').href || '';
linkModalUrl = previousUrl; linkModalUrl = previousUrl;
linkModal = true; linkModal = true;
@@ -2033,11 +2123,14 @@
function linkModalConfirm() { function linkModalConfirm() {
if (!editor) return; if (!editor) return;
const url = linkModalUrl.trim(); let url = linkModalUrl.trim();
if (url === '') { if (url === '') {
editor.chain().focus().extendMarkRange('link').unsetLink().run(); editor.chain().focus().setTextSelection({ from: linkSelectionFrom, to: linkSelectionTo }).extendMarkRange('link').unsetLink().run();
} else { } else {
editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run(); if (url && !/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url) && !url.startsWith('/') && !url.startsWith('#')) {
url = 'https://' + url;
}
editor.chain().focus().setTextSelection({ from: linkSelectionFrom, to: linkSelectionTo }).setMark('link', { href: url }).run();
} }
linkModal = false; linkModal = false;
linkModalUrl = ''; linkModalUrl = '';
@@ -2743,6 +2836,7 @@
if (isSource && !lastSourceMode) { if (isSource && !lastSourceMode) {
// Switching TO source: extract markdown from editor // Switching TO source: extract markdown from editor
sourceContent = editor ? editorToMarkdown() : ($activeNote?.content ?? ''); sourceContent = editor ? editorToMarkdown() : ($activeNote?.content ?? '');
resetSourceHistory(sourceContent);
lastSourceMode = true; lastSourceMode = true;
} else if (!isSource && lastSourceMode) { } else if (!isSource && lastSourceMode) {
// Switching BACK to WYSIWYG: destroy old editor (its DOM element is gone), // Switching BACK to WYSIWYG: destroy old editor (its DOM element is gone),
@@ -2814,7 +2908,7 @@
}); });
</script> </script>
<div class="editor-container"> <div class="editor-container" class:mobile={isMobile}>
{#if !$activeNote} {#if !$activeNote}
<div class="empty-editor"> <div class="empty-editor">
<div class="empty-icon"> <div class="empty-icon">
@@ -2830,7 +2924,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="editor-toolbar"> <div class="editor-toolbar" class:mobile={isMobile}>
<div class="editor-title"> <div class="editor-title">
<input <input
bind:this={titleInput} bind:this={titleInput}
@@ -2847,27 +2941,49 @@
editor?.commands.focus('start'); editor?.commands.focus('start');
} }
}} }}
onchange={(e) => { onchange={async (e) => {
if ($activeNote) { if ($activeNote && $activeNotePath) {
const newTitle = (e.target as HTMLInputElement).value; const newTitle = (e.target as HTMLInputElement).value.trim();
if (!newTitle) return;
const oldPath = $activeNotePath;
$activeNote.meta.title = newTitle; $activeNote.meta.title = newTitle;
// Update the note list entry so the 2nd panel reflects the change
notes.update(list => list.map(n =>
n.path === $activeNotePath ? { ...n, meta: { ...n.meta, title: newTitle } } : n
));
$editorDirty = true; $editorDirty = true;
autoSave(); autoSave();
// Rename file on disk if filename doesn't match the new title
const filename = oldPath.split('/').pop() ?? '';
const stem = filename.replace(/\.md$/, '');
if (stem !== newTitle) {
try {
const newPath = await renameNote(oldPath, newTitle);
$activeNotePath = newPath;
notes.update(list => list.map(n =>
n.path === oldPath
? { ...n, path: newPath, relative_path: n.relative_path.replace(/[^/]+$/, newTitle + '.md'), meta: { ...n.meta, title: newTitle } }
: n
));
} catch (err) {
console.error('Failed to rename note file:', err);
notes.update(list => list.map(n =>
n.path === oldPath ? { ...n, meta: { ...n.meta, title: newTitle } } : n
));
}
} else {
notes.update(list => list.map(n =>
n.path === oldPath ? { ...n, meta: { ...n.meta, title: newTitle } } : n
));
}
} }
}} }}
/> />
</div> </div>
<div class="toolbar-actions"> <div class="toolbar-actions" class:mobile={isMobile}>
{#if $editorDirty} {#if $editorDirty}
<span class="save-indicator">Unsaved</span> <span class="save-indicator">Unsaved</span>
{/if} {/if}
{#if $readOnly} {#if $readOnly}
<span class="readonly-indicator">View Mode</span> <span class="readonly-indicator">View Mode</span>
{/if} {/if}
{#if !isMobile}
<button <button
class="icon-btn" class="icon-btn"
class:active={noteSearchOpen} class:active={noteSearchOpen}
@@ -2878,6 +2994,7 @@
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/> <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg> </svg>
</button> </button>
{/if}
<button <button
class="icon-btn" class="icon-btn"
@@ -2891,7 +3008,7 @@
}} }}
title={$activeNote?.meta.pinned ? 'Unpin note' : 'Pin note'} title={$activeNote?.meta.pinned ? 'Unpin note' : 'Pin note'}
> >
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width={isMobile ? "20" : "16"} height={isMobile ? "20" : "16"} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 17v5"/> <path d="M12 17v5"/>
<path d="M9 2h6l-1 7h4l-2 4H8l-2-4h4L9 2z"/> <path d="M9 2h6l-1 7h4l-2 4H8l-2-4h4L9 2z"/>
</svg> </svg>
@@ -2915,7 +3032,7 @@
}} }}
title={isQuickAccess ? 'Remove from Quick Access' : 'Add to Quick Access'} title={isQuickAccess ? 'Remove from Quick Access' : 'Add to Quick Access'}
> >
<svg width="16" height="16" viewBox="0 0 24 24" fill={isQuickAccess ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width={isMobile ? "20" : "16"} height={isMobile ? "20" : "16"} viewBox="0 0 24 24" fill={isQuickAccess ? 'currentColor' : '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" /> <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> </svg>
</button> </button>
@@ -2925,7 +3042,7 @@
onclick={() => { showOutline = !showOutline; if (showOutline) updateOutline(); }} onclick={() => { showOutline = !showOutline; if (showOutline) updateOutline(); }}
title="Outline" title="Outline"
> >
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width={isMobile ? "20" : "16"} height={isMobile ? "20" : "16"} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" y1="6" x2="20" y2="6"/><line x1="8" y1="12" x2="20" y2="12"/><line x1="8" y1="18" x2="20" y2="18"/><circle cx="4" cy="12" r="1" fill="currentColor"/><circle cx="4" cy="18" r="1" fill="currentColor"/> <line x1="4" y1="6" x2="20" y2="6"/><line x1="8" y1="12" x2="20" y2="12"/><line x1="8" y1="18" x2="20" y2="18"/><circle cx="4" cy="12" r="1" fill="currentColor"/><circle cx="4" cy="18" r="1" fill="currentColor"/>
</svg> </svg>
</button> </button>
@@ -2935,11 +3052,12 @@
onclick={toggleHistory} onclick={toggleHistory}
title="Version history" title="Version history"
> >
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width={isMobile ? "20" : "16"} height={isMobile ? "20" : "16"} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/> <circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/> <polyline points="12 6 12 12 16 14"/>
</svg> </svg>
</button> </button>
{#if !isMobile}
{#if $appConfig?.enable_wiki_links} {#if $appConfig?.enable_wiki_links}
<button <button
class="icon-btn" class="icon-btn"
@@ -2974,6 +3092,7 @@
<path d="M5.854 4.854a.5.5 0 10-.708-.708l-3.5 3.5a.5.5 0 000 .708l3.5 3.5a.5.5 0 00.708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 01.708-.708l3.5 3.5a.5.5 0 010 .708l-3.5 3.5a.5.5 0 01-.708-.708L13.293 8l-3.147-3.146z" /> <path d="M5.854 4.854a.5.5 0 10-.708-.708l-3.5 3.5a.5.5 0 000 .708l3.5 3.5a.5.5 0 00.708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 01.708-.708l3.5 3.5a.5.5 0 010 .708l-3.5 3.5a.5.5 0 01-.708-.708L13.293 8l-3.147-3.146z" />
</svg> </svg>
</button> </button>
{/if}
</div> </div>
</div> </div>
@@ -3016,11 +3135,13 @@
<div class="editor-body"> <div class="editor-body">
{#if $sourceMode} {#if $sourceMode}
{#if $appConfig?.show_line_numbers} {#if $appConfig?.show_line_numbers}
<div class="line-numbers" aria-hidden="true"> <div class="line-numbers-clip" aria-hidden="true">
<div class="line-numbers">
{#each sourceContent.split('\n') as _, i} {#each sourceContent.split('\n') as _, i}
<span>{i + 1}</span> <span>{i + 1}</span>
{/each} {/each}
</div> </div>
</div>
{/if} {/if}
<textarea <textarea
class="source-editor" class="source-editor"
@@ -3032,10 +3153,42 @@
oninput={() => { oninput={() => {
$editorDirty = true; $editorDirty = true;
autoSave(); autoSave();
pushSourceHistoryDebounced();
}} }}
onkeydown={(e) => { onkeydown={(e) => {
const mod = e.ctrlKey || e.metaKey;
// Shift+Enter: insert two trailing spaces + newline for markdown hard break
if (e.key === 'Enter' && e.shiftKey && !mod) {
e.preventDefault();
const ta = sourceElement;
const start = ta.selectionStart;
const end = ta.selectionEnd;
const val = ta.value;
sourceContent = val.slice(0, start) + ' \n' + val.slice(end);
tick().then(() => {
const newPos = start + 3;
ta.setSelectionRange(newPos, newPos);
});
$editorDirty = true;
autoSave();
pushSourceHistoryDebounced();
return;
}
// Undo
if (mod && (e.key === 'z' || e.key === 'Z') && !e.shiftKey) {
e.preventDefault();
sourceUndo();
return;
}
// Redo
if ((mod && (e.key === 'z' || e.key === 'Z') && e.shiftKey) || (mod && (e.key === 'y' || e.key === 'Y'))) {
e.preventDefault();
sourceRedo();
return;
}
if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) { if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
e.preventDefault(); e.preventDefault();
pushSourceHistoryImmediate();
const ta = sourceElement; const ta = sourceElement;
const val = ta.value; const val = ta.value;
const start = ta.selectionStart; const start = ta.selectionStart;
@@ -3055,6 +3208,7 @@
tick().then(() => { tick().then(() => {
const newPos = lines.slice(0, curLine - 1).join('\n').length + 1 + (start - pos); const newPos = lines.slice(0, curLine - 1).join('\n').length + 1 + (start - pos);
ta.setSelectionRange(newPos, newPos); ta.setSelectionRange(newPos, newPos);
pushSourceHistoryImmediate();
}); });
} else if (e.key === 'ArrowDown' && curLine < lines.length - 1) { } else if (e.key === 'ArrowDown' && curLine < lines.length - 1) {
const tmp = lines[curLine]; const tmp = lines[curLine];
@@ -3064,6 +3218,7 @@
tick().then(() => { tick().then(() => {
const newPos = lines.slice(0, curLine + 1).join('\n').length + 1 + (start - pos); const newPos = lines.slice(0, curLine + 1).join('\n').length + 1 + (start - pos);
ta.setSelectionRange(newPos, newPos); ta.setSelectionRange(newPos, newPos);
pushSourceHistoryImmediate();
}); });
} }
$editorDirty = true; $editorDirty = true;
@@ -3072,8 +3227,11 @@
}} }}
onscroll={() => { onscroll={() => {
if ($appConfig?.show_line_numbers) { if ($appConfig?.show_line_numbers) {
const gutter = sourceElement?.previousElementSibling as HTMLElement; const clip = sourceElement?.previousElementSibling as HTMLElement;
if (gutter) gutter.scrollTop = sourceElement.scrollTop; const gutter = clip?.firstElementChild as HTMLElement;
if (gutter) {
gutter.style.transform = `translateY(-${sourceElement.scrollTop}px)`;
}
} }
}} }}
spellcheck="false" spellcheck="false"
@@ -3162,7 +3320,116 @@
{#if editorReady && !$sourceMode} {#if editorReady && !$sourceMode}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="editor-formatting-bar" onclick={() => { headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }}> <div class="editor-formatting-bar" style={isMobile && keyboardHeight > 0 ? `bottom: ${keyboardHeight}px` : ''} onclick={() => { headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }}>
{#if isMobile}
<!-- ═══ MOBILE formatting bar: compact, relevant buttons only ═══ -->
<!-- Heading dropdown -->
<div class="fmt-dropdown-wrap">
<button class="fmt-btn" class:active={(editorState, editor.isActive('heading'))} onclick={(e) => { e.stopPropagation(); headingDropdown = !headingDropdown; insertDropdown = false; }} title="Heading">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h12"/><path d="M6 20V4"/><path d="M18 20V4"/></svg>
</button>
{#if headingDropdown}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="fmt-dropdown" onclick={(e) => e.stopPropagation()}>
<button class:active={(editorState, editor.isActive('heading', { level: 1 }))} onclick={() => { editor?.chain().focus().toggleHeading({ level: 1 }).run(); headingDropdown = false; }}>Heading 1</button>
<button class:active={(editorState, editor.isActive('heading', { level: 2 }))} onclick={() => { editor?.chain().focus().toggleHeading({ level: 2 }).run(); headingDropdown = false; }}>Heading 2</button>
<button class:active={(editorState, editor.isActive('heading', { level: 3 }))} onclick={() => { editor?.chain().focus().toggleHeading({ level: 3 }).run(); headingDropdown = false; }}>Heading 3</button>
<button class:active={(editorState, editor.isActive('paragraph'))} onclick={() => { editor?.chain().focus().setParagraph().run(); headingDropdown = false; }}>Paragraph</button>
</div>
{/if}
</div>
<div class="fmt-sep"></div>
<!-- Bold / Italic / Underline / Strike -->
<button class="fmt-btn" class:active={(editorState, editor.isActive('bold'))} onclick={() => editor?.chain().focus().toggleBold().run()} title="Bold">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h9a4 4 0 010 8H7a1 1 0 01-1-1V5a1 1 0 011-1h7a4 4 0 010 8"/></svg>
</button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('italic'))} onclick={() => editor?.chain().focus().toggleItalic().run()} title="Italic">
<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="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
</button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('underline'))} onclick={() => editor?.chain().focus().toggleUnderline().run()} title="Underline">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0012 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
</button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('strike'))} onclick={() => editor?.chain().focus().toggleStrike().run()} title="Strikethrough">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 00-2.83 4"/><path d="M14 12a4 4 0 010 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
</button>
<div class="fmt-sep"></div>
<!-- Link -->
<button class="fmt-btn" class:active={(editorState, editor.isActive('link'))} onclick={addLinkFromToolbar} title="Link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
</button>
<div class="fmt-sep"></div>
<!-- Lists -->
<button class="fmt-btn" class:active={(editorState, editor.isActive('bulletList'))} onclick={() => editor?.chain().focus().toggleBulletList().run()} title="Bullet List">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>
</button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('orderedList'))} onclick={() => editor?.chain().focus().toggleOrderedList().run()} title="Numbered List">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5h10"/><path d="M11 12h10"/><path d="M11 19h10"/><path d="M4 4h1v5"/><path d="M4 9h2"/><path d="M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 00-2.6-1.02"/></svg>
</button>
<button class="fmt-btn" class:active={(editorState, editor.isActive('taskList'))} onclick={() => editor?.chain().focus().toggleTaskList().run()} title="Task List">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 5h8"/><path d="M13 12h8"/><path d="M13 19h8"/><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/></svg>
</button>
<div class="fmt-sep"></div>
<!-- Highlight -->
<button class="fmt-btn" class:active={(editorState, editor.isActive('highlight'))} onclick={() => editor?.chain().focus().toggleHighlight({ color: highlightColors[0].value }).run()} title="Highlight">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 01-2.8 0l-5.2-5.2a2 2 0 010-2.8L14 4"/></svg>
</button>
<div class="fmt-sep"></div>
<!-- Undo / Redo -->
<button class="fmt-btn" onclick={() => editor?.chain().focus().undo().run()} title="Undo">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 015.5 5.5 5.5 5.5 0 01-5.5 5.5H11"/></svg>
</button>
<button class="fmt-btn" onclick={() => editor?.chain().focus().redo().run()} title="Redo">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 004 14.5 5.5 5.5 0 009.5 20H13"/></svg>
</button>
<div class="fmt-sep"></div>
<!-- Insert (+) dropdown — mobile version with common inserts -->
<div class="fmt-dropdown-wrap">
<button class="fmt-btn insert-btn" onclick={(e) => { e.stopPropagation(); insertDropdown = !insertDropdown; headingDropdown = false; }} title="Insert">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
</button>
{#if insertDropdown}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="fmt-dropdown insert-dropdown" onclick={(e) => e.stopPropagation()}>
<button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-image-input')?.click(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 00-2.828 0L6 21"/></svg>
Image
</button>
<button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-file-input')?.click(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 01-2-2V4a2 2 0 012-2h8a2.4 2.4 0 011.704.706l3.588 3.588A2.4 2.4 0 0120 8v12a2 2 0 01-2 2z"/><path d="M14 2v5a1 1 0 001 1h5"/></svg>
File
</button>
<button onclick={() => { insertDropdown = false; editor?.chain().focus().setHorizontalRule().run(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/></svg>
Horizontal Rule
</button>
<button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleCodeBlock().run(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m10 9-3 3 3 3"/><path d="m14 15 3-3-3-3"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
Code Block
</button>
<button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleBlockquote().run(); }}>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 5H3"/><path d="M21 12H8"/><path d="M21 19H8"/><path d="M3 12v7"/></svg>
Quote
</button>
</div>
{/if}
</div>
{:else}
<!-- ═══ DESKTOP formatting bar: full feature set ═══ -->
<!-- Insert (+) dropdown --> <!-- Insert (+) dropdown -->
<div class="fmt-dropdown-wrap"> <div class="fmt-dropdown-wrap">
<button class="fmt-btn insert-btn" onclick={(e) => { e.stopPropagation(); insertDropdown = !insertDropdown; headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; }} title="Insert"> <button class="fmt-btn insert-btn" onclick={(e) => { e.stopPropagation(); insertDropdown = !insertDropdown; headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; }} title="Insert">
@@ -3464,6 +3731,8 @@
}} title="Outdent (Shift+Tab)"> }} title="Outdent (Shift+Tab)">
<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="3" y1="4" x2="21" y2="4"/><line x1="11" y1="9" x2="21" y2="9"/><line x1="11" y1="14" x2="21" y2="14"/><line x1="3" y1="19" x2="21" y2="19"/><polyline points="7 9 3 11.5 7 14"/></svg> <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="3" y1="4" x2="21" y2="4"/><line x1="11" y1="9" x2="21" y2="9"/><line x1="11" y1="14" x2="21" y2="14"/><line x1="3" y1="19" x2="21" y2="19"/><polyline points="7 9 3 11.5 7 14"/></svg>
</button> </button>
{/if}
</div> </div>
{/if} {/if}
{/if} {/if}
@@ -3985,8 +4254,8 @@
bind:this={linkModalInput} bind:this={linkModalInput}
bind:value={linkModalUrl} bind:value={linkModalUrl}
onkeydown={(e) => { onkeydown={(e) => {
if (e.key === 'Enter') linkModalConfirm(); if (e.key === 'Enter') { e.preventDefault(); linkModalConfirm(); }
if (e.key === 'Escape') linkModalCancel(); if (e.key === 'Escape') { e.preventDefault(); linkModalCancel(); }
}} }}
placeholder="https://example.com" placeholder="https://example.com"
/> />
@@ -4569,38 +4838,44 @@
color: var(--text-primary); color: var(--text-primary);
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: var(--editor-font-size, 14px); font-size: var(--editor-font-size, 14px);
line-height: 1.6; line-height: var(--editor-line-height, 1.6);
resize: none; resize: none;
outline: none; outline: none;
padding: 0; padding: 0;
margin: 0;
user-select: text; user-select: text;
white-space: pre;
overflow-x: auto;
} }
.source-editor.with-line-numbers { .source-editor.with-line-numbers {
padding-left: 48px; padding-left: 48px;
} }
.line-numbers { .line-numbers-clip {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 44px; width: 44px;
overflow: hidden; overflow: hidden;
display: flex; pointer-events: none;
flex-direction: column; }
padding-top: 0;
.line-numbers {
padding-top: 8px;
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: var(--editor-font-size, 14px); font-size: var(--editor-font-size, 14px);
line-height: 1.6; line-height: var(--editor-line-height, 1.6);
color: var(--text-secondary); color: var(--text-secondary);
opacity: 0.5; opacity: 0.5;
text-align: right; text-align: right;
user-select: none; user-select: none;
pointer-events: none; will-change: transform;
} }
.line-numbers span { .line-numbers span {
display: block;
padding-right: 12px; padding-right: 12px;
} }
@@ -4620,7 +4895,7 @@
:global(.tiptap-wrapper .tiptap p) { :global(.tiptap-wrapper .tiptap p) {
margin: 0 0 0.75em; margin: 0 0 0.75em;
line-height: 1.65; line-height: var(--editor-line-height, 1.65);
} }
:global(.tiptap-wrapper .tiptap h1) { :global(.tiptap-wrapper .tiptap h1) {
@@ -4938,7 +5213,7 @@
:global(.tiptap-wrapper .tiptap li) { :global(.tiptap-wrapper .tiptap li) {
margin: 0.25em 0; margin: 0.25em 0;
line-height: 1.65; line-height: var(--editor-line-height, 1.65);
} }
:global(.tiptap-wrapper .tiptap li p) { :global(.tiptap-wrapper .tiptap li p) {
@@ -6020,4 +6295,155 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/* ═══ MOBILE (class-based, not media-query, for Android high-DPI) ═══ */
.editor-container.mobile {
height: 100%;
min-height: 0;
overflow: hidden;
}
.editor-container.mobile .editor-toolbar {
padding: 8px 8px 6px 12px;
flex-shrink: 0;
flex-direction: column;
align-items: stretch;
gap: 2px;
}
.toolbar-actions.mobile {
gap: 4px;
}
.toolbar-actions.mobile .icon-btn {
min-width: 32px;
min-height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.toolbar-actions.mobile .save-indicator,
.toolbar-actions.mobile .readonly-indicator {
font-size: 12px;
}
.editor-container.mobile .editor-title input {
font-size: 20px;
padding: 4px 0;
}
.editor-container.mobile .editor-body-wrapper {
flex: 1;
min-height: 0;
overflow: hidden;
}
.editor-container.mobile .editor-body-row {
min-height: 0;
}
.editor-container.mobile .editor-body {
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 50px;
}
.editor-container.mobile .tiptap-wrapper {
min-height: 100%;
}
.editor-container.mobile .editor-formatting-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
padding: 4px 8px;
padding-bottom: calc(4px + env(safe-area-inset-bottom));
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 1px;
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
}
.editor-container.mobile .editor-formatting-bar::-webkit-scrollbar {
display: none;
}
.editor-container.mobile .fmt-btn {
min-width: 38px;
height: 38px;
flex-shrink: 0;
padding: 6px;
}
.editor-container.mobile .fmt-sep {
height: 20px;
margin: 0 2px;
}
.editor-container.mobile .fmt-dropdown {
position: fixed;
bottom: auto;
left: 8px;
right: 8px;
top: auto;
max-width: calc(100vw - 16px);
max-height: 60vh;
overflow-y: auto;
}
.editor-container.mobile .fmt-dropdown button {
padding: 12px 16px;
font-size: 15px;
min-height: 44px;
}
.editor-container.mobile .insert-dropdown {
position: fixed;
bottom: 60px;
left: 8px;
right: 8px;
max-width: calc(100vw - 16px);
}
.editor-container.mobile .shortcuts-hint {
display: none;
}
.editor-container.mobile .empty-editor p {
font-size: 16px;
}
.editor-container.mobile :global(.editor-content) {
padding: 8px 16px !important;
font-size: 16px !important;
}
.editor-container.mobile .source-editor {
padding: 8px 16px;
font-size: 15px;
}
.editor-container.mobile .history-panel,
.editor-container.mobile .outline-panel {
width: 100% !important;
max-width: 100%;
border-left: none;
border-top: 1px solid var(--border-color);
}
.editor-container.mobile .note-search-bar {
padding: 8px 12px;
}
.editor-container.mobile .note-search-bar input {
padding: 8px 10px;
font-size: 15px;
}
</style> </style>
+5 -2
View File
@@ -126,6 +126,7 @@
<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">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">Go back</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd></kbd></span></div> <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> <div class="shortcut-row"><span class="shortcut-desc">Go forward</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd></kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Toggle source mode</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>M</kbd></span></div>
<div class="shortcut-row"><span class="shortcut-desc">Exit focus mode</span><span class="shortcut-keys"><kbd>Esc</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> <h4 class="shortcuts-group-title">Editor Commands</h4>
@@ -164,7 +165,8 @@
border-radius: 16px; border-radius: 16px;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
width: 500px; width: 500px;
max-height: 80vh; height: 80vh;
max-height: 600px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -201,7 +203,7 @@
} }
.info-body { .info-body {
padding: 0 24px 32px; padding: 0 24px 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -244,6 +246,7 @@
} }
.info-logo { .info-logo {
margin-top: 12px;
margin-bottom: 8px; margin-bottom: 8px;
} }
+172 -3
View File
@@ -32,6 +32,7 @@
getAllTags getAllTags
} from '$lib/api'; } from '$lib/api';
import { formatRelativeTime } from '$lib/utils/time'; import { formatRelativeTime } from '$lib/utils/time';
import { openNoteWindow } from '$lib/utils/window';
import type { NoteEntry, SortMode } from '$lib/types'; import type { NoteEntry, SortMode } from '$lib/types';
let { onNoteSelected = (_path: string, _content: string) => {}, onNoteMoved = () => {} }: { let { onNoteSelected = (_path: string, _content: string) => {}, onNoteMoved = () => {} }: {
@@ -40,6 +41,7 @@
} = $props(); } = $props();
const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'; const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
const isMobile = /android|ios/i.test(navigator.userAgent);
let compact = $derived($appConfig?.compact_notes ?? false); let compact = $derived($appConfig?.compact_notes ?? false);
let contextMenu = $state<{ x: number; y: number; note: NoteEntry } | null>(null); let contextMenu = $state<{ x: number; y: number; note: NoteEntry } | null>(null);
@@ -456,6 +458,12 @@
editValue = note.meta.title; editValue = note.meta.title;
} }
function getNotebookPath(note: NoteEntry): string {
if ($viewMode === 'notebook') return '';
const parts = note.relative_path.replace(/\.md$/, '').split('/');
return parts.length > 1 ? parts.slice(0, -1).join('/') : '';
}
function handleNoteClick(e: MouseEvent, note: NoteEntry) { function handleNoteClick(e: MouseEvent, note: NoteEntry) {
if (e.ctrlKey || e.metaKey) { if (e.ctrlKey || e.metaKey) {
// Toggle individual selection // Toggle individual selection
@@ -575,7 +583,7 @@
} }
}} /> }} />
<div class="note-list"> <div class="note-list" class:mobile={isMobile}>
<div class="list-header"> <div class="list-header">
<span class="list-title">{viewTitle}</span> <span class="list-title">{viewTitle}</span>
<div class="list-actions"> <div class="list-actions">
@@ -728,7 +736,7 @@
ondragend={() => { qaDragFrom = null; qaDragOver = null; }} ondragend={() => { qaDragFrom = null; qaDragOver = null; }}
> >
{#if compact} {#if compact}
<div class="note-compact-row"> <div class="note-compact-row" title={getNotebookPath(note) ? `${getNotebookPath(note)}/${note.meta.title}` : note.meta.title}>
<span class="note-title"> <span class="note-title">
{#if note.meta.pinned} {#if note.meta.pinned}
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pin-icon"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pin-icon">
@@ -737,10 +745,13 @@
{/if} {/if}
{note.meta.title} {note.meta.title}
</span> </span>
{#if getNotebookPath(note)}
<span class="note-notebook">{getNotebookPath(note)}</span>
{/if}
<span class="note-date-compact">{formatRelativeTime(note.meta.modified)}</span> <span class="note-date-compact">{formatRelativeTime(note.meta.modified)}</span>
</div> </div>
{:else} {:else}
<div class="note-title"> <div class="note-title" title={getNotebookPath(note) ? `${getNotebookPath(note)}/${note.meta.title}` : note.meta.title}>
{#if note.meta.pinned} {#if note.meta.pinned}
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pin-icon"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pin-icon">
<path d="M12 17v5"/><path d="M9 2h6l-1 7h4l-2 4H8l-2-4h4L9 2z"/> <path d="M12 17v5"/><path d="M9 2h6l-1 7h4l-2 4H8l-2-4h4L9 2z"/>
@@ -750,6 +761,10 @@
</div> </div>
<div class="note-preview">{note.preview}</div> <div class="note-preview">{note.preview}</div>
<div class="note-meta"> <div class="note-meta">
{#if getNotebookPath(note)}
<span class="note-notebook">{getNotebookPath(note)}</span>
<span class="note-meta-sep">&middot;</span>
{/if}
<span class="note-date">{formatRelativeTime(note.meta.modified)}</span> <span class="note-date">{formatRelativeTime(note.meta.modified)}</span>
{#if note.meta.tags.length > 0} {#if note.meta.tags.length > 0}
<span class="note-tags"> <span class="note-tags">
@@ -922,6 +937,12 @@
Add to Quick Access Add to Quick Access
</button> </button>
{/if} {/if}
<button onclick={() => { const n = contextMenu!.note; contextMenu = null; openNoteWindow(n.path, n.meta.title); }}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
</svg>
Open in New Window
</button>
<button onclick={() => startRename(contextMenu!.note)}> <button onclick={() => startRename(contextMenu!.note)}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 3a2.85 2.85 0 114 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/> <path d="M17 3a2.85 2.85 0 114 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/>
@@ -1242,6 +1263,26 @@
margin-top: 4px; margin-top: 4px;
} }
.note-notebook {
font-size: 0.78em;
color: var(--text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 140px;
}
.note-meta-sep {
color: var(--text-tertiary);
font-size: 0.78em;
}
.note-compact-row .note-notebook {
font-size: 10px;
max-width: 80px;
flex-shrink: 0;
}
.note-date { .note-date {
font-size: 0.78em; font-size: 0.78em;
color: var(--text-tertiary); color: var(--text-tertiary);
@@ -1475,4 +1516,132 @@
.note-item.qa-drag-below { .note-item.qa-drag-below {
border-bottom: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
} }
/* ═══ MOBILE (class-based for Android high-DPI) ═══ */
.note-list.mobile {
border-right: none;
}
.note-list.mobile .list-header {
padding: 12px 16px;
}
.note-list.mobile .list-title {
font-size: 16px;
}
.note-list.mobile .icon-btn {
min-width: 44px;
min-height: 44px;
padding: 10px;
}
.note-list.mobile .list-content {
padding: 4px 8px;
}
.note-list.mobile .note-item {
padding: 14px 16px;
min-height: 56px;
border-radius: 10px;
margin-bottom: 2px;
}
.note-list.mobile .note-item.compact {
padding: 10px 16px;
min-height: 48px;
}
.note-list.mobile .note-title {
font-size: 15px;
}
.note-list.mobile .note-preview {
font-size: 13px;
margin-top: 4px;
}
.note-list.mobile .note-meta {
margin-top: 6px;
}
.note-list.mobile .note-date {
font-size: 12px;
}
.note-list.mobile .mini-tag {
font-size: 11px;
padding: 2px 6px;
}
.note-list.mobile .rename-input {
padding: 10px 12px;
font-size: 15px;
}
.note-list.mobile .empty-state {
padding: 64px 24px;
font-size: 15px;
}
.note-list.mobile .btn-link {
font-size: 15px;
}
.note-list.mobile .selection-bar {
padding: 8px 16px;
}
.note-list.mobile .selection-count {
font-size: 13px;
}
.note-list.mobile .selection-action {
padding: 6px 14px;
font-size: 13px;
min-height: 36px;
}
.note-list.mobile .context-menu {
min-width: 220px;
border-radius: 12px;
padding: 6px;
}
.note-list.mobile .context-menu button {
padding: 12px 16px;
font-size: 15px;
min-height: 44px;
border-radius: 8px;
}
.note-list.mobile .sort-menu {
min-width: 220px;
border-radius: 12px;
padding: 6px;
}
.note-list.mobile .sort-menu button {
padding: 12px 16px;
font-size: 15px;
min-height: 44px;
border-radius: 8px;
}
.note-list.mobile .batch-move-picker {
min-width: 80vw;
max-width: 90vw;
max-height: 60vh;
}
.note-list.mobile .batch-move-header {
padding: 14px 16px;
font-size: 15px;
}
.note-list.mobile .batch-move-picker .move-picker-list button {
padding: 12px 16px;
font-size: 15px;
min-height: 44px;
}
</style> </style>
+326
View File
@@ -0,0 +1,326 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { listen } from '@tauri-apps/api/event';
import { getCurrentWindow } from '@tauri-apps/api/window';
import Editor from './Editor.svelte';
import {
activeNote,
activeNotePath,
editorDirty,
readOnly,
sourceMode,
theme
} from '$lib/stores/app';
import { readNote } from '$lib/api';
import type { FileEvent } from '$lib/types';
let { notePath }: { notePath: string } = $props();
const appWindow = getCurrentWindow();
const isMac = navigator.platform.startsWith('Mac');
let editor = $state<Editor>(null!);
let unlistenFileChange: (() => void) | null = null;
let maximized = $state(false);
let loadError = $state<string | null>(null);
async function checkMaximized() {
maximized = await appWindow.isMaximized();
}
$effect(() => {
checkMaximized();
const unlisten = appWindow.onResized(() => checkMaximized());
return () => { unlisten.then(fn => fn()); };
});
$effect(() => {
const themeValue = $theme || 'system';
const root = document.documentElement;
root.classList.remove('dark');
if (themeValue === 'dark' || (themeValue === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
root.classList.add('dark');
}
});
let lastMouseDown = 0;
const RESIZE_EDGE = 6;
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;
if (!maximized) {
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
if (e.clientY - rect.top < RESIZE_EDGE || e.clientX - rect.left < RESIZE_EDGE) return;
}
const now = Date.now();
if (now - lastMouseDown < 300) {
appWindow.toggleMaximize();
lastMouseDown = 0;
return;
}
lastMouseDown = now;
appWindow.startDragging();
}
function handleKeydown(e: KeyboardEvent) {
const mod = e.ctrlKey || e.metaKey;
if (mod && e.key === 's') {
e.preventDefault();
editor?.forceSave();
}
if (mod && e.shiftKey && e.key === 'M') {
e.preventDefault();
$sourceMode = !$sourceMode;
}
}
onMount(async () => {
try {
const content = await readNote(notePath);
$activeNote = content;
$activeNotePath = notePath;
$editorDirty = false;
setTimeout(() => {
editor?.loadNote(notePath, content.content);
appWindow.setTitle(`${content.meta.title} - HelixNotes`);
}, 50);
} catch (e) {
loadError = String(e);
}
unlistenFileChange = await listen<FileEvent>('file-changed', async (event) => {
if (event.payload.path === notePath && event.payload.event_type === 'modify') {
if (!$editorDirty) {
try {
const content = await readNote(notePath);
$activeNote = content;
editor?.loadNote(notePath, content.content);
} catch (_) {}
}
}
});
});
onDestroy(() => {
unlistenFileChange?.();
});
</script>
<svelte:window onkeydown={handleKeydown} />
<div class="note-window">
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="nw-titlebar" class:macos={isMac} onmousedown={handleMouseDown}>
<div class="nw-titlebar-brand">
<svg width="14" height="14" 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="nw-title">{$activeNote?.meta.title || 'Loading...'}</span>
{#if $editorDirty}
<span class="nw-dirty-dot" title="Unsaved changes"></span>
{/if}
</div>
<div class="titlebar-actions">
<button class="nw-btn" class:active={$sourceMode} onclick={() => ($sourceMode = !$sourceMode)} title="Toggle Source Mode">
<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="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" />
</svg>
</button>
<button class="nw-btn" class:active={$readOnly} onclick={() => ($readOnly = !$readOnly)} title={$readOnly ? 'Switch to Edit Mode' : 'Switch to View Mode'}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
{#if $readOnly}
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
<circle cx="12" cy="12" r="3" />
{:else}
<path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94" />
<path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19" />
<line x1="1" y1="1" x2="23" y2="23" />
{/if}
</svg>
</button>
</div>
{#if !isMac}
<div class="titlebar-controls">
<button class="titlebar-btn" 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="titlebar-btn" onclick={() => appWindow.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={() => 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>
{/if}
</div>
{#if loadError}
<div class="nw-error">
<p>Failed to load note</p>
<p class="nw-error-detail">{loadError}</p>
</div>
{:else}
<div class="nw-editor">
<Editor bind:this={editor} />
</div>
{/if}
</div>
<style>
.note-window {
display: flex;
flex-direction: column;
height: 100vh;
background: var(--bg-primary);
}
.nw-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;
}
.nw-titlebar.macos {
padding-left: 78px;
}
.nw-titlebar-brand {
display: flex;
align-items: center;
gap: 8px;
padding-left: 14px;
pointer-events: none;
flex: 1;
min-width: 0;
}
.nw-title {
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nw-dirty-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
.titlebar-actions {
display: flex;
align-items: center;
gap: 4px;
margin-right: 8px;
-webkit-app-region: no-drag;
}
.nw-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;
}
.nw-btn:hover {
background: var(--bg-tertiary, var(--bg-hover));
color: var(--text-primary);
}
.nw-btn.active {
background: color-mix(in srgb, var(--accent) 18%, transparent);
color: var(--accent);
}
.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;
}
.nw-editor {
flex: 1;
overflow: hidden;
}
.nw-error {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--text-secondary);
font-size: 14px;
}
.nw-error-detail {
font-size: 12px;
color: var(--text-tertiary);
max-width: 400px;
text-align: center;
word-break: break-word;
}
</style>
+44 -9
View File
@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, updateObj as globalUpdateObj, installType, settingsTab } from '$lib/stores/app'; import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, updateObj as globalUpdateObj, installType, settingsTab } from '$lib/stores/app';
import { setTheme, setAccentColor, setFontSize, setFontFamily, setGeneralSettings, importObsidian, createBackup, listBackups, restoreBackup, deleteBackup, setBackupSettings, setAiSettings, testAiConnection } from '$lib/api'; import { setTheme, setAccentColor, setFontSize, setFontFamily, setLineHeight, setGeneralSettings, importObsidian, createBackup, listBackups, restoreBackup, deleteBackup, setBackupSettings, setAiSettings, testAiConnection } from '$lib/api';
import { open as openDialog } from '@tauri-apps/plugin-dialog'; import { open as openDialog } from '@tauri-apps/plugin-dialog';
import { listen } from '@tauri-apps/api/event'; import { listen } from '@tauri-apps/api/event';
import { check as checkUpdate } from '@tauri-apps/plugin-updater'; import { check as checkUpdate } from '@tauri-apps/plugin-updater';
@@ -293,9 +293,17 @@
{ name: 'Mono', value: 'mono', stack: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace' }, { name: 'Mono', value: 'mono', stack: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace' },
]; ];
const lineHeightPresets = [
{ label: 'Tight', value: 1.4 },
{ label: 'Default', value: 1.6 },
{ label: 'Relaxed', value: 1.8 },
{ label: 'Loose', value: 2.0 },
];
let activeAccent = $state($appConfig?.accent_color ?? 'Indigo'); let activeAccent = $state($appConfig?.accent_color ?? 'Indigo');
let activeFontSize = $state($appConfig?.font_size ?? 14); let activeFontSize = $state($appConfig?.font_size ?? 14);
let activeFontFamily = $state($appConfig?.font_family ?? 'system'); let activeFontFamily = $state($appConfig?.font_family ?? 'system');
let activeLineHeight = $state($appConfig?.line_height ?? 1.6);
// General settings // General settings
let compactNotes = $state($appConfig?.compact_notes ?? false); let compactNotes = $state($appConfig?.compact_notes ?? false);
@@ -422,6 +430,17 @@
document.documentElement.style.setProperty('--editor-font-family', stack); document.documentElement.style.setProperty('--editor-font-family', stack);
} }
function selectLineHeight(value: number) {
activeLineHeight = value;
applyLineHeight(value);
if ($appConfig) $appConfig.line_height = value;
setLineHeight(value).catch((e) => console.error('Failed to save line height:', e));
}
function applyLineHeight(value: number) {
document.documentElement.style.setProperty('--editor-line-height', String(value));
}
function close() { function close() {
// Ensure AI settings are saved when closing (in case input wasn't blurred) // Ensure AI settings are saved when closing (in case input wasn't blurred)
// Only save if the key differs from what's already stored // Only save if the key differs from what's already stored
@@ -454,6 +473,11 @@
applyFontFamily(preset.stack); applyFontFamily(preset.stack);
} }
} }
const savedLineHeight = $appConfig?.line_height;
if (savedLineHeight) {
activeLineHeight = savedLineHeight;
applyLineHeight(savedLineHeight);
}
// Sync general settings // Sync general settings
if ($appConfig) { if ($appConfig) {
compactNotes = $appConfig.compact_notes ?? false; compactNotes = $appConfig.compact_notes ?? false;
@@ -612,13 +636,7 @@
<div class="tab-content"> <div class="tab-content">
<div class="settings-section"> <div class="settings-section">
<h3>Title</h3> <h3>Title</h3>
<div class="setting-options"> <label class="setting-toggle">
<button class="option-btn" class:active={titleMode === 'input'} onclick={() => { titleMode = 'input'; saveGeneralSettings(); }}>Input</button>
<button class="option-btn" class:active={titleMode === 'heading'} onclick={() => { titleMode = 'heading'; saveGeneralSettings(); }}>Heading</button>
<button class="option-btn" class:active={titleMode === 'hidden'} onclick={() => { titleMode = 'hidden'; saveGeneralSettings(); }}>Hidden</button>
</div>
<span class="setting-hint">How the note title is displayed in the editor</span>
<label class="setting-toggle" style="margin-top: 12px;">
<span class="setting-label"> <span class="setting-label">
<span class="setting-name">Hide title in note body</span> <span class="setting-name">Hide title in note body</span>
<span class="setting-desc">Hide the first heading when it matches the note title</span> <span class="setting-desc">Hide the first heading when it matches the note title</span>
@@ -754,6 +772,22 @@
</div> </div>
</div> </div>
<div class="settings-section">
<h3>Line Height</h3>
<div class="font-size-options">
{#each lineHeightPresets as preset}
<button
class="font-size-btn"
class:active={activeLineHeight === preset.value}
onclick={() => selectLineHeight(preset.value)}
>
<span class="font-size-label">{preset.label}</span>
<span class="font-size-value">{preset.value}</span>
</button>
{/each}
</div>
</div>
<div class="settings-section"> <div class="settings-section">
<h3>Font</h3> <h3>Font</h3>
<div class="font-family-options"> <div class="font-family-options">
@@ -1147,7 +1181,8 @@
border-radius: 16px; border-radius: 16px;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
width: 620px; width: 620px;
max-height: 80vh; height: 80vh;
max-height: 700px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
+191 -6
View File
@@ -28,6 +28,7 @@
} = $props(); } = $props();
const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'; const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
const isMobile = /android|ios/i.test(navigator.userAgent);
let editingNotebook = $state<string | null>(null); let editingNotebook = $state<string | null>(null);
let editValue = $state(''); let editValue = $state('');
@@ -68,6 +69,11 @@
} }
function selectNotebook(nb: NotebookEntry) { function selectNotebook(nb: NotebookEntry) {
// Deselect if clicking the already-active notebook
if ($viewMode === 'notebook' && $activeNotebook?.path === nb.path) {
selectAllNotes();
return;
}
$viewMode = 'notebook'; $viewMode = 'notebook';
$activeNotebook = nb; $activeNotebook = nb;
$activeTag = null; $activeTag = null;
@@ -95,18 +101,33 @@
onViewChanged(); onViewChanged();
} }
let newNotebookParent = $state<NotebookEntry | null>(null);
async function handleCreateNotebook() { async function handleCreateNotebook() {
if (!newNotebookName.trim()) return; if (!newNotebookName.trim()) return;
try { try {
await createNotebook(null, newNotebookName.trim()); const parentRel = newNotebookParent?.relative_path ?? null;
await createNotebook(parentRel, newNotebookName.trim());
newNotebookName = ''; newNotebookName = '';
showNewNotebook = false; showNewNotebook = false;
newNotebookParent = null;
await refresh(); await refresh();
} catch (e) { } catch (e) {
console.error('Failed to create notebook:', e); console.error('Failed to create notebook:', e);
} }
} }
function startNewSubNotebook(nb: NotebookEntry) {
contextMenu = null;
newNotebookParent = nb;
newNotebookName = '';
showNewNotebook = true;
// Expand parent so the new child is visible
if ($collapsedNotebooks.includes(nb.path)) {
$collapsedNotebooks = $collapsedNotebooks.filter(p => p !== nb.path);
}
}
async function handleRename(nb: NotebookEntry) { async function handleRename(nb: NotebookEntry) {
if (!editValue.trim() || editValue.trim() === nb.name) { if (!editValue.trim() || editValue.trim() === nb.name) {
editingNotebook = null; editingNotebook = null;
@@ -288,7 +309,7 @@
<svelte:window onclick={handleWindowClick} /> <svelte:window onclick={handleWindowClick} />
<aside class="sidebar" class:collapsed={$sidebarCollapsed}> <aside class="sidebar" class:collapsed={$sidebarCollapsed} class:mobile={isMobile}>
<div class="sidebar-header"> <div class="sidebar-header">
<button class="collapse-btn" onclick={() => ($sidebarCollapsed = !$sidebarCollapsed)} title="Toggle sidebar"> <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"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -368,7 +389,14 @@
}} }}
> >
<span class="section-title">Notebooks</span> <span class="section-title">Notebooks</span>
<button class="icon-btn-sm" onclick={() => (showNewNotebook = !showNewNotebook)} title="New notebook"> <button class="icon-btn-sm" onclick={() => {
if (showNewNotebook) {
showNewNotebook = false; newNotebookName = ''; newNotebookParent = null;
} else {
newNotebookParent = ($viewMode === 'notebook' && $activeNotebook) ? $activeNotebook : null;
showNewNotebook = true;
}
}} title={$viewMode === 'notebook' && $activeNotebook ? `New notebook inside ${$activeNotebook.name}` : '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"> <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" /> <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
</svg> </svg>
@@ -377,13 +405,16 @@
{#if showNewNotebook} {#if showNewNotebook}
<div class="new-notebook-input"> <div class="new-notebook-input">
{#if newNotebookParent}
<span class="new-notebook-parent">{newNotebookParent.name}/</span>
{/if}
<input <input
type="text" type="text"
bind:value={newNotebookName} bind:value={newNotebookName}
placeholder="Notebook name..." placeholder={newNotebookParent ? 'Sub-notebook name...' : 'Notebook name...'}
onkeydown={(e) => { onkeydown={(e) => {
if (e.key === 'Enter') handleCreateNotebook(); if (e.key === 'Enter') handleCreateNotebook();
if (e.key === 'Escape') { showNewNotebook = false; newNotebookName = ''; } if (e.key === 'Escape') { showNewNotebook = false; newNotebookName = ''; newNotebookParent = null; }
}} }}
/> />
</div> </div>
@@ -444,6 +475,10 @@
{#if contextMenu} {#if contextMenu}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="context-menu" style="left: {contextMenu.x}px; top: {contextMenu.y}px" onmousedown={(e) => e.stopPropagation()}> <div class="context-menu" style="left: {contextMenu.x}px; top: {contextMenu.y}px" onmousedown={(e) => e.stopPropagation()}>
<button onclick={() => startNewSubNotebook(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="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" /><line x1="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
New Sub-notebook
</button>
<button onclick={() => startRename(contextMenu!.notebook)}> <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> <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 Rename
@@ -699,9 +734,35 @@
.new-notebook-input { .new-notebook-input {
padding: 2px 8px; padding: 2px 8px;
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--accent);
border-radius: 4px;
background: var(--bg-primary);
overflow: hidden;
} }
.new-notebook-input input, .rename-input { .new-notebook-parent {
padding: 4px 0 4px 8px;
color: var(--text-tertiary);
font-size: inherit;
white-space: nowrap;
flex-shrink: 0;
}
.new-notebook-input input {
flex: 1;
min-width: 0;
padding: 4px 8px;
border: none;
background: transparent;
color: var(--text-primary);
font-size: inherit;
outline: none;
}
.rename-input {
width: 100%; width: 100%;
padding: 4px 8px; padding: 4px 8px;
border: 1px solid var(--accent); border: 1px solid var(--accent);
@@ -957,4 +1018,128 @@
.delete-confirm-btn:hover { .delete-confirm-btn:hover {
opacity: 0.9; opacity: 0.9;
} }
/* ═══ MOBILE (class-based for Android high-DPI) ═══ */
.sidebar.mobile {
width: 100% !important;
min-width: 100%;
border-right: none;
}
.sidebar.mobile.collapsed {
width: 100% !important;
min-width: 100%;
max-width: 100%;
}
.sidebar.mobile .sidebar-header {
padding: 10px 12px;
}
.sidebar.mobile .collapse-btn {
display: none;
}
.sidebar.mobile .nav-item {
padding: 12px 14px;
font-size: 15px;
min-height: 48px;
gap: 12px;
}
.sidebar.mobile .nav-item svg {
width: 20px;
height: 20px;
}
.sidebar.mobile .section-header {
padding: 12px 16px 6px;
min-height: 44px;
}
.sidebar.mobile .section-title {
font-size: 12px;
}
.sidebar.mobile .icon-btn,
.sidebar.mobile .icon-btn-sm {
min-width: 44px;
min-height: 44px;
padding: 10px;
}
.sidebar.mobile .notebook-item {
padding: 12px 12px;
min-height: 48px;
gap: 10px;
font-size: 15px;
}
.sidebar.mobile .notebook-icon {
width: 24px;
height: 24px;
}
.sidebar.mobile .new-notebook-input {
padding: 4px 12px;
}
.sidebar.mobile .new-notebook-parent {
padding: 10px 0 10px 12px;
font-size: 15px;
}
.sidebar.mobile .new-notebook-input input {
padding: 10px 12px;
font-size: 15px;
}
.sidebar.mobile .rename-input {
padding: 10px 12px;
font-size: 15px;
}
.sidebar.mobile .tag-item {
padding: 10px 16px;
min-height: 44px;
font-size: 14px;
}
.sidebar.mobile .sidebar-footer {
padding: 8px 12px;
display: none;
}
.sidebar.mobile .context-menu {
min-width: 200px;
border-radius: 12px;
padding: 6px;
}
.sidebar.mobile .context-menu button {
padding: 12px 16px;
font-size: 15px;
min-height: 44px;
border-radius: 8px;
}
.sidebar.mobile .delete-confirm {
max-width: calc(100vw - 40px);
padding: 24px;
}
.sidebar.mobile .delete-confirm h4 {
font-size: 16px;
}
.sidebar.mobile .delete-confirm p {
font-size: 14px;
}
.sidebar.mobile .delete-confirm-cancel,
.sidebar.mobile .delete-confirm-btn {
padding: 10px 20px;
font-size: 14px;
min-height: 44px;
}
</style> </style>
+38 -3
View File
@@ -6,17 +6,24 @@
import type { VaultConfig } from '$lib/types'; import type { VaultConfig } from '$lib/types';
const appWindow = getCurrentWindow(); const appWindow = getCurrentWindow();
const isMobile = /android|ios/i.test(navigator.userAgent);
let recentVaults: VaultConfig[] = $derived($appConfig?.vaults ?? []); let recentVaults: VaultConfig[] = $derived($appConfig?.vaults ?? []);
let loading = $state(false); let loading = $state(false);
let error = $state(''); let error = $state('');
async function pickFolder() { async function pickFolder() {
if (isMobile) {
// Use shared Documents folder for Syncthing/Nextcloud compatibility
const vaultPath = '/storage/emulated/0/Documents/HelixNotes';
await openSelectedVault(vaultPath);
} else {
const selected = await open({ directory: true, multiple: false, title: 'Choose Notes Folder' }); const selected = await open({ directory: true, multiple: false, title: 'Choose Notes Folder' });
if (selected) { if (selected) {
await openSelectedVault(selected as string); await openSelectedVault(selected as string);
} }
} }
}
async function openSelectedVault(path: string) { async function openSelectedVault(path: string) {
loading = true; loading = true;
@@ -35,7 +42,8 @@
</script> </script>
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- 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="vault-picker" class:mobile={isMobile} onmousedown={(e) => { if (!isMobile && !(e.target as HTMLElement).closest('button, .picker-card')) appWindow.startDragging(); }}>
{#if !isMobile}
<div class="window-controls"> <div class="window-controls">
<button class="window-close" onclick={() => appWindow.close()} title="Close"> <button class="window-close" onclick={() => appWindow.close()} title="Close">
<svg width="10" height="10" viewBox="0 0 10 10"> <svg width="10" height="10" viewBox="0 0 10 10">
@@ -44,6 +52,7 @@
</svg> </svg>
</button> </button>
</div> </div>
{/if}
<div class="picker-card"> <div class="picker-card">
<div class="logo"> <div class="logo">
<svg width="72" height="72" viewBox="0 0 48 48" fill="none"> <svg width="72" height="72" viewBox="0 0 48 48" fill="none">
@@ -58,7 +67,11 @@
</div> </div>
<h1>HelixNotes</h1> <h1>HelixNotes</h1>
<p class="subtitle">Local markdown notes</p> <p class="subtitle">Local markdown notes</p>
{#if isMobile}
<p class="description">Notes are stored in Documents/HelixNotes as Markdown files. Sync with Nextcloud, Syncthing, or any file sync app.</p>
{:else}
<p class="description">Your notes are stored as standard Markdown (.md) files. Pick any folder — existing .md files will be recognized automatically.</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}
{#if error} {#if error}
<div class="error">{error}</div> <div class="error">{error}</div>
@@ -67,18 +80,20 @@
<button class="btn-primary" onclick={pickFolder} disabled={loading}> <button class="btn-primary" onclick={pickFolder} disabled={loading}>
{#if loading} {#if loading}
Opening... Opening...
{:else if isMobile}
Get Started
{:else} {:else}
Open Notes Folder Open Notes Folder
{/if} {/if}
</button> </button>
{#if $appConfig?.active_vault} {#if !isMobile && $appConfig?.active_vault}
<button class="btn-back" onclick={() => ($vaultReady = true)}> <button class="btn-back" onclick={() => ($vaultReady = true)}>
Back Back
</button> </button>
{/if} {/if}
{#if recentVaults.length > 0} {#if !isMobile && recentVaults.length > 0}
<div class="recent"> <div class="recent">
<span class="recent-label">Recent</span> <span class="recent-label">Recent</span>
{#each recentVaults as vault} {#each recentVaults as vault}
@@ -260,4 +275,24 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/* Mobile */
.mobile .btn-primary {
padding: 14px 20px;
font-size: 16px;
border-radius: 12px;
}
.mobile .description {
font-size: 14px;
}
.mobile h1 {
font-size: 28px;
}
.mobile .logo :global(svg) {
width: 88px;
height: 88px;
}
</style> </style>
+5
View File
@@ -38,6 +38,11 @@ export const activeNotePath = writable<string | null>(null);
export const activeNotebook = writable<NotebookEntry | null>(null); export const activeNotebook = writable<NotebookEntry | null>(null);
export const activeTag = writable<string | null>(null); export const activeTag = writable<string | null>(null);
// Mobile state
export const mobileView = writable<"sidebar" | "notelist" | "editor">(
"sidebar",
);
// Editor state // Editor state
export const editorDirty = writable(false); export const editorDirty = writable(false);
export const sourceMode = writable(false); export const sourceMode = writable(false);
+1
View File
@@ -41,6 +41,7 @@ export interface AppConfig {
accent_color: string | null; accent_color: string | null;
font_size: number | null; font_size: number | null;
font_family: string | null; font_family: string | null;
line_height: number | null;
compact_notes: boolean; compact_notes: boolean;
time_format: string; time_format: string;
gpu_acceleration: boolean; gpu_acceleration: boolean;
+42
View File
@@ -0,0 +1,42 @@
import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
const openNoteWindows = new Map<string, string>();
export async function openNoteWindow(notePath: string, noteTitle: string) {
const existingLabel = openNoteWindows.get(notePath);
if (existingLabel) {
const existing = await WebviewWindow.getByLabel(existingLabel);
if (existing) {
await existing.show();
await existing.unminimize();
await existing.setFocus();
return;
}
openNoteWindows.delete(notePath);
}
const label = `note-${Date.now()}`;
const url = `/?note=${encodeURIComponent(notePath)}`;
const noteWindow = new WebviewWindow(label, {
url,
title: `${noteTitle} - HelixNotes`,
width: 900,
height: 700,
minWidth: 500,
minHeight: 400,
decorations: false,
center: true
});
openNoteWindows.set(notePath, label);
noteWindow.once('tauri://destroyed', () => {
openNoteWindows.delete(notePath);
});
noteWindow.once('tauri://error', (e) => {
console.error('Failed to create note window:', e);
openNoteWindows.delete(notePath);
});
}
+6 -2
View File
@@ -8,6 +8,8 @@
let { children } = $props(); let { children } = $props();
const isMobile = /android|ios/i.test(navigator.userAgent);
// Reactively apply theme class to <html> whenever $theme changes // Reactively apply theme class to <html> whenever $theme changes
$effect(() => { $effect(() => {
const t = $theme; const t = $theme;
@@ -31,10 +33,12 @@
return resolved.join('/'); return resolved.join('/');
} }
// Detect install type and check for updates on startup // Detect install type and check for updates on startup (skip on mobile — updates via app store)
onMount(() => { onMount(() => {
if (!isMobile) {
getInstallType().then(t => installType.set(t)).catch(() => {}); getInstallType().then(t => installType.set(t)).catch(() => {});
checkForUpdate(); checkForUpdate();
}
}); });
// Intercept all link clicks in capture phase to prevent webview navigation // Intercept all link clicks in capture phase to prevent webview navigation
@@ -74,7 +78,7 @@
}); });
</script> </script>
<svelte:document oncontextmenu={(e) => e.preventDefault()} /> <svelte:document oncontextmenu={(e) => { if (!isMobile) e.preventDefault(); }} />
<svelte:head> <svelte:head>
<title>HelixNotes</title> <title>HelixNotes</title>
+17
View File
@@ -4,10 +4,19 @@
import { getAppConfig, openVault } from '$lib/api'; import { getAppConfig, openVault } from '$lib/api';
import VaultPicker from '$lib/components/VaultPicker.svelte'; import VaultPicker from '$lib/components/VaultPicker.svelte';
import AppLayout from '$lib/components/AppLayout.svelte'; import AppLayout from '$lib/components/AppLayout.svelte';
import NoteWindow from '$lib/components/NoteWindow.svelte';
let loading = $state(true); let loading = $state(true);
let noteWindowPath = $state<string | null>(null);
onMount(async () => { onMount(async () => {
// Check for note window mode
const params = new URLSearchParams(window.location.search);
const notePath = params.get('note');
if (notePath) {
noteWindowPath = notePath;
}
try { try {
const config = await getAppConfig(); const config = await getAppConfig();
$appConfig = config; $appConfig = config;
@@ -25,6 +34,9 @@
if (config.font_size) { if (config.font_size) {
document.documentElement.style.setProperty('--editor-font-size', `${config.font_size}px`); document.documentElement.style.setProperty('--editor-font-size', `${config.font_size}px`);
} }
if (config.line_height) {
document.documentElement.style.setProperty('--editor-line-height', String(config.line_height));
}
if (config.font_family) { if (config.font_family) {
const fontStacks: Record<string, string> = { const fontStacks: Record<string, string> = {
system: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', system: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
@@ -69,7 +81,10 @@
// Auto-open last vault if available // Auto-open last vault if available
if (config.active_vault) { if (config.active_vault) {
try { try {
// Note windows don't re-open the vault (already open in main process)
if (!noteWindowPath) {
await openVault(config.active_vault); await openVault(config.active_vault);
}
$vaultReady = true; $vaultReady = true;
} catch { } catch {
// Vault path might not exist anymore // Vault path might not exist anymore
@@ -86,6 +101,8 @@
<div class="loading"> <div class="loading">
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
{:else if noteWindowPath}
<NoteWindow notePath={noteWindowPath} />
{:else if $vaultReady} {:else if $vaultReady}
<AppLayout /> <AppLayout />
{:else} {:else}