mirror of
https://gitlab.com/ArkHost/HelixNotes.git
synced 2026-09-19 17:37:29 +02:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0b5db1340c | ||
|
|
d098066899 | ||
|
|
9e2f347a4b | ||
|
|
3453d406fc | ||
|
|
73a53dcb85 | ||
|
|
abac0985bc | ||
|
|
af394c0b43 | ||
|
|
8f4f6f5f0e | ||
|
|
74f1c7f6b0 | ||
|
|
3b5cdf22eb | ||
|
|
31f4867e91 | ||
|
|
8baa976a02 | ||
|
|
b4824973a5 | ||
|
|
a3229d451e |
@@ -5,7 +5,7 @@ A local markdown note-taking app built with Tauri, SvelteKit, and Rust.
|
||||
Your notes are stored as standard Markdown files on your local filesystem.
|
||||
No cloud, no lock-in.
|
||||
|
||||
## Download
|
||||
## Download (v1.1.6)
|
||||
|
||||
### Linux
|
||||
|
||||
@@ -21,21 +21,21 @@ yay -S helixnotes-appimage-bin
|
||||
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 (any distro)
|
||||
#### AppImage (Arch, Fedora 43+, openSUSE Tumbleweed)
|
||||
|
||||
[Download AppImage](https://download.helixnotes.com/releases/v1.1.2/HelixNotes_1.1.2_amd64.AppImage)
|
||||
[Download AppImage](https://download.helixnotes.com/releases/v1.1.6/HelixNotes_1.1.6_amd64.AppImage)
|
||||
|
||||
#### .deb (manual)
|
||||
|
||||
[Download .deb](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.2/HelixNotes_1.1.2_amd64.deb) — Ubuntu 22.04+
|
||||
[Download .deb](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.6/HelixNotes_1.1.6_amd64.deb) — Ubuntu 22.04+
|
||||
|
||||
### Windows
|
||||
|
||||
[Download Installer](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.2/HelixNotes_1.1.2_x64-setup.exe) — Windows 10/11
|
||||
[Download Installer](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.6/HelixNotes_1.1.6_x64-setup.exe) — Windows 10/11
|
||||
|
||||
### macOS
|
||||
|
||||
[Download .dmg](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.2/HelixNotes_1.1.2_x64.dmg) — macOS 12+ (Intel, runs on Apple Silicon via Rosetta)
|
||||
[Download .dmg](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.1.6/HelixNotes_1.1.6_x64.dmg) — macOS (Intel, runs on Apple Silicon via Rosetta)
|
||||
|
||||
---
|
||||
|
||||
@@ -57,7 +57,9 @@ All releases: [codeberg.org/ArkHost/HelixNotes/releases](https://codeberg.org/Ar
|
||||
- **Tag management** — organize notes with tags, bulk edit from context menu
|
||||
- **Drag-and-drop** — move notes between notebooks, reorganize notebooks by dragging
|
||||
- **Obsidian import** — convert Obsidian wiki-links to standard markdown
|
||||
- **Themes** — light/dark mode with customizable accent colors and fonts
|
||||
- **Multi-window** — open notes in separate windows (right-click → "Open in New Window")
|
||||
- **File associations** — open .md files from your file manager directly in HelixNotes
|
||||
- **Themes** — light/dark mode with customizable accent colors, fonts, and line height
|
||||
- **Focus mode** — distraction-free writing
|
||||
- **View mode** — read-only toggle for distraction-free reading
|
||||
- **Local** — everything stays on your machine
|
||||
@@ -92,6 +94,13 @@ pnpm tauri dev
|
||||
pnpm tauri build
|
||||
```
|
||||
|
||||
## Screenshots
|
||||
|
||||

|
||||

|
||||

|
||||

|
||||
|
||||
## License
|
||||
|
||||
[AGPL-3.0](https://codeberg.org/ArkHost/HelixNotes/src/branch/main/LICENSE)
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
"name": "helixnotes",
|
||||
"private": true,
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"version": "1.1.3",
|
||||
"version": "1.1.8",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
|
||||
Generated
+498
-397
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "helixnotes"
|
||||
version = "1.1.3"
|
||||
version = "1.1.8"
|
||||
description = "Local markdown note-taking app"
|
||||
authors = ["HelixNotes"]
|
||||
license = "AGPL-3.0-or-later"
|
||||
@@ -20,7 +20,6 @@ tauri-plugin-log = "2"
|
||||
tauri-plugin-dialog = "2"
|
||||
tauri-plugin-fs = "2"
|
||||
tauri-plugin-opener = "2"
|
||||
tauri-plugin-updater = "2"
|
||||
serde = { version = "1", features = ["derive"] }
|
||||
serde_json = "1"
|
||||
serde_yaml = "0.9"
|
||||
@@ -35,7 +34,11 @@ tokio = { version = "1", features = ["full"] }
|
||||
dirs = "6"
|
||||
regex = "1"
|
||||
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"
|
||||
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"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"$schema": "../gen/schemas/desktop-schema.json",
|
||||
"identifier": "default",
|
||||
"description": "HelixNotes default capabilities",
|
||||
"windows": ["main"],
|
||||
"windows": ["main", "note-*"],
|
||||
"permissions": [
|
||||
"core:default",
|
||||
"core:window:default",
|
||||
@@ -12,6 +12,8 @@
|
||||
"core:window:allow-close",
|
||||
"core:window:allow-is-maximized",
|
||||
"core:window:allow-set-decorations",
|
||||
"core:window:allow-set-title",
|
||||
"core:webview:allow-create-webview-window",
|
||||
"dialog:default",
|
||||
"dialog:allow-open",
|
||||
"dialog:allow-save",
|
||||
@@ -44,7 +46,6 @@
|
||||
{ "url": "mailto:*" }
|
||||
]
|
||||
},
|
||||
"opener:allow-reveal-item-in-dir",
|
||||
"updater:default"
|
||||
"opener:allow-reveal-item-in-dir"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
+52
-21
@@ -6,6 +6,7 @@ use crate::types::AiStreamEvent;
|
||||
|
||||
const ANTHROPIC_API_URL: &str = "https://api.anthropic.com/v1/messages";
|
||||
const OPENAI_API_URL: &str = "https://api.openai.com/v1/chat/completions";
|
||||
const OLLAMA_DEFAULT_URL: &str = "http://localhost:11434";
|
||||
|
||||
pub fn ai_request(
|
||||
app: AppHandle,
|
||||
@@ -15,6 +16,7 @@ pub fn ai_request(
|
||||
system_prompt: String,
|
||||
user_message: String,
|
||||
request_id: String,
|
||||
base_url: Option<String>,
|
||||
) {
|
||||
std::thread::spawn(move || {
|
||||
let rt = tokio::runtime::Runtime::new().unwrap();
|
||||
@@ -23,7 +25,22 @@ pub fn ai_request(
|
||||
"openai" => {
|
||||
stream_openai(
|
||||
&app,
|
||||
&api_key,
|
||||
OPENAI_API_URL,
|
||||
Some(&api_key),
|
||||
&model,
|
||||
&system_prompt,
|
||||
&user_message,
|
||||
&request_id,
|
||||
)
|
||||
.await
|
||||
}
|
||||
"ollama" => {
|
||||
let url = base_url.as_deref().unwrap_or(OLLAMA_DEFAULT_URL);
|
||||
let url = format!("{}/v1/chat/completions", url.trim_end_matches('/'));
|
||||
stream_openai(
|
||||
&app,
|
||||
&url,
|
||||
None,
|
||||
&model,
|
||||
&system_prompt,
|
||||
&user_message,
|
||||
@@ -188,7 +205,8 @@ async fn stream_anthropic(
|
||||
|
||||
async fn stream_openai(
|
||||
app: &AppHandle,
|
||||
api_key: &str,
|
||||
url: &str,
|
||||
api_key: Option<&str>,
|
||||
model: &str,
|
||||
system_prompt: &str,
|
||||
user_message: &str,
|
||||
@@ -224,10 +242,15 @@ async fn stream_openai(
|
||||
body["temperature"] = json!(0.7);
|
||||
}
|
||||
|
||||
let response = client
|
||||
.post(OPENAI_API_URL)
|
||||
.header("Authorization", format!("Bearer {}", api_key))
|
||||
.header("content-type", "application/json")
|
||||
let mut req = client
|
||||
.post(url)
|
||||
.header("content-type", "application/json");
|
||||
|
||||
if let Some(key) = api_key {
|
||||
req = req.header("Authorization", format!("Bearer {}", key));
|
||||
}
|
||||
|
||||
let response = req
|
||||
.json(&body)
|
||||
.send()
|
||||
.await
|
||||
@@ -325,9 +348,19 @@ async fn stream_openai(
|
||||
Ok(())
|
||||
}
|
||||
|
||||
pub async fn test_connection(provider: &str, api_key: &str, model: &str) -> Result<String, String> {
|
||||
pub async fn test_connection(
|
||||
provider: &str,
|
||||
api_key: &str,
|
||||
model: &str,
|
||||
base_url: Option<&str>,
|
||||
) -> Result<String, String> {
|
||||
match provider {
|
||||
"openai" => test_openai(api_key, model).await,
|
||||
"openai" => test_openai(OPENAI_API_URL, Some(api_key), model).await,
|
||||
"ollama" => {
|
||||
let url = base_url.unwrap_or(OLLAMA_DEFAULT_URL);
|
||||
let url = format!("{}/v1/chat/completions", url.trim_end_matches('/'));
|
||||
test_openai(&url, None, model).await
|
||||
}
|
||||
_ => test_anthropic(api_key, model).await,
|
||||
}
|
||||
}
|
||||
@@ -365,19 +398,12 @@ async fn test_anthropic(api_key: &str, model: &str) -> Result<String, String> {
|
||||
}
|
||||
}
|
||||
|
||||
async fn test_openai(api_key: &str, model: &str) -> Result<String, String> {
|
||||
async fn test_openai(url: &str, api_key: Option<&str>, model: &str) -> Result<String, String> {
|
||||
let client = Client::new();
|
||||
|
||||
let is_gpt5 = model.starts_with("gpt-5");
|
||||
let token_key = if is_gpt5 {
|
||||
"max_completion_tokens"
|
||||
} else {
|
||||
"max_tokens"
|
||||
};
|
||||
|
||||
let body = json!({
|
||||
"model": model,
|
||||
token_key: 10,
|
||||
"max_tokens": 10,
|
||||
"messages": [
|
||||
{
|
||||
"role": "user",
|
||||
@@ -386,10 +412,15 @@ async fn test_openai(api_key: &str, model: &str) -> Result<String, String> {
|
||||
]
|
||||
});
|
||||
|
||||
let response = client
|
||||
.post(OPENAI_API_URL)
|
||||
.header("Authorization", format!("Bearer {}", api_key))
|
||||
.header("content-type", "application/json")
|
||||
let mut req = client
|
||||
.post(url)
|
||||
.header("content-type", "application/json");
|
||||
|
||||
if let Some(key) = api_key {
|
||||
req = req.header("Authorization", format!("Bearer {}", key));
|
||||
}
|
||||
|
||||
let response = req
|
||||
.json(&body)
|
||||
.send()
|
||||
.await
|
||||
|
||||
@@ -45,6 +45,12 @@ pub fn get_app_config(state: State<'_, AppState>) -> Result<AppConfig, String> {
|
||||
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]
|
||||
pub fn set_theme(state: State<'_, AppState>, theme: String) -> Result<(), 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(())
|
||||
}
|
||||
|
||||
#[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 ──
|
||||
|
||||
#[tauri::command]
|
||||
@@ -1320,11 +1334,13 @@ pub fn set_ai_settings(
|
||||
api_key: Option<String>,
|
||||
model: String,
|
||||
writing_style: Option<String>,
|
||||
base_url: Option<String>,
|
||||
) -> Result<(), String> {
|
||||
let mut config = state.config.lock().map_err(|e| e.to_string())?;
|
||||
let key = api_key.filter(|k| !k.is_empty());
|
||||
match provider.as_deref() {
|
||||
Some("openai") => config.openai_api_key = key,
|
||||
Some("ollama") => config.ollama_base_url = base_url.filter(|u| !u.trim().is_empty()),
|
||||
_ => config.ai_api_key = key,
|
||||
}
|
||||
config.ai_provider = provider;
|
||||
@@ -1336,27 +1352,36 @@ pub fn set_ai_settings(
|
||||
|
||||
#[tauri::command]
|
||||
pub fn test_ai_connection(app: AppHandle) -> Result<(), String> {
|
||||
let (provider, api_key, model) = {
|
||||
let (provider, api_key, model, base_url) = {
|
||||
let state = app.state::<AppState>();
|
||||
let config = state.config.lock().map_err(|e| e.to_string())?;
|
||||
let provider = config
|
||||
.ai_provider
|
||||
.clone()
|
||||
.unwrap_or_else(|| "anthropic".to_string());
|
||||
let key = if provider == "openai" {
|
||||
let key = if provider == "ollama" {
|
||||
// Ollama doesn't require an API key
|
||||
Some(String::new())
|
||||
} else if provider == "openai" {
|
||||
config.openai_api_key.clone()
|
||||
} else {
|
||||
config.ai_api_key.clone()
|
||||
}
|
||||
.ok_or("No API key configured")?;
|
||||
let model = config.ai_model.clone();
|
||||
(provider, key, model)
|
||||
let base_url = config.ollama_base_url.clone();
|
||||
(provider, key, model, base_url)
|
||||
};
|
||||
|
||||
std::thread::spawn(move || {
|
||||
use tauri::Emitter;
|
||||
let rt = tokio::runtime::Runtime::new().unwrap();
|
||||
let result = rt.block_on(crate::ai::test_connection(&provider, &api_key, &model));
|
||||
let result = rt.block_on(crate::ai::test_connection(
|
||||
&provider,
|
||||
&api_key,
|
||||
&model,
|
||||
base_url.as_deref(),
|
||||
));
|
||||
match result {
|
||||
Ok(msg) => {
|
||||
let _ = app.emit(
|
||||
@@ -1383,14 +1408,16 @@ pub fn ai_ask(
|
||||
custom_prompt: Option<String>,
|
||||
request_id: String,
|
||||
) -> Result<(), String> {
|
||||
let (provider, api_key, model, writing_style) = {
|
||||
let (provider, api_key, model, writing_style, base_url) = {
|
||||
let state = app.state::<AppState>();
|
||||
let config = state.config.lock().map_err(|e| e.to_string())?;
|
||||
let provider = config
|
||||
.ai_provider
|
||||
.clone()
|
||||
.unwrap_or_else(|| "anthropic".to_string());
|
||||
let key = if provider == "openai" {
|
||||
let key = if provider == "ollama" {
|
||||
Some(String::new())
|
||||
} else if provider == "openai" {
|
||||
config.openai_api_key.clone()
|
||||
} else {
|
||||
config.ai_api_key.clone()
|
||||
@@ -1398,7 +1425,8 @@ pub fn ai_ask(
|
||||
.ok_or("No API key configured. Go to Settings > AI to set up your API key.")?;
|
||||
let model = config.ai_model.clone();
|
||||
let style = config.ai_writing_style.clone();
|
||||
(provider, key, model, style)
|
||||
let base_url = config.ollama_base_url.clone();
|
||||
(provider, key, model, style, base_url)
|
||||
};
|
||||
|
||||
let mut system_prompt = "You are a helpful writing assistant inside a note-taking app called HelixNotes. \
|
||||
@@ -1444,15 +1472,27 @@ pub fn ai_ask(
|
||||
system_prompt,
|
||||
user_message,
|
||||
request_id,
|
||||
base_url,
|
||||
);
|
||||
Ok(())
|
||||
}
|
||||
|
||||
// ── 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> {
|
||||
let config_dir = dirs::config_dir().ok_or("Cannot find config directory")?;
|
||||
let app_dir = config_dir.join("helixnotes");
|
||||
let app_dir = if let Some(config_dir) = dirs::config_dir() {
|
||||
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())?;
|
||||
Ok(app_dir.join("config.json"))
|
||||
}
|
||||
|
||||
+97
-14
@@ -8,32 +8,33 @@ mod types;
|
||||
mod vault;
|
||||
|
||||
use state::AppState;
|
||||
#[allow(unused_imports)]
|
||||
use tauri::{Emitter, Manager};
|
||||
|
||||
#[cfg(not(target_os = "android"))]
|
||||
use tauri::{
|
||||
image::Image,
|
||||
menu::{MenuBuilder, MenuItemBuilder},
|
||||
tray::TrayIconBuilder,
|
||||
Manager,
|
||||
};
|
||||
|
||||
#[cfg_attr(mobile, tauri::mobile_entry_point)]
|
||||
pub fn run() {
|
||||
rustls::crypto::ring::default_provider()
|
||||
.install_default()
|
||||
.expect("Failed to install rustls crypto provider");
|
||||
|
||||
let config = commands::load_app_config();
|
||||
#[cfg(not(target_os = "android"))]
|
||||
let show_tray = config.show_tray_icon;
|
||||
#[cfg(not(target_os = "android"))]
|
||||
let close_to_tray = config.close_to_tray && show_tray;
|
||||
let app_state = AppState::new(config);
|
||||
|
||||
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_fs::init())
|
||||
.plugin(tauri_plugin_opener::init())
|
||||
.plugin(tauri_plugin_updater::Builder::new().build())
|
||||
.setup(move |app| {
|
||||
if cfg!(debug_assertions) {
|
||||
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 {
|
||||
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(())
|
||||
})
|
||||
.manage(app_state)
|
||||
@@ -57,6 +91,7 @@ pub fn run() {
|
||||
commands::set_accent_color,
|
||||
commands::set_font_size,
|
||||
commands::set_font_family,
|
||||
commands::set_line_height,
|
||||
commands::get_notebooks,
|
||||
commands::create_notebook,
|
||||
commands::rename_notebook,
|
||||
@@ -105,13 +140,60 @@ pub fn run() {
|
||||
commands::test_ai_connection,
|
||||
commands::ai_ask,
|
||||
commands::get_install_type,
|
||||
commands::get_pending_open_file,
|
||||
]);
|
||||
|
||||
if close_to_tray {
|
||||
builder = builder.on_window_event(|window, event| {
|
||||
if let tauri::WindowEvent::CloseRequested { api, .. } = event {
|
||||
api.prevent_close();
|
||||
let _ = window.hide();
|
||||
#[cfg(not(target_os = "android"))]
|
||||
{
|
||||
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();
|
||||
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");
|
||||
}
|
||||
|
||||
#[cfg(not(target_os = "android"))]
|
||||
fn setup_tray(app: &mut tauri::App) -> Result<(), Box<dyn std::error::Error>> {
|
||||
let show = MenuItemBuilder::with_id("show", "Show HelixNotes").build(app)?;
|
||||
let quit = MenuItemBuilder::with_id("quit", "Quit").build(app)?;
|
||||
|
||||
+27
-10
@@ -5,7 +5,10 @@ use std::fs;
|
||||
use std::path::Path;
|
||||
use std::sync::Mutex;
|
||||
use tantivy::collector::TopDocs;
|
||||
#[cfg(not(target_os = "android"))]
|
||||
use tantivy::directory::MmapDirectory;
|
||||
#[cfg(target_os = "android")]
|
||||
use tantivy::directory::RamDirectory;
|
||||
use tantivy::query::QueryParser;
|
||||
use tantivy::schema::*;
|
||||
use tantivy::{Index, IndexWriter, TantivyDocument};
|
||||
@@ -24,9 +27,6 @@ pub struct SearchIndex {
|
||||
|
||||
impl SearchIndex {
|
||||
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 path_field = schema_builder.add_text_field("path", STRING | 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 schema = schema_builder.build();
|
||||
|
||||
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())?;
|
||||
// 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())?;
|
||||
Index::open_or_create(dir, schema.clone()).map_err(|e| e.to_string())?
|
||||
};
|
||||
|
||||
let writer = index
|
||||
.writer(50_000_000)
|
||||
.map_err(|e| e.to_string())?;
|
||||
#[cfg(target_os = "android")]
|
||||
let heap_size = 15_000_000;
|
||||
#[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 {
|
||||
index,
|
||||
@@ -135,8 +150,10 @@ impl SearchIndex {
|
||||
let reader = self.index.reader().map_err(|e| e.to_string())?;
|
||||
let searcher = reader.searcher();
|
||||
|
||||
let query_parser =
|
||||
QueryParser::for_index(&self.index, vec![self.title_field, self.body_field, self.tags_field]);
|
||||
let query_parser = QueryParser::for_index(
|
||||
&self.index,
|
||||
vec![self.title_field, self.body_field, self.tags_field],
|
||||
);
|
||||
|
||||
let query = query_parser
|
||||
.parse_query(query_str)
|
||||
|
||||
@@ -9,6 +9,7 @@ pub struct AppState {
|
||||
pub search_index: Mutex<Option<SearchIndex>>,
|
||||
pub watcher: Mutex<Option<RecommendedWatcher>>,
|
||||
pub importing: AtomicBool,
|
||||
pub pending_open_file: Mutex<Option<String>>,
|
||||
}
|
||||
|
||||
impl AppState {
|
||||
@@ -18,6 +19,7 @@ impl AppState {
|
||||
search_index: Mutex::new(None),
|
||||
watcher: Mutex::new(None),
|
||||
importing: AtomicBool::new(false),
|
||||
pending_open_file: Mutex::new(None),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,6 +54,8 @@ pub struct AppConfig {
|
||||
#[serde(default)]
|
||||
pub font_family: Option<String>,
|
||||
#[serde(default)]
|
||||
pub line_height: Option<f64>,
|
||||
#[serde(default)]
|
||||
pub compact_notes: bool,
|
||||
#[serde(default)]
|
||||
pub time_format: String,
|
||||
@@ -91,6 +93,8 @@ pub struct AppConfig {
|
||||
pub ai_api_key: Option<String>,
|
||||
#[serde(default)]
|
||||
pub openai_api_key: Option<String>,
|
||||
#[serde(default)]
|
||||
pub ollama_base_url: Option<String>,
|
||||
#[serde(default = "default_ai_model")]
|
||||
pub ai_model: String,
|
||||
#[serde(default)]
|
||||
@@ -130,7 +134,7 @@ fn default_max_versions() -> u32 {
|
||||
}
|
||||
|
||||
fn default_ai_model() -> String {
|
||||
"claude-sonnet-4-5-20250929".to_string()
|
||||
"claude-sonnet-4-6".to_string()
|
||||
}
|
||||
|
||||
impl Default for AppConfig {
|
||||
@@ -142,6 +146,7 @@ impl Default for AppConfig {
|
||||
accent_color: None,
|
||||
font_size: None,
|
||||
font_family: None,
|
||||
line_height: None,
|
||||
compact_notes: false,
|
||||
time_format: "relative".to_string(),
|
||||
gpu_acceleration: true,
|
||||
@@ -161,7 +166,8 @@ impl Default for AppConfig {
|
||||
ai_provider: None,
|
||||
ai_api_key: None,
|
||||
openai_api_key: None,
|
||||
ai_model: "claude-sonnet-4-5-20250929".to_string(),
|
||||
ollama_base_url: None,
|
||||
ai_model: "claude-sonnet-4-6".to_string(),
|
||||
ai_writing_style: None,
|
||||
default_view_mode: false,
|
||||
show_tray_icon: false,
|
||||
|
||||
@@ -77,6 +77,29 @@ pub fn parse_note(raw: &str, filename: &str) -> (NoteMeta, String) {
|
||||
(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 {
|
||||
let tags_str = if meta.tags.is_empty() {
|
||||
"[]".to_string()
|
||||
@@ -104,7 +127,8 @@ pub fn serialize_frontmatter(meta: &NoteMeta) -> String {
|
||||
|
||||
pub fn update_note_raw(meta: &NoteMeta, body: &str) -> String {
|
||||
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.
|
||||
@@ -163,7 +187,8 @@ pub fn merge_frontmatter(original_raw: &str, meta: &NoteMeta, body: &str) -> Str
|
||||
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 {
|
||||
|
||||
@@ -114,7 +114,13 @@ fn count_notes_in_dir(dir: &Path) -> usize {
|
||||
fn is_hidden(path: &Path) -> bool {
|
||||
path.file_name()
|
||||
.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)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
|
||||
"productName": "HelixNotes",
|
||||
"version": "1.1.3",
|
||||
"version": "1.1.8",
|
||||
"identifier": "com.helixnotes.app",
|
||||
"build": {
|
||||
"frontendDist": "../build",
|
||||
|
||||
+21
@@ -158,3 +158,24 @@ body.resizing .ProseMirror {
|
||||
body.resizing {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
+11
-8
@@ -1,11 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no, maximum-scale=1"
|
||||
/>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+10
-1
@@ -38,6 +38,10 @@ export async function setFontFamily(family: string): Promise<void> {
|
||||
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[]> {
|
||||
return invoke("get_notebooks");
|
||||
}
|
||||
@@ -310,8 +314,9 @@ export async function setAiSettings(
|
||||
apiKey: string | null,
|
||||
model: string,
|
||||
writingStyle: string | null,
|
||||
baseUrl: string | null = null,
|
||||
): Promise<void> {
|
||||
return invoke("set_ai_settings", { provider, apiKey, model, writingStyle });
|
||||
return invoke("set_ai_settings", { provider, apiKey, model, writingStyle, baseUrl });
|
||||
}
|
||||
|
||||
export async function testAiConnection(): Promise<void> {
|
||||
@@ -330,3 +335,7 @@ export async function aiAsk(
|
||||
export async function getInstallType(): Promise<string> {
|
||||
return invoke("get_install_type");
|
||||
}
|
||||
|
||||
export async function getPendingOpenFile(): Promise<string | null> {
|
||||
return invoke("get_pending_open_file");
|
||||
}
|
||||
|
||||
@@ -23,26 +23,60 @@
|
||||
readOnly,
|
||||
activeNote,
|
||||
activeNotePath,
|
||||
activeNotebook,
|
||||
editorDirty,
|
||||
showInfo,
|
||||
showSettings,
|
||||
sourceMode
|
||||
sourceMode,
|
||||
mobileView,
|
||||
appConfig
|
||||
} from '$lib/stores/app';
|
||||
|
||||
const appWindow = getCurrentWindow();
|
||||
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 { openNoteWindow } from '$lib/utils/window';
|
||||
import { get } from 'svelte/store';
|
||||
import type { VaultState, FileEvent } from '$lib/types';
|
||||
|
||||
let sidebar: Sidebar;
|
||||
let noteList: NoteList;
|
||||
let editor: Editor;
|
||||
let unlistenFileChange: (() => void) | null = null;
|
||||
let unlistenOpenFile: (() => void) | null = null;
|
||||
let backupInterval: ReturnType<typeof setInterval> | null = null;
|
||||
let navigatingFromHistory = false;
|
||||
let noteHistory: string[] = [];
|
||||
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
|
||||
$effect(() => {
|
||||
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 state: VaultState = {
|
||||
last_open_note: null,
|
||||
@@ -98,15 +148,19 @@
|
||||
|
||||
function handleNoteSelected(path: string, content: string) {
|
||||
editor?.loadNote(path, content);
|
||||
if (isMobile) $mobileView = 'editor';
|
||||
}
|
||||
|
||||
function handleViewChanged() {
|
||||
noteList?.refresh(true);
|
||||
if (isMobile) $mobileView = 'notelist';
|
||||
}
|
||||
|
||||
async function createAndFocusNote() {
|
||||
if (isMobile && $mobileView !== 'notelist') $mobileView = 'notelist';
|
||||
await noteList?.handleCreateNote();
|
||||
editor?.focusTitle();
|
||||
if (isMobile) $mobileView = 'editor';
|
||||
}
|
||||
|
||||
async function handleDailyNote() {
|
||||
@@ -119,11 +173,17 @@
|
||||
editor?.loadNote(entry.path, content.content);
|
||||
noteList?.refresh();
|
||||
sidebar?.refresh();
|
||||
if (isMobile) $mobileView = 'editor';
|
||||
} catch (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) {
|
||||
if (e.button === 3) { e.preventDefault(); navigateHistory(-1); }
|
||||
if (e.button === 4) { e.preventDefault(); navigateHistory(1); }
|
||||
@@ -178,6 +238,12 @@
|
||||
e.preventDefault();
|
||||
$sourceMode = !$sourceMode;
|
||||
}
|
||||
if (mod && e.shiftKey && e.key === 'W') {
|
||||
e.preventDefault();
|
||||
if ($activeNotePath && $activeNote) {
|
||||
openNoteWindow($activeNotePath, $activeNote.meta.title);
|
||||
}
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
if ($showSettings) $showSettings = false;
|
||||
else if ($showInfo) $showInfo = false;
|
||||
@@ -226,76 +292,211 @@
|
||||
await sidebar?.refresh();
|
||||
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(() => {
|
||||
unlistenFileChange?.();
|
||||
unlistenOpenFile?.();
|
||||
if (backupInterval) clearInterval(backupInterval);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} onmousedown={handleMouseDown} />
|
||||
<svelte:window onkeydown={handleKeydown} onmousedown={isMobile ? undefined : handleMouseDown} />
|
||||
|
||||
<div class="app-shell">
|
||||
{#if $focusMode}
|
||||
<!-- 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(); }}>
|
||||
<span class="focus-title">{$activeNote?.meta.title || 'Untitled'}</span>
|
||||
<div class="focus-controls">
|
||||
<button class="focus-btn focus-active" onclick={() => ($focusMode = false)} title="Exit focus mode (Escape)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/>
|
||||
{#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>
|
||||
<button class="focus-btn" class:focus-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}
|
||||
{: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>
|
||||
</button>
|
||||
{#if !isMac}
|
||||
<button class="focus-btn" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.minimize()} title="Minimize">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
<button class="focus-btn" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.toggleMaximize()} title="Maximize">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><rect x="1" y="1" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
</button>
|
||||
<button class="focus-btn focus-close" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.close()} title="Close">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1.5" y1="1.5" x2="8.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="8.5" y1="1.5" x2="1.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{/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>
|
||||
{:else}
|
||||
<TitleBar onNewNote={createAndFocusNote} onDailyNote={handleDailyNote} />
|
||||
{/if}
|
||||
<div class="app-layout">
|
||||
{#if !$focusMode}
|
||||
<div class="sidebar-panel" style="width: {$sidebarCollapsed ? 44 : $sidebarWidth}px">
|
||||
|
||||
<!-- Mobile Content -->
|
||||
<div class="mobile-content">
|
||||
<div class="mobile-panel" class:active={$mobileView === 'sidebar'}>
|
||||
<Sidebar bind:this={sidebar} onViewChanged={handleViewChanged} />
|
||||
</div>
|
||||
|
||||
{#if !$sidebarCollapsed}
|
||||
<ResizeHandle onResize={handleSidebarResize} />
|
||||
{/if}
|
||||
|
||||
<div class="notelist-panel" style="width: {$notelistWidth}px">
|
||||
<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>
|
||||
|
||||
<ResizeHandle onResize={handleNotelistResize} />
|
||||
<!-- 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}
|
||||
<!-- 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(); }}>
|
||||
<span class="focus-title">{$activeNote?.meta.title || 'Untitled'}</span>
|
||||
<div class="focus-controls">
|
||||
<button class="focus-btn focus-active" onclick={() => ($focusMode = false)} title="Exit focus mode (Escape)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="focus-btn" class:focus-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>
|
||||
{#if !isMac}
|
||||
<button class="focus-btn" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.minimize()} title="Minimize">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
<button class="focus-btn" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.toggleMaximize()} title="Maximize">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><rect x="1" y="1" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
</button>
|
||||
<button class="focus-btn focus-close" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.close()} title="Close">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1.5" y1="1.5" x2="8.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="8.5" y1="1.5" x2="1.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<TitleBar onNewNote={createAndFocusNote} onDailyNote={handleDailyNote} />
|
||||
{/if}
|
||||
<div class="app-layout">
|
||||
{#if !$focusMode}
|
||||
<div class="sidebar-panel" style="width: {$sidebarCollapsed ? 44 : $sidebarWidth}px">
|
||||
<Sidebar bind:this={sidebar} onViewChanged={handleViewChanged} />
|
||||
</div>
|
||||
|
||||
<div class="editor-panel">
|
||||
<Editor bind:this={editor} />
|
||||
{#if !$sidebarCollapsed}
|
||||
<ResizeHandle onResize={handleSidebarResize} />
|
||||
{/if}
|
||||
|
||||
<div class="notelist-panel" style="width: {$notelistWidth}px">
|
||||
<NoteList bind:this={noteList} onNoteSelected={handleNoteSelected} onNoteMoved={() => sidebar?.refresh()} />
|
||||
</div>
|
||||
|
||||
<ResizeHandle onResize={handleNotelistResize} />
|
||||
{/if}
|
||||
|
||||
<div class="editor-panel">
|
||||
<Editor bind:this={editor} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<SearchPanel />
|
||||
<CommandPalette />
|
||||
@@ -303,6 +504,7 @@
|
||||
<InfoPanel />
|
||||
|
||||
<style>
|
||||
/* ═══ DESKTOP STYLES ═══ */
|
||||
.app-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -394,4 +596,124 @@
|
||||
.focus-topbar.macos {
|
||||
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>
|
||||
|
||||
@@ -39,13 +39,23 @@
|
||||
import { openFile, copyFileTo } from '$lib/api';
|
||||
import { save as saveDialog } from '@tauri-apps/plugin-dialog';
|
||||
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 { listen } from '@tauri-apps/api/event';
|
||||
import { debounce } from '$lib/utils/debounce';
|
||||
import GraphView from './GraphView.svelte';
|
||||
|
||||
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 sourceElement = $state<HTMLTextAreaElement>(null!);
|
||||
@@ -1190,6 +1200,21 @@
|
||||
}
|
||||
|
||||
export function loadNote(path: string, content: string) {
|
||||
// Flush any unsaved changes for the CURRENT note before loading the new one
|
||||
if ($editorDirty && $activeNote && $activeNotePath && $activeNotePath !== path) {
|
||||
try {
|
||||
const body = $sourceMode
|
||||
? restoreTitleH1(sourceContent)
|
||||
: editorToMarkdown();
|
||||
const trimmed = body.replace(/^#.*\n?/, '').trim();
|
||||
if (trimmed || !$activeNote.content || $activeNote.content.trim().length <= 10) {
|
||||
saveNote($activeNotePath, $activeNote.meta, body);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Pre-switch save failed:', e);
|
||||
}
|
||||
$editorDirty = false;
|
||||
}
|
||||
loadedPath = path;
|
||||
lastSourceMode = $sourceMode;
|
||||
isLoadingNote = true;
|
||||
@@ -1987,6 +2012,21 @@
|
||||
});
|
||||
|
||||
function destroyEditor() {
|
||||
// Flush unsaved changes before destroying
|
||||
if ($editorDirty && $activeNote && $activeNotePath && editor) {
|
||||
try {
|
||||
const body = $sourceMode
|
||||
? restoreTitleH1(sourceContent)
|
||||
: editorToMarkdown();
|
||||
const trimmed = body.replace(/^#.*\n?/, '').trim();
|
||||
if (trimmed || !$activeNote.content || $activeNote.content.trim().length <= 10) {
|
||||
saveNote($activeNotePath, $activeNote.meta, body);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Destroy-save failed:', e);
|
||||
}
|
||||
$editorDirty = false;
|
||||
}
|
||||
if (editor) {
|
||||
editor.destroy();
|
||||
editor = null;
|
||||
@@ -2033,7 +2073,7 @@
|
||||
PdfEmbed,
|
||||
MathBlock,
|
||||
MathInline,
|
||||
Details.configure({ persist: true, HTMLAttributes: { class: 'editor-details' } }),
|
||||
Details.configure({ persist: false, HTMLAttributes: { class: 'editor-details' } }),
|
||||
DetailsSummary,
|
||||
DetailsContent,
|
||||
TextAlign.configure({ types: ['heading', 'paragraph'] }),
|
||||
@@ -2898,7 +2938,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="editor-container">
|
||||
<div class="editor-container" class:mobile={isMobile}>
|
||||
{#if !$activeNote}
|
||||
<div class="empty-editor">
|
||||
<div class="empty-icon">
|
||||
@@ -2914,7 +2954,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="editor-toolbar">
|
||||
<div class="editor-toolbar" class:mobile={isMobile}>
|
||||
<div class="editor-title">
|
||||
<input
|
||||
bind:this={titleInput}
|
||||
@@ -2931,27 +2971,53 @@
|
||||
editor?.commands.focus('start');
|
||||
}
|
||||
}}
|
||||
onchange={(e) => {
|
||||
if ($activeNote) {
|
||||
const newTitle = (e.target as HTMLInputElement).value;
|
||||
onchange={async (e) => {
|
||||
if ($activeNote && $activeNotePath) {
|
||||
const newTitle = (e.target as HTMLInputElement).value.trim();
|
||||
if (!newTitle) return;
|
||||
const oldPath = $activeNotePath;
|
||||
$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
|
||||
));
|
||||
// Update stripped title so restoreTitleH1 uses the new title
|
||||
if (titleWasStripped) strippedTitle = newTitle;
|
||||
$editorDirty = true;
|
||||
autoSave();
|
||||
// Force save current editor content before renaming so disk is up-to-date
|
||||
await forceSave();
|
||||
// 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);
|
||||
loadedPath = newPath;
|
||||
$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 class="toolbar-actions">
|
||||
<div class="toolbar-actions" class:mobile={isMobile}>
|
||||
{#if $editorDirty}
|
||||
<span class="save-indicator">Unsaved</span>
|
||||
{/if}
|
||||
{#if $readOnly}
|
||||
<span class="readonly-indicator">View Mode</span>
|
||||
{/if}
|
||||
{#if !isMobile}
|
||||
<button
|
||||
class="icon-btn"
|
||||
class:active={noteSearchOpen}
|
||||
@@ -2962,6 +3028,7 @@
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="icon-btn"
|
||||
@@ -2975,7 +3042,7 @@
|
||||
}}
|
||||
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="M9 2h6l-1 7h4l-2 4H8l-2-4h4L9 2z"/>
|
||||
</svg>
|
||||
@@ -2999,7 +3066,7 @@
|
||||
}}
|
||||
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" />
|
||||
</svg>
|
||||
</button>
|
||||
@@ -3009,7 +3076,7 @@
|
||||
onclick={() => { showOutline = !showOutline; if (showOutline) updateOutline(); }}
|
||||
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"/>
|
||||
</svg>
|
||||
</button>
|
||||
@@ -3019,11 +3086,12 @@
|
||||
onclick={toggleHistory}
|
||||
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"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
</button>
|
||||
{#if !isMobile}
|
||||
{#if $appConfig?.enable_wiki_links}
|
||||
<button
|
||||
class="icon-btn"
|
||||
@@ -3058,6 +3126,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" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3285,7 +3354,116 @@
|
||||
|
||||
{#if editorReady && !$sourceMode}
|
||||
<!-- 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 -->
|
||||
<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">
|
||||
@@ -3587,6 +3765,8 @@
|
||||
}} 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>
|
||||
</button>
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -4692,7 +4872,7 @@
|
||||
color: var(--text-primary);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
|
||||
font-size: var(--editor-font-size, 14px);
|
||||
line-height: 1.6;
|
||||
line-height: var(--editor-line-height, 1.6);
|
||||
resize: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
@@ -4720,7 +4900,7 @@
|
||||
padding-top: 8px;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
|
||||
font-size: var(--editor-font-size, 14px);
|
||||
line-height: 1.6;
|
||||
line-height: var(--editor-line-height, 1.6);
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
text-align: right;
|
||||
@@ -4749,7 +4929,7 @@
|
||||
|
||||
:global(.tiptap-wrapper .tiptap p) {
|
||||
margin: 0 0 0.75em;
|
||||
line-height: 1.65;
|
||||
line-height: var(--editor-line-height, 1.65);
|
||||
}
|
||||
|
||||
:global(.tiptap-wrapper .tiptap h1) {
|
||||
@@ -5067,7 +5247,7 @@
|
||||
|
||||
:global(.tiptap-wrapper .tiptap li) {
|
||||
margin: 0.25em 0;
|
||||
line-height: 1.65;
|
||||
line-height: var(--editor-line-height, 1.65);
|
||||
}
|
||||
|
||||
:global(.tiptap-wrapper .tiptap li p) {
|
||||
@@ -6149,4 +6329,155 @@
|
||||
text-overflow: ellipsis;
|
||||
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>
|
||||
|
||||
@@ -126,6 +126,8 @@
|
||||
<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 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">Open note in new window</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>W</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>
|
||||
@@ -164,7 +166,8 @@
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 500px;
|
||||
max-height: 80vh;
|
||||
height: 80vh;
|
||||
max-height: 600px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -201,7 +204,7 @@
|
||||
}
|
||||
|
||||
.info-body {
|
||||
padding: 0 24px 32px;
|
||||
padding: 0 24px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -244,6 +247,7 @@
|
||||
}
|
||||
|
||||
.info-logo {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
getAllTags
|
||||
} from '$lib/api';
|
||||
import { formatRelativeTime } from '$lib/utils/time';
|
||||
import { openNoteWindow } from '$lib/utils/window';
|
||||
import type { NoteEntry, SortMode } from '$lib/types';
|
||||
|
||||
let { onNoteSelected = (_path: string, _content: string) => {}, onNoteMoved = () => {} }: {
|
||||
@@ -40,6 +41,7 @@
|
||||
} = $props();
|
||||
|
||||
const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
|
||||
const isMobile = /android|ios/i.test(navigator.userAgent);
|
||||
|
||||
let compact = $derived($appConfig?.compact_notes ?? false);
|
||||
let contextMenu = $state<{ x: number; y: number; note: NoteEntry } | null>(null);
|
||||
@@ -456,6 +458,12 @@
|
||||
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) {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
// Toggle individual selection
|
||||
@@ -575,7 +583,7 @@
|
||||
}
|
||||
}} />
|
||||
|
||||
<div class="note-list">
|
||||
<div class="note-list" class:mobile={isMobile}>
|
||||
<div class="list-header">
|
||||
<span class="list-title">{viewTitle}</span>
|
||||
<div class="list-actions">
|
||||
@@ -728,7 +736,7 @@
|
||||
ondragend={() => { qaDragFrom = null; qaDragOver = null; }}
|
||||
>
|
||||
{#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">
|
||||
{#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">
|
||||
@@ -737,10 +745,13 @@
|
||||
{/if}
|
||||
{note.meta.title}
|
||||
</span>
|
||||
{#if getNotebookPath(note)}
|
||||
<span class="note-notebook">{getNotebookPath(note)}</span>
|
||||
{/if}
|
||||
<span class="note-date-compact">{formatRelativeTime(note.meta.modified)}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="note-title">
|
||||
<div class="note-title" title={getNotebookPath(note) ? `${getNotebookPath(note)}/${note.meta.title}` : note.meta.title}>
|
||||
{#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">
|
||||
<path d="M12 17v5"/><path d="M9 2h6l-1 7h4l-2 4H8l-2-4h4L9 2z"/>
|
||||
@@ -750,6 +761,10 @@
|
||||
</div>
|
||||
<div class="note-preview">{note.preview}</div>
|
||||
<div class="note-meta">
|
||||
{#if getNotebookPath(note)}
|
||||
<span class="note-notebook">{getNotebookPath(note)}</span>
|
||||
<span class="note-meta-sep">·</span>
|
||||
{/if}
|
||||
<span class="note-date">{formatRelativeTime(note.meta.modified)}</span>
|
||||
{#if note.meta.tags.length > 0}
|
||||
<span class="note-tags">
|
||||
@@ -922,6 +937,12 @@
|
||||
Add to Quick Access
|
||||
</button>
|
||||
{/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)}>
|
||||
<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"/>
|
||||
@@ -1242,6 +1263,26 @@
|
||||
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 {
|
||||
font-size: 0.78em;
|
||||
color: var(--text-tertiary);
|
||||
@@ -1475,4 +1516,132 @@
|
||||
.note-item.qa-drag-below {
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
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 { listen } from '@tauri-apps/api/event';
|
||||
import { check as checkUpdate } from '@tauri-apps/plugin-updater';
|
||||
@@ -204,18 +204,20 @@
|
||||
let aiProvider = $state<string | null>($appConfig?.ai_provider ?? null);
|
||||
let aiApiKey = $derived.by(() => {
|
||||
if (aiProvider === 'openai') return _openaiKey;
|
||||
if (aiProvider === 'ollama') return '';
|
||||
return _anthropicKey;
|
||||
});
|
||||
let _anthropicKey = $state($appConfig?.ai_api_key ?? '');
|
||||
let _openaiKey = $state($appConfig?.openai_api_key ?? '');
|
||||
let aiModel = $state($appConfig?.ai_model ?? 'claude-sonnet-4-5-20250929');
|
||||
let _ollamaBaseUrl = $state($appConfig?.ollama_base_url ?? 'http://localhost:11434');
|
||||
let aiModel = $state($appConfig?.ai_model ?? 'claude-sonnet-4-6');
|
||||
let aiWritingStyle = $state($appConfig?.ai_writing_style ?? '');
|
||||
let aiShowKey = $state(false);
|
||||
let aiTestLoading = $state(false);
|
||||
let aiTestMessage = $state<{ type: 'success' | 'error'; text: string } | null>(null);
|
||||
|
||||
const anthropicModels = [
|
||||
{ value: 'claude-sonnet-4-5-20250929', label: 'Claude Sonnet 4.5', desc: 'Balanced' },
|
||||
{ value: 'claude-sonnet-4-6', label: 'Claude Sonnet 4.6', desc: 'Balanced' },
|
||||
{ value: 'claude-opus-4-6', label: 'Claude Opus 4.6', desc: 'Most capable' },
|
||||
{ value: 'claude-haiku-4-5-20251001', label: 'Claude Haiku 4.5', desc: 'Fast' },
|
||||
];
|
||||
@@ -228,13 +230,15 @@
|
||||
let aiModels = $derived(aiProvider === 'openai' ? openaiModels : anthropicModels);
|
||||
|
||||
async function saveAiSettings() {
|
||||
await setAiSettings(aiProvider, aiApiKey || null, aiModel, aiWritingStyle || null);
|
||||
const baseUrl = aiProvider === 'ollama' ? (_ollamaBaseUrl || null) : null;
|
||||
await setAiSettings(aiProvider, aiApiKey || null, aiModel, aiWritingStyle || null, baseUrl);
|
||||
if ($appConfig) {
|
||||
$appConfig = {
|
||||
...$appConfig,
|
||||
ai_provider: aiProvider,
|
||||
ai_api_key: _anthropicKey || null,
|
||||
openai_api_key: _openaiKey || null,
|
||||
ollama_base_url: _ollamaBaseUrl || null,
|
||||
ai_model: aiModel,
|
||||
ai_writing_style: aiWritingStyle || null,
|
||||
};
|
||||
@@ -293,9 +297,17 @@
|
||||
{ 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 activeFontSize = $state($appConfig?.font_size ?? 14);
|
||||
let activeFontFamily = $state($appConfig?.font_family ?? 'system');
|
||||
let activeLineHeight = $state($appConfig?.line_height ?? 1.6);
|
||||
|
||||
// General settings
|
||||
let compactNotes = $state($appConfig?.compact_notes ?? false);
|
||||
@@ -422,6 +434,17 @@
|
||||
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() {
|
||||
// Ensure AI settings are saved when closing (in case input wasn't blurred)
|
||||
// Only save if the key differs from what's already stored
|
||||
@@ -454,6 +477,11 @@
|
||||
applyFontFamily(preset.stack);
|
||||
}
|
||||
}
|
||||
const savedLineHeight = $appConfig?.line_height;
|
||||
if (savedLineHeight) {
|
||||
activeLineHeight = savedLineHeight;
|
||||
applyLineHeight(savedLineHeight);
|
||||
}
|
||||
// Sync general settings
|
||||
if ($appConfig) {
|
||||
compactNotes = $appConfig.compact_notes ?? false;
|
||||
@@ -612,13 +640,7 @@
|
||||
<div class="tab-content">
|
||||
<div class="settings-section">
|
||||
<h3>Title</h3>
|
||||
<div class="setting-options">
|
||||
<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;">
|
||||
<label class="setting-toggle">
|
||||
<span class="setting-label">
|
||||
<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>
|
||||
@@ -754,6 +776,22 @@
|
||||
</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">
|
||||
<h3>Font</h3>
|
||||
<div class="font-family-options">
|
||||
@@ -947,52 +985,86 @@
|
||||
<h3>Provider</h3>
|
||||
<div class="setting-options">
|
||||
<button class="option-btn" class:active={!aiProvider} onclick={() => { if (!aiProvider) return; aiProvider = null; aiTestMessage = null; saveAiSettings(); }}>Disabled</button>
|
||||
<button class="option-btn" class:active={aiProvider === 'anthropic'} onclick={() => { if (aiProvider === 'anthropic') return; aiProvider = 'anthropic'; aiModel = 'claude-sonnet-4-5-20250929'; aiTestMessage = null; saveAiSettings(); }}>Anthropic</button>
|
||||
<button class="option-btn" class:active={aiProvider === 'ollama'} onclick={() => { if (aiProvider === 'ollama') return; aiProvider = 'ollama'; aiModel = 'gemma3:4b'; aiTestMessage = null; saveAiSettings(); }}>Ollama</button>
|
||||
<button class="option-btn" class:active={aiProvider === 'anthropic'} onclick={() => { if (aiProvider === 'anthropic') return; aiProvider = 'anthropic'; aiModel = 'claude-sonnet-4-6'; aiTestMessage = null; saveAiSettings(); }}>Anthropic</button>
|
||||
<button class="option-btn" class:active={aiProvider === 'openai'} onclick={() => { if (aiProvider === 'openai') return; aiProvider = 'openai'; aiModel = 'gpt-5.2'; aiTestMessage = null; saveAiSettings(); }}>OpenAI</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if aiProvider}
|
||||
<div class="settings-section">
|
||||
<h3>API Key</h3>
|
||||
<div class="ai-key-row">
|
||||
{#if aiProvider === 'ollama'}
|
||||
<p class="setting-hint" style="color: var(--text-success, #4ade80); margin-top: -4px; margin-bottom: 12px;">Your data stays on your device. No text is sent to any external server.</p>
|
||||
{:else}
|
||||
<p class="setting-hint" style="color: var(--text-warning, #f59e0b); margin-top: -4px; margin-bottom: 12px;">Your selected text and note content will be sent to {aiProvider === 'openai' ? 'OpenAI' : 'Anthropic'} servers for processing.</p>
|
||||
{/if}
|
||||
|
||||
{#if aiProvider === 'ollama'}
|
||||
<div class="settings-section">
|
||||
<h3>Server URL</h3>
|
||||
<input
|
||||
type={aiShowKey ? 'text' : 'password'}
|
||||
type="text"
|
||||
class="ai-key-input"
|
||||
placeholder={aiProvider === 'openai' ? 'sk-...' : 'sk-ant-...'}
|
||||
value={aiApiKey}
|
||||
oninput={(e) => { const v = (e.target as HTMLInputElement).value; if (aiProvider === 'openai') _openaiKey = v; else _anthropicKey = v; }}
|
||||
placeholder="http://localhost:11434"
|
||||
value={_ollamaBaseUrl}
|
||||
oninput={(e) => { _ollamaBaseUrl = (e.target as HTMLInputElement).value; }}
|
||||
onblur={saveAiSettings}
|
||||
/>
|
||||
<button class="ai-key-toggle" onclick={() => aiShowKey = !aiShowKey} title={aiShowKey ? 'Hide' : 'Show'}>
|
||||
{#if aiShowKey}
|
||||
<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="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
|
||||
{:else}
|
||||
<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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
{/if}
|
||||
</button>
|
||||
<p class="setting-hint">Ollama server address. Install from <a href="https://ollama.com" target="_blank" class="ai-link">ollama.com</a></p>
|
||||
</div>
|
||||
{#if aiProvider === 'openai'}
|
||||
<p class="setting-hint">Get your API key from <a href="https://platform.openai.com/api-keys" target="_blank" class="ai-link">platform.openai.com</a></p>
|
||||
{:else}
|
||||
<p class="setting-hint">Get your API key from <a href="https://console.anthropic.com/settings/keys" target="_blank" class="ai-link">console.anthropic.com</a></p>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="settings-section">
|
||||
<h3>API Key</h3>
|
||||
<div class="ai-key-row">
|
||||
<input
|
||||
type={aiShowKey ? 'text' : 'password'}
|
||||
class="ai-key-input"
|
||||
placeholder={aiProvider === 'openai' ? 'sk-...' : 'sk-ant-...'}
|
||||
value={aiApiKey}
|
||||
oninput={(e) => { const v = (e.target as HTMLInputElement).value; if (aiProvider === 'openai') _openaiKey = v; else _anthropicKey = v; }}
|
||||
onblur={saveAiSettings}
|
||||
/>
|
||||
<button class="ai-key-toggle" onclick={() => aiShowKey = !aiShowKey} title={aiShowKey ? 'Hide' : 'Show'}>
|
||||
{#if aiShowKey}
|
||||
<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="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
|
||||
{:else}
|
||||
<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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{#if aiProvider === 'openai'}
|
||||
<p class="setting-hint">Get your API key from <a href="https://platform.openai.com/api-keys" target="_blank" class="ai-link">platform.openai.com</a></p>
|
||||
{:else}
|
||||
<p class="setting-hint">Get your API key from <a href="https://console.anthropic.com/settings/keys" target="_blank" class="ai-link">console.anthropic.com</a></p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>Model</h3>
|
||||
<div class="ai-model-options">
|
||||
{#each aiModels as m}
|
||||
<button
|
||||
class="ai-model-btn"
|
||||
class:active={aiModel === m.value}
|
||||
onclick={() => { aiModel = m.value; saveAiSettings(); }}
|
||||
>
|
||||
<span class="ai-model-name">{m.label}</span>
|
||||
<span class="ai-model-desc">{m.desc}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#if aiProvider === 'ollama'}
|
||||
<input
|
||||
type="text"
|
||||
class="ai-key-input"
|
||||
placeholder="gemma3:4b"
|
||||
value={aiModel}
|
||||
oninput={(e) => { aiModel = (e.target as HTMLInputElement).value; }}
|
||||
onblur={saveAiSettings}
|
||||
/>
|
||||
<p class="setting-hint">Enter the model name as shown by <code>ollama list</code></p>
|
||||
{:else}
|
||||
<div class="ai-model-options">
|
||||
{#each aiModels as m}
|
||||
<button
|
||||
class="ai-model-btn"
|
||||
class:active={aiModel === m.value}
|
||||
onclick={() => { aiModel = m.value; saveAiSettings(); }}
|
||||
>
|
||||
<span class="ai-model-name">{m.label}</span>
|
||||
<span class="ai-model-desc">{m.desc}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
@@ -1010,7 +1082,7 @@
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>Connection</h3>
|
||||
<button class="import-btn" onclick={handleTestAi} disabled={aiTestLoading || !aiApiKey}>
|
||||
<button class="import-btn" onclick={handleTestAi} disabled={aiTestLoading || (aiProvider !== 'ollama' && !aiApiKey)}>
|
||||
{#if aiTestLoading}
|
||||
<svg class="spinner-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" opacity="0.25" /><path d="M12 2a10 10 0 019.95 9" /></svg>
|
||||
Testing...
|
||||
@@ -1147,7 +1219,8 @@
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 620px;
|
||||
max-height: 80vh;
|
||||
height: 80vh;
|
||||
max-height: 700px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
} = $props();
|
||||
|
||||
const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
|
||||
const isMobile = /android|ios/i.test(navigator.userAgent);
|
||||
|
||||
let editingNotebook = $state<string | null>(null);
|
||||
let editValue = $state('');
|
||||
@@ -68,6 +69,11 @@
|
||||
}
|
||||
|
||||
function selectNotebook(nb: NotebookEntry) {
|
||||
// Deselect if clicking the already-active notebook
|
||||
if ($viewMode === 'notebook' && $activeNotebook?.path === nb.path) {
|
||||
selectAllNotes();
|
||||
return;
|
||||
}
|
||||
$viewMode = 'notebook';
|
||||
$activeNotebook = nb;
|
||||
$activeTag = null;
|
||||
@@ -95,18 +101,33 @@
|
||||
onViewChanged();
|
||||
}
|
||||
|
||||
let newNotebookParent = $state<NotebookEntry | null>(null);
|
||||
|
||||
async function handleCreateNotebook() {
|
||||
if (!newNotebookName.trim()) return;
|
||||
try {
|
||||
await createNotebook(null, newNotebookName.trim());
|
||||
const parentRel = newNotebookParent?.relative_path ?? null;
|
||||
await createNotebook(parentRel, newNotebookName.trim());
|
||||
newNotebookName = '';
|
||||
showNewNotebook = false;
|
||||
newNotebookParent = null;
|
||||
await refresh();
|
||||
} catch (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) {
|
||||
if (!editValue.trim() || editValue.trim() === nb.name) {
|
||||
editingNotebook = null;
|
||||
@@ -288,7 +309,7 @@
|
||||
|
||||
<svelte:window onclick={handleWindowClick} />
|
||||
|
||||
<aside class="sidebar" class:collapsed={$sidebarCollapsed}>
|
||||
<aside class="sidebar" class:collapsed={$sidebarCollapsed} class:mobile={isMobile}>
|
||||
<div class="sidebar-header">
|
||||
<button class="collapse-btn" onclick={() => ($sidebarCollapsed = !$sidebarCollapsed)} title="Toggle sidebar">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
@@ -368,7 +389,14 @@
|
||||
}}
|
||||
>
|
||||
<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">
|
||||
<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
@@ -377,13 +405,16 @@
|
||||
|
||||
{#if showNewNotebook}
|
||||
<div class="new-notebook-input">
|
||||
{#if newNotebookParent}
|
||||
<span class="new-notebook-parent">{newNotebookParent.name}/</span>
|
||||
{/if}
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newNotebookName}
|
||||
placeholder="Notebook name..."
|
||||
placeholder={newNotebookParent ? 'Sub-notebook name...' : 'Notebook name...'}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Enter') handleCreateNotebook();
|
||||
if (e.key === 'Escape') { showNewNotebook = false; newNotebookName = ''; }
|
||||
if (e.key === 'Escape') { showNewNotebook = false; newNotebookName = ''; newNotebookParent = null; }
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -444,6 +475,10 @@
|
||||
{#if contextMenu}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="context-menu" style="left: {contextMenu.x}px; top: {contextMenu.y}px" onmousedown={(e) => e.stopPropagation()}>
|
||||
<button onclick={() => 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)}>
|
||||
<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
|
||||
@@ -699,9 +734,35 @@
|
||||
|
||||
.new-notebook-input {
|
||||
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%;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--accent);
|
||||
@@ -957,4 +1018,128 @@
|
||||
.delete-confirm-btn:hover {
|
||||
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>
|
||||
|
||||
@@ -6,15 +6,22 @@
|
||||
import type { VaultConfig } from '$lib/types';
|
||||
|
||||
const appWindow = getCurrentWindow();
|
||||
const isMobile = /android|ios/i.test(navigator.userAgent);
|
||||
|
||||
let recentVaults: VaultConfig[] = $derived($appConfig?.vaults ?? []);
|
||||
let loading = $state(false);
|
||||
let error = $state('');
|
||||
|
||||
async function pickFolder() {
|
||||
const selected = await open({ directory: true, multiple: false, title: 'Choose Notes Folder' });
|
||||
if (selected) {
|
||||
await openSelectedVault(selected as string);
|
||||
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' });
|
||||
if (selected) {
|
||||
await openSelectedVault(selected as string);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,7 +42,8 @@
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="vault-picker" onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button, .picker-card')) appWindow.startDragging(); }}>
|
||||
<div class="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">
|
||||
<button class="window-close" onclick={() => appWindow.close()} title="Close">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
@@ -44,6 +52,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="picker-card">
|
||||
<div class="logo">
|
||||
<svg width="72" height="72" viewBox="0 0 48 48" fill="none">
|
||||
@@ -58,7 +67,11 @@
|
||||
</div>
|
||||
<h1>HelixNotes</h1>
|
||||
<p class="subtitle">Local markdown notes</p>
|
||||
<p class="description">Your notes are stored as standard Markdown (.md) files. Pick any folder — existing .md files will be recognized automatically.</p>
|
||||
{#if 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>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="error">{error}</div>
|
||||
@@ -67,18 +80,20 @@
|
||||
<button class="btn-primary" onclick={pickFolder} disabled={loading}>
|
||||
{#if loading}
|
||||
Opening...
|
||||
{:else if isMobile}
|
||||
Get Started
|
||||
{:else}
|
||||
Open Notes Folder
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if $appConfig?.active_vault}
|
||||
{#if !isMobile && $appConfig?.active_vault}
|
||||
<button class="btn-back" onclick={() => ($vaultReady = true)}>
|
||||
Back
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if recentVaults.length > 0}
|
||||
{#if !isMobile && recentVaults.length > 0}
|
||||
<div class="recent">
|
||||
<span class="recent-label">Recent</span>
|
||||
{#each recentVaults as vault}
|
||||
@@ -260,4 +275,24 @@
|
||||
text-overflow: ellipsis;
|
||||
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>
|
||||
|
||||
@@ -38,6 +38,11 @@ export const activeNotePath = writable<string | null>(null);
|
||||
export const activeNotebook = writable<NotebookEntry | null>(null);
|
||||
export const activeTag = writable<string | null>(null);
|
||||
|
||||
// Mobile state
|
||||
export const mobileView = writable<"sidebar" | "notelist" | "editor">(
|
||||
"sidebar",
|
||||
);
|
||||
|
||||
// Editor state
|
||||
export const editorDirty = writable(false);
|
||||
export const sourceMode = writable(false);
|
||||
|
||||
@@ -41,6 +41,7 @@ export interface AppConfig {
|
||||
accent_color: string | null;
|
||||
font_size: number | null;
|
||||
font_family: string | null;
|
||||
line_height: number | null;
|
||||
compact_notes: boolean;
|
||||
time_format: string;
|
||||
gpu_acceleration: boolean;
|
||||
@@ -59,6 +60,7 @@ export interface AppConfig {
|
||||
ai_provider: string | null;
|
||||
ai_api_key: string | null;
|
||||
openai_api_key: string | null;
|
||||
ollama_base_url: string | null;
|
||||
ai_model: string;
|
||||
ai_writing_style: string | null;
|
||||
default_view_mode: boolean;
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
@@ -8,6 +8,8 @@
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
const isMobile = /android|ios/i.test(navigator.userAgent);
|
||||
|
||||
// Reactively apply theme class to <html> whenever $theme changes
|
||||
$effect(() => {
|
||||
const t = $theme;
|
||||
@@ -31,10 +33,12 @@
|
||||
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(() => {
|
||||
getInstallType().then(t => installType.set(t)).catch(() => {});
|
||||
checkForUpdate();
|
||||
if (!isMobile) {
|
||||
getInstallType().then(t => installType.set(t)).catch(() => {});
|
||||
checkForUpdate();
|
||||
}
|
||||
});
|
||||
|
||||
// Intercept all link clicks in capture phase to prevent webview navigation
|
||||
@@ -74,7 +78,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:document oncontextmenu={(e) => e.preventDefault()} />
|
||||
<svelte:document oncontextmenu={(e) => { if (!isMobile) e.preventDefault(); }} />
|
||||
|
||||
<svelte:head>
|
||||
<title>HelixNotes</title>
|
||||
|
||||
+18
-1
@@ -4,10 +4,19 @@
|
||||
import { getAppConfig, openVault } from '$lib/api';
|
||||
import VaultPicker from '$lib/components/VaultPicker.svelte';
|
||||
import AppLayout from '$lib/components/AppLayout.svelte';
|
||||
import NoteWindow from '$lib/components/NoteWindow.svelte';
|
||||
|
||||
let loading = $state(true);
|
||||
let noteWindowPath = $state<string | null>(null);
|
||||
|
||||
onMount(async () => {
|
||||
// Check for note window mode
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const notePath = params.get('note');
|
||||
if (notePath) {
|
||||
noteWindowPath = notePath;
|
||||
}
|
||||
|
||||
try {
|
||||
const config = await getAppConfig();
|
||||
$appConfig = config;
|
||||
@@ -25,6 +34,9 @@
|
||||
if (config.font_size) {
|
||||
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) {
|
||||
const fontStacks: Record<string, string> = {
|
||||
system: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
@@ -69,7 +81,10 @@
|
||||
// Auto-open last vault if available
|
||||
if (config.active_vault) {
|
||||
try {
|
||||
await openVault(config.active_vault);
|
||||
// Note windows don't re-open the vault (already open in main process)
|
||||
if (!noteWindowPath) {
|
||||
await openVault(config.active_vault);
|
||||
}
|
||||
$vaultReady = true;
|
||||
} catch {
|
||||
// Vault path might not exist anymore
|
||||
@@ -86,6 +101,8 @@
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
{:else if noteWindowPath}
|
||||
<NoteWindow notePath={noteWindowPath} />
|
||||
{:else if $vaultReady}
|
||||
<AppLayout />
|
||||
{:else}
|
||||
|
||||
Reference in New Issue
Block a user