From e02c6176f99418682f7a8873371ad964b026fe4c Mon Sep 17 00:00:00 2001
From: Muhammed-Rahif <rahifpalliyalil@gmail.com>
Date: Fri, 3 Jan 2025 20:40:19 +0530
Subject: [PATCH] refactor: code modularity

---
 package.json                                  |   1 -
 pnpm-lock.yaml                                |  12 --
 src/App.svelte                                |  13 +-
 src/app.css                                   |   4 +-
 .../images/{favicon.png => favicon-light.png} | Bin
 src/lib/components/AboutDialog.svelte         |   4 +-
 src/lib/components/EditorTabs.svelte          |   6 +-
 src/lib/components/EditorTitle.svelte         |   3 +-
 src/lib/components/Loading.svelte             |  10 +-
 src/lib/components/StatusBar.svelte           |   6 +-
 src/lib/components/editor/Editor.svelte       |   7 +-
 src/lib/components/editor/FakeCaret.svelte    |  42 +++----
 .../components/font-dialog/FontDialog.svelte  |  10 +-
 .../font-dialog/FontFamilyCombobox.svelte     |  20 +--
 .../font-dialog/FontSizeCombobox.svelte       |  22 ++--
 src/lib/components/menubar/MenuBar.svelte     |   5 +-
 .../components/menubar/SettingsMenu.svelte    | 110 ++++++++---------
 src/lib/components/menubar/ViewMenu.svelte    |   3 +-
 src/lib/components/ui/sonner/sonner.svelte    |   2 -
 src/lib/helpers/menubar/file-options.ts       |   6 +-
 src/lib/helpers/notpad.ts                     |   1 +
 src/lib/helpers/settings.ts                   |  95 +++++++++++---
 src/lib/helpers/type-effect-player.ts         |  14 +--
 src/lib/types/GithubApiType.ts                |   1 +
 src/lib/types/SettingsType.ts                 | 116 +++---------------
 tailwind.config.ts                            |   1 -
 26 files changed, 241 insertions(+), 273 deletions(-)
 rename src/assets/images/{favicon.png => favicon-light.png} (100%)

diff --git a/package.json b/package.json
index 700e0f61..2b31a3fa 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb5d3be8..c88ca12d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,9 +47,6 @@ importers:
       lodash.throttle:
         specifier: ^4.1.1
         version: 4.1.1
-      mode-watcher:
-        specifier: ^0.5.0
-        version: 0.5.0(svelte@5.3.0)
       print-js:
         specifier: ^1.6.0
         version: 1.6.0
@@ -2854,11 +2851,6 @@ packages:
   mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
 
-  mode-watcher@0.5.0:
-    resolution: {integrity: sha512-5E6fh/aXhAVv+U+DbeM0hCmskQE9u7WSmvnCRijJB/MJu7HtB73sjiCaZ9n1M8QHmzLrBFo8XBAUcWXkDm8Z9A==}
-    peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.1
-
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -7089,10 +7081,6 @@ snapshots:
 
   mkdirp-classic@0.5.3: {}
 
-  mode-watcher@0.5.0(svelte@5.3.0):
-    dependencies:
-      svelte: 5.3.0
-
   mri@1.2.0: {}
 
   ms@2.1.3: {}
diff --git a/src/App.svelte b/src/App.svelte
index 99c7935a..77d30cfb 100644
--- a/src/App.svelte
+++ b/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} />
diff --git a/src/app.css b/src/app.css
index 4ed589e7..d59098d8 100644
--- a/src/app.css
+++ b/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 */
diff --git a/src/assets/images/favicon.png b/src/assets/images/favicon-light.png
similarity index 100%
rename from src/assets/images/favicon.png
rename to src/assets/images/favicon-light.png
diff --git a/src/lib/components/AboutDialog.svelte b/src/lib/components/AboutDialog.svelte
index a4070b80..18968405 100644
--- a/src/lib/components/AboutDialog.svelte
+++ b/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 />
diff --git a/src/lib/components/EditorTabs.svelte b/src/lib/components/EditorTabs.svelte
index 8be83cea..b3ab92dd 100644
--- a/src/lib/components/EditorTabs.svelte
+++ b/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)
diff --git a/src/lib/components/EditorTitle.svelte b/src/lib/components/EditorTitle.svelte
index b18c3d20..15bd2780 100644
--- a/src/lib/components/EditorTitle.svelte
+++ b/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!);
diff --git a/src/lib/components/Loading.svelte b/src/lib/components/Loading.svelte
index 5910521d..f3b51478 100644
--- a/src/lib/components/Loading.svelte
+++ b/src/lib/components/Loading.svelte
@@ -1,8 +1,10 @@
 <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
@@ -10,5 +12,9 @@
   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>
diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
index 50209d3a..6e419089 100644
--- a/src/lib/components/StatusBar.svelte
+++ b/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
   };
diff --git a/src/lib/components/editor/Editor.svelte b/src/lib/components/editor/Editor.svelte
index 687d32bd..c3b06f85 100644
--- a/src/lib/components/editor/Editor.svelte
+++ b/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}
diff --git a/src/lib/components/editor/FakeCaret.svelte b/src/lib/components/editor/FakeCaret.svelte
index bde3d02f..f87daf89 100644
--- a/src/lib/components/editor/FakeCaret.svelte
+++ b/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 {
diff --git a/src/lib/components/font-dialog/FontDialog.svelte b/src/lib/components/font-dialog/FontDialog.svelte
index 7bc4e923..8e15b797 100644
--- a/src/lib/components/font-dialog/FontDialog.svelte
+++ b/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>
 
diff --git a/src/lib/components/font-dialog/FontFamilyCombobox.svelte b/src/lib/components/font-dialog/FontFamilyCombobox.svelte
index b6ae78e8..c0de55e7 100644
--- a/src/lib/components/font-dialog/FontFamilyCombobox.svelte
+++ b/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>
diff --git a/src/lib/components/font-dialog/FontSizeCombobox.svelte b/src/lib/components/font-dialog/FontSizeCombobox.svelte
index 94dfa3b5..021b7e79 100644
--- a/src/lib/components/font-dialog/FontSizeCombobox.svelte
+++ b/src/lib/components/font-dialog/FontSizeCombobox.svelte
@@ -7,19 +7,21 @@
   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 { FontSize } 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 FontSize;
+    value: SettingsType['fontSize'];
   }
 
+  const settings = Notpad.stores.settings;
   let triggerRef = $state<HTMLButtonElement>(null!);
   let open = $state(false);
-  let { value: key = $bindable() }: Props = $props();
+  let { value = $bindable() }: Props = $props();
   let selectedValue = $derived(
-    Object.values(FontSize).find((f) => f === FontSize[key]) ?? $settings.fontSize
+    Object.values(Settings.fontSizes).find((f) => f === value) ?? $settings.fontSize
   );
 
   // We want to refocus the trigger button when the user selects
@@ -33,12 +35,12 @@
   }
 
   const onSelect = (currentValue: number | string) => {
-    key = currentValue as keyof typeof FontSize;
+    value = currentValue as SettingsType['fontSize'];
     closeAndFocusTrigger();
   };
 
   onMount(() => () => {
-    key = get(settings).fontSize;
+    value = get(settings).fontSize;
   });
 </script>
 
@@ -56,7 +58,7 @@
           role="combobox"
           aria-expanded={open}
         >
-          {selectedValue == '16' ? `${selectedValue} (Default)` : selectedValue}
+          {selectedValue == 16 ? `${selectedValue} (Default)` : selectedValue}
           <ChevronsUpDownIcon class="ml-2 shrink-0 opacity-50" />
         </Button>
       </div>
@@ -67,10 +69,10 @@
       <Command.Input placeholder="Search font size" />
       <Command.Empty>No font size found.</Command.Empty>
       <Command.Group class="max-h-56 overflow-y-auto">
-        {#each Object.values(FontSize).filter((s) => !isNaN(Number(s))) as fontSize}
+        {#each Object.values(Settings.fontSizes) as fontSize}
           {@const fSize = fontSize.toString()}
           <Command.Item value={fSize} onSelect={() => onSelect(fontSize)}>
-            <CheckIcon class={cn('mr-2', FontSize[key] !== fontSize && 'text-transparent')} />
+            <CheckIcon class={cn('mr-2', value !== fontSize && 'text-transparent')} />
             {fontSize == 16 ? `${fontSize} (Default)` : fontSize}
           </Command.Item>
         {/each}
diff --git a/src/lib/components/menubar/MenuBar.svelte b/src/lib/components/menubar/MenuBar.svelte
index 92626771..3f187c16 100644
--- a/src/lib/components/menubar/MenuBar.svelte
+++ b/src/lib/components/menubar/MenuBar.svelte
@@ -2,7 +2,6 @@
   import * as Menubar from '@/components/ui/menubar';
   import EditorTitle from '@/components/EditorTitle.svelte';
   import DownloadButtonMenu from '@/components/DownloadMenuButton.svelte';
-  import { editors } from '@/store/store';
   import { fade } from 'svelte/transition';
   import { isTauri } from '@/src/lib';
   import FileMenu from './FileMenu.svelte';
@@ -10,9 +9,11 @@
   import SearchMenu from './SearchMenu.svelte';
   import ViewMenu from './ViewMenu.svelte';
   import SettingsMenu from './SettingsMenu.svelte';
+  import { Notpad } from '@/helpers/notpad';
 
-  let innerWidth = $state(window.innerWidth);
+  const editors = Notpad.stores.editors;
 
+  let innerWidth = $state(window.innerWidth);
   let isMD = $derived(innerWidth <= 768);
   let tabsMode = $derived($editors.length > 1);
   let singleEditor = $derived($editors.at(0)!);
diff --git a/src/lib/components/menubar/SettingsMenu.svelte b/src/lib/components/menubar/SettingsMenu.svelte
index 54d57270..f7939105 100644
--- a/src/lib/components/menubar/SettingsMenu.svelte
+++ b/src/lib/components/menubar/SettingsMenu.svelte
@@ -6,14 +6,9 @@
   import GithubOultineIcon from '@/components/icons/GithubOultine.svelte';
   import ALargeSmallIcon from '@/components/icons/ALargeSmall.svelte';
   import { Notpad } from '@/helpers/notpad';
-  import {
-    CaretAnimation,
-    CaretStyle,
-    TypeEffectSound,
-    TypeEffectVibration,
-    TypeEffectVolume
-  } from '@/types/SettingsType';
-  import { settings } from '@/store/store';
+  import { Settings } from '@/helpers/settings';
+
+  const settings = Notpad.stores.settings;
 </script>
 
 <Menubar.Menu>
@@ -24,14 +19,6 @@
       <ALargeSmallIcon class="ml-auto text-muted-foreground" />
     </Menubar.Item>
 
-    <Menubar.Separator />
-    <Menubar.CheckboxItem
-      checked={$settings.caret.enable}
-      onclick={Notpad.settings.toggleCustomCaret}
-    >
-      Custom Caret
-    </Menubar.CheckboxItem>
-
     <Menubar.Separator />
     <Menubar.Sub>
       <Menubar.SubTrigger>Theme</Menubar.SubTrigger>
@@ -49,11 +36,13 @@
         <Menubar.Sub>
           <Menubar.SubTrigger class="gap-2">Sound</Menubar.SubTrigger>
           <Menubar.SubContent>
-            {#each Object.keys(TypeEffectSound) as key}
+            {#each Object.keys(Settings.typeEffect.sounds) as key}
               <Menubar.CheckboxItem
                 checked={$settings.typeEffect.sound == key}
                 onclick={() => {
-                  Notpad.settings.updateTypeEffect({ sound: key as keyof typeof TypeEffectSound });
+                  Notpad.settings.updateTypeEffect({
+                    sound: key as keyof typeof Settings.typeEffect.sounds
+                  });
                 }}
               >
                 {key}
@@ -65,16 +54,17 @@
         <Menubar.Sub>
           <Menubar.SubTrigger class="gap-2">Volume</Menubar.SubTrigger>
           <Menubar.SubContent>
-            {#each Object.keys(TypeEffectVolume) as key}
+            {#each Object.keys(Settings.typeEffect.volumes) as key}
               <Menubar.CheckboxItem
                 checked={$settings.typeEffect.volume == key}
                 onclick={() => {
                   Notpad.settings.updateTypeEffect({
-                    volume: key as keyof typeof TypeEffectVolume
+                    volume: key as keyof typeof Settings.typeEffect.volumes
                   });
                 }}
               >
-                {TypeEffectVolume[key as keyof typeof TypeEffectVolume] * 100}%
+                {Settings.typeEffect.volumes[key as keyof typeof Settings.typeEffect.volumes] *
+                  100}%
               </Menubar.CheckboxItem>
             {/each}
           </Menubar.SubContent>
@@ -84,12 +74,12 @@
           <Menubar.Sub>
             <Menubar.SubTrigger class="gap-2">Vibration</Menubar.SubTrigger>
             <Menubar.SubContent>
-              {#each Object.keys(TypeEffectVibration) as key}
+              {#each Object.keys(Settings.typeEffect.vibrations) as key}
                 <Menubar.CheckboxItem
                   checked={$settings.typeEffect.vibration == key}
                   onclick={() => {
                     Notpad.settings.updateTypeEffect({
-                      vibration: key as keyof typeof TypeEffectVibration
+                      vibration: key as keyof typeof Settings.typeEffect.vibrations
                     });
                   }}
                 >
@@ -102,44 +92,44 @@
       </Menubar.SubContent>
     </Menubar.Sub>
 
-    {#if $settings.caret.enable}
-      <Menubar.Sub>
-        <Menubar.SubTrigger>Caret</Menubar.SubTrigger>
-        <Menubar.SubContent>
-          <Menubar.Sub>
-            <Menubar.SubTrigger class="gap-2">Style</Menubar.SubTrigger>
-            <Menubar.SubContent>
-              {#each Object.keys(CaretStyle) as key}
-                <Menubar.CheckboxItem
-                  checked={$settings.caret.style == key}
-                  onclick={() => {
-                    Notpad.settings.updateCaret({ style: key as keyof typeof CaretStyle });
-                  }}
-                >
-                  {key}
-                </Menubar.CheckboxItem>
-              {/each}
-            </Menubar.SubContent>
-          </Menubar.Sub>
+    <Menubar.Sub>
+      <Menubar.SubTrigger>Caret</Menubar.SubTrigger>
+      <Menubar.SubContent>
+        <Menubar.Sub>
+          <Menubar.SubTrigger class="gap-2">Style</Menubar.SubTrigger>
+          <Menubar.SubContent>
+            {#each Settings.caret.styles as style}
+              <Menubar.CheckboxItem
+                checked={$settings.caret.style == style}
+                onclick={() => {
+                  Notpad.settings.updateCaret({ style });
+                }}
+              >
+                {style}
+              </Menubar.CheckboxItem>
+            {/each}
+          </Menubar.SubContent>
+        </Menubar.Sub>
 
-          <Menubar.Sub>
-            <Menubar.SubTrigger class="gap-2">Animation</Menubar.SubTrigger>
-            <Menubar.SubContent>
-              {#each Object.keys(CaretAnimation) as key}
-                <Menubar.CheckboxItem
-                  checked={$settings.caret.animation == key}
-                  onclick={() => {
-                    Notpad.settings.updateCaret({ animation: key as keyof typeof CaretAnimation });
-                  }}
-                >
-                  {key}
-                </Menubar.CheckboxItem>
-              {/each}
-            </Menubar.SubContent>
-          </Menubar.Sub>
-        </Menubar.SubContent>
-      </Menubar.Sub>
-    {/if}
+        <Menubar.Sub>
+          <Menubar.SubTrigger class="gap-2">Animation</Menubar.SubTrigger>
+          <Menubar.SubContent>
+            {#each Object.keys(Settings.caret.animations) as key}
+              <Menubar.CheckboxItem
+                checked={$settings.caret.animation == key}
+                onclick={() => {
+                  Notpad.settings.updateCaret({
+                    animation: key as keyof typeof Settings.caret.animations
+                  });
+                }}
+              >
+                {key}
+              </Menubar.CheckboxItem>
+            {/each}
+          </Menubar.SubContent>
+        </Menubar.Sub>
+      </Menubar.SubContent>
+    </Menubar.Sub>
 
     <Menubar.Separator />
     <Menubar.Item
diff --git a/src/lib/components/menubar/ViewMenu.svelte b/src/lib/components/menubar/ViewMenu.svelte
index eba11d40..bdd58846 100644
--- a/src/lib/components/menubar/ViewMenu.svelte
+++ b/src/lib/components/menubar/ViewMenu.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import * as Menubar from '@/components/ui/menubar';
   import { Notpad } from '@/helpers/notpad';
-  import { settings } from '@/store/store';
   import screenfull from 'screenfull';
   import { onMount } from 'svelte';
   import StatusBarIcon from '@/components/icons/StatusBar.svelte';
   import ListOrderedIcon from '@/components/icons/ListOrdered.svelte';
   import WrapTextIcon from '@/components/icons/WrapText.svelte';
+
   let isFullScreen = $state(screenfull.isFullscreen);
+  const settings = Notpad.stores.settings;
 
   onMount(() => {
     screenfull.onchange(() => (isFullScreen = screenfull.isFullscreen));
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
index 887bad8d..62288185 100644
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
   import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
-  import { mode } from 'mode-watcher';
 
   let restProps: SonnerProps = $props();
 </script>
 
 <Sonner
-  theme={$mode}
   class="toaster group"
   toastOptions={{
     classes: {
diff --git a/src/lib/helpers/menubar/file-options.ts b/src/lib/helpers/menubar/file-options.ts
index 0734684b..a085c544 100644
--- a/src/lib/helpers/menubar/file-options.ts
+++ b/src/lib/helpers/menubar/file-options.ts
@@ -8,7 +8,6 @@ import { readTextFile, BaseDirectory, exists, writeTextFile } from '@tauri-apps/
 import { toast } from 'svelte-sonner';
 import { Delta } from 'quill/core';
 import print from 'print-js';
-import { mode } from 'mode-watcher';
 
 /**
  * A helper class for handling file operations such as opening, saving, and saving as.
@@ -255,8 +254,9 @@ export class FileOptions {
    */
   print = async (editorId?: string) => {
     const editor = Notpad.editors.getEditor(editorId);
-    const isDarkMode = get(mode) == 'dark';
-    const fontFamily = get(settings).fontFamily;
+    const _settings = get(settings);
+    const isDarkMode = _settings.theme == 'dark';
+    const fontFamily = _settings.fontFamily;
 
     if (!editor) return;
     try {
diff --git a/src/lib/helpers/notpad.ts b/src/lib/helpers/notpad.ts
index ec2a14b2..8cc98e85 100644
--- a/src/lib/helpers/notpad.ts
+++ b/src/lib/helpers/notpad.ts
@@ -18,6 +18,7 @@ export class Notpad {
     this.typeEffectPlayer.init();
     await this.storage.init();
     await this.editors.init();
+    await this.settings.init();
   };
 
   public static fileOptions: FileOptions = new FileOptions();
diff --git a/src/lib/helpers/settings.ts b/src/lib/helpers/settings.ts
index c7a5d01d..9fc3a8c6 100644
--- a/src/lib/helpers/settings.ts
+++ b/src/lib/helpers/settings.ts
@@ -1,31 +1,105 @@
 import { settings } from '@/store/store';
-import { FontFamily, FontSize, type SettingsType } from '@/types/SettingsType';
+import { type SettingsType } from '@/types/SettingsType';
+import clickSound from '@/src/assets/sounds/click.wav';
+import beepSound from '@/src/assets/sounds/beep.wav';
+import damageSound from '@/src/assets/sounds/damage.wav';
+import fistFightSound from '@/src/assets/sounds/fist-fight.wav';
+import hitmarkerSound from '@/src/assets/sounds/hitmarker.wav';
+import missedPunchSound from '@/src/assets/sounds/missed-punch.wav';
+import nkCreamsSound from '@/src/assets/sounds/nk-creams.wav';
+import osuSound from '@/src/assets/sounds/osu.wav';
+import popSound from '@/src/assets/sounds/pop.wav';
+import rubberKeysSound from '@/src/assets/sounds/rubber-keys.wav';
+import squareSound from '@/src/assets/sounds/square.wav';
+import triangleSound from '@/src/assets/sounds/triangle.wav';
+import typewriterSound from '@/src/assets/sounds/typewriter.wav';
+import { Notpad } from '@/helpers/notpad';
 
 export class Settings {
+  init = () => {
+    Notpad.stores.settings.subscribe((settings) => {
+      document.documentElement.setAttribute('data-theme', settings.theme);
+    });
+  };
+
+  static themes = ['light', 'dark', 'sepia', 'classic'] as const;
+  static fontFamilies = [
+    'SUSE',
+    'Baloo 2',
+    'Bricolage Grotesque',
+    'Lora',
+    'Roboto Slab',
+    'Inconsolata',
+    'Parkinsans'
+  ] as const;
+  static fontSizes = [6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72] as const;
+  static zooms = [0.5, 0.75, 0.9, 1, 1.2, 1.5, 1.75, 2] as const;
+  static caret = {
+    animations: {
+      Slow: '600ms',
+      Medium: '300ms',
+      Fast: '100ms',
+      Off: '0ms'
+    },
+    styles: ['Vertical Bar', 'Block', 'Hollow Block', 'Underline'] as const
+  } as const;
+  static typeEffect = {
+    sounds: {
+      Click: clickSound,
+      Beep: beepSound,
+      Damage: damageSound,
+      'Fist Fight': fistFightSound,
+      Hitmarker: hitmarkerSound,
+      'Missed Punch': missedPunchSound,
+      'Nk Creams': nkCreamsSound,
+      Osu: osuSound,
+      Pop: popSound,
+      'Rubber Keys': rubberKeysSound,
+      Square: squareSound,
+      Triangle: triangleSound,
+      Typewriter: typewriterSound,
+      None: null
+    },
+    volumes: {
+      None: 0,
+      OneQuarter: 0.25,
+      Half: 0.5,
+      ThreeQuarter: 0.75,
+      Full: 1
+    },
+    vibrations: {
+      Strong: 1,
+      High: 0.75,
+      Medium: 0.5,
+      Low: 0.25,
+      None: 0
+    }
+  } as const;
+
   static defaultSettings: SettingsType = {
     zoom: 1,
     statusBar: true,
     fontFamily: 'SUSE',
-    fontSize: '16',
+    fontSize: 16,
     lineNumbers: false,
     wrapLines: true,
     caret: {
       animation: 'Medium',
-      style: 'VerticalBar',
-      enable: true
+      style: 'Vertical Bar'
     },
     typeEffect: {
       sound: 'Nk Creams',
       vibration: 'Medium',
       volume: 'Full'
-    }
+    },
+    theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   };
 
-  setFontFamily(fontFamily: keyof typeof FontFamily) {
+  setFontFamily(fontFamily: SettingsType['fontFamily']) {
     settings.update((value) => ({ ...value, fontFamily }));
   }
 
-  setFontSize(fontSize: keyof typeof FontSize) {
+  setFontSize(fontSize: SettingsType['fontSize']) {
     settings.update((value) => ({ ...value, fontSize }));
   }
 
@@ -42,11 +116,4 @@ export class Settings {
       typeEffect: { ...value.typeEffect, ...typeEffect }
     }));
   }
-
-  toggleCustomCaret() {
-    settings.update((value) => ({
-      ...value,
-      caret: { ...value.caret, enable: !value.caret.enable }
-    }));
-  }
 }
diff --git a/src/lib/helpers/type-effect-player.ts b/src/lib/helpers/type-effect-player.ts
index 3c18b71e..3747849b 100644
--- a/src/lib/helpers/type-effect-player.ts
+++ b/src/lib/helpers/type-effect-player.ts
@@ -1,11 +1,7 @@
 import { Notpad } from '@/helpers/notpad';
 import { get } from 'svelte/store';
-import {
-  TypeEffectSound,
-  TypeEffectVibration,
-  TypeEffectVolume,
-  type SettingsType
-} from '@/types/SettingsType';
+import { type SettingsType } from '@/types/SettingsType';
+import { Settings } from '@/helpers/settings';
 
 export class TypeEffectPlayer {
   private audioContext: AudioContext;
@@ -41,7 +37,7 @@ export class TypeEffectPlayer {
       this.settings.vibration = typeEffect.vibration;
       this.settings.sound = typeEffect.sound;
 
-      const audioUrl = TypeEffectSound[typeEffect.sound];
+      const audioUrl = Settings.typeEffect.sounds[typeEffect.sound];
       if (audioUrl) this.audioReady = this.loadAudio(audioUrl);
     });
   }
@@ -95,14 +91,14 @@ export class TypeEffectPlayer {
     const panner = this.audioContext.createStereoPanner();
     panner.pan.value = key ? this.calculatePan(key) : 0;
 
-    const volume = TypeEffectVolume[this.settings.volume];
+    const volume = Settings.typeEffect.volumes[this.settings.volume];
     const gainNode = this.audioContext.createGain();
     gainNode.gain.value = volume;
 
     source.connect(panner).connect(gainNode).connect(this.audioContext.destination);
     source.start(0);
 
-    const vibration = TypeEffectVibration[this.settings.vibration];
+    const vibration = Settings.typeEffect.vibrations[this.settings.vibration];
     if (vibration > 0) this.triggerVibration(vibration);
   }
 
diff --git a/src/lib/types/GithubApiType.ts b/src/lib/types/GithubApiType.ts
index 32d69820..e58a7190 100644
--- a/src/lib/types/GithubApiType.ts
+++ b/src/lib/types/GithubApiType.ts
@@ -4,6 +4,7 @@ export interface ContributorType {
   url: string;
   html_url: string;
   contributions: number;
+  type: 'User' | 'Bot';
 }
 
 export interface ReleasesType {
diff --git a/src/lib/types/SettingsType.ts b/src/lib/types/SettingsType.ts
index 7881e826..08ef4d2b 100644
--- a/src/lib/types/SettingsType.ts
+++ b/src/lib/types/SettingsType.ts
@@ -1,97 +1,6 @@
-import clickSound from '@/src/assets/sounds/click.wav';
-import beepSound from '@/src/assets/sounds/beep.wav';
-import damageSound from '@/src/assets/sounds/damage.wav';
-import fistFightSound from '@/src/assets/sounds/fist-fight.wav';
-import hitmarkerSound from '@/src/assets/sounds/hitmarker.wav';
-import missedPunchSound from '@/src/assets/sounds/missed-punch.wav';
-import nkCreamsSound from '@/src/assets/sounds/nk-creams.wav';
-import osuSound from '@/src/assets/sounds/osu.wav';
-import popSound from '@/src/assets/sounds/pop.wav';
-import rubberKeysSound from '@/src/assets/sounds/rubber-keys.wav';
-import squareSound from '@/src/assets/sounds/square.wav';
-import triangleSound from '@/src/assets/sounds/triangle.wav';
-import typewriterSound from '@/src/assets/sounds/typewriter.wav';
+import { Settings } from '@/helpers/settings';
 
-/**
- * Available font families for the editor.
- */
-export const FontFamily = {
-  SUSE: 'SUSE',
-  Baloo2: 'Baloo 2',
-  BricolageGrotesque: 'Bricolage Grotesque',
-  Lora: 'Lora',
-  RobotoSlab: 'Roboto Slab',
-  Inconsolata: 'Inconsolata',
-  Parkinsans: 'Parkinsans'
-};
-
-export const FontSize = {
-  '6': 6,
-  '7': 7,
-  '8': 8,
-  '9': 9,
-  '10': 10,
-  '11': 11,
-  '12': 12,
-  '14': 14,
-  '16': 16,
-  '18': 18,
-  '20': 20,
-  '22': 22,
-  '24': 24,
-  '26': 26,
-  '28': 28,
-  '36': 36,
-  '48': 48,
-  '72': 72
-};
-
-export const CaretAnimation = {
-  Slow: '600ms',
-  Medium: '300ms',
-  Fast: '100ms',
-  Off: '0ms'
-};
-
-export const CaretStyle = {
-  VerticalBar: '|',
-  Block: '▮',
-  HollowBlock: '▯',
-  Underline: '_'
-};
-
-export const TypeEffectSound = {
-  Click: clickSound,
-  Beep: beepSound,
-  Damage: damageSound,
-  'Fist Fight': fistFightSound,
-  Hitmarker: hitmarkerSound,
-  'Missed Punch': missedPunchSound,
-  'Nk Creams': nkCreamsSound,
-  Osu: osuSound,
-  Pop: popSound,
-  'Rubber Keys': rubberKeysSound,
-  Square: squareSound,
-  Triangle: triangleSound,
-  Typewriter: typewriterSound,
-  None: null
-};
-
-export const TypeEffectVolume = {
-  None: 0,
-  OneQuarter: 0.25,
-  Half: 0.5,
-  ThreeQuarter: 0.75,
-  Full: 1
-};
-
-export const TypeEffectVibration = {
-  Strong: 1,
-  High: 0.75,
-  Medium: 0.5,
-  Low: 0.25,
-  None: 0
-};
+type ElementType<T extends readonly unknown[]> = T extends readonly (infer U)[] ? U : never;
 
 /**
  * Interface representing the settings for the application.
@@ -100,7 +9,7 @@ export interface SettingsType {
   /**
    * The zoom level of the application.
    */
-  zoom: 0.5 | 0.75 | 0.9 | 1 | 1.2 | 1.5 | 1.75 | 2;
+  zoom: ElementType<typeof Settings.zooms>;
   /**
    * Is bottom status bar visible.
    */
@@ -112,11 +21,15 @@ export interface SettingsType {
   /**
    * The font family of the editor.
    */
-  fontFamily: keyof typeof FontFamily;
+  fontFamily: ElementType<typeof Settings.fontFamilies>;
   /**
    * The font size of the editor.
    */
-  fontSize: keyof typeof FontSize;
+  fontSize: ElementType<typeof Settings.fontSizes>;
+  /**
+   *
+   */
+  theme: ElementType<typeof Settings.themes>;
   /**
    * Should wrap long lines.
    */
@@ -125,16 +38,15 @@ export interface SettingsType {
    * Caret's specific configs. Style and Animation. Enable or disable.
    */
   caret: {
-    style: keyof typeof CaretStyle;
-    animation: keyof typeof CaretAnimation;
-    enable: boolean;
+    style: ElementType<typeof Settings.caret.styles>;
+    animation: keyof typeof Settings.caret.animations;
   };
   /**
    * Typing effect configurations.
    */
   typeEffect: {
-    sound: keyof typeof TypeEffectSound;
-    volume: keyof typeof TypeEffectVolume;
-    vibration: keyof typeof TypeEffectVibration;
+    sound: keyof typeof Settings.typeEffect.sounds;
+    volume: keyof typeof Settings.typeEffect.volumes;
+    vibration: keyof typeof Settings.typeEffect.vibrations;
   };
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1df02d80..2c433540 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,7 +4,6 @@ import tailwindScrollbar from 'tailwind-scrollbar';
 import tailwindcssAnimate from 'tailwindcss-animate';
 
 const config: Config = {
-  darkMode: ['class'],
   content: ['./src/**/*.{html,js,svelte,ts}'],
   safelist: ['dark'],
   theme: {