Focus notebook name after sidebar double-click (#134)

Double-clicking empty sidebar space now opens the new-notebook field and focuses it, matching the + button flow.

Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/134
This commit is contained in:
MF
2026-06-18 13:24:15 +02:00
committed by ArkHost
parent 32e056dc24
commit 51148efe2e
+34 -10
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { tick } from 'svelte';
import { import {
notebooks, notebooks,
notes, notes,
@@ -37,6 +38,7 @@
let editValue = $state(''); let editValue = $state('');
let newNotebookName = $state(''); let newNotebookName = $state('');
let showNewNotebook = $state(false); let showNewNotebook = $state(false);
let newNotebookInput: HTMLInputElement | null = $state(null);
let dropTargetPath = $state<string | null>(null); let dropTargetPath = $state<string | null>(null);
let dropPosition = $state<'above' | 'into' | 'below' | null>(null); let dropPosition = $state<'above' | 'into' | 'below' | null>(null);
let draggedNotebookPath = $state<string | null>(null); let draggedNotebookPath = $state<string | null>(null);
@@ -182,6 +184,35 @@
let newNotebookParent = $state<NotebookEntry | null>(null); let newNotebookParent = $state<NotebookEntry | null>(null);
async function focusNewNotebookInput() {
await tick();
newNotebookInput?.focus();
}
async function toggleNewNotebookInput() {
if (showNewNotebook) {
showNewNotebook = false;
newNotebookName = '';
newNotebookParent = null;
return;
}
// Unfiled Notes is the root pseudo-notebook (empty relative_path); treat it as root.
newNotebookParent = ($viewMode === 'notebook' && $activeNotebook?.relative_path) ? $activeNotebook : null;
showNewNotebook = true;
await focusNewNotebookInput();
}
async function startNewNotebookFromSidebar(e: MouseEvent) {
const target = e.target as HTMLElement | null;
if (target?.closest('button, input, .context-menu, .delete-confirm-overlay')) return;
newNotebookParent = ($viewMode === 'notebook' && $activeNotebook?.relative_path) ? $activeNotebook : null;
newNotebookName = '';
showNewNotebook = true;
await focusNewNotebookInput();
}
async function handleCreateNotebook() { async function handleCreateNotebook() {
if (!newNotebookName.trim()) return; if (!newNotebookName.trim()) return;
try { try {
@@ -486,7 +517,7 @@
<svelte:window onclick={handleWindowClick} /> <svelte:window onclick={handleWindowClick} />
<aside class="sidebar" class:collapsed={$sidebarCollapsed} class:mobile={isMobile}> <aside class="sidebar" class:collapsed={$sidebarCollapsed} class:mobile={isMobile} ondblclick={startNewNotebookFromSidebar}>
{#if !isMobile} {#if !isMobile}
<div class="sidebar-header"> <div class="sidebar-header">
<button class="collapse-btn" onclick={() => ($sidebarCollapsed = !$sidebarCollapsed)} title="Toggle sidebar"> <button class="collapse-btn" onclick={() => ($sidebarCollapsed = !$sidebarCollapsed)} title="Toggle sidebar">
@@ -606,15 +637,7 @@
</svg> </svg>
</button> </button>
{/if} {/if}
<button class="icon-btn-sm" onclick={() => { <button class="icon-btn-sm" onclick={toggleNewNotebookInput} title={$viewMode === 'notebook' && $activeNotebook?.relative_path ? `New notebook inside ${$activeNotebook.name}` : 'New notebook'}>
if (showNewNotebook) {
showNewNotebook = false; newNotebookName = ''; newNotebookParent = null;
} else {
// Unfiled Notes is the root pseudo-notebook (empty relative_path); treat it as root.
newNotebookParent = ($viewMode === 'notebook' && $activeNotebook?.relative_path) ? $activeNotebook : null;
showNewNotebook = true;
}
}} title={$viewMode === 'notebook' && $activeNotebook?.relative_path ? `New notebook inside ${$activeNotebook.name}` : 'New notebook'}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /> <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
</svg> </svg>
@@ -630,6 +653,7 @@
</button> </button>
{/if} {/if}
<input <input
bind:this={newNotebookInput}
type="text" type="text"
bind:value={newNotebookName} bind:value={newNotebookName}
placeholder={newNotebookParent ? 'Sub-notebook name...' : 'Notebook name...'} placeholder={newNotebookParent ? 'Sub-notebook name...' : 'Notebook name...'}