v1.1.9 - Android version prep

This commit is contained in:
Yuri Karamian
2026-02-26 18:19:11 +01:00
parent 245935bab0
commit a26f047d2b
49 changed files with 1315 additions and 337 deletions
+2 -3
View File
@@ -38,9 +38,8 @@ reqwest = { version = "0.12", default-features = false, features = ["json", "str
futures = "0.3"
rayon = "1"
rustls = { version = "0.23", default-features = false, features = ["ring", "logging", "std", "tls12"] }
arboard = { version = "3", features = ["image-data", "wayland-data-control"] }
png = "0.17"
[target.'cfg(not(target_os = "android"))'.dependencies]
tauri-plugin-updater = "2"
tauri-plugin-single-instance = "2"
arboard = { version = "3", features = ["image-data", "wayland-data-control"] }
png = "0.17"
Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 953 B

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 793 B

After

Width:  |  Height:  |  Size: 1023 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 735 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

+22 -3
View File
@@ -11,9 +11,21 @@ use tauri::{AppHandle, Manager, State};
pub fn open_vault(app: AppHandle, state: State<'_, AppState>, path: String) -> Result<(), String> {
operations::ensure_vault_structure(&path)?;
// Initialize search index
let search = SearchIndex::new(&path)?;
search.rebuild(&path)?;
// Initialize search index — rebuild in background on Android (FUSE is slow)
let search = std::sync::Arc::new(SearchIndex::new(&path)?);
#[cfg(target_os = "android")]
{
let search_bg = search.clone();
let vault = path.clone();
std::thread::spawn(move || {
let _ = search_bg.rebuild(&vault);
log::info!("Android: search index rebuild complete");
});
}
#[cfg(not(target_os = "android"))]
{
search.rebuild(&path)?;
}
*state.search_index.lock().map_err(|e| e.to_string())? = Some(search);
// Start file watcher
@@ -466,6 +478,7 @@ pub fn save_vault_state(state: State<'_, AppState>, vault_state: VaultState) ->
/// Read image from system clipboard (bypasses WebKitGTK clipboard bug).
/// Returns PNG bytes as Vec<u8>, or error if no image on clipboard.
#[cfg(not(target_os = "android"))]
#[tauri::command]
pub fn read_clipboard_image() -> Result<Vec<u8>, String> {
let mut clipboard =
@@ -490,6 +503,12 @@ pub fn read_clipboard_image() -> Result<Vec<u8>, String> {
Ok(buf)
}
#[cfg(target_os = "android")]
#[tauri::command]
pub fn read_clipboard_image() -> Result<Vec<u8>, String> {
Err("Clipboard image reading not supported on Android".to_string())
}
// ── Attachments ──
#[tauri::command]
+6 -1
View File
@@ -44,7 +44,7 @@ pub fn run() {
)?;
}
// On Android, set config dir from Tauri's path resolver
// On Android, set config dir from Tauri's path resolver, then reload config
#[cfg(target_os = "android")]
{
if let Ok(config_dir) = app.path().config_dir() {
@@ -52,6 +52,11 @@ pub fn run() {
} else if let Ok(data_dir) = app.path().data_dir() {
commands::set_android_config_dir(data_dir);
}
// Reload config now that the Android config dir is available
let reloaded = commands::load_app_config();
let _ = app.state::<AppState>().config.lock().map(|mut cfg| {
*cfg = reloaded;
});
}
#[cfg(not(target_os = "android"))]
+7 -5
View File
@@ -77,18 +77,20 @@ impl SearchIndex {
for entry in WalkDir::new(vault_path)
.into_iter()
.filter_map(|e| e.ok())
.filter(|e| {
.filter_entry(|e| {
let p = e.path();
p.is_file()
&& p.extension().and_then(|x| x.to_str()) == Some("md")
&& !p.starts_with(&hn_dir)
!p.starts_with(&hn_dir)
&& !p
.file_name()
.and_then(|n| n.to_str())
.map(|n| n.starts_with('.'))
.unwrap_or(false)
})
.filter_map(|e| e.ok())
.filter(|e| {
e.file_type().is_file()
&& e.path().extension().and_then(|x| x.to_str()) == Some("md")
})
{
if let Ok(raw) = fs::read_to_string(entry.path()) {
let filename = entry.file_name().to_string_lossy().to_string();
+2 -1
View File
@@ -3,10 +3,11 @@ use crate::types::AppConfig;
use notify::RecommendedWatcher;
use std::sync::atomic::AtomicBool;
use std::sync::Mutex;
use std::sync::Arc;
pub struct AppState {
pub config: Mutex<AppConfig>,
pub search_index: Mutex<Option<SearchIndex>>,
pub search_index: Mutex<Option<Arc<SearchIndex>>>,
pub watcher: Mutex<Option<RecommendedWatcher>>,
pub importing: AtomicBool,
pub pending_open_file: Mutex<Option<String>>,
+176 -41
View File
@@ -59,11 +59,11 @@ fn scan_dir_recursive(dir: &Path, vault_root: &str) -> Vec<NotebookEntry> {
return entries;
};
// Collect subdirs (root level only lists directories, note counts come from scan_dir_with_count)
let mut dirs: Vec<_> = read_dir
.filter_map(|e| e.ok())
.filter(|e| {
let path = e.path();
path.is_dir() && !is_hidden(&path)
e.file_type().map(|ft| ft.is_dir()).unwrap_or(false) && !is_hidden(&e.path())
})
.collect();
@@ -74,6 +74,8 @@ fn scan_dir_recursive(dir: &Path, vault_root: &str) -> Vec<NotebookEntry> {
.cmp(&b.file_name().to_string_lossy().to_lowercase())
});
// Store note_count for the parent directory (used when this is the top-level call)
// Each directory pushes its own entry with its own note_count
for dir_entry in dirs {
let path = dir_entry.path();
let name = dir_entry.file_name().to_string_lossy().to_string();
@@ -83,32 +85,71 @@ fn scan_dir_recursive(dir: &Path, vault_root: &str) -> Vec<NotebookEntry> {
.to_string_lossy()
.to_string();
let children = scan_dir_recursive(&path, vault_root);
let note_count = count_notes_in_dir(&path);
let (children, child_note_count) = scan_dir_with_count(&path, vault_root);
entries.push(NotebookEntry {
name,
path: path.to_string_lossy().to_string(),
relative_path: relative,
children,
note_count,
note_count: child_note_count,
});
}
entries
}
fn count_notes_in_dir(dir: &Path) -> usize {
fs::read_dir(dir)
.map(|rd| {
rd.filter_map(|e| e.ok())
.filter(|e| {
let path = e.path();
path.is_file() && path.extension().and_then(|x| x.to_str()) == Some("md")
})
.count()
})
.unwrap_or(0)
/// Combined scan: returns (children, note_count) in a single read_dir pass.
fn scan_dir_with_count(dir: &Path, vault_root: &str) -> (Vec<NotebookEntry>, usize) {
let root = Path::new(vault_root);
let Ok(read_dir) = fs::read_dir(dir) else {
return (Vec::new(), 0);
};
let mut subdirs = Vec::new();
let mut note_count = 0usize;
for entry in read_dir.filter_map(|e| e.ok()) {
let ft = match entry.file_type() {
Ok(ft) => ft,
Err(_) => continue,
};
if ft.is_dir() && !is_hidden(&entry.path()) {
subdirs.push(entry);
} else if ft.is_file() && entry.path().extension().and_then(|x| x.to_str()) == Some("md") {
note_count += 1;
}
}
subdirs.sort_by(|a, b| {
a.file_name()
.to_string_lossy()
.to_lowercase()
.cmp(&b.file_name().to_string_lossy().to_lowercase())
});
let mut entries = Vec::new();
for dir_entry in subdirs {
let path = dir_entry.path();
let name = dir_entry.file_name().to_string_lossy().to_string();
let relative = path
.strip_prefix(root)
.unwrap_or(&path)
.to_string_lossy()
.to_string();
let (children, child_note_count) = scan_dir_with_count(&path, vault_root);
entries.push(NotebookEntry {
name,
path: path.to_string_lossy().to_string(),
relative_path: relative,
children,
note_count: child_note_count,
});
}
(entries, note_count)
}
fn is_hidden(path: &Path) -> bool {
@@ -129,37 +170,88 @@ pub fn scan_notes(vault_path: &str, notebook_path: Option<&str>) -> Result<Vec<N
let root = Path::new(scan_path);
let vault_root = Path::new(vault_path);
log::info!("scan_notes: vault={}, scan={}, exists={}", vault_path, scan_path, root.exists());
if !root.exists() {
return Err("Path does not exist".to_string());
}
let md_files: Vec<PathBuf> = if notebook_path.is_some() {
// Only direct children for a specific notebook
fs::read_dir(root)
.map_err(|e| e.to_string())?
.filter_map(|e| e.ok())
.map(|e| e.path())
.filter(|p| p.is_file() && p.extension().and_then(|x| x.to_str()) == Some("md"))
.collect()
} else {
// Recursive for "All Notes"
WalkDir::new(root)
.into_iter()
.filter_map(|e| e.ok())
.filter(|e| !is_hidden(e.path()) && !e.path().starts_with(&helixnotes_dir(vault_path)))
.map(|e| e.path().to_path_buf())
.filter(|p| p.is_file() && p.extension().and_then(|x| x.to_str()) == Some("md"))
.collect()
};
// On Android, use metadata-only scan (no file reads) for fast listing on FUSE
#[cfg(target_os = "android")]
{
let mut notes = Vec::new();
// Log what read_dir sees
if let Ok(rd) = fs::read_dir(root) {
let items: Vec<_> = rd.filter_map(|e| e.ok()).collect();
log::info!("scan_notes: read_dir found {} entries in {:?}", items.len(), root);
for (i, entry) in items.iter().enumerate().take(5) {
let ft = entry.file_type().map(|ft| if ft.is_file() { "file" } else if ft.is_dir() { "dir" } else { "other" }).unwrap_or("err");
log::info!(" [{}] {:?} type={}", i, entry.file_name(), ft);
}
} else {
log::info!("scan_notes: read_dir FAILED for {:?}", root);
}
// Process files in parallel with partial reads
let mut notes: Vec<NoteEntry> = md_files
.par_iter()
.filter_map(|path| read_note_entry_fast(path, vault_root).ok())
.collect();
if notebook_path.is_some() {
if let Ok(rd) = fs::read_dir(root) {
for entry in rd.filter_map(|e| e.ok()) {
let is_file = entry.file_type().map(|ft| ft.is_file()).unwrap_or(false);
if is_file && entry.path().extension().and_then(|x| x.to_str()) == Some("md") {
if let Ok(note) = read_note_entry_metadata_only(&entry.path(), vault_root) {
notes.push(note);
}
}
}
}
} else {
let hn_dir = helixnotes_dir(vault_path);
for entry in WalkDir::new(root)
.into_iter()
// filter_entry skips descending into hidden dirs (unlike filter)
.filter_entry(|e| !is_hidden(e.path()) && !e.path().starts_with(&hn_dir))
.filter_map(|e| e.ok())
.filter(|e| {
e.file_type().is_file()
&& e.path().extension().and_then(|x| x.to_str()) == Some("md")
})
{
if let Ok(note) = read_note_entry_metadata_only(entry.path(), vault_root) {
notes.push(note);
}
}
}
log::info!("scan_notes: Android scan found {} notes", notes.len());
notes.sort_by(|a, b| b.meta.modified.cmp(&a.meta.modified));
return Ok(notes);
}
notes.sort_by(|a, b| b.meta.modified.cmp(&a.meta.modified));
Ok(notes)
#[cfg(not(target_os = "android"))]
{
let md_files: Vec<PathBuf> = if notebook_path.is_some() {
fs::read_dir(root)
.map_err(|e| e.to_string())?
.filter_map(|e| e.ok())
.map(|e| e.path())
.filter(|p| p.is_file() && p.extension().and_then(|x| x.to_str()) == Some("md"))
.collect()
} else {
WalkDir::new(root)
.into_iter()
.filter_entry(|e| !is_hidden(e.path()) && !e.path().starts_with(&helixnotes_dir(vault_path)))
.filter_map(|e| e.ok())
.map(|e| e.path().to_path_buf())
.filter(|p| p.is_file() && p.extension().and_then(|x| x.to_str()) == Some("md"))
.collect()
};
let mut notes: Vec<NoteEntry> = md_files
.par_iter()
.filter_map(|path| read_note_entry_fast(path, vault_root).ok())
.collect();
notes.sort_by(|a, b| b.meta.modified.cmp(&a.meta.modified));
Ok(notes)
}
}
fn read_note_entry(path: &Path, vault_root: &Path) -> Result<NoteEntry, String> {
@@ -167,6 +259,49 @@ fn read_note_entry(path: &Path, vault_root: &Path) -> Result<NoteEntry, String>
read_note_entry_from_str(&raw, path, vault_root)
}
/// Android-only: reads just the frontmatter (first 2KB) for tags/title/pinned,
/// uses filesystem timestamps for dates. No preview text.
#[cfg(target_os = "android")]
fn read_note_entry_metadata_only(path: &Path, vault_root: &Path) -> Result<NoteEntry, String> {
// Read first 2KB — enough for frontmatter with tags, title, pinned
let mut file = fs::File::open(path).map_err(|e| e.to_string())?;
let mut buf = vec![0u8; 2048];
let bytes_read = file.read(&mut buf).map_err(|e| e.to_string())?;
buf.truncate(bytes_read);
let raw = String::from_utf8_lossy(&buf);
let filename = path
.file_name()
.unwrap_or_default()
.to_string_lossy()
.to_string();
let (mut meta, _content) = frontmatter::parse_note(&raw, &filename);
// Always use filesystem timestamps on Android (faster than parsing date strings)
if let Ok(fs_meta) = fs::metadata(path) {
if let Ok(m) = fs_meta.modified() {
meta.modified = m.into();
}
if let Ok(c) = fs_meta.created() {
meta.created = c.into();
}
}
let relative = path
.strip_prefix(vault_root)
.unwrap_or(path)
.to_string_lossy()
.to_string();
Ok(NoteEntry {
path: path.to_string_lossy().to_string(),
relative_path: relative,
meta,
preview: String::new(),
})
}
/// Fast version: reads only the first ~2KB of the file (enough for frontmatter + preview).
fn read_note_entry_fast(path: &Path, vault_root: &Path) -> Result<NoteEntry, String> {
let mut file = fs::File::open(path).map_err(|e| e.to_string())?;
+182 -104
View File
@@ -29,13 +29,16 @@
showSettings,
sourceMode,
mobileView,
appConfig
appConfig,
quickAccessPaths,
tags,
notes
} from '$lib/stores/app';
const appWindow = getCurrentWindow();
const isMac = navigator.platform.startsWith('Mac');
const isMobile = /android|ios/i.test(navigator.userAgent);
import { loadVaultState, saveVaultState, readNote, createDailyNote, createBackup, getPendingOpenFile } from '$lib/api';
import { loadVaultState, saveVaultState, readNote, createDailyNote, createBackup, getPendingOpenFile, addQuickAccess, removeQuickAccess, getQuickAccess } from '$lib/api';
import { debounce } from '$lib/utils/debounce';
import { openNoteWindow } from '$lib/utils/window';
import { get } from 'svelte/store';
@@ -46,7 +49,12 @@
let editor: Editor;
let unlistenFileChange: (() => void) | null = null;
let unlistenOpenFile: (() => void) | null = null;
// Mobile editor header helpers
let noteRelativePath = $derived($activeNotePath && $appConfig?.active_vault ? $activeNotePath.replace($appConfig.active_vault + '/', '') : '');
let isQuickAccess = $derived(noteRelativePath ? $quickAccessPaths.includes(noteRelativePath) : false);
let backupInterval: ReturnType<typeof setInterval> | null = null;
let navigatingFromHistory = false;
let noteHistory: string[] = [];
let noteHistoryIndex = -1;
@@ -127,7 +135,7 @@
const persistState = debounce(async () => {
const state: VaultState = {
last_open_note: null,
last_open_note: $activeNotePath,
sidebar_width: $sidebarWidth,
notelist_width: $notelistWidth,
sidebar_collapsed: $sidebarCollapsed,
@@ -154,12 +162,11 @@
}
function handleViewChanged() {
noteList?.refresh(true);
noteList?.refresh();
if (isMobile) $mobileView = 'notelist';
}
async function createAndFocusNote() {
if (isMobile && $mobileView !== 'notelist') $mobileView = 'notelist';
await noteList?.handleCreateNote();
editor?.focusTitle();
if (isMobile) $mobileView = 'editor';
@@ -182,6 +189,38 @@
}
}
// Android back gesture / hardware back button support
let mobileNavFromPopstate = false;
if (isMobile) {
// Seed initial history state
history.replaceState({ mobileView: 'sidebar' }, '');
// When mobileView changes forward, push browser history so Android back gesture works
$effect(() => {
const view = $mobileView;
if (mobileNavFromPopstate) {
mobileNavFromPopstate = false;
return;
}
// Replace state to track current view
history.pushState({ mobileView: view }, '');
});
window.addEventListener('popstate', (e) => {
const currentView = $mobileView;
if (currentView === 'sidebar') {
// Already at root — let Android handle it (exit app)
return;
}
mobileNavFromPopstate = true;
if (currentView === 'editor') $mobileView = 'notelist';
else if (currentView === 'notelist') $mobileView = 'sidebar';
// Push state again so next back gesture also works
history.pushState({ mobileView: $mobileView }, '');
});
}
function mobileBack() {
if ($mobileView === 'editor') $mobileView = 'notelist';
else if ($mobileView === 'notelist') $mobileView = 'sidebar';
@@ -273,28 +312,84 @@
persistState();
});
$effect(() => {
$activeNotePath;
persistState();
});
onMount(async () => {
let lastNotePath: string | null = null;
try {
const state = await loadVaultState();
$sidebarWidth = state.sidebar_width;
$notelistWidth = state.notelist_width;
$sidebarCollapsed = state.sidebar_collapsed;
$collapsedNotebooks = state.collapsed_notebooks ?? [];
lastNotePath = state.last_open_note ?? null;
} catch (_) {}
// On mobile, prefetch last-opened note so first tap is instant
let prefetchPromise: Promise<any> | null = null;
if (isMobile && lastNotePath) {
prefetchPromise = readNote(lastNotePath).catch(() => null);
}
applyTheme($theme);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if ($theme === 'system') applyTheme('system');
});
await sidebar?.refresh();
await noteList?.refresh();
// Run sidebar and note list refresh in parallel
await Promise.all([sidebar?.refresh(), noteList?.refresh()]);
unlistenFileChange = await listen<FileEvent>('file-changed', async () => {
await sidebar?.refresh();
await noteList?.refresh(true);
});
// On mobile, derive tags from the scanned notes (avoids a separate full-scan Rust call)
if (isMobile) {
const tagMap = new Map<string, number>();
for (const note of $notes) {
for (const tag of note.meta.tags) {
tagMap.set(tag, (tagMap.get(tag) ?? 0) + 1);
}
}
$tags = Array.from(tagMap.entries()).sort((a, b) => a[0].localeCompare(b[0]));
}
// On mobile, auto-load the last-opened note so it's ready when the user taps it
if (isMobile && prefetchPromise) {
prefetchPromise.then((noteContent) => {
if (noteContent && lastNotePath && !$activeNotePath) {
$activeNote = noteContent;
$activeNotePath = lastNotePath;
$editorDirty = false;
editor?.loadNote(lastNotePath, noteContent.content);
}
});
}
if (isMobile) {
// Mobile: debounce file-changed heavily and skip when actively editing
// (our own saves trigger the watcher, causing expensive refreshes on FUSE)
const debouncedRefresh = debounce(async () => {
if (get(editorDirty)) return; // user is still typing, skip
await Promise.all([sidebar?.refresh(), noteList?.refresh(true)]);
// Re-derive tags from refreshed notes
const tagMap = new Map<string, number>();
for (const note of get(notes)) {
for (const tag of note.meta.tags) {
tagMap.set(tag, (tagMap.get(tag) ?? 0) + 1);
}
}
tags.set(Array.from(tagMap.entries()).sort((a, b) => a[0].localeCompare(b[0])));
}, 3000);
unlistenFileChange = await listen<FileEvent>('file-changed', () => {
debouncedRefresh();
});
} else {
unlistenFileChange = await listen<FileEvent>('file-changed', async () => {
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) => {
@@ -343,18 +438,18 @@
</svg>
</div>
{/if}
<span class="mobile-header-title">
{#if $mobileView === 'sidebar'}
HelixNotes
{:else if $mobileView === 'notelist'}
{$activeNotebook?.name || 'All Notes'}
{:else}
{$activeNote?.meta.title || 'Untitled'}
{/if}
</span>
{#if $mobileView !== 'editor'}
<span class="mobile-header-title">
{#if $mobileView === 'sidebar'}
HelixNotes
{:else}
{$activeNotebook?.name || 'All Notes'}
{/if}
</span>
{/if}
<div class="mobile-header-actions">
{#if $mobileView === 'editor'}
<button class="mobile-header-btn" class:active={$readOnly} onclick={() => ($readOnly = !$readOnly)}>
<button class="mobile-header-btn" class:active={$readOnly} onclick={() => ($readOnly = !$readOnly)} title={$readOnly ? 'Edit' : 'View'}>
<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" />
@@ -365,26 +460,76 @@
{/if}
</svg>
</button>
<button class="mobile-header-btn" class:active={$sourceMode} onclick={() => ($sourceMode = !$sourceMode)} title={$sourceMode ? 'Rich Editor' : 'Source Mode'}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" />
</svg>
</button>
<button class="mobile-header-btn" onclick={() => editor?.openNoteSearch()} title="Find in note">
<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="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
</button>
<button class="mobile-header-btn" class:active={$activeNote?.meta.pinned} onclick={() => { if ($activeNote) { $activeNote.meta.pinned = !$activeNote.meta.pinned; $editorDirty = true; } }} title="Pin">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 17v5"/><path d="M9 2h6l-1 7h4l-2 4H8l-2-4h4L9 2z"/>
</svg>
</button>
<button class="mobile-header-btn" class:active={isQuickAccess} onclick={async () => {
if (!noteRelativePath) return;
try {
if (isQuickAccess) { await removeQuickAccess(noteRelativePath); } else { await addQuickAccess(noteRelativePath); }
$quickAccessPaths = (await getQuickAccess()).map(n => n.relative_path);
} catch (e) { console.error('Quick access toggle failed:', e); }
}} title="Quick Access">
<svg width="18" height="18" 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>
<button class="mobile-header-btn" onclick={() => editor?.toggleOutlinePanel()} title="Outline">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="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>
<button class="mobile-header-btn" onclick={() => editor?.toggleHistoryPanel()} title="History">
<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"/><polyline points="12 6 12 12 16 14"/>
</svg>
</button>
{#if $appConfig?.ai_provider && ($appConfig?.ai_provider === 'ollama' || $appConfig?.ai_api_key || $appConfig?.openai_api_key)}
<button class="mobile-header-btn" onclick={() => editor?.triggerAiMenu()} title="AI Actions">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 8V4l-2-2"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M9 13v2"/><path d="M15 13v2"/>
</svg>
</button>
{/if}
{: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">
<button class="mobile-header-btn" onclick={() => ($showSearch = true)} title="Search">
<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="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
</button>
<button class="mobile-header-btn" onclick={createAndFocusNote} title="New Note">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<path d="M12 5v14M5 12h14" />
</svg>
</button>
<button class="mobile-header-btn" onclick={handleDailyNote} title="Daily Note">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>
</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>
{/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>
@@ -401,40 +546,6 @@
</div>
</div>
<!-- Mobile Bottom Nav -->
{#if $mobileView !== 'editor'}
<div class="mobile-bottom-nav">
<button class="mobile-nav-item" class:active={$mobileView === 'sidebar'} onclick={() => ($mobileView = 'sidebar')}>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
</svg>
<span>Notebooks</span>
</button>
<button class="mobile-nav-item" onclick={() => $showSearch = true}>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
<span>Search</span>
</button>
<button class="mobile-nav-item" onclick={handleDailyNote}>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
<line x1="16" y1="2" x2="16" y2="6" />
<line x1="8" y1="2" x2="8" y2="6" />
<line x1="3" y1="10" x2="21" y2="10" />
</svg>
<span>Daily</span>
</button>
<button class="mobile-nav-item" onclick={() => ($showSettings = true)}>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
</svg>
<span>Settings</span>
</button>
</div>
{/if}
</div>
{:else}
<!-- ═══ DESKTOP LAYOUT ═══ -->
@@ -641,6 +752,7 @@
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
}
.mobile-header-btn {
@@ -685,38 +797,4 @@
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>
+401 -149
View File
@@ -52,7 +52,7 @@
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)); };
const update = () => { keyboardHeight = Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop)); };
vv.addEventListener('resize', update);
vv.addEventListener('scroll', update);
}
@@ -70,6 +70,7 @@
let ignoreNextUpdate = false;
let isLoadingNote = false;
let fixingBlobsPromise: Promise<void> = Promise.resolve();
let hasPendingBlobs = false;
let lastSourceMode = $sourceMode;
let linkContextMenu = $state<{ x: number; y: number; href: string; anchor: HTMLAnchorElement } | null>(null);
let titleWasStripped = false;
@@ -297,6 +298,17 @@
renderHTML({ HTMLAttributes }) {
const src = HTMLAttributes.src || '';
const name = HTMLAttributes.name || 'file.pdf';
if (isMobile) {
// On mobile, render as a clickable link instead of iframe
const vaultRoot = $appConfig?.active_vault ?? '';
const absPath = normalizePath(`${vaultRoot}/${decodeURIComponent(src)}`);
return ['div', mergeAttributes({ 'data-pdf-src': src, 'data-pdf-name': name, class: 'pdf-embed-mobile' }),
['a', { href: '#', 'data-open-file': absPath, class: 'pdf-link-mobile', onclick: 'return false;' },
['span', { class: 'pdf-icon-mobile' }, '\uD83D\uDCC4'],
['span', {}, name],
],
];
}
const vaultRoot = $appConfig?.active_vault ?? '';
const pdfHeight = $appConfig?.pdf_height ?? 600;
const absPath = normalizePath(`${vaultRoot}/${decodeURIComponent(src)}`);
@@ -1058,7 +1070,11 @@
const autoSave = debounce(async () => {
if (!$activeNote || !$activeNotePath || !$editorDirty) return;
// Wait for any pending blob→asset conversions to finish before serializing
// Only fix blob images if a paste occurred (avoids full doc scan on every save)
if (hasPendingBlobs) {
hasPendingBlobs = false;
fixingBlobsPromise = fixBlobImages();
}
await fixingBlobsPromise;
try {
const body = $sourceMode
@@ -1075,7 +1091,7 @@
} catch (e) {
console.error('Auto-save failed:', e);
}
}, 500);
}, isMobile ? 1500 : 500);
export async function forceSave() {
if (!$activeNote || !$activeNotePath) return;
@@ -1872,11 +1888,14 @@
return `![${alt}](${url.replace(/ /g, '%20')})`;
});
// Pre-process: transform PDF embed divs into iframes before markdown-it (it passes HTML through)
// Pre-process: transform PDF embed divs iframes on desktop, clickable links on mobile
src = src.replace(/<div[^>]*data-pdf-src="([^"]*)"[^>]*data-pdf-name="([^"]*)"[^>]*>[^<]*<\/div>/gi, (_, pdfSrc, name) => {
const vaultRoot = $appConfig?.active_vault ?? '';
const pdfHeight = $appConfig?.pdf_height ?? 600;
const absPath = normalizePath(`${vaultRoot}/${decodeURIComponent(pdfSrc)}`);
if (isMobile) {
return `<div class="pdf-embed-mobile"><a href="#" data-open-file="${absPath}" class="pdf-link-mobile" onclick="return false;">\uD83D\uDCC4 ${name}</a></div>`;
}
const pdfHeight = $appConfig?.pdf_height ?? 600;
const displaySrc = convertFileSrc(absPath);
return `<div data-pdf-src="${pdfSrc}" data-pdf-name="${name}" class="pdf-embed"><iframe src="${displaySrc}" width="100%" height="${pdfHeight}px"></iframe><p class="pdf-label">${name}</p></div>`;
});
@@ -1972,11 +1991,16 @@
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
// When editorElement appears in DOM (first note selected), initialize TipTap
// When editorElement appears in DOM, initialize TipTap.
// On mobile, pre-create editor with empty content so first note load is fast.
$effect(() => {
if (editorElement && !editor && pendingContent !== null) {
createEditor(pendingContent);
pendingContent = null;
if (editorElement && !editor) {
if (pendingContent !== null) {
createEditor(pendingContent);
pendingContent = null;
} else if (isMobile) {
createEditor('');
}
}
});
@@ -2094,6 +2118,20 @@
}
}
},
// On mobile, handle clicks on PDF file links to open in external app
...(isMobile ? { click: (_view: any, event: MouseEvent) => {
const target = (event.target as HTMLElement).closest('[data-open-file]') as HTMLElement | null;
if (target) {
event.preventDefault();
const filePath = target.getAttribute('data-open-file');
if (filePath) {
const bridge = (window as any).Android;
if (bridge && typeof bridge.openFile === 'function') {
bridge.openFile(filePath);
}
}
}
}} : {}),
// Prevent native text drag — it causes copy-instead-of-move in Tauri's webview.
// File drops from OS are handled by Tauri's onDragDropEvent listener instead.
dragstart: (_view, event) => {
@@ -2104,7 +2142,11 @@
},
},
handleDrop: (_view, event) => handleFileDrop(event),
handlePaste: (_view, event) => handleFilePaste(event),
handlePaste: (_view, event) => {
const handled = handleFilePaste(event);
if (!handled) hasPendingBlobs = true; // ProseMirror may insert blob: images from web paste
return handled;
},
},
onTransaction: () => {
// Batch toolbar state updates to once per frame — avoids ~35 isActive() calls per transaction during selection drag
@@ -2114,8 +2156,9 @@
editorState++;
});
}
updateSlashMenu();
updateWikiLinkMenu();
// On mobile, only check menus when they're already open (avoid work on every keystroke)
if (!isMobile || slashMenu) updateSlashMenu();
if (!isMobile || wikiLinkMenu) updateWikiLinkMenu();
},
onUpdate: () => {
if (ignoreNextUpdate || isLoadingNote) {
@@ -2123,10 +2166,8 @@
return;
}
$editorDirty = true;
// Fix any blob: URLs from pasted web images BEFORE saving
fixingBlobsPromise = fixBlobImages();
autoSave();
if (showOutline) updateOutline();
if (!isMobile && showOutline) updateOutline();
},
});
editorReady = true;
@@ -2136,6 +2177,19 @@
}
}
export function toggleOutlinePanel() {
showOutline = !showOutline;
if (showOutline) updateOutline();
}
export function toggleHistoryPanel() {
toggleHistory();
}
export function triggerAiMenu() {
openAiMenu();
}
export function addLinkFromToolbar() {
if (!editor) return;
const { from, to } = editor.state.selection;
@@ -2245,7 +2299,14 @@
if (href) {
event.preventDefault();
event.stopPropagation();
linkContextMenu = { x: event.clientX, y: event.clientY, href, anchor };
let lx = event.clientX;
let ly = event.clientY;
const lw = 200, lh = 200;
if (lx + lw > window.innerWidth) lx = window.innerWidth - lw - 8;
if (ly + lh > window.innerHeight) ly = window.innerHeight - lh - 8;
if (lx < 4) lx = 4;
if (ly < 4) ly = 4;
linkContextMenu = { x: lx, y: ly, href, anchor };
return;
}
}
@@ -2492,7 +2553,10 @@
aiTranslateMenu = false;
aiCustomPrompt = '';
if (hasSelection) {
if (isMobile) {
// Mobile: bottom sheet, no positioning needed
aiMenu = { x: 0, y: 0 };
} else if (hasSelection) {
const coords = editor.view.coordsAtPos(from);
let x = coords.left;
let y = coords.top - 8;
@@ -2803,7 +2867,7 @@
const data = Array.from(new Uint8Array(buffer));
const relativePath = await saveAttachment(file.name, data);
if (!editor) return;
const usePdfPreview = $appConfig?.pdf_preview ?? false;
const usePdfPreview = !isMobile && ($appConfig?.pdf_preview ?? false);
if (usePdfPreview) {
editor.chain().focus().insertContent({
type: 'pdfEmbed',
@@ -2898,16 +2962,25 @@
resetSourceHistory(sourceContent);
lastSourceMode = true;
} else if (!isSource && lastSourceMode) {
// Switching BACK to WYSIWYG: destroy old editor (its DOM element is gone),
// wait for DOM to swap textarea→div, then create editor on new element.
destroyEditor();
const content = sourceContent || ($activeNote?.content ?? '');
lastSourceMode = false;
tick().then(() => {
if (editorElement && !editor) {
createEditor(content);
if (isMobile) {
// Mobile: editor stays in DOM, just update its content
const content = sourceContent || ($activeNote?.content ?? '');
if (editor) {
ignoreNextUpdate = true;
editor.commands.setContent(markdownToHtml(content));
}
});
} else {
// Desktop: destroy old editor (its DOM element is gone),
// wait for DOM to swap textarea→div, then create editor on new element.
destroyEditor();
const content = sourceContent || ($activeNote?.content ?? '');
tick().then(() => {
if (editorElement && !editor) {
createEditor(content);
}
});
}
}
});
@@ -2933,7 +3006,7 @@
readFile(filePath).then((data) => {
saveAttachment(name, Array.from(data)).then((relativePath) => {
if (!editor) return;
const usePdfPreview = $appConfig?.pdf_preview ?? false;
const usePdfPreview = !isMobile && ($appConfig?.pdf_preview ?? false);
if (usePdfPreview) {
editor.chain().focus().insertContent({
type: 'pdfEmbed',
@@ -3039,14 +3112,14 @@
}}
/>
</div>
<div class="toolbar-actions" class:mobile={isMobile}>
{#if !isMobile}
<div class="toolbar-actions">
{#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}
@@ -3057,7 +3130,6 @@
<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"
@@ -3071,7 +3143,7 @@
}}
title={$activeNote?.meta.pinned ? 'Unpin note' : 'Pin note'}
>
<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">
<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="M12 17v5"/>
<path d="M9 2h6l-1 7h4l-2 4H8l-2-4h4L9 2z"/>
</svg>
@@ -3095,7 +3167,7 @@
}}
title={isQuickAccess ? 'Remove from Quick Access' : 'Add to Quick Access'}
>
<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">
<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">
<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>
@@ -3105,7 +3177,7 @@
onclick={() => { showOutline = !showOutline; if (showOutline) updateOutline(); }}
title="Outline"
>
<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">
<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="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>
@@ -3115,12 +3187,11 @@
onclick={toggleHistory}
title="Version history"
>
<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">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</button>
{#if !isMobile}
{#if $appConfig?.enable_wiki_links}
<button
class="icon-btn"
@@ -3155,8 +3226,8 @@
<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>
{/if}
</div>
<div class="editor-body-wrapper">
@@ -3196,19 +3267,11 @@
{/if}
<div class="editor-body-row">
<div class="editor-body">
{#if $sourceMode}
{#if $appConfig?.show_line_numbers}
<div class="line-numbers-clip" aria-hidden="true">
<div class="line-numbers">
{#each sourceContent.split('\n') as _, i}
<span>{i + 1}</span>
{/each}
</div>
</div>
{/if}
{#if isMobile}
<!-- Mobile: both views always in DOM, toggled via display to avoid slow editor re-creation -->
<textarea
class="source-editor"
class:with-line-numbers={$appConfig?.show_line_numbers}
style={$sourceMode ? '' : 'display:none'}
bind:this={sourceElement}
bind:value={sourceContent}
readonly={$readOnly}
@@ -3220,7 +3283,6 @@
}}
onkeydown={(e) => {
const mod = e.ctrlKey || e.metaKey;
// Shift+Enter: insert two trailing spaces + newline for markdown hard break
if (e.key === 'Enter' && e.shiftKey && !mod) {
e.preventDefault();
const ta = sourceElement;
@@ -3237,71 +3299,130 @@
pushSourceHistoryDebounced();
return;
}
// Undo
if (mod && (e.key === 'z' || e.key === 'Z') && !e.shiftKey) {
e.preventDefault();
sourceUndo();
return;
}
// Redo
if ((mod && (e.key === 'z' || e.key === 'Z') && e.shiftKey) || (mod && (e.key === 'y' || e.key === 'Y'))) {
e.preventDefault();
sourceRedo();
return;
}
if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
e.preventDefault();
pushSourceHistoryImmediate();
const ta = sourceElement;
const val = ta.value;
const start = ta.selectionStart;
const lines = val.split('\n');
// Find current line index
let pos = 0;
let curLine = 0;
for (let i = 0; i < lines.length; i++) {
if (pos + lines[i].length >= start) { curLine = i; break; }
pos += lines[i].length + 1;
}
if (e.key === 'ArrowUp' && curLine > 0) {
const tmp = lines[curLine];
lines[curLine] = lines[curLine - 1];
lines[curLine - 1] = tmp;
sourceContent = lines.join('\n');
tick().then(() => {
const newPos = lines.slice(0, curLine - 1).join('\n').length + 1 + (start - pos);
ta.setSelectionRange(newPos, newPos);
pushSourceHistoryImmediate();
});
} else if (e.key === 'ArrowDown' && curLine < lines.length - 1) {
const tmp = lines[curLine];
lines[curLine] = lines[curLine + 1];
lines[curLine + 1] = tmp;
sourceContent = lines.join('\n');
tick().then(() => {
const newPos = lines.slice(0, curLine + 1).join('\n').length + 1 + (start - pos);
ta.setSelectionRange(newPos, newPos);
pushSourceHistoryImmediate();
});
}
$editorDirty = true;
autoSave();
}
}}
onscroll={() => {
if ($appConfig?.show_line_numbers) {
const clip = sourceElement?.previousElementSibling as HTMLElement;
const gutter = clip?.firstElementChild as HTMLElement;
if (gutter) {
gutter.style.transform = `translateY(-${sourceElement.scrollTop}px)`;
}
}
}}
spellcheck="false"
></textarea>
{:else}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="tiptap-wrapper" bind:this={editorElement} onclick={(e) => { closeLinkContextMenu(); handleEditorClick(e); showOutline = false; }} oncontextmenu={handleEditorContextMenu}></div>
<div class="tiptap-wrapper" style={$sourceMode ? 'display:none' : ''} bind:this={editorElement} onclick={(e) => { closeLinkContextMenu(); handleEditorClick(e); showOutline = false; }}></div>
{:else}
<!-- Desktop: conditional rendering with line numbers -->
{#if $sourceMode}
{#if $appConfig?.show_line_numbers}
<div class="line-numbers-clip" aria-hidden="true">
<div class="line-numbers">
{#each sourceContent.split('\n') as _, i}
<span>{i + 1}</span>
{/each}
</div>
</div>
{/if}
<textarea
class="source-editor"
class:with-line-numbers={$appConfig?.show_line_numbers}
bind:this={sourceElement}
bind:value={sourceContent}
readonly={$readOnly}
onclick={() => { showOutline = false; }}
oninput={() => {
$editorDirty = true;
autoSave();
pushSourceHistoryDebounced();
}}
onkeydown={(e) => {
const mod = e.ctrlKey || e.metaKey;
// Shift+Enter: insert two trailing spaces + newline for markdown hard break
if (e.key === 'Enter' && e.shiftKey && !mod) {
e.preventDefault();
const ta = sourceElement;
const start = ta.selectionStart;
const end = ta.selectionEnd;
const val = ta.value;
sourceContent = val.slice(0, start) + ' \n' + val.slice(end);
tick().then(() => {
const newPos = start + 3;
ta.setSelectionRange(newPos, newPos);
});
$editorDirty = true;
autoSave();
pushSourceHistoryDebounced();
return;
}
// Undo
if (mod && (e.key === 'z' || e.key === 'Z') && !e.shiftKey) {
e.preventDefault();
sourceUndo();
return;
}
// Redo
if ((mod && (e.key === 'z' || e.key === 'Z') && e.shiftKey) || (mod && (e.key === 'y' || e.key === 'Y'))) {
e.preventDefault();
sourceRedo();
return;
}
if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
e.preventDefault();
pushSourceHistoryImmediate();
const ta = sourceElement;
const val = ta.value;
const start = ta.selectionStart;
const lines = val.split('\n');
// Find current line index
let pos = 0;
let curLine = 0;
for (let i = 0; i < lines.length; i++) {
if (pos + lines[i].length >= start) { curLine = i; break; }
pos += lines[i].length + 1;
}
if (e.key === 'ArrowUp' && curLine > 0) {
const tmp = lines[curLine];
lines[curLine] = lines[curLine - 1];
lines[curLine - 1] = tmp;
sourceContent = lines.join('\n');
tick().then(() => {
const newPos = lines.slice(0, curLine - 1).join('\n').length + 1 + (start - pos);
ta.setSelectionRange(newPos, newPos);
pushSourceHistoryImmediate();
});
} else if (e.key === 'ArrowDown' && curLine < lines.length - 1) {
const tmp = lines[curLine];
lines[curLine] = lines[curLine + 1];
lines[curLine + 1] = tmp;
sourceContent = lines.join('\n');
tick().then(() => {
const newPos = lines.slice(0, curLine + 1).join('\n').length + 1 + (start - pos);
ta.setSelectionRange(newPos, newPos);
pushSourceHistoryImmediate();
});
}
$editorDirty = true;
autoSave();
}
}}
onscroll={() => {
if ($appConfig?.show_line_numbers) {
const clip = sourceElement?.previousElementSibling as HTMLElement;
const gutter = clip?.firstElementChild as HTMLElement;
if (gutter) {
gutter.style.transform = `translateY(-${sourceElement.scrollTop}px)`;
}
}
}}
spellcheck="false"
></textarea>
{:else}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="tiptap-wrapper" bind:this={editorElement} onclick={(e) => { closeLinkContextMenu(); handleEditorClick(e); showOutline = false; }} oncontextmenu={handleEditorContextMenu}></div>
{/if}
{/if}
</div>
@@ -3383,10 +3504,44 @@
{#if editorReady && !$sourceMode}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<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; }}>
<div class="editor-formatting-bar" style={isMobile ? `${keyboardHeight > 0 ? `bottom: ${keyboardHeight}px;` : ''}${anyDropdownOpen ? 'overflow: visible;' : ''}` : ''} onclick={() => { headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }}>
{#if isMobile}
<!-- ═══ MOBILE formatting bar: compact, relevant buttons only ═══ -->
<!-- Insert (+) dropdown — at front like desktop -->
<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>
<div class="fmt-sep"></div>
<!-- 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">
@@ -3456,39 +3611,14 @@
<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>
{#if $appConfig?.ai_provider && ($appConfig?.ai_provider === 'ollama' || $appConfig?.ai_api_key || $appConfig?.openai_api_key)}
<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>
<button class="fmt-btn" onclick={openAiMenu} title="AI Actions">
<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="M12 8V4l-2-2"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M9 13v2"/><path d="M15 13v2"/>
</svg>
</button>
{/if}
{:else}
<!-- ═══ DESKTOP formatting bar: full feature set ═══ -->
@@ -4155,9 +4285,9 @@
{#if aiMenu}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="ai-menu-overlay" onclick={closeAiMenu}>
<div class="ai-menu-overlay" class:mobile={isMobile} onclick={closeAiMenu}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="ai-menu" style="left: {aiMenu.x}px; top: {aiMenu.y}px" onclick={(e) => e.stopPropagation()}>
<div class="ai-menu" class:mobile={isMobile} style={isMobile ? '' : `left: ${aiMenu.x}px; top: ${aiMenu.y}px`} onclick={(e) => e.stopPropagation()}>
{#if aiResult !== null || aiLoading}
<!-- Result view -->
<div class="ai-result-header">
@@ -5942,6 +6072,30 @@
border-top: 1px solid var(--border);
margin: 0;
}
:global(.tiptap .pdf-embed-mobile) {
margin: 8px 0;
}
:global(.tiptap .pdf-link-mobile) {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 10px;
color: var(--text-primary);
font-size: 15px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
}
:global(.tiptap .pdf-link-mobile:active) {
background: var(--bg-hover);
}
:global(.tiptap .pdf-icon-mobile) {
font-size: 20px;
line-height: 1;
}
/* Slash commands menu */
.slash-menu-overlay {
@@ -6367,7 +6521,7 @@
}
.editor-container.mobile .editor-toolbar {
padding: 8px 8px 6px 12px;
padding: 8px 16px 6px 16px;
flex-shrink: 0;
flex-direction: column;
align-items: stretch;
@@ -6410,11 +6564,11 @@
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 50px;
padding: 0;
}
.editor-container.mobile .tiptap-wrapper {
min-height: 100%;
min-height: 0;
}
.editor-container.mobile .editor-formatting-bar {
@@ -6451,11 +6605,11 @@
}
.editor-container.mobile .fmt-dropdown {
position: fixed;
bottom: auto;
left: 8px;
right: 8px;
top: auto;
position: absolute;
bottom: calc(100% + 4px);
left: 0;
right: auto;
min-width: 180px;
max-width: calc(100vw - 16px);
max-height: 60vh;
overflow-y: auto;
@@ -6468,10 +6622,11 @@
}
.editor-container.mobile .insert-dropdown {
position: fixed;
bottom: 60px;
left: 8px;
right: 8px;
position: absolute;
bottom: calc(100% + 4px);
left: 0;
right: auto;
min-width: 200px;
max-width: calc(100vw - 16px);
}
@@ -6484,21 +6639,30 @@
}
.editor-container.mobile :global(.editor-content) {
padding: 8px 16px !important;
padding: 8px 16px 220px !important;
font-size: 16px !important;
}
.editor-container.mobile .source-editor {
padding: 8px 16px;
padding: 8px 16px 220px;
font-size: 15px;
white-space: pre-wrap;
word-break: break-word;
overflow-x: hidden;
}
.editor-container.mobile .editor-body-row {
position: relative;
}
.editor-container.mobile .history-panel,
.editor-container.mobile .outline-panel {
position: absolute;
inset: 0;
width: 100% !important;
max-width: 100%;
border-left: none;
border-top: 1px solid var(--border-color);
z-index: 10;
}
.editor-container.mobile .note-search-bar {
@@ -6509,4 +6673,92 @@
padding: 8px 10px;
font-size: 15px;
}
/* ═══ AI Menu — Mobile Bottom Sheet ═══ */
.ai-menu-overlay.mobile {
background: rgba(0, 0, 0, 0.35);
display: flex;
align-items: flex-end;
justify-content: center;
}
.ai-menu.mobile {
position: relative;
left: auto !important;
top: auto !important;
width: 100%;
max-width: 100%;
min-width: 0;
border-radius: 16px 16px 0 0;
border-bottom: none;
max-height: 70vh;
padding: 8px 4px calc(env(safe-area-inset-bottom, 0px) + 8px);
}
.ai-menu.mobile .ai-menu-label {
padding: 10px 16px 6px;
font-size: 12px;
}
.ai-menu.mobile .ai-menu-item {
padding: 12px 16px;
font-size: 15px;
min-height: 44px;
border-radius: 8px;
}
.ai-menu.mobile .ai-menu-sep {
margin: 4px 8px;
}
.ai-menu.mobile .ai-result-header {
padding: 12px 16px 8px;
}
.ai-menu.mobile .ai-result-body {
padding: 8px 16px;
font-size: 15px;
max-height: 40vh;
}
.ai-menu.mobile .ai-result-actions {
padding: 8px 16px 4px;
gap: 10px;
}
.ai-menu.mobile .ai-result-actions button {
padding: 10px 16px;
font-size: 14px;
min-height: 44px;
}
.ai-menu.mobile .ai-custom-body {
padding: 8px 12px;
}
.ai-menu.mobile .ai-custom-input {
font-size: 15px;
min-height: 80px;
}
.ai-menu.mobile .ai-custom-submit {
padding: 10px 16px;
font-size: 14px;
min-height: 44px;
}
.ai-menu.mobile .ai-custom-header {
padding: 10px 12px;
font-size: 15px;
}
.ai-menu.mobile .ai-back-btn {
min-width: 44px;
min-height: 44px;
}
.ai-menu.mobile .ai-error {
padding: 12px 16px;
font-size: 14px;
}
</style>
+19 -1
View File
@@ -6,9 +6,10 @@
import type { VaultStats } from '$lib/types';
const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
const isMobile = /android|ios/i.test(navigator.userAgent);
let stats = $state<VaultStats | null>(null);
let activeTab = $state<'about' | 'shortcuts'>('shortcuts');
let activeTab = $state<'about' | 'shortcuts'>(isMobile ? 'about' : 'shortcuts');
let appVersion = $state('...');
getVersion().then(v => appVersion = v).catch(() => appVersion = '0.0.0');
@@ -54,10 +55,12 @@
</div>
<div class="info-body">
{#if !isMobile}
<div class="info-tabs">
<button class="info-tab" class:active={activeTab === 'shortcuts'} onclick={() => activeTab = 'shortcuts'}>Shortcuts</button>
<button class="info-tab" class:active={activeTab === 'about'} onclick={() => activeTab = 'about'}>About</button>
</div>
{/if}
{#if activeTab === 'about'}
<div class="info-logo">
@@ -398,4 +401,19 @@
color: var(--text-tertiary);
line-height: 1.4;
}
/* Mobile */
@media (max-width: 600px) {
.info-panel {
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
border: none;
}
.info-header {
padding-top: calc(env(safe-area-inset-top, 12px) + 12px);
}
}
</style>
+48 -10
View File
@@ -12,7 +12,8 @@
quickAccessPaths,
appConfig,
notebooks,
tags
tags,
mobileView
} from '$lib/stores/app';
import {
getNotes,
@@ -44,6 +45,25 @@
const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
const isMobile = /android|ios/i.test(navigator.userAgent);
/** Derive tags from current $notes store (avoids re-scanning files on mobile) */
function deriveTagsFromNotes() {
const tagMap = new Map<string, number>();
for (const note of $notes) {
for (const tag of note.meta.tags) {
tagMap.set(tag, (tagMap.get(tag) ?? 0) + 1);
}
}
$tags = Array.from(tagMap.entries()).sort((a, b) => a[0].localeCompare(b[0]));
}
async function refreshTags() {
if (isMobile) {
deriveTagsFromNotes();
} else {
await refreshTags();
}
}
let compact = $derived($appConfig?.compact_notes ?? false);
let contextMenu = $state<{ x: number; y: number; note: NoteEntry } | null>(null);
let sortMenu = $state<{ x: number; y: number } | null>(null);
@@ -169,7 +189,12 @@
} else if ($viewMode === 'quickaccess') {
$notes = await getQuickAccess();
} else if ($viewMode === 'tag' && $activeTag) {
const all = await getNotes(null);
// Reuse cached "all" notes if available, otherwise fetch and cache them
let all = noteCache.get('all');
if (!all) {
all = await getNotes(null);
noteCache.set('all', all);
}
$notes = all.filter((n) => n.meta.tags.includes($activeTag!));
} else {
const nbPath = $viewMode === 'notebook' ? $activeNotebook?.path ?? null : null;
@@ -182,7 +207,10 @@
}
async function selectNote(note: NoteEntry) {
if ($activeNotePath === note.path) return;
if ($activeNotePath === note.path) {
if (isMobile) $mobileView = 'editor';
return;
}
try {
const content = await readNote(note.path);
onBeforeNoteSwitch();
@@ -324,7 +352,7 @@
if ($activeNotePath === note.path && $activeNote) {
$activeNote = { ...$activeNote, meta: { ...$activeNote.meta, tags: newTags } };
}
$tags = await getAllTags();
await refreshTags();
} catch (e) {
console.error('Failed to save tags:', e);
}
@@ -360,7 +388,7 @@
}
}
}
$tags = await getAllTags();
await refreshTags();
} catch (e) {
console.error('Failed to add tag to batch:', e);
}
@@ -382,7 +410,7 @@
}
}
}
$tags = await getAllTags();
await refreshTags();
} catch (e) {
console.error('Failed to remove tag from batch:', e);
}
@@ -449,9 +477,18 @@
}
}
function clampMenu(x: number, y: number, menuWidth = 220, menuHeight = 400): { x: number; y: number } {
if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 8;
if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 8;
if (x < 4) x = 4;
if (y < 4) y = 4;
return { x, y };
}
function onContextMenu(e: MouseEvent, note: NoteEntry) {
e.preventDefault();
contextMenu = { x: e.clientX, y: e.clientY, note };
const { x, y } = clampMenu(e.clientX, e.clientY);
contextMenu = { x, y, note };
}
function startRename(note: NoteEntry) {
@@ -691,16 +728,17 @@
onclick={(e) => handleNoteClick(e, note)}
oncontextmenu={(e) => {
e.preventDefault();
const pos = clampMenu(e.clientX, e.clientY);
// If multi-selected and right-clicking a selected note, show batch menu
if (selectedPaths.size > 1 && selectedPaths.has(note.path)) {
contextMenu = { x: e.clientX, y: e.clientY, note };
contextMenu = { x: pos.x, y: pos.y, note };
return;
}
// Otherwise clear selection and show single menu
if (selectedPaths.size > 0 && !selectedPaths.has(note.path)) {
clearSelection();
}
contextMenu = { x: e.clientX, y: e.clientY, note };
contextMenu = { x: pos.x, y: pos.y, note };
}}
draggable="true"
ondragstart={(e) => {
@@ -1539,7 +1577,7 @@
}
.note-list.mobile .list-content {
padding: 4px 8px;
padding: 4px 8px 180px;
}
.note-list.mobile .note-item {
+4 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { showSearch, activeNote, activeNotePath, editorDirty, appConfig } from '$lib/stores/app';
import { showSearch, activeNote, activeNotePath, editorDirty, appConfig, mobileView } from '$lib/stores/app';
import { searchNotes, readNote } from '$lib/api';
import { debounce } from '$lib/utils/debounce';
import type { SearchResult } from '$lib/types';
@@ -83,6 +83,8 @@
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
const isMobile = /android|ios/i.test(navigator.userAgent);
async function openResult(result: SearchResult) {
try {
const content = await readNote(result.path);
@@ -90,6 +92,7 @@
$activeNotePath = result.path;
$editorDirty = false;
$showSearch = false;
if (isMobile) $mobileView = 'editor';
} catch (e) {
console.error('Failed to open search result:', e);
}
+143 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, updateObj as globalUpdateObj, installType, settingsTab } from '$lib/stores/app';
import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, updateObj as globalUpdateObj, installType, settingsTab, vaultReady } from '$lib/stores/app';
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';
@@ -7,6 +7,8 @@
import { getVersion } from '@tauri-apps/api/app';
import type { ImportResult, BackupEntry } from '$lib/types';
const isMobile = /android|ios/i.test(navigator.userAgent);
type Tab = 'general' | 'editor' | 'styling' | 'import' | 'backup' | 'ai' | 'updates';
let activeTab = $state<Tab>('styling');
@@ -506,9 +508,9 @@
{#if $showSettings}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="settings-overlay" onclick={close} onkeydown={(e) => { if (e.key === 'Escape') close(); }}>
<div class="settings-overlay" class:mobile={isMobile} onclick={close} onkeydown={(e) => { if (e.key === 'Escape') close(); }}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="settings-panel" onclick={(e) => e.stopPropagation()}>
<div class="settings-panel" class:mobile={isMobile} onclick={(e) => e.stopPropagation()}>
<div class="settings-header">
<h2>Settings</h2>
<button class="close-btn" onclick={close}>
@@ -539,30 +541,36 @@
</svg>
Styling
</button>
{#if !isMobile}
<button class="tab-btn" class:active={activeTab === 'import'} onclick={() => activeTab = 'import'}>
<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="M12 3v12"/><path d="m8 11 4 4 4-4"/><path d="M8 5H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2h-4"/>
</svg>
Import
</button>
{/if}
{#if !isMobile}
<button class="tab-btn" class:active={activeTab === 'backup'} onclick={() => { activeTab = 'backup'; loadBackups(); }}>
<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="M21 12a9 9 0 00-9-9 9.75 9.75 0 00-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 009 9 9.75 9.75 0 006.74-2.74L21 16"/><path d="M16 16h5v5"/>
</svg>
Backup
</button>
{/if}
<button class="tab-btn" class:active={activeTab === 'ai'} onclick={() => activeTab = 'ai'}>
<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="M12 8V4l-2-2"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M9 13v2"/><path d="M15 13v2"/>
</svg>
AI
</button>
{#if !isMobile}
<button class="tab-btn" class:active={activeTab === 'updates'} onclick={() => activeTab = 'updates'}>
<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="M21 12a9 9 0 00-9-9 9.75 9.75 0 00-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 3"/>
</svg>
Updates
</button>
{/if}
</nav>
<div class="settings-body">
@@ -590,6 +598,20 @@
</div>
</div>
{#if isMobile}
<div class="settings-section">
<h3>Vault</h3>
<p class="setting-desc" style="margin-bottom: 12px; color: var(--text-tertiary); font-size: 13px;">Current: <strong style="color: var(--text-primary);">{$appConfig?.active_vault?.split('/').pop() ?? 'Unknown'}</strong></p>
<button class="import-btn" onclick={() => { $showSettings = false; $vaultReady = false; }}>
<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="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
</svg>
Switch Vault
</button>
</div>
{/if}
{#if !isMobile}
<div class="settings-section">
<h3>Performance</h3>
<label class="setting-toggle">
@@ -635,6 +657,7 @@
</label>
{/if}
</div>
{/if}
</div>
{:else if activeTab === 'editor'}
<div class="tab-content">
@@ -649,6 +672,7 @@
<span class="toggle-knob"></span>
</button>
</label>
{#if !isMobile}
<label class="setting-toggle" style="margin-top: 12px;">
<span class="setting-label">
<span class="setting-name">Show line numbers</span>
@@ -658,6 +682,7 @@
<span class="toggle-knob"></span>
</button>
</label>
{/if}
<label class="setting-toggle" style="margin-top: 12px;">
<span class="setting-label">
<span class="setting-name">Open notes in View Mode</span>
@@ -682,6 +707,7 @@
</label>
</div>
{#if !isMobile}
<div class="settings-section">
<h3>PDF Preview</h3>
<label class="setting-toggle">
@@ -713,6 +739,7 @@
<span class="setting-hint">Default height for PDF previews in notes</span>
</div>
{/if}
{/if}
</div>
{:else if activeTab === 'styling'}
<div class="tab-content">
@@ -849,6 +876,7 @@
</label>
<div class="backup-actions">
{#if !isMobile}
<button class="backup-link-btn" onclick={handleSelectBackupFolder}>
<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"/>
@@ -858,6 +886,7 @@
{#if $appConfig?.backup_location}
<p class="backup-path">{$appConfig.backup_location}</p>
{/if}
{/if}
<button class="backup-link-btn" onclick={handleBackupNow} disabled={backupLoading}>
{#if backupLoading}
<svg class="spinner-icon" width="14" height="14" 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>
@@ -1105,7 +1134,11 @@
<div class="settings-section">
<h3>Usage</h3>
{#if isMobile}
<p class="import-desc">Use the AI button in the toolbar or header to access AI writing tools: improve, fix grammar, rewrite, summarize, translate, and more.</p>
{:else}
<p class="import-desc">Select text in the editor and right-click to access AI writing tools: improve, fix grammar, rewrite, summarize, translate, and more.</p>
{/if}
</div>
{/if}
</div>
@@ -2085,4 +2118,111 @@
color: var(--accent);
}
/* ═══ Mobile ═══ */
.settings-overlay.mobile {
align-items: stretch;
justify-content: stretch;
}
.settings-panel.mobile {
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
border: none;
}
.settings-panel.mobile .settings-content {
flex-direction: column;
}
.settings-panel.mobile .settings-tabs {
flex-direction: row;
min-width: 0;
border-right: none;
border-bottom: 1px solid var(--border-light);
padding: 8px 8px 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 0;
}
.settings-panel.mobile .settings-tabs::-webkit-scrollbar {
display: none;
}
.settings-panel.mobile .tab-btn {
flex-shrink: 0;
flex-direction: column;
gap: 4px;
padding: 8px 14px 10px;
font-size: 11px;
border-radius: 8px 8px 0 0;
}
.settings-panel.mobile .tab-btn.active {
border-bottom: 2px solid var(--accent);
border-radius: 8px 8px 0 0;
}
.settings-panel.mobile .settings-header {
padding-top: calc(env(safe-area-inset-top, 12px) + 12px);
}
.settings-panel.mobile .settings-body {
padding: 16px;
}
.settings-panel.mobile .setting-name {
font-size: 14px;
}
.settings-panel.mobile .setting-desc {
font-size: 12px;
}
.settings-panel.mobile .toggle-switch {
width: 44px;
height: 26px;
}
.settings-panel.mobile .toggle-knob {
width: 22px;
height: 22px;
}
.settings-panel.mobile .toggle-switch.on .toggle-knob {
transform: translateX(18px);
}
.settings-panel.mobile .option-btn {
padding: 12px 10px;
font-size: 14px;
}
.settings-panel.mobile .theme-btn {
padding: 12px 10px;
font-size: 14px;
}
.settings-panel.mobile .accent-grid {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.settings-panel.mobile .accent-swatch {
padding: 14px 8px;
}
.settings-panel.mobile .font-size-options {
gap: 8px;
}
.settings-panel.mobile .font-size-btn {
padding: 12px 6px;
}
</style>
+65 -8
View File
@@ -51,11 +51,23 @@
export async function refresh() {
try {
$notebooks = await getNotebooks();
$tags = await getAllTags();
$notebookIcons = await getNotebookIcons();
const qaNotes = await getQuickAccess();
$quickAccessPaths = qaNotes.map(n => n.relative_path);
if (isMobile) {
// On mobile, parallelize and skip getAllTags (derive from $notes instead)
const [nbs, icons, qaNotes] = await Promise.all([
getNotebooks(),
getNotebookIcons(),
getQuickAccess(),
]);
$notebooks = nbs;
$notebookIcons = icons;
$quickAccessPaths = qaNotes.map(n => n.relative_path);
} else {
$notebooks = await getNotebooks();
$tags = await getAllTags();
$notebookIcons = await getNotebookIcons();
const qaNotes = await getQuickAccess();
$quickAccessPaths = qaNotes.map(n => n.relative_path);
}
} catch (e) {
console.error('Failed to refresh sidebar:', e);
}
@@ -271,9 +283,18 @@
return convertFileSrc(`${vaultRoot}/${iconPath}`);
}
function clampMenu(x: number, y: number, menuWidth = 220, menuHeight = 300): { x: number; y: number } {
if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 8;
if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 8;
if (x < 4) x = 4;
if (y < 4) y = 4;
return { x, y };
}
function onContextMenu(e: MouseEvent, nb: NotebookEntry) {
e.preventDefault();
contextMenu = { x: e.clientX, y: e.clientY, notebook: nb };
const { x, y } = clampMenu(e.clientX, e.clientY);
contextMenu = { x, y, notebook: nb };
}
function closeContextMenu() {
@@ -283,7 +304,8 @@
function onTrashContextMenu(e: MouseEvent) {
e.preventDefault();
e.stopPropagation();
trashContextMenu = { x: e.clientX, y: e.clientY };
const { x, y } = clampMenu(e.clientX, e.clientY, 180, 60);
trashContextMenu = { x, y };
}
async function handleEmptyTrash() {
@@ -310,6 +332,7 @@
<svelte:window onclick={handleWindowClick} />
<aside class="sidebar" class:collapsed={$sidebarCollapsed} class:mobile={isMobile}>
{#if !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">
@@ -329,6 +352,7 @@
</button>
{/if}
</div>
{/if}
{#if !$sidebarCollapsed}
<nav class="sidebar-nav">
@@ -425,9 +449,32 @@
{@render notebookItem(nb, 0)}
{/each}
</div>
{#if isMobile && $tags.length > 0}
<div class="tags-section-inline">
<button class="section-header" onclick={() => tagsCollapsed = !tagsCollapsed}>
<span class="section-title">Tags</span>
<span class="tag-count" style="margin-left: auto">{$tags.length}</span>
</button>
{#if !tagsCollapsed}
<div class="tag-list">
{#each $tags as [tag, count]}
<button
class="tag-item"
class:active={$viewMode === 'tag' && $activeTag === tag}
onclick={() => selectTag(tag)}
>
<span class="tag-hash">#</span>
<span class="tag-name">{tag}</span>
<span class="tag-count">{count}</span>
</button>
{/each}
</div>
{/if}
</div>
{/if}
</div>
{#if $tags.length > 0}
{#if !isMobile && $tags.length > 0}
<div class="tags-section">
<button class="section-header" onclick={() => tagsCollapsed = !tagsCollapsed}>
<span class="section-title">Tags</span>
@@ -1052,6 +1099,16 @@
height: 20px;
}
.sidebar.mobile .section {
padding-bottom: 180px;
}
.sidebar.mobile .tags-section-inline {
border-top: 1px solid var(--border-light);
padding: 4px 0;
margin-top: 8px;
}
.sidebar.mobile .section-header {
padding: 12px 16px 6px;
min-height: 44px;
+238 -7
View File
@@ -11,12 +11,56 @@
let recentVaults: VaultConfig[] = $derived($appConfig?.vaults ?? []);
let loading = $state(false);
let error = $state('');
let vaultName = $state('HelixNotes');
let hasPermission = $state(!isMobile);
let selectedLocation = $state('Documents');
let customPath = $state('');
const storageLocations = [
{ label: 'Documents', path: '/storage/emulated/0/Documents' },
{ label: 'Downloads', path: '/storage/emulated/0/Download' },
{ label: 'Internal Storage', path: '/storage/emulated/0' },
];
if (isMobile) {
checkPermission();
setTimeout(checkPermission, 500);
(window as any).__storagePermissionGranted = () => { hasPermission = true; };
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') setTimeout(checkPermission, 300);
});
}
function checkPermission() {
try {
const bridge = (window as any).Android;
if (bridge?.hasStoragePermission) {
hasPermission = bridge.hasStoragePermission() === true;
}
} catch { /* bridge not ready */ }
}
function requestPermission() {
try {
const bridge = (window as any).Android;
bridge?.requestStoragePermission?.();
} catch {
error = 'Go to Settings > Apps > HelixNotes > Permissions and enable "All files access".';
}
}
function getMobileBasePath(): string {
if (selectedLocation === 'Custom') {
return customPath.trim() || '/storage/emulated/0/Documents';
}
return storageLocations.find(l => l.label === selectedLocation)?.path || '/storage/emulated/0/Documents';
}
let fullPath = $derived(isMobile ? `${getMobileBasePath()}/${vaultName.trim() || 'HelixNotes'}` : '');
async function pickFolder() {
if (isMobile) {
// Use shared Documents folder for Syncthing/Nextcloud compatibility
const vaultPath = '/storage/emulated/0/Documents/HelixNotes';
await openSelectedVault(vaultPath);
await openSelectedVault(fullPath);
} else {
const selected = await open({ directory: true, multiple: false, title: 'Choose Notes Folder' });
if (selected) {
@@ -29,6 +73,12 @@
loading = true;
error = '';
try {
if (isMobile) {
try {
const bridge = (window as any).Android;
bridge?.prepareVaultDir?.(path);
} catch { /* Rust will retry mkdir itself */ }
}
await openVault(path);
const config = await getAppConfig();
$appConfig = config;
@@ -68,7 +118,41 @@
<h1>HelixNotes</h1>
<p class="subtitle">Local markdown notes</p>
{#if isMobile}
<p class="description">Notes are stored in Documents/HelixNotes as Markdown files. Sync with Nextcloud, Syncthing, or any file sync app.</p>
<p class="description">Choose where to store your notes. Sync with Syncthing, Nextcloud, or any file sync app.</p>
{#if !hasPermission}
<button class="btn-permission" onclick={requestPermission}>
Grant File Access
</button>
<p class="permission-hint">Required to access Documents, Downloads, and other shared folders.</p>
{/if}
<div class="location-selector">
<label class="location-label">Location</label>
<div class="location-options">
{#each storageLocations as loc}
<button
class="location-option"
class:active={selectedLocation === loc.label}
onclick={() => selectedLocation = loc.label}
>{loc.label}</button>
{/each}
<button
class="location-option"
class:active={selectedLocation === 'Custom'}
onclick={() => selectedLocation = 'Custom'}
>Custom</button>
</div>
{#if selectedLocation === 'Custom'}
<input class="custom-path-input" type="text" bind:value={customPath} placeholder="/storage/emulated/0/..." />
{/if}
</div>
<div class="vault-name-input">
<label for="vault-name">Vault name</label>
<div class="vault-name-preview"><input id="vault-name" type="text" bind:value={vaultName} placeholder="HelixNotes" /></div>
<span class="vault-path-hint">{fullPath}</span>
</div>
{: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}
@@ -87,13 +171,13 @@
{/if}
</button>
{#if !isMobile && $appConfig?.active_vault}
{#if $appConfig?.active_vault}
<button class="btn-back" onclick={() => ($vaultReady = true)}>
Back
</button>
{/if}
{#if !isMobile && recentVaults.length > 0}
{#if recentVaults.length > 0}
<div class="recent">
<span class="recent-label">Recent</span>
{#each recentVaults as vault}
@@ -110,11 +194,13 @@
<style>
.vault-picker {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
height: 100dvh;
background: var(--bg-primary);
position: relative;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.window-controls {
@@ -148,6 +234,9 @@
max-width: 400px;
width: 100%;
padding: 48px 32px;
padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
margin: auto;
flex-shrink: 0;
}
.logo {
@@ -276,6 +365,130 @@
white-space: nowrap;
}
.vault-name-input {
margin-bottom: 20px;
text-align: left;
}
.vault-name-input label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.vault-name-preview {
display: flex;
align-items: center;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
color: var(--text-tertiary);
}
.vault-name-preview input {
background: none;
border: none;
outline: none;
color: var(--text-primary);
font-size: 14px;
font-family: inherit;
width: 100%;
padding: 0;
}
.location-selector {
margin-bottom: 16px;
text-align: left;
}
.location-label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.location-options {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.location-option {
padding: 8px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-secondary);
color: var(--text-secondary);
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: all 0.15s;
}
.location-option.active {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.custom-path-input {
width: 100%;
margin-top: 8px;
padding: 10px 12px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-size: 13px;
font-family: inherit;
outline: none;
box-sizing: border-box;
}
.custom-path-input:focus {
border-color: var(--accent);
}
.vault-path-hint {
display: block;
font-size: 11px;
color: var(--text-tertiary);
margin-top: 6px;
opacity: 0.7;
word-break: break-all;
}
.btn-permission {
width: 100%;
padding: 12px 20px;
background: var(--accent);
color: white;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
margin-bottom: 6px;
transition: background 0.15s;
}
.btn-permission:hover {
background: var(--accent-hover);
}
.permission-hint {
font-size: 12px;
color: var(--text-tertiary);
margin-bottom: 20px;
opacity: 0.7;
}
/* Mobile */
.mobile .btn-primary {
padding: 14px 20px;
@@ -295,4 +508,22 @@
width: 88px;
height: 88px;
}
.mobile .btn-back {
padding: 14px 20px;
font-size: 16px;
border-radius: 12px;
}
.mobile .vault-item {
padding: 14px 16px;
}
.mobile .vault-name {
font-size: 15px;
}
.mobile .vault-path {
font-size: 13px;
}
</style>