From 3d720fedf63118850fb3b4ef5a998aa9dc59fc35 Mon Sep 17 00:00:00 2001
From: Sam Grayson <samuel.c.grayson17@gmail.com>
Date: Thu, 15 Jan 2026 20:38:31 -0500
Subject: [PATCH 1/2] Notepad component, remove unused variables, tailwind vs
 classes

---
 renderer/public/data/cmn-Hant/app_i18n.json |   7 +
 renderer/public/data/de/app_i18n.json       |   7 +
 renderer/public/data/en/app_i18n.json       |   7 +
 renderer/public/data/es/app_i18n.json       |   7 +
 renderer/public/data/ja/app_i18n.json       |   7 +
 renderer/public/data/ko/app_i18n.json       |   7 +
 renderer/public/data/pt/app_i18n.json       |   7 +
 renderer/public/data/ru/app_i18n.json       |   7 +
 renderer/src/web/notepad/WidgetNotepad.vue  | 152 ++++++++++++++++++++
 renderer/src/web/overlay/widget-registry.ts |   2 +
 renderer/src/web/overlay/widgets.ts         |   6 +
 11 files changed, 216 insertions(+)
 create mode 100644 renderer/src/web/notepad/WidgetNotepad.vue

diff --git a/renderer/public/data/cmn-Hant/app_i18n.json b/renderer/public/data/cmn-Hant/app_i18n.json
index a7320105..f7d57656 100644
--- a/renderer/public/data/cmn-Hant/app_i18n.json
+++ b/renderer/public/data/cmn-Hant/app_i18n.json
@@ -256,6 +256,13 @@
     "search_text": "搜尋文字或正則表達式",
     "friendly_name": "友好名稱"
   },
+  "notepad": {
+    "name": "記事本",
+    "placeholder": "在這裡輸入您的筆記...",
+    "size": "大小",
+    "decrease_size": "減小大小",
+    "increase_size": "增加大小"
+  },
   "image_strip": {
     "name": "圖像條"
   },
diff --git a/renderer/public/data/de/app_i18n.json b/renderer/public/data/de/app_i18n.json
index 58259ab9..90a2f401 100644
--- a/renderer/public/data/de/app_i18n.json
+++ b/renderer/public/data/de/app_i18n.json
@@ -251,6 +251,13 @@
     "search_text": "Text oder Regex suchen",
     "friendly_name": "Anzeigename"
   },
+  "notepad": {
+    "name": "Notizblock",
+    "placeholder": "Geben Sie hier Ihre Notizen ein...",
+    "size": "Größe",
+    "decrease_size": "Größe verringern",
+    "increase_size": "Größe erhöhen"
+  },
   "image_strip": {
     "name": "Bildleiste"
   },
diff --git a/renderer/public/data/en/app_i18n.json b/renderer/public/data/en/app_i18n.json
index 6c217519..b28a8f26 100644
--- a/renderer/public/data/en/app_i18n.json
+++ b/renderer/public/data/en/app_i18n.json
@@ -272,6 +272,13 @@
     "toggle_key": "Start and Pause",
     "reset_key": "Reset"
   },
+  "notepad": {
+    "name": "Notepad",
+    "placeholder": "Type your notes here...",
+    "size": "Size",
+    "decrease_size": "Decrease size",
+    "increase_size": "Increase size"
+  },
   "stash_search": {
     "enable_keys": "Keys",
     "name": "Stash search",
diff --git a/renderer/public/data/es/app_i18n.json b/renderer/public/data/es/app_i18n.json
index 19d45841..9581070f 100644
--- a/renderer/public/data/es/app_i18n.json
+++ b/renderer/public/data/es/app_i18n.json
@@ -251,6 +251,13 @@
     "search_text": "buscar texto o expresión regular",
     "friendly_name": "nombre amigable"
   },
+  "notepad": {
+    "name": "Bloc de notas",
+    "placeholder": "Escribe tus notas aquí...",
+    "size": "Tamaño",
+    "decrease_size": "Reducir tamaño",
+    "increase_size": "Aumentar tamaño"
+  },
   "image_strip": {
     "name": "Franja de imagen"
   },
diff --git a/renderer/public/data/ja/app_i18n.json b/renderer/public/data/ja/app_i18n.json
index e94e192a..546cc41e 100644
--- a/renderer/public/data/ja/app_i18n.json
+++ b/renderer/public/data/ja/app_i18n.json
@@ -253,6 +253,13 @@
     "search_text": "検索文字列もしくは正規表現",
     "friendly_name": "名称"
   },
+  "notepad": {
+    "name": "メモ帳",
+    "placeholder": "ここにメモを入力してください...",
+    "size": "サイズ",
+    "decrease_size": "サイズを小さくする",
+    "increase_size": "サイズを大きくする"
+  },
   "image_strip": {
     "name": "画像貼り付け"
   },
diff --git a/renderer/public/data/ko/app_i18n.json b/renderer/public/data/ko/app_i18n.json
index 34adcd23..364cd3db 100644
--- a/renderer/public/data/ko/app_i18n.json
+++ b/renderer/public/data/ko/app_i18n.json
@@ -246,6 +246,13 @@
     "search_text": "단어 혹은 Regex를 검색하세요",
     "friendly_name": "약칭"
   },
+  "notepad": {
+    "name": "메모장",
+    "placeholder": "여기에 메모를 입력하세요...",
+    "size": "크기",
+    "decrease_size": "크기 줄이기",
+    "increase_size": "크기 늘리기"
+  },
   "image_strip": {
     "name": "이미지"
   },
diff --git a/renderer/public/data/pt/app_i18n.json b/renderer/public/data/pt/app_i18n.json
index 8dd8388c..be5498c7 100644
--- a/renderer/public/data/pt/app_i18n.json
+++ b/renderer/public/data/pt/app_i18n.json
@@ -269,6 +269,13 @@
     "search_text": "buscar texto ou expressão regular",
     "friendly_name": "nome amigável"
   },
+  "notepad": {
+    "name": "Bloco de notas",
+    "placeholder": "Digite suas notas aqui...",
+    "size": "Tamanho",
+    "decrease_size": "Diminuir tamanho",
+    "increase_size": "Aumentar tamanho"
+  },
   "image_strip": {
     "name": "Faixa de imagem"
   },
diff --git a/renderer/public/data/ru/app_i18n.json b/renderer/public/data/ru/app_i18n.json
index 57f622fa..2541802b 100644
--- a/renderer/public/data/ru/app_i18n.json
+++ b/renderer/public/data/ru/app_i18n.json
@@ -268,6 +268,13 @@
     "search_text": "текст или регекс",
     "friendly_name": "нормальное название"
   },
+  "notepad": {
+    "name": "Блокнот",
+    "placeholder": "Введите свои заметки здесь...",
+    "size": "Размер",
+    "decrease_size": "Уменьшить размер",
+    "increase_size": "Увеличить размер"
+  },
   "image_strip": {
     "name": "Лента изображений"
   },
diff --git a/renderer/src/web/notepad/WidgetNotepad.vue b/renderer/src/web/notepad/WidgetNotepad.vue
new file mode 100644
index 00000000..1bc04c63
--- /dev/null
+++ b/renderer/src/web/notepad/WidgetNotepad.vue
@@ -0,0 +1,152 @@
+<template>
+  <widget
+    :config="config"
+    move-handles="corners"
+    v-slot="{ isMoving, isEditing }"
+  >
+    <div class="relative p-2 rounded bg-gray-900 shadow-lg">
+      <div
+        v-if="!isEditing"
+        class="text-gray-100 m-1 leading-4 text-center truncate"
+        :style="{ width: `${currentWidth}px` }"
+      >
+        {{ config.wmTitle || "Untitled" }}
+      </div>
+      <input
+        v-else
+        class="leading-4 rounded text-gray-100 p-1 bg-gray-700 w-full mb-1"
+        :placeholder="t('widget.title')"
+        v-model="config.wmTitle"
+      />
+      <textarea
+        v-model="noteBody"
+        :disabled="isMoving"
+        :placeholder="t('notepad.placeholder')"
+        class="min-h-[150px] resize-none overflow-y-auto overflow-x-hidden box-border whitespace-pre-wrap break-words block p-2 rounded bg-gray-800 text-white font-mono border border-transparent outline-none focus:border-white/30 placeholder:text-gray-500"
+        :style="
+          {
+            width: `${currentWidth}px`,
+            maxHeight: `${maxDimensions.maxHeight}px`,
+            fieldSizing: 'content',
+          } as any
+        "
+      />
+      <div
+        v-if="!isMoving && isEditing"
+        class="absolute bottom-2.5 right-2.5 flex items-center gap-1.5 bg-gray-700 p-1 rounded"
+      >
+        <span class="text-gray-400 text-xs leading-none"
+          >{{ t("notepad.size") }}:</span
+        >
+        <button
+          class="rounded text-gray-400 w-6 h-6 leading-none text-xs border border-transparent cursor-pointer transition-all duration-150 hover:enabled:bg-gray-600 hover:enabled:text-white disabled:text-gray-600 disabled:cursor-not-allowed disabled:opacity-50 bg-gray-900"
+          @click="decreaseSize"
+          :disabled="widgetSize === 'small'"
+          :title="t('notepad.decrease_size')"
+        >
+          <i class="fas fa-minus"></i>
+        </button>
+        <button
+          class="rounded text-gray-400 w-6 h-6 leading-none text-xs border border-transparent cursor-pointer transition-all duration-150 hover:enabled:bg-gray-600 hover:enabled:text-white disabled:text-gray-600 disabled:cursor-not-allowed disabled:opacity-50 bg-gray-900"
+          @click="increaseSize"
+          :disabled="widgetSize === 'large'"
+          :title="t('notepad.increase_size')"
+        >
+          <i class="fas fa-plus"></i>
+        </button>
+      </div>
+    </div>
+  </widget>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, inject, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import Widget from "../overlay/Widget.vue";
+import {
+  WidgetManager,
+  WidgetSpec,
+  NotepadWidget,
+} from "../overlay/interfaces";
+
+const windowWidthPresets = {
+  small: 250,
+  medium: 500,
+  large: 750,
+};
+
+export default defineComponent({
+  widget: {
+    type: "notepad",
+    instances: "multi",
+    trNameKey: "notepad.name",
+  } satisfies WidgetSpec,
+  components: { Widget },
+  props: {
+    config: {
+      type: Object as PropType<NotepadWidget>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const wm = inject<WidgetManager>("wm")!;
+    const { t } = useI18n();
+
+    if (props.config.wmFlags[0] === "uninitialized") {
+      const config = props.config as any;
+      config.anchor = {
+        pos: "tl",
+        x: Math.random() * (5 - 1) + 1,
+        y: Math.random() * (12 - 8) + 16,
+      };
+      config.wmTitle = t("notepad.name");
+      config.notepadBody = "";
+      config.wmFlags = ["invisible-on-blur"];
+      config.notepadSize = "medium";
+      wm.show(config.wmId);
+    }
+
+    const widgetSize = computed({
+      get: () => props.config.notepadSize || "medium",
+      set: (val) => {
+        props.config.notepadSize = val;
+      },
+    });
+
+    const currentWidth = computed(() => windowWidthPresets[widgetSize.value]);
+
+    const decreaseSize = () => {
+      if (widgetSize.value === "medium") widgetSize.value = "small";
+      else if (widgetSize.value === "large") widgetSize.value = "medium";
+    };
+
+    const increaseSize = () => {
+      if (widgetSize.value === "small") widgetSize.value = "medium";
+      else if (widgetSize.value === "medium") widgetSize.value = "large";
+    };
+
+    // Max dimensions: 1/3 of overlay size
+    const maxDimensions = computed(() => ({
+      maxWidth: Math.floor(wm.size.value.width / 3),
+      maxHeight: Math.floor(wm.size.value.height / 3),
+    }));
+
+    const noteBody = computed({
+      get: () => props.config.notepadBody || "",
+      set: (val) => {
+        props.config.notepadBody = val;
+      },
+    });
+
+    return {
+      t,
+      maxDimensions,
+      widgetSize,
+      currentWidth,
+      decreaseSize,
+      increaseSize,
+      noteBody,
+    };
+  },
+});
+</script>
diff --git a/renderer/src/web/overlay/widget-registry.ts b/renderer/src/web/overlay/widget-registry.ts
index 91fd89ba..177be20d 100644
--- a/renderer/src/web/overlay/widget-registry.ts
+++ b/renderer/src/web/overlay/widget-registry.ts
@@ -10,6 +10,7 @@ import WidgetDelveGrid from "./WidgetDelveGrid.vue";
 import WidgetItemSearch from "../item-search/WidgetItemSearch.vue";
 import WidgetSettings from "../settings/SettingsWindow.vue";
 import WidgetXpTracker from "../leveling/WidgetXpTracker.vue";
+import WidgetNotepad from "../notepad/WidgetNotepad.vue";
 
 type WidgetComponent = Component & { widget: WidgetSpec };
 
@@ -33,3 +34,4 @@ registry.widgets.push(PriceCheckWindow as unknown as WidgetComponent);
 registry.widgets.push(WidgetItemCheck as unknown as WidgetComponent);
 registry.widgets.push(WidgetImageStrip as unknown as WidgetComponent);
 registry.widgets.push(WidgetDelveGrid as unknown as WidgetComponent);
+registry.widgets.push(WidgetNotepad as unknown as WidgetComponent);
diff --git a/renderer/src/web/overlay/widgets.ts b/renderer/src/web/overlay/widgets.ts
index 2f19f08d..50750998 100644
--- a/renderer/src/web/overlay/widgets.ts
+++ b/renderer/src/web/overlay/widgets.ts
@@ -77,3 +77,9 @@ export interface ImageStripWidget extends Widget {
     url: string;
   }>;
 }
+
+export interface NotepadWidget extends Widget {
+  anchor: Anchor;
+  notepadBody: string;
+  notepadSize: "small" | "medium" | "large";
+}

From 95c11d835a65bf60b9e503f02a1f8b07c806c0cd Mon Sep 17 00:00:00 2001
From: kvan7 <kvan.valve@gmail.com>
Date: Sun, 18 Jan 2026 11:08:38 -0600
Subject: [PATCH 2/2] Updates before merging - Move large classes to style tag
 - Simplify vue component - Remove llm translations

---
 renderer/public/data/cmn-Hant/app_i18n.json |   7 -
 renderer/public/data/de/app_i18n.json       |   7 -
 renderer/public/data/en/app_i18n.json       |   6 +-
 renderer/public/data/es/app_i18n.json       |   7 -
 renderer/public/data/ja/app_i18n.json       |   7 -
 renderer/public/data/ko/app_i18n.json       |   7 -
 renderer/public/data/pt/app_i18n.json       |   7 -
 renderer/public/data/ru/app_i18n.json       |   7 -
 renderer/src/web/notepad/WidgetNotepad.vue  | 152 ++++++++++----------
 renderer/src/web/overlay/widgets.ts         |   2 +-
 10 files changed, 75 insertions(+), 134 deletions(-)

diff --git a/renderer/public/data/cmn-Hant/app_i18n.json b/renderer/public/data/cmn-Hant/app_i18n.json
index f7d57656..a7320105 100644
--- a/renderer/public/data/cmn-Hant/app_i18n.json
+++ b/renderer/public/data/cmn-Hant/app_i18n.json
@@ -256,13 +256,6 @@
     "search_text": "搜尋文字或正則表達式",
     "friendly_name": "友好名稱"
   },
-  "notepad": {
-    "name": "記事本",
-    "placeholder": "在這裡輸入您的筆記...",
-    "size": "大小",
-    "decrease_size": "減小大小",
-    "increase_size": "增加大小"
-  },
   "image_strip": {
     "name": "圖像條"
   },
diff --git a/renderer/public/data/de/app_i18n.json b/renderer/public/data/de/app_i18n.json
index 90a2f401..58259ab9 100644
--- a/renderer/public/data/de/app_i18n.json
+++ b/renderer/public/data/de/app_i18n.json
@@ -251,13 +251,6 @@
     "search_text": "Text oder Regex suchen",
     "friendly_name": "Anzeigename"
   },
-  "notepad": {
-    "name": "Notizblock",
-    "placeholder": "Geben Sie hier Ihre Notizen ein...",
-    "size": "Größe",
-    "decrease_size": "Größe verringern",
-    "increase_size": "Größe erhöhen"
-  },
   "image_strip": {
     "name": "Bildleiste"
   },
diff --git a/renderer/public/data/en/app_i18n.json b/renderer/public/data/en/app_i18n.json
index b28a8f26..7db192b7 100644
--- a/renderer/public/data/en/app_i18n.json
+++ b/renderer/public/data/en/app_i18n.json
@@ -274,10 +274,8 @@
   },
   "notepad": {
     "name": "Notepad",
-    "placeholder": "Type your notes here...",
-    "size": "Size",
-    "decrease_size": "Decrease size",
-    "increase_size": "Increase size"
+    "placeholder": "Type your notes here\u2026",
+    "width": "Width:"
   },
   "stash_search": {
     "enable_keys": "Keys",
diff --git a/renderer/public/data/es/app_i18n.json b/renderer/public/data/es/app_i18n.json
index 9581070f..19d45841 100644
--- a/renderer/public/data/es/app_i18n.json
+++ b/renderer/public/data/es/app_i18n.json
@@ -251,13 +251,6 @@
     "search_text": "buscar texto o expresión regular",
     "friendly_name": "nombre amigable"
   },
-  "notepad": {
-    "name": "Bloc de notas",
-    "placeholder": "Escribe tus notas aquí...",
-    "size": "Tamaño",
-    "decrease_size": "Reducir tamaño",
-    "increase_size": "Aumentar tamaño"
-  },
   "image_strip": {
     "name": "Franja de imagen"
   },
diff --git a/renderer/public/data/ja/app_i18n.json b/renderer/public/data/ja/app_i18n.json
index 546cc41e..e94e192a 100644
--- a/renderer/public/data/ja/app_i18n.json
+++ b/renderer/public/data/ja/app_i18n.json
@@ -253,13 +253,6 @@
     "search_text": "検索文字列もしくは正規表現",
     "friendly_name": "名称"
   },
-  "notepad": {
-    "name": "メモ帳",
-    "placeholder": "ここにメモを入力してください...",
-    "size": "サイズ",
-    "decrease_size": "サイズを小さくする",
-    "increase_size": "サイズを大きくする"
-  },
   "image_strip": {
     "name": "画像貼り付け"
   },
diff --git a/renderer/public/data/ko/app_i18n.json b/renderer/public/data/ko/app_i18n.json
index 364cd3db..34adcd23 100644
--- a/renderer/public/data/ko/app_i18n.json
+++ b/renderer/public/data/ko/app_i18n.json
@@ -246,13 +246,6 @@
     "search_text": "단어 혹은 Regex를 검색하세요",
     "friendly_name": "약칭"
   },
-  "notepad": {
-    "name": "메모장",
-    "placeholder": "여기에 메모를 입력하세요...",
-    "size": "크기",
-    "decrease_size": "크기 줄이기",
-    "increase_size": "크기 늘리기"
-  },
   "image_strip": {
     "name": "이미지"
   },
diff --git a/renderer/public/data/pt/app_i18n.json b/renderer/public/data/pt/app_i18n.json
index be5498c7..8dd8388c 100644
--- a/renderer/public/data/pt/app_i18n.json
+++ b/renderer/public/data/pt/app_i18n.json
@@ -269,13 +269,6 @@
     "search_text": "buscar texto ou expressão regular",
     "friendly_name": "nome amigável"
   },
-  "notepad": {
-    "name": "Bloco de notas",
-    "placeholder": "Digite suas notas aqui...",
-    "size": "Tamanho",
-    "decrease_size": "Diminuir tamanho",
-    "increase_size": "Aumentar tamanho"
-  },
   "image_strip": {
     "name": "Faixa de imagem"
   },
diff --git a/renderer/public/data/ru/app_i18n.json b/renderer/public/data/ru/app_i18n.json
index 2541802b..57f622fa 100644
--- a/renderer/public/data/ru/app_i18n.json
+++ b/renderer/public/data/ru/app_i18n.json
@@ -268,13 +268,6 @@
     "search_text": "текст или регекс",
     "friendly_name": "нормальное название"
   },
-  "notepad": {
-    "name": "Блокнот",
-    "placeholder": "Введите свои заметки здесь...",
-    "size": "Размер",
-    "decrease_size": "Уменьшить размер",
-    "increase_size": "Увеличить размер"
-  },
   "image_strip": {
     "name": "Лента изображений"
   },
diff --git a/renderer/src/web/notepad/WidgetNotepad.vue b/renderer/src/web/notepad/WidgetNotepad.vue
index 1bc04c63..d6df0c20 100644
--- a/renderer/src/web/notepad/WidgetNotepad.vue
+++ b/renderer/src/web/notepad/WidgetNotepad.vue
@@ -4,53 +4,44 @@
     move-handles="corners"
     v-slot="{ isMoving, isEditing }"
   >
-    <div class="relative p-2 rounded bg-gray-900 shadow-lg">
-      <div
-        v-if="!isEditing"
-        class="text-gray-100 m-1 leading-4 text-center truncate"
-        :style="{ width: `${currentWidth}px` }"
-      >
+    <div
+      class="relative p-2 rounded bg-gray-900 overflow-y-auto text-gray-100"
+      :class="{
+        'w-64': config.notepadSize <= WidgetWidth.Small,
+        'w-[512px]': config.notepadSize === WidgetWidth.Medium,
+        'w-[768px]': config.notepadSize >= WidgetWidth.Large,
+      }"
+    >
+      <div v-if="!isEditing" class="m-1 text-center truncate">
         {{ config.wmTitle || "Untitled" }}
       </div>
       <input
         v-else
-        class="leading-4 rounded text-gray-100 p-1 bg-gray-700 w-full mb-1"
-        :placeholder="t('widget.title')"
+        class="rounded p-1 bg-gray-700 w-full mb-1"
         v-model="config.wmTitle"
       />
       <textarea
-        v-model="noteBody"
+        v-model="config.notepadBody"
         :disabled="isMoving"
-        :placeholder="t('notepad.placeholder')"
-        class="min-h-[150px] resize-none overflow-y-auto overflow-x-hidden box-border whitespace-pre-wrap break-words block p-2 rounded bg-gray-800 text-white font-mono border border-transparent outline-none focus:border-white/30 placeholder:text-gray-500"
-        :style="
-          {
-            width: `${currentWidth}px`,
-            maxHeight: `${maxDimensions.maxHeight}px`,
-            fieldSizing: 'content',
-          } as any
-        "
+        :placeholder="t(':placeholder')"
+        :class="$style.notepadArea"
       />
       <div
         v-if="!isMoving && isEditing"
-        class="absolute bottom-2.5 right-2.5 flex items-center gap-1.5 bg-gray-700 p-1 rounded"
+        class="absolute bottom-3 right-3 flex items-center gap-1 bg-gray-700 p-1 rounded"
       >
-        <span class="text-gray-400 text-xs leading-none"
-          >{{ t("notepad.size") }}:</span
-        >
+        <span class="text-gray-400 leading-none">{{ t(":width") }}</span>
         <button
-          class="rounded text-gray-400 w-6 h-6 leading-none text-xs border border-transparent cursor-pointer transition-all duration-150 hover:enabled:bg-gray-600 hover:enabled:text-white disabled:text-gray-600 disabled:cursor-not-allowed disabled:opacity-50 bg-gray-900"
-          @click="decreaseSize"
-          :disabled="widgetSize === 'small'"
-          :title="t('notepad.decrease_size')"
+          :class="$style.widthButton"
+          @click="config.notepadSize--"
+          :disabled="config.notepadSize === WidgetWidth.Small"
         >
           <i class="fas fa-minus"></i>
         </button>
         <button
-          class="rounded text-gray-400 w-6 h-6 leading-none text-xs border border-transparent cursor-pointer transition-all duration-150 hover:enabled:bg-gray-600 hover:enabled:text-white disabled:text-gray-600 disabled:cursor-not-allowed disabled:opacity-50 bg-gray-900"
-          @click="increaseSize"
-          :disabled="widgetSize === 'large'"
-          :title="t('notepad.increase_size')"
+          :class="$style.widthButton"
+          @click="config.notepadSize++"
+          :disabled="config.notepadSize === WidgetWidth.Large"
         >
           <i class="fas fa-plus"></i>
         </button>
@@ -60,20 +51,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, inject, computed } from "vue";
-import { useI18n } from "vue-i18n";
-import Widget from "../overlay/Widget.vue";
+import { defineComponent, PropType, inject } from "vue";
+import Widget from "@/web/overlay/Widget.vue";
 import {
   WidgetManager,
   WidgetSpec,
   NotepadWidget,
-} from "../overlay/interfaces";
+} from "@/web/overlay/interfaces";
+import { useI18nNs } from "@/web/i18n";
 
-const windowWidthPresets = {
-  small: 250,
-  medium: 500,
-  large: 750,
-};
+enum WidgetWidth {
+  Small = 0,
+  Medium = 1,
+  Large = 2,
+}
 
 export default defineComponent({
   widget: {
@@ -90,7 +81,6 @@ export default defineComponent({
   },
   setup(props) {
     const wm = inject<WidgetManager>("wm")!;
-    const { t } = useI18n();
 
     if (props.config.wmFlags[0] === "uninitialized") {
       const config = props.config as any;
@@ -99,54 +89,56 @@ export default defineComponent({
         x: Math.random() * (5 - 1) + 1,
         y: Math.random() * (12 - 8) + 16,
       };
-      config.wmTitle = t("notepad.name");
+      config.wmTitle = "Notepad";
       config.notepadBody = "";
       config.wmFlags = ["invisible-on-blur"];
-      config.notepadSize = "medium";
+      config.notepadSize = WidgetWidth.Medium;
       wm.show(config.wmId);
     }
 
-    const widgetSize = computed({
-      get: () => props.config.notepadSize || "medium",
-      set: (val) => {
-        props.config.notepadSize = val;
-      },
-    });
-
-    const currentWidth = computed(() => windowWidthPresets[widgetSize.value]);
-
-    const decreaseSize = () => {
-      if (widgetSize.value === "medium") widgetSize.value = "small";
-      else if (widgetSize.value === "large") widgetSize.value = "medium";
-    };
-
-    const increaseSize = () => {
-      if (widgetSize.value === "small") widgetSize.value = "medium";
-      else if (widgetSize.value === "medium") widgetSize.value = "large";
-    };
-
-    // Max dimensions: 1/3 of overlay size
-    const maxDimensions = computed(() => ({
-      maxWidth: Math.floor(wm.size.value.width / 3),
-      maxHeight: Math.floor(wm.size.value.height / 3),
-    }));
-
-    const noteBody = computed({
-      get: () => props.config.notepadBody || "",
-      set: (val) => {
-        props.config.notepadBody = val;
-      },
-    });
-
+    const { t } = useI18nNs("notepad");
     return {
       t,
-      maxDimensions,
-      widgetSize,
-      currentWidth,
-      decreaseSize,
-      increaseSize,
-      noteBody,
+      WidgetWidth,
     };
   },
 });
 </script>
+
+<style lang="postcss" module>
+.notepadArea {
+  @apply bg-gray-800 text-white;
+  @apply min-h-36 p-2 w-full max-h-[33vh];
+  @apply rounded border border-transparent;
+  @apply block box-border;
+  @apply resize-none whitespace-pre-wrap break-words font-mono;
+  @apply outline-none;
+
+  /* TODO: swap to tw-class on updating tailwind v4 */
+  field-sizing: content;
+
+  &:focus {
+    @apply border-white/30;
+  }
+
+  &:placeholder {
+    @apply text-gray-500;
+  }
+}
+
+.widthButton {
+  @apply bg-gray-900 text-gray-400;
+  @apply w-6 h-6;
+  @apply rounded border border-transparent;
+  @apply transition-all duration-150;
+  @apply cursor-pointer;
+
+  &:hover:enabled {
+    @apply bg-gray-600 text-white;
+  }
+
+  &:disabled {
+    @apply cursor-not-allowed opacity-50 text-gray-600;
+  }
+}
+</style>
diff --git a/renderer/src/web/overlay/widgets.ts b/renderer/src/web/overlay/widgets.ts
index 50750998..c53ab290 100644
--- a/renderer/src/web/overlay/widgets.ts
+++ b/renderer/src/web/overlay/widgets.ts
@@ -81,5 +81,5 @@ export interface ImageStripWidget extends Widget {
 export interface NotepadWidget extends Widget {
   anchor: Anchor;
   notepadBody: string;
-  notepadSize: "small" | "medium" | "large";
+  notepadSize: 0 | 1 | 2;
 }