add setting for using wide selector

l2dy · Jul 6, 2024 · 82b4268 · 82b4268
1 parent 108f608
commit 82b4268
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 33 deletions.
diff --git a/src/components/App.svelte b/src/components/App.svelte
@@ -27,7 +27,7 @@
   import Overlay from "./Overlay.svelte";
   import CreateNewNote from "./CreateNewNote.svelte";
 
-  import { getSettings, setSetting } from "../settings";
+  import { getSettings, onSettingsChange, setSetting } from "../settings";
   import { logAppExit, logAppOpen, logNoteOp } from "../log";
   import {
     createNewScratchNote,
@@ -138,8 +138,7 @@
   let showingFind = $state(false);
   let isSpellChecking = $state(false);
   let altChar = getAltChar();
-
-  let useWideNoteSelector = $state(true);
+  let useWideSelectors = $state(initialSettings.useWideSelectors);
 
   let contextMenuPos = $state({ x: 0, y: 0 });
 
@@ -153,6 +152,15 @@
     console.log("showingCreateNewNote changed to:", showingCreateNewNote);
   });
 
+  /**
+   * @param {import("../settings").Settings} settings
+   */
+  function updateForSettings(settings) {
+    console.log("updateForSettings");
+    useWideSelectors = settings.useWideSelectors;
+  }
+  onSettingsChange(updateForSettings);
+
   let isShowingDialog = $derived.by(() => {
     return (
       showingHistorySelector ||
@@ -1674,7 +1682,7 @@
 {/if}
 
 {#if showingNoteSelector}
-  {#if useWideNoteSelector}
+  {#if useWideSelectors}
     <Overlay onclose={closeNoteSelector} blur={true}>
       <NoteSelector2
         {switchToCommandPalette}

diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte
@@ -62,18 +62,21 @@
 
   let theme = getSettings().theme;
 
-  function updateEditorForSettings(newSettings) {
+  /**
+   * @param {import("../settings").Settings} settings
+   */
+  function updateForSettings(settings) {
     if (!editor) {
       return;
     }
-    editor.setTheme(newSettings.theme);
-    editor.setKeymap(newSettings.keymap, newSettings.emacsMetaKey);
-    editor.setBracketClosing(newSettings.bracketClosing);
-    editor.setFoldGutter(newSettings.showFoldGutter);
-    editor.setLineNumberGutter(newSettings.showLineNumberGutter);
-    editor.setFont(newSettings.fontFamily, newSettings.fontSize);
+    editor.setTheme(settings.theme);
+    editor.setKeymap(settings.keymap, settings.emacsMetaKey);
+    editor.setBracketClosing(settings.bracketClosing);
+    editor.setFoldGutter(settings.showFoldGutter);
+    editor.setLineNumberGutter(settings.showLineNumberGutter);
+    editor.setFont(settings.fontFamily, settings.fontSize);
   }
-  onSettingsChange(updateEditorForSettings);
+  onSettingsChange(updateForSettings);
 
   function mounted() {
     console.log("Editor.svelte: mounted, editorEl:", editorEl);

diff --git a/src/components/ListBox2.svelte b/src/components/ListBox2.svelte
@@ -98,6 +98,11 @@
   export function onkeydown(ev, allowLeftRight = false) {
     let key = ev.key;
     let isUp = key === "ArrowUp" || (key === "ArrowLeft" && allowLeftRight);
+    if (isUp && selectedIdx <= 0) {
+      // don't block cursor going left if input box has cursor at the end
+      // of text and we're at first item
+      return;
+    }
     let isDown =
       key === "ArrowDown" || (key === "ArrowRight" && allowLeftRight);
     let isEnter = selectedItem && key === "Enter";

diff --git a/src/components/NoteSelector2.svelte b/src/components/NoteSelector2.svelte
@@ -221,7 +221,14 @@
     }
 
     console.log("listbox:", listbox);
-    listbox.onkeydown(ev, filter === "");
+    let allowLeftRight = filter === "" || isCursorAtEnd(input);
+    listbox.onkeydown(ev, allowLeftRight);
+  }
+
+  function isCursorAtEnd(input) {
+    const cursorPosition = input.selectionStart;
+    const inputLength = input.value.length;
+    return cursorPosition === inputLength;
   }
 
   /**
@@ -245,6 +252,7 @@
     deleteNote(name);
   }
 
+  let input;
   let listbox;
 </script>
 
@@ -256,9 +264,10 @@
 >
   <div>
     <input
-      type="text"
-      use:focus
+      bind:this={input}
       bind:value={filter}
+      use:focus
+      type="text"
       class="py-1 px-2 bg-white w-full mb-2 rounded-sm"
     />
     <div class="absolute right-[1rem] top-[0.75rem] italic text-gray-400">

diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
@@ -31,6 +31,7 @@
   let fontSize = $state(initialSettings.fontSize || kDefaultFontSize);
   let theme = $state(initialSettings.theme);
   let backupNotes = $state(initialSettings.backupNotes);
+  let useWideSelectors = $state(initialSettings.useWideSelectors);
 
   let showBackupSetting = !!getStorageFS();
 
@@ -100,6 +101,7 @@
       showFoldGutter: showFoldGutter,
       showLineNumberGutter: showLineNumberGutter,
       backupNotes: backupNotes,
+      useWideSelectors: useWideSelectors,
       theme: theme,
     };
     saveSettings(newSettings);
@@ -199,9 +201,9 @@
     </select>
   </div>
 
-  {#if showBackupSetting}
-    <div class="mt-2 flex flex-col">
-      <h2>Misc</h2>
+  <div class="mt-2 flex flex-col">
+    <h2>Misc</h2>
+    {#if showBackupSetting}
       <label class="flex">
         <input
           type="checkbox"
@@ -216,8 +218,22 @@
           title="info about backup">help</a
         >
       </label>
-    </div>
-  {/if}
+    {/if}
+    <label class="flex">
+      <input
+        type="checkbox"
+        bind:checked={useWideSelectors}
+        onchange={updateSettings}
+      />
+      <div>Use Wide Selectors</div>
+      <!-- <a
+        href="/help#backing-up-notes"
+        class="underline ml-2"
+        target="_blank"
+        title="info about backup">help</a
+      > -->
+    </label>
+  </div>
 
   <div class="mt-2 mr-0.5 flex text-xs justify-end text-gray-400">
     Current Version: {appVersion}&nbsp;

diff --git a/src/settings.js b/src/settings.js
@@ -3,19 +3,19 @@ import { cloneObjectDeep, objectEqualDeep, platform, throwIf } from "./util";
 import { ipcRenderer } from "./ipcrenderer";
 import { kScratchNoteName } from "./notes";
 
-/**
- * @typedef {Object} Settings
- * @property {boolean} bracketClosing
- * @property {string} currentNoteName
- * @property {string} emacsMetaKey
- * @property {string} [fontFamily]
- * @property {number} [fontSize]
- * @property {string} keymap
- * @property {boolean} showFoldGutter
- * @property {boolean} showLineNumberGutter
- * @property {boolean} backupNotes
- * @property {string} [theme] // "system", "light", "dark"
- */
+/** @typedef {{
+ bracketClosing: boolean,
+ currentNoteName: string,
+emacsMetaKey: string,
+fontFamily?: string,
+fontSize?: number,
+keymap: string,
+showFoldGutter: boolean,
+showLineNumberGutter: boolean,
+backupNotes: boolean,
+useWideSelectors: boolean,
+theme?: string, // "system", "light", "dark"
+}} Settings */
 
 export const kEventSettingsChange = "settings-change";
 
@@ -120,6 +120,7 @@ export function loadInitialSettings() {
     keymap: "default",
     showFoldGutter: true,
     showLineNumberGutter: true,
+    useWideSelectors: false,
     backupNotes: false,
     theme: "system",
   };