refactor: code modularity

package.json

@@ -91,7 +91,6 @@
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
-    "mode-watcher": "^0.5.0",
     "print-js": "^1.6.0",
     "quill": "^2.0.3",
     "screenfull": "^6.0.2",

src/App.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import MenuBar from '@/src/lib/components/menubar/MenuBar.svelte';
+  import MenuBar from '@/components/menubar/MenuBar.svelte';
   import EditorTabs from '@/components/EditorTabs.svelte';
   import FontDialog from '@/components/font-dialog/FontDialog.svelte';
   import Shortcuts from '@/components/Shortcuts.svelte';
   import { Toaster } from '@/components/ui/sonner';
-  import favIcon from '@/src/assets/images/favicon.png';
+  import favIcon from '@/src/assets/images/favicon-light.png';
   import favIconDark from '@/src/assets/images/favicon-dark.png';
-  import { mode, ModeWatcher } from 'mode-watcher';
   import { Notpad } from '@/helpers/notpad';
   import AboutDialog from '@/components/AboutDialog.svelte';
   import LicenseDialog from '@/components/LicenseDialog.svelte';
@@ -15,6 +14,10 @@
   import Loading from '@/components/Loading.svelte';
   import ShortcutsDialog from '@/components/ShortcutsDialog.svelte';
   import EditorCloseConfirmationDialog from '@/components/EditorCloseConfirmationDialog.svelte';
+  import { get } from 'svelte/store';
+
+  const settings = Notpad.stores.settings;
+  document.documentElement.setAttribute('data-theme', get(settings).theme);
 </script>
 
 {#await Notpad.init()}
@@ -37,9 +40,9 @@
   <Shortcuts />
 {/await}
 <Toaster />
-<ModeWatcher />
+
 <svelte:head>
-  {#if $mode == 'dark'}
+  {#if $settings.theme == 'dark'}
     <link rel="icon" href={favIconDark} />
   {:else}
     <link rel="icon" href={favIcon} />

src/app.css

@@ -34,7 +34,7 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
-  .dark {
+  [data-theme='dark'] {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --muted: 0 0% 14.9%;
@@ -81,7 +81,7 @@ body,
 }
 
 * {
-  @apply scrollbar scrollbar-track-neutral-100 scrollbar-thumb-foreground/20 scrollbar-corner-foreground/5 scrollbar-thumb-rounded-md scrollbar-w-1.5 scrollbar-h-1 [font-optical-sizing:auto] dark:scrollbar-track-neutral-900;
+  @apply scrollbar scrollbar-track-muted scrollbar-thumb-foreground/20 scrollbar-corner-foreground/5 scrollbar-thumb-rounded-md scrollbar-w-1.5 scrollbar-h-1 [font-optical-sizing:auto];
 }
 
 /* For icons default values */

src/lib/components/AboutDialog.svelte

@@ -6,13 +6,13 @@
   import GitHubIcon from '@/components/icons/GitHub.svelte';
   import Separator from '@/components/ui/separator/separator.svelte';
   import { Badge } from '@/components/ui/badge';
-  import { mode } from 'mode-watcher';
   import { Notpad } from '@/helpers/notpad';
   import { slide } from 'svelte/transition';
   import appJson from '@/src/app.json';
   import { tick } from 'svelte';
 
   const open = Notpad.dialogs.about;
+  const settings = Notpad.stores.settings;
 
   function closeDialog() {
     open.set(false);
@@ -39,7 +39,7 @@
 
     <div class="max-h-[60vh] overflow-y-auto pr-2 text-base">
       <div class="mb-3 flex flex-row items-center justify-start gap-4 text-left">
-        <img class="w-20" alt="icon" src={$mode == 'dark' ? appIconDark : appIconLight} />
+        <img class="w-20" alt="icon" src={$settings.theme == 'dark' ? appIconDark : appIconLight} />
 
         <div>
           <span class="text-xl font-bold">Notpad</span><br />

src/lib/components/EditorTabs.svelte

@@ -3,12 +3,14 @@
   import * as Tabs from '@/components/ui/tabs';
   import * as ContextMenu from '@/components/ui/context-menu';
   import EditorTitle from '@/components/EditorTitle.svelte';
-  import { activeTabId, editors } from '@/store/store';
   import { slide } from 'svelte/transition';
   import EditMenuItems from '@/components/EditMenuItems.svelte';
+  import { Notpad } from '@/helpers/notpad';
 
-  let innerWidth = $state(window.innerWidth);
+  const activeTabId = Notpad.stores.activeTabId;
+  const editors = Notpad.stores.editors;
 
+  let innerWidth = $state(window.innerWidth);
   let isMD = $derived(innerWidth <= 768);
   /**
    * Compact mode is disabled on mobile devices (width <= 450px)

src/lib/components/EditorTitle.svelte

@@ -2,7 +2,6 @@
   import { Notpad } from '@/helpers/notpad';
   import { tick } from 'svelte';
   import { longpress } from '@/actions/longpress';
-  import { activeTabId } from '@/store/store';
   import * as Tooltip from '@/components/ui/tooltip';
   import CloseIcon from '@/components/icons/Close.svelte';
   import Button from '@/components/ui/button/button.svelte';
@@ -15,6 +14,8 @@
   }
 
   const maxlength = 54;
+  const activeTabId = Notpad.stores.activeTabId;
+
   let { editor }: Props = $props();
   let readonly = $state(true);
   let input: HTMLInputElement = $state(null!);

src/lib/components/Loading.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
-  import { mode } from 'mode-watcher';
   import { fade } from 'svelte/transition';
   import appIconLight from '@/src/assets/images/Notpad Logo Light.svg';
   import appIconDark from '@/src/assets/images/Notpad Logo Dark.svg';
+  import { Notpad } from '../helpers/notpad';
+
+  const settings = Notpad.stores.settings;
 </script>
 
 <div
   transition:fade
   class="fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 flex
   flex-col items-center justify-center bg-primary-foreground"
 >
-  <img class="w-20 animate-pulse" alt="icon" src={$mode == 'dark' ? appIconDark : appIconLight} />
+  <img
+    class="w-20 animate-pulse"
+    alt="icon"
+    src={$settings.theme == 'dark' ? appIconDark : appIconLight}
+  />
 </div>

src/lib/components/StatusBar.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
   import { createBubbler, preventDefault, stopPropagation } from 'svelte/legacy';
-
-  const bubble = createBubbler();
-  import { settings } from '@/store/store';
   import { slide } from 'svelte/transition';
+  import { Notpad } from '@/helpers/notpad';
 
   interface Props {
     caretLineNo?: number;
@@ -14,6 +12,8 @@
 
   let { caretLineNo = 1, caretColumnNo = 1, characterCount = 0, wordCount = 0 }: Props = $props();
 
+  const bubble = createBubbler();
+  const settings = Notpad.stores.settings;
   const inAnimation = {
     duration: 80
   };

src/lib/components/editor/Editor.svelte

@@ -4,7 +4,6 @@
   import StatusBar from '@/components/StatusBar.svelte';
   import Quill from 'quill';
   import { Notpad } from '@/helpers/notpad';
-  import { settings } from '@/store/store';
   import FakeCaret from './FakeCaret.svelte';
   import type { EditorType } from '@/types/EditorType';
   import 'quill/dist/quill.core.css';
@@ -14,6 +13,7 @@
     editor: EditorType;
   }
 
+  const settings = Notpad.stores.settings;
   let { editor }: Props = $props();
   let editorContainer: HTMLDivElement = $state(null!);
   let lineNo = $state(0);
@@ -133,9 +133,8 @@
 >
   <div
     class="editor-container relative flex overflow-hidden
-    rounded-none bg-transparent text-sm duration-300"
-    class:caret-transparent={$settings.caret.enable}
-    class:caret-primary={!$settings.caret.enable}
+    rounded-none bg-transparent text-sm caret-transparent
+    duration-300"
     data-line-numbers={$settings.lineNumbers}
     data-wrap-lines={$settings.wrapLines}
     bind:this={editorContainer}

src/lib/components/editor/FakeCaret.svelte

@@ -2,10 +2,10 @@
   import throttle from 'lodash.throttle';
   import debounce from 'lodash.debounce';
   import { position as getCaretPosition } from 'caret-pos';
-  import { settings } from '@/store/store';
   import type Quill from 'quill';
   import { cn } from '@/utils';
-  import { CaretAnimation } from '@/types/SettingsType';
+  import { Notpad } from '@/helpers/notpad';
+  import { Settings } from '@/helpers/settings';
 
   interface Props {
     quill: Quill;
@@ -15,6 +15,8 @@
   let { quill, editorContainer }: Props = $props();
   let caret = $state({ top: 10, left: 8, height: 24 });
   let fakeCaretElement: HTMLSpanElement = $state(null!);
+
+  const settings = Notpad.stores.settings;
   const caretStyle = $derived($settings.caret.style);
 
   const resumeFakeCaretBlink = debounce(function () {
@@ -49,25 +51,23 @@
   });
 </script>
 
-{#if $settings.caret.enable}
-  <span
-    class={cn(
-      'fake-caret absolute z-0 w-0.5 animate-caret-blink rounded-[.06em]',
-      '[transition:left_var(--caret-animation-duration),top_var(--caret-animation-duration)]',
-      {
-        'bg-primary': caretStyle != 'HollowBlock',
-        'border border-primary': caretStyle == 'HollowBlock'
-      }
-    )}
-    style:width="calc({caretStyle == 'VerticalBar' ? '2px' : '1ch'} * var(--editor-zoom))"
-    style:height={caretStyle == 'Underline' ? '2px' : `${caret.height}px`}
-    style:margin-top={caretStyle == 'Underline' ? `${caret.height + 2}px` : undefined}
-    style:top="{caret.top}px"
-    style:left="{caret.left}px"
-    style:--caret-animation-duration={CaretAnimation[$settings.caret.animation]}
-    bind:this={fakeCaretElement}
-  ></span>
-{/if}
+<span
+  class={cn(
+    'fake-caret absolute z-0 w-0.5 animate-caret-blink rounded-[.06em]',
+    '[transition:left_var(--caret-animation-duration),top_var(--caret-animation-duration)]',
+    {
+      'bg-primary': caretStyle != 'Hollow Block',
+      'border border-primary': caretStyle == 'Hollow Block'
+    }
+  )}
+  style:width="calc({caretStyle == 'Vertical Bar' ? '2px' : '1ch'} * var(--editor-zoom))"
+  style:height={caretStyle == 'Underline' ? '2px' : `${caret.height}px`}
+  style:margin-top={caretStyle == 'Underline' ? `${caret.height + 2}px` : undefined}
+  style:top="{caret.top}px"
+  style:left="{caret.left}px"
+  style:--caret-animation-duration={Settings.caret.animations[$settings.caret.animation]}
+  bind:this={fakeCaretElement}
+></span>
 
 <style>
   .fake-caret {

src/lib/components/font-dialog/FontDialog.svelte

@@ -2,19 +2,19 @@
   import { Button } from '@/components/ui/button';
   import * as Dialog from '@/components/ui/dialog';
   import FontFamilyCombobox from './FontFamilyCombobox.svelte';
-  import { settings } from '@/store/store';
   import { Notpad } from '@/helpers/notpad';
   import FontSizeCombobox from './FontSizeCombobox.svelte';
   import { Label } from '@/components/ui/label';
   import * as Card from '@/components/ui/card';
-  import { FontFamily, FontSize } from '@/src/lib/types/SettingsType';
   import { get } from 'svelte/store';
+  import type { SettingsType } from '@/types/SettingsType';
 
+  const settings = Notpad.stores.settings;
   const currentSettings = get(settings);
   const open = Notpad.dialogs.font;
 
-  let fontFamily: keyof typeof FontFamily = $state(currentSettings.fontFamily);
-  let fontSize: keyof typeof FontSize = $state(currentSettings.fontSize);
+  let fontFamily: SettingsType['fontFamily'] = $state(currentSettings.fontFamily);
+  let fontSize: SettingsType['fontSize'] = $state(currentSettings.fontSize);
 
   function closeFontDialog({ submit } = { submit: false }) {
     open.set(false);
@@ -27,7 +27,7 @@
 
   function resetFontDefault() {
     fontFamily = 'SUSE';
-    fontSize = '16';
+    fontSize = 16;
   }
 </script>
 

src/lib/components/font-dialog/FontFamilyCombobox.svelte

@@ -5,21 +5,23 @@
   import { Button } from '@/components/ui/button';
   import { Label } from '@/components/ui/label';
   import { cn } from '@/utils';
-  import { settings } from '@/store/store';
   import { get } from 'svelte/store';
   import CheckIcon from '@/components/icons/Check.svelte';
   import ChevronsUpDownIcon from '@/components/icons/ChevronsUpDown.svelte';
-  import { FontFamily } from '@/src/lib/types/SettingsType';
+  import { Notpad } from '@/helpers/notpad';
+  import type { SettingsType } from '@/types/SettingsType';
+  import { Settings } from '@/helpers/settings';
 
   interface Props {
-    value: keyof typeof FontFamily;
+    value: SettingsType['fontFamily'];
   }
 
+  const settings = Notpad.stores.settings;
   let triggerRef = $state<HTMLButtonElement>(null!);
   let open = $state(false);
   let { value = $bindable() }: Props = $props();
   let selectedValue = $derived(
-    Object.values(FontFamily).find((f) => f === value) ?? $settings.fontFamily
+    Object.values(Settings.fontFamilies).find((f) => f === value) ?? $settings.fontFamily
   );
 
   // We want to refocus the trigger button when the user selects
@@ -32,7 +34,7 @@
     });
   }
 
-  const onSelect = (currentValue: keyof typeof FontFamily) => {
+  const onSelect = (currentValue: SettingsType['fontFamily']) => {
     value = currentValue;
     closeAndFocusTrigger();
   };
@@ -56,7 +58,7 @@
           role="combobox"
           aria-expanded={open}
         >
-          {selectedValue == FontFamily.SUSE ? `${selectedValue} (Default)` : selectedValue}
+          {selectedValue == 'SUSE' ? `${selectedValue} (Default)` : selectedValue}
           <ChevronsUpDownIcon class="ml-2 shrink-0 opacity-50" />
         </Button>
       </div>
@@ -67,15 +69,15 @@
       <Command.Input placeholder="Search font family" />
       <Command.Empty>No font family found.</Command.Empty>
       <Command.Group class="max-h-56 overflow-y-auto">
-        {#each Object.values(FontFamily) as fontFamily}
+        {#each Object.values(Settings.fontFamilies) as fontFamily}
           <Command.Item
             value={fontFamily}
             onSelect={() => {
-              onSelect(fontFamily as keyof typeof FontFamily);
+              onSelect(fontFamily as SettingsType['fontFamily']);
             }}
           >
             <CheckIcon class={cn('mr-2', value !== fontFamily && 'text-transparent')} />
-            {fontFamily == FontFamily.SUSE ? `${fontFamily} (Default)` : fontFamily}
+            {fontFamily == 'SUSE' ? `${fontFamily} (Default)` : fontFamily}
           </Command.Item>
         {/each}
       </Command.Group>