From 3fa1a777a42bc2184093d9ae54b405cc6773058b Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sun, 30 Aug 2026 11:13:11 +0100
Subject: [PATCH 1/8] Revamped UnicodeSelectorModal and changed how modals
 handle overflow

---
 .gitignore                                    |   3 +-
 src/lib/components/Modal.svelte               |   4 +-
 .../modals/UnicodeSelectorModal.svelte        | 114 ++++++++++++++++--
 3 files changed, 106 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1d13cf2..f19d3ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,4 +10,5 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 coverage
-/screenshots
\ No newline at end of file
+/screenshots
+.wrangler
\ No newline at end of file
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index a841731..fc6a68c 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -66,7 +66,7 @@
 {#if opened}
     <div class="absolute {opened ? '' : 'hidden'}">
         <div
-            class="fixed top-0 left-0 z-40 flex h-screen w-screen flex-col items-center overflow-auto bg-black/65 text-zinc-100"
+            class="fixed top-0 left-0 z-40 flex h-screen w-screen flex-col items-center bg-black/65 text-zinc-100"
             style="font-family: Lexend">
             <div
                 aria-hidden="true"
@@ -85,7 +85,7 @@
                         data-testid="modal-title-{title.toLowerCase()}">{title}</span>
                     <button aria-label="close" class="p-2 hover:bg-black/15 rounded-md" onclick={close}><IconClose /></button>
                 </div>
-                <div class="rounded-b-lg {nopad ? '' : 'p-4'} flex flex-col space-y-1 bg-zinc-800">
+                <div class="overflow-auto max-h-130 rounded-b-lg {nopad ? '' : 'p-4'} flex flex-col space-y-1 bg-zinc-800">
                     {@render children()}
                 </div>
             </div>
diff --git a/src/lib/components/modals/UnicodeSelectorModal.svelte b/src/lib/components/modals/UnicodeSelectorModal.svelte
index 4992b19..c2540b9 100644
--- a/src/lib/components/modals/UnicodeSelectorModal.svelte
+++ b/src/lib/components/modals/UnicodeSelectorModal.svelte
@@ -1,9 +1,84 @@
 <script lang="ts">
     import Modal from "$lib/components/Modal.svelte";
     import { Editor } from "@tiptap/core";
+    import IconRight from "~icons/tabler/chevron-right"
+    import IconDown from "~icons/tabler/chevron-down"
 
     // prettier-ignore
-    const chars = ["¶","×","Ø","Þ","÷","ø","þ","…","™","►","•","♦","≈","❛","∘","∙","✿","⚈","∆","∇","≡","≣","≪","≫","⋘","⋙","‡","₪","۩","۞","⌗","⌘","∅","∏","∑","√","∞","〰","〽","╱","╲","╳","᜵","᜶","ᚋ","ᚌ","ᚍ","ᚎ","ᚏ","⊏","⊐","⊓","⊔","⊕","⊖","⊗","⊘","⊙","⊞","⊟","⊠","⊡","╭","╮","╰","╯","←","↑","→","↓","↔","↕","↖","↗","↘","↙","↩","↪","▶","◀","⤴","⤵","⇐","⇑","⇒","⇓","⇔","⇕","⇦","⇧","⇨","⇩","➡","⬅","⬆","⬇","☚","☛","☜","☝","☞","☟","∎","▁","▂","▃","▄","▅","▆","▇","█","▉","▊","▋","▌","▍","▎","▏","▐","░","▒","▓","▚","▞","■","□","▢","▣","▤","▥","▦","◧","◨","◩","◪","▲","△","▶","▷","◆","◇","◊","○","◌","●","◐","◑","◒","◓","◔","◕","◢","◣","◤","◥","★","☆","⭐","◻","◼","◽","◾","⚪","⚫","✳","✴","❇","፠","።","፧","፨","⁂","⁑","⁎","ᐁ","ᐃ","ᐅ","ᐊ","ᑌ","ᑎ","ᑐ","ᑕ","ᒣ","ᒥ","ᒧ","ᒪ","⬖","⬗","⬘","⬙","⬚","⬛","⬜","⬝","⬞","⬟","⬠","⬡","⬢","⬣","⬤","⬥","⬦","⬧","⬨","─","│","┅","┇","┌","┐","└","┘","├","┤","┬","┴","┼","═","║","╔","╗","╚","╝","╠","╣","╧","╩","╬","⓪","①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩","⑪","⑫","⑬","⑭","⑮","⑯","⑰","⑱","⑲","⑳","⓿","❶","❷","❸","❹","❺","❻","❼","❽","❾","❿","⓫","⓬","⓭","⓮","⓯","⓰","⓱","⓲","⓳","⓴","⓵","⓶","⓷","⓸","⓹","⓺","⓻","⓼","⓽","⓾","☐","☑","☒","⚐","⚑","♠","♣","♥","♦","✔","✖","❤","©","®","‼","⁉","™","Ⓜ","♻","⚠","⚡","☠","☢","☮","☯","☺","☻","☹","♀","♂","♩","♪","♫","♬","⚀","⚁","⚂","⚃","⚄","⚅","☀","☁","☂","☔","☃","☼","☽","☾","❄","⌚","⌛","☎","✂","✉","✎","✏","✒","♿","⚓","✈","✌","☕","♨","☺","♈","♉","♊","♋","♌","♍","♎","♏","♐","♑","♒","♓"];
+    // const chars = ["¶","×","Ø","Þ","÷","ø","þ","…","™","►","•","♦","≈","❛","∘","∙","✿","⚈","∆","∇","≡","≣","≪","≫","⋘","⋙","‡","₪","۩","۞","⌗","⌘","∅","∏","∑","√","∞","〰","〽","╱","╲","╳","᜵","᜶","ᚋ","ᚌ","ᚍ","ᚎ","ᚏ","⊏","⊐","⊓","⊔","⊕","⊖","⊗","⊘","⊙","⊞","⊟","⊠","⊡","╭","╮","╰","╯","←","↑","→","↓","↔","↕","↖","↗","↘","↙","↩","↪","▶","◀","⤴","⤵","⇐","⇑","⇒","⇓","⇔","⇕","⇦","⇧","⇨","⇩","➡","⬅","⬆","⬇","☚","☛","☜","☝","☞","☟","∎","▁","▂","▃","▄","▅","▆","▇","█","▉","▊","▋","▌","▍","▎","▏","▐","░","▒","▓","▚","▞","■","□","▢","▣","▤","▥","▦","◧","◨","◩","◪","▲","△","▶","▷","◆","◇","◊","○","◌","●","◐","◑","◒","◓","◔","◕","◢","◣","◤","◥","★","☆","⭐","◻","◼","◽","◾","⚪","⚫","✳","✴","❇","፠","።","፧","፨","⁂","⁑","⁎","ᐁ","ᐃ","ᐅ","ᐊ","ᑌ","ᑎ","ᑐ","ᑕ","ᒣ","ᒥ","ᒧ","ᒪ","⬖","⬗","⬘","⬙","⬚","⬛","⬜","⬝","⬞","⬟","⬠","⬡","⬢","⬣","⬤","⬥","⬦","⬧","⬨","─","│","┅","┇","┌","┐","└","┘","├","┤","┬","┴","┼","═","║","╔","╗","╚","╝","╠","╣","╧","╩","╬","⓪","①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩","⑪","⑫","⑬","⑭","⑮","⑯","⑰","⑱","⑲","⑳","⓿","❶","❷","❸","❹","❺","❻","❼","❽","❾","❿","⓫","⓬","⓭","⓮","⓯","⓰","⓱","⓲","⓳","⓴","⓵","⓶","⓷","⓸","⓹","⓺","⓻","⓼","⓽","⓾","☐","☑","☒","⚐","⚑","♠","♣","♥","♦","✔","✖","❤","©","®","‼","⁉","™","Ⓜ","♻","⚠","⚡","☠","☢","☮","☯","☺","☻","☹","♀","♂","♩","♪","♫","♬","⚀","⚁","⚂","⚃","⚄","⚅","☀","☁","☂","☔","☃","☼","☽","☾","❄","⌚","⌛","☎","✂","✉","✎","✏","✒","♿","⚓","✈","✌","☕","♨","☺","♈","♉","♊","♋","♌","♍","♎","♏","♐","♑","♒","♓"];
+
+    let sections = $state([
+        {
+            name: "Useful Characters",
+            open: false ,
+            chars: ["✔","❌","✘","™","®","©","℗","�"]
+        },
+        {
+            name: "Utility Symbols",
+            open: false,
+            chars: ["ℹ","⚠","✎","⏻","⚑","⚐","⌚","✉","⚥","♀","♂","⌂","⌛","⏳","◎","⌀"],
+        },
+        {
+            name: "Button Symbols",
+            open: false,
+            chars: ["☐","☑","☒","⏏","⏩","⏪","⏭","⏮","⏯","⏴","⏵","⏶","⏷","⏸","⏹","⏺","●","⏼","⌘"],
+        },
+        {
+            name: "Arrow Symbols",
+            open: false,
+            chars: ["←","↑","→","↓","↔","⇄","⇵","▲","△","▶","▷","▼","▽","◀","◁","⏴","⏵","⏶","⏷","«","»","☜","☞"],
+        },
+        {
+            name: "Fun Symbols",
+            open: false,
+            chars: ["☹","☺","☻","☠","☽","⛨","⚡","⚓","⚔","⛄","☃","❄","🌊","☂","☔","☁","🌧","⛈","☄","🔥","☀","🧪","⚗","✂","🎣","🗡","🏹","⛏","🪓","🔱","🛡",],
+        },
+        {
+            name: "Other Symbols",
+            open: false,
+            chars: ["♪","♫","♬","♩","♭","♮","♯","⚀","⚁","⚂","⚃","⚄","⚅","☮","⓪","☈"],
+        },
+        {
+            name: "Shapes",
+            open: false,
+            chars: ["●","◘","◦","■","□","◆","◇","○","⭘","♠","♤","♡","♥","♢","♦","♧","♣","★","☆","⯪","⯫","⭐","❤","❣","⧈","◎"],
+        },
+        {
+            name: "Math and Logic",
+            open: false,
+            chars: ["⅟","½","⅓","¼","ⁿ","√","∛","∜","∀","∃","∄","∈","∉","∋","∌","⊂","⊄","⊆","⊃","⊅","⊇","∅","⋃","∑","∂","∫","⌠","⌡","∮","∞","≈","≠","≡","≢","≥","≤","±","∓","−","＋","÷","∧","∨","⊻","⊼","⊽","⊢","⊨","⊤","⊥","∥","≔","∁","∴","∵","·","⇏","⇒","⇔"],
+        },
+        {
+            name: "Subscript and Superscript",
+            open: false,
+            chars: ["₀","₁","₂","₃","₄","₅","₆","₇","₈","₉","₊","₋","₌","₍","₎","⁰","¹","²","³","⁴","⁵","⁶","⁷","⁸","⁹","⁺","⁻","⁼","⁽","⁾"]
+        },
+        {
+            name: "Blocky Letters",
+            open: false,
+            chars: ["Ⓐ","Ⓑ","Ⓒ","Ⓓ","Ⓔ","Ⓕ","Ⓖ","Ⓗ","Ⓘ","Ⓙ","Ⓚ","Ⓛ","Ⓜ","Ⓝ","Ⓞ","Ⓟ","Ⓠ","Ⓡ","Ⓢ","Ⓣ","Ⓤ","Ⓥ","Ⓦ","Ⓧ","Ⓨ","Ⓩ","ⓐ","ⓑ","ⓒ","ⓓ","ⓔ","ⓕ","ⓖ","ⓗ","ⓘ","ⓙ","ⓚ","ⓛ","ⓜ","ⓝ","ⓞ","ⓟ","ⓠ","ⓡ","ⓢ","ⓣ","ⓤ","ⓥ","ⓦ","ⓧ","ⓨ","ⓩ","①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩","⑪","⑫","⑬","⑭","⑮","⑯","⑰","⑱","⑲","⑳"],
+        },
+        {
+            name: "Writing",
+            open: false,
+            chars: ["¶","⁋",,"Є","〒","⏽","«","»","‹","›","※","‼","‽","⁈","⁉","⁎","⁑","⁂","⁒","⸘","⸮"],
+        },
+        {
+            name: "Cultural",
+            open: false,
+            chars: ["☯","☲","☵","☰","☱","☳","☴","☶","☷"],
+        },
+        {
+            name: "Gothic Alphabet",
+            open: false,
+            chars: ["𐌰","𐌱","𐌲","𐌳","𐌴","𐌵","𐌶","𐌷","𐌸","𐌹","𐌺","𐌻","𐌼","𐌽","𐌾","𐌿","𐍀","𐍁","𐍂","𐍃","𐍄","𐍅","𐍆","𐍇","𐍈","𐍉","𐍊"],
+        },
+        {
+            name: "Runes",
+            open: false,
+            chars: ["ᚠ","ᚡ","ᚢ","ᚣ","ᚤ","ᚥ","ᚦ","ᚧ","ᚨ","ᚩ","ᚪ","ᚫ","ᚬ","ᚭ","ᚮ","ᚯ","ᚰ","ᚱ","ᚲ","ᚳ","ᚴ","ᚵ","ᚶ","ᚷ","ᚸ","ᚹ","ᚺ","ᚻ","ᚼ","ᚽ","ᚾ","ᚿ","ᛀ","ᛁ","ᛂ","ᛃ","ᛄ","ᛅ","ᛆ","ᛇ","ᛈ","ᛉ","ᛊ","ᛋ","ᛌ","ᛍ","ᛎ","ᛏ","ᛐ","ᛑ","ᛒ","ᛓ","ᛔ","ᛕ","ᛖ","ᛗ","ᛘ","ᛙ","ᛚ","ᛛ","ᛜ","ᛝ","ᛞ","ᛟ","ᛠ","ᛡ","ᛢ","ᛣ","ᛤ","ᛥ","ᛦ","ᛧ","ᛨ","ᛩ","ᛪ","᛫","᛬","᛭","ᛮ","ᛯ","ᛰ","ᛱ","ᛲ","ᛳ","ᛴ","ᛵ","ᛶ","ᛷ","ᛸ"]
+        }
+    ])
 
     let {
         unicodeSelectorDialog = $bindable(),
@@ -14,20 +89,35 @@
     } = $props();
 </script>
 
-<Modal title="Select Custom Unicode Character" bind:this={unicodeSelectorDialog} key="U" flexible>
-    <div class="flex w-full flex-col space-y-2">
-        <p>Click to insert a custom character:</p>
+<Modal title="Insert Special Character" bind:this={unicodeSelectorDialog} key="U" flexible>
+    <div class="flex flex-col">
+        <p class="text-sm mb-2 text-zinc-400 max-w-239">In Minecraft, thse special Unicode characters display in the pixely Minecraft font, and can be used to spice up text without needing a custom font.</p>
         <!-- big screens -->
-        <div class="hidden grid-flow-col-dense grid-rows-12 gap-1 xl:grid">
-            {#each chars as char}
-                <button
-                    class="font-minecraft aspct-square h-9 w-9 rounded-md bg-zinc-900 p-2"
-                    onclick={() => editor.chain().focus().insertContent(char).run()}>{char}</button>
+        <div class="w-239 h-0"></div>
+        <div class="space-y-2">
+            {#each sections as sect}
+            <div class="flex flex-col space-y-1">
+                <button class="flex items-center space-x-2 w-fit" onclick={() => sect.open = !sect.open}>
+                    {#if sect.open}<IconDown />{:else}<IconRight />{/if}
+                    <span class="font-bold">{sect.name}</span>
+                </button>
+                {#if sect.open}
+                <div class="hidden grid-flow-dense grid-cols-24 gap-1 xl:grid w-fit">
+                    {#each sect.chars as char}
+                        <button
+                            class="grid place-items-center m-auto font-minecraft aspect-square h-9 w-9 rounded-md bg-zinc-900 text-xl hover:text-white text-zinc-300"
+                            onclick={() => editor.chain().focus().insertContent(char!).run()}>
+                            <span class="translate-x-px">{char}</span>
+                        </button>
+                    {/each}
+                </div>
+                {/if}
+            </div>
             {/each}
         </div>
 
         <!-- mid screens -->
-        <div
+        <!-- <div
             class="hidden grid-flow-row-dense gap-1 md:grid xl:hidden"
             style="grid-template-columns: repeat(17, minmax(0, 1fr));">
             {#each chars as char}
@@ -38,12 +128,12 @@
         </div>
 
         <!-- smol screens -->
-        <div class="grid grid-flow-row-dense grid-cols-11 gap-1 md:hidden">
+        <!-- <div class="grid grid-flow-row-dense grid-cols-11 gap-1 md:hidden">
             {#each chars as char}
                 <button
                     class="font-minecraft aspct-square h-9 w-9 rounded-md bg-zinc-900 p-2"
                     onclick={() => editor.chain().focus().insertContent(char).run()}>{char}</button>
             {/each}
-        </div>
+        </div> --> 
     </div>
 </Modal>

From 46e4a767232f31497a34c02a964951159d777430 Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sun, 30 Aug 2026 11:26:04 +0100
Subject: [PATCH 2/8] add expand/collapse all buttons to the unicode selector
 modal

---
 src/lib/components/modals/UnicodeSelectorModal.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/components/modals/UnicodeSelectorModal.svelte b/src/lib/components/modals/UnicodeSelectorModal.svelte
index c2540b9..254a4c1 100644
--- a/src/lib/components/modals/UnicodeSelectorModal.svelte
+++ b/src/lib/components/modals/UnicodeSelectorModal.svelte
@@ -95,6 +95,10 @@
         <!-- big screens -->
         <div class="w-239 h-0"></div>
         <div class="space-y-2">
+            <div class="flex items-center space-x-2">
+                <button class="w-fit rounded-md bg-zinc-900 p-1.5 hover:bg-black/50 text-sm" onclick={() => sections.forEach(s => s.open = true)}>Expand All</button>
+                <button class="w-fit rounded-md bg-zinc-900 p-1.5 hover:bg-black/50 text-sm" onclick={() => sections.forEach(s => s.open = false)}>Collapse All</button>
+            </div>
             {#each sections as sect}
             <div class="flex flex-col space-y-1">
                 <button class="flex items-center space-x-2 w-fit" onclick={() => sect.open = !sect.open}>

From bf5e1b4d42670bf349098e073a158118d5ea32ea Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sun, 30 Aug 2026 11:36:06 +0100
Subject: [PATCH 3/8] credit + mobile responsivity

---
 src/lib/components/modals/UnicodeSelectorModal.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/modals/UnicodeSelectorModal.svelte b/src/lib/components/modals/UnicodeSelectorModal.svelte
index 254a4c1..252f1eb 100644
--- a/src/lib/components/modals/UnicodeSelectorModal.svelte
+++ b/src/lib/components/modals/UnicodeSelectorModal.svelte
@@ -91,7 +91,7 @@
 
 <Modal title="Insert Special Character" bind:this={unicodeSelectorDialog} key="U" flexible>
     <div class="flex flex-col">
-        <p class="text-sm mb-2 text-zinc-400 max-w-239">In Minecraft, thse special Unicode characters display in the pixely Minecraft font, and can be used to spice up text without needing a custom font.</p>
+        <p class="text-sm mb-2 text-zinc-400 max-w-239">In Minecraft, these special Unicode characters display in the pixely Minecraft font, and can be used to spice up text without needing a custom font. Source: <a class="underline hover:text-zinc-300" href="https://gist.github.com/tarkodev/ec3604b007e543d2f9e596f4e1d63d9c" target="_blank">tarkodev on GitHub</a>.</p>
         <!-- big screens -->
         <div class="w-239 h-0"></div>
         <div class="space-y-2">
@@ -106,7 +106,7 @@
                     <span class="font-bold">{sect.name}</span>
                 </button>
                 {#if sect.open}
-                <div class="hidden grid-flow-dense grid-cols-24 gap-1 xl:grid w-fit">
+                <div class="grid grid-flow-dense grid-cols-8 md:grid-cols-17 xl:grid-cols-24 gap-1 w-fit">
                     {#each sect.chars as char}
                         <button
                             class="grid place-items-center m-auto font-minecraft aspect-square h-9 w-9 rounded-md bg-zinc-900 text-xl hover:text-white text-zinc-300"

From 735317965a30d3e0bfd8dd0dd71a20dfb1a33b65 Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sun, 30 Aug 2026 11:38:12 +0100
Subject: [PATCH 4/8] improve mobile responsivity

---
 src/lib/components/modals/UnicodeSelectorModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/modals/UnicodeSelectorModal.svelte b/src/lib/components/modals/UnicodeSelectorModal.svelte
index 252f1eb..46e3cd7 100644
--- a/src/lib/components/modals/UnicodeSelectorModal.svelte
+++ b/src/lib/components/modals/UnicodeSelectorModal.svelte
@@ -106,7 +106,7 @@
                     <span class="font-bold">{sect.name}</span>
                 </button>
                 {#if sect.open}
-                <div class="grid grid-flow-dense grid-cols-8 md:grid-cols-17 xl:grid-cols-24 gap-1 w-fit">
+                <div class="grid grid-flow-dense grid-cols-8 sm:grid-cols-12 md:grid-cols-17 lg:grid-cols-20 xl:grid-cols-24 gap-1 w-fit">
                     {#each sect.chars as char}
                         <button
                             class="grid place-items-center m-auto font-minecraft aspect-square h-9 w-9 rounded-md bg-zinc-900 text-xl hover:text-white text-zinc-300"

From 45c74ee6a3b9fa5184c4e681799376ceb6776b7e Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sun, 30 Aug 2026 11:47:37 +0100
Subject: [PATCH 5/8] add toggle for showing bold text

---
 src/app.css                                           | 1 +
 src/lib/components/modals/UnicodeSelectorModal.svelte | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 8a5ff9e..a83bccc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -19,6 +19,7 @@
 @theme {
     --font-lexend: Lexend, sans-serif;
     --font-minecraft: Minecraft, sans-serif;
+    --font-minecraft-bold: MinecraftBold, sans-serif;
 }
 
 button {
diff --git a/src/lib/components/modals/UnicodeSelectorModal.svelte b/src/lib/components/modals/UnicodeSelectorModal.svelte
index 46e3cd7..e34212f 100644
--- a/src/lib/components/modals/UnicodeSelectorModal.svelte
+++ b/src/lib/components/modals/UnicodeSelectorModal.svelte
@@ -3,6 +3,7 @@
     import { Editor } from "@tiptap/core";
     import IconRight from "~icons/tabler/chevron-right"
     import IconDown from "~icons/tabler/chevron-down"
+    import CheckBox from "../CheckBox.svelte";
 
     // prettier-ignore
     // const chars = ["¶","×","Ø","Þ","÷","ø","þ","…","™","►","•","♦","≈","❛","∘","∙","✿","⚈","∆","∇","≡","≣","≪","≫","⋘","⋙","‡","₪","۩","۞","⌗","⌘","∅","∏","∑","√","∞","〰","〽","╱","╲","╳","᜵","᜶","ᚋ","ᚌ","ᚍ","ᚎ","ᚏ","⊏","⊐","⊓","⊔","⊕","⊖","⊗","⊘","⊙","⊞","⊟","⊠","⊡","╭","╮","╰","╯","←","↑","→","↓","↔","↕","↖","↗","↘","↙","↩","↪","▶","◀","⤴","⤵","⇐","⇑","⇒","⇓","⇔","⇕","⇦","⇧","⇨","⇩","➡","⬅","⬆","⬇","☚","☛","☜","☝","☞","☟","∎","▁","▂","▃","▄","▅","▆","▇","█","▉","▊","▋","▌","▍","▎","▏","▐","░","▒","▓","▚","▞","■","□","▢","▣","▤","▥","▦","◧","◨","◩","◪","▲","△","▶","▷","◆","◇","◊","○","◌","●","◐","◑","◒","◓","◔","◕","◢","◣","◤","◥","★","☆","⭐","◻","◼","◽","◾","⚪","⚫","✳","✴","❇","፠","።","፧","፨","⁂","⁑","⁎","ᐁ","ᐃ","ᐅ","ᐊ","ᑌ","ᑎ","ᑐ","ᑕ","ᒣ","ᒥ","ᒧ","ᒪ","⬖","⬗","⬘","⬙","⬚","⬛","⬜","⬝","⬞","⬟","⬠","⬡","⬢","⬣","⬤","⬥","⬦","⬧","⬨","─","│","┅","┇","┌","┐","└","┘","├","┤","┬","┴","┼","═","║","╔","╗","╚","╝","╠","╣","╧","╩","╬","⓪","①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩","⑪","⑫","⑬","⑭","⑮","⑯","⑰","⑱","⑲","⑳","⓿","❶","❷","❸","❹","❺","❻","❼","❽","❾","❿","⓫","⓬","⓭","⓮","⓯","⓰","⓱","⓲","⓳","⓴","⓵","⓶","⓷","⓸","⓹","⓺","⓻","⓼","⓽","⓾","☐","☑","☒","⚐","⚑","♠","♣","♥","♦","✔","✖","❤","©","®","‼","⁉","™","Ⓜ","♻","⚠","⚡","☠","☢","☮","☯","☺","☻","☹","♀","♂","♩","♪","♫","♬","⚀","⚁","⚂","⚃","⚄","⚅","☀","☁","☂","☔","☃","☼","☽","☾","❄","⌚","⌛","☎","✂","✉","✎","✏","✒","♿","⚓","✈","✌","☕","♨","☺","♈","♉","♊","♋","♌","♍","♎","♏","♐","♑","♒","♓"];
@@ -80,6 +81,8 @@
         }
     ])
 
+    let show_bold = $state(false)
+
     let {
         unicodeSelectorDialog = $bindable(),
         editor,
@@ -96,6 +99,10 @@
         <div class="w-239 h-0"></div>
         <div class="space-y-2">
             <div class="flex items-center space-x-2">
+                <div class="mr-3 flex items-center text-sm space-x-2">
+                    <CheckBox bind:value={show_bold} label="bold" />
+                    <label for="bold">Show bold symbols</label>
+                </div>
                 <button class="w-fit rounded-md bg-zinc-900 p-1.5 hover:bg-black/50 text-sm" onclick={() => sections.forEach(s => s.open = true)}>Expand All</button>
                 <button class="w-fit rounded-md bg-zinc-900 p-1.5 hover:bg-black/50 text-sm" onclick={() => sections.forEach(s => s.open = false)}>Collapse All</button>
             </div>
@@ -109,7 +116,7 @@
                 <div class="grid grid-flow-dense grid-cols-8 sm:grid-cols-12 md:grid-cols-17 lg:grid-cols-20 xl:grid-cols-24 gap-1 w-fit">
                     {#each sect.chars as char}
                         <button
-                            class="grid place-items-center m-auto font-minecraft aspect-square h-9 w-9 rounded-md bg-zinc-900 text-xl hover:text-white text-zinc-300"
+                            class="grid place-items-center m-auto {show_bold ? "font-minecraft-bold" : "font-minecraft"} aspect-square h-9 w-9 rounded-md bg-zinc-900 text-xl hover:text-white text-zinc-300"
                             onclick={() => editor.chain().focus().insertContent(char!).run()}>
                             <span class="translate-x-px">{char}</span>
                         </button>

From a82f429411c0d960a79f35e3c443f87c08a60c8d Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Sun, 30 Aug 2026 11:56:13 +0100
Subject: [PATCH 6/8] link style changes

---
 src/app.css                                           | 2 +-
 src/lib/components/modals/UnicodeSelectorModal.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index a83bccc..682f469 100644
--- a/src/app.css
+++ b/src/app.css
@@ -126,7 +126,7 @@ strong {
 }
 
 .link {
-    @apply font-bold underline;
+    @apply font-bold underline hover:brightness-125;
 }
 
 .tippy-box[data-theme~="dph"] {
diff --git a/src/lib/components/modals/UnicodeSelectorModal.svelte b/src/lib/components/modals/UnicodeSelectorModal.svelte
index e34212f..fe764da 100644
--- a/src/lib/components/modals/UnicodeSelectorModal.svelte
+++ b/src/lib/components/modals/UnicodeSelectorModal.svelte
@@ -94,7 +94,7 @@
 
 <Modal title="Insert Special Character" bind:this={unicodeSelectorDialog} key="U" flexible>
     <div class="flex flex-col">
-        <p class="text-sm mb-2 text-zinc-400 max-w-239">In Minecraft, these special Unicode characters display in the pixely Minecraft font, and can be used to spice up text without needing a custom font. Source: <a class="underline hover:text-zinc-300" href="https://gist.github.com/tarkodev/ec3604b007e543d2f9e596f4e1d63d9c" target="_blank">tarkodev on GitHub</a>.</p>
+        <p class="text-sm mb-2 text-zinc-400 max-w-239">In Minecraft, these special Unicode characters display in the pixely Minecraft font, and can be used to spice up text without needing a custom font. Source: <a class="link" href="https://gist.github.com/tarkodev/ec3604b007e543d2f9e596f4e1d63d9c" target="_blank">tarkodev on GitHub</a>.</p>
         <!-- big screens -->
         <div class="w-239 h-0"></div>
         <div class="space-y-2">

From 4d3187acc9eb8cf77985d215b1e82549f2693be8 Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Tue, 1 Sep 2026 01:55:46 +0100
Subject: [PATCH 7/8] remove the invisible character from writing section

---
 src/lib/components/modals/UnicodeSelectorModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/modals/UnicodeSelectorModal.svelte b/src/lib/components/modals/UnicodeSelectorModal.svelte
index fe764da..2d96aa5 100644
--- a/src/lib/components/modals/UnicodeSelectorModal.svelte
+++ b/src/lib/components/modals/UnicodeSelectorModal.svelte
@@ -62,7 +62,7 @@
         {
             name: "Writing",
             open: false,
-            chars: ["¶","⁋",,"Є","〒","⏽","«","»","‹","›","※","‼","‽","⁈","⁉","⁎","⁑","⁂","⁒","⸘","⸮"],
+            chars: ["¶","⁋","Є","〒","⏽","«","»","‹","›","※","‼","‽","⁈","⁉","⁎","⁑","⁂","⁒","⸘","⸮"],
         },
         {
             name: "Cultural",

From 6b4b1c24d3f323efe7fbe85c01c571381ed05d2e Mon Sep 17 00:00:00 2001
From: Silabear <56885288+Silabear@users.noreply.github.com>
Date: Tue, 1 Sep 2026 02:09:58 +0100
Subject: [PATCH 8/8] remove commented out parts

---
 .../modals/UnicodeSelectorModal.svelte        | 23 -------------------
 1 file changed, 23 deletions(-)

diff --git a/src/lib/components/modals/UnicodeSelectorModal.svelte b/src/lib/components/modals/UnicodeSelectorModal.svelte
index 2d96aa5..83d69cf 100644
--- a/src/lib/components/modals/UnicodeSelectorModal.svelte
+++ b/src/lib/components/modals/UnicodeSelectorModal.svelte
@@ -5,9 +5,6 @@
     import IconDown from "~icons/tabler/chevron-down"
     import CheckBox from "../CheckBox.svelte";
 
-    // prettier-ignore
-    // const chars = ["¶","×","Ø","Þ","÷","ø","þ","…","™","►","•","♦","≈","❛","∘","∙","✿","⚈","∆","∇","≡","≣","≪","≫","⋘","⋙","‡","₪","۩","۞","⌗","⌘","∅","∏","∑","√","∞","〰","〽","╱","╲","╳","᜵","᜶","ᚋ","ᚌ","ᚍ","ᚎ","ᚏ","⊏","⊐","⊓","⊔","⊕","⊖","⊗","⊘","⊙","⊞","⊟","⊠","⊡","╭","╮","╰","╯","←","↑","→","↓","↔","↕","↖","↗","↘","↙","↩","↪","▶","◀","⤴","⤵","⇐","⇑","⇒","⇓","⇔","⇕","⇦","⇧","⇨","⇩","➡","⬅","⬆","⬇","☚","☛","☜","☝","☞","☟","∎","▁","▂","▃","▄","▅","▆","▇","█","▉","▊","▋","▌","▍","▎","▏","▐","░","▒","▓","▚","▞","■","□","▢","▣","▤","▥","▦","◧","◨","◩","◪","▲","△","▶","▷","◆","◇","◊","○","◌","●","◐","◑","◒","◓","◔","◕","◢","◣","◤","◥","★","☆","⭐","◻","◼","◽","◾","⚪","⚫","✳","✴","❇","፠","።","፧","፨","⁂","⁑","⁎","ᐁ","ᐃ","ᐅ","ᐊ","ᑌ","ᑎ","ᑐ","ᑕ","ᒣ","ᒥ","ᒧ","ᒪ","⬖","⬗","⬘","⬙","⬚","⬛","⬜","⬝","⬞","⬟","⬠","⬡","⬢","⬣","⬤","⬥","⬦","⬧","⬨","─","│","┅","┇","┌","┐","└","┘","├","┤","┬","┴","┼","═","║","╔","╗","╚","╝","╠","╣","╧","╩","╬","⓪","①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩","⑪","⑫","⑬","⑭","⑮","⑯","⑰","⑱","⑲","⑳","⓿","❶","❷","❸","❹","❺","❻","❼","❽","❾","❿","⓫","⓬","⓭","⓮","⓯","⓰","⓱","⓲","⓳","⓴","⓵","⓶","⓷","⓸","⓹","⓺","⓻","⓼","⓽","⓾","☐","☑","☒","⚐","⚑","♠","♣","♥","♦","✔","✖","❤","©","®","‼","⁉","™","Ⓜ","♻","⚠","⚡","☠","☢","☮","☯","☺","☻","☹","♀","♂","♩","♪","♫","♬","⚀","⚁","⚂","⚃","⚄","⚅","☀","☁","☂","☔","☃","☼","☽","☾","❄","⌚","⌛","☎","✂","✉","✎","✏","✒","♿","⚓","✈","✌","☕","♨","☺","♈","♉","♊","♋","♌","♍","♎","♏","♐","♑","♒","♓"];
-
     let sections = $state([
         {
             name: "Useful Characters",
@@ -126,25 +123,5 @@
             </div>
             {/each}
         </div>
-
-        <!-- mid screens -->
-        <!-- <div
-            class="hidden grid-flow-row-dense gap-1 md:grid xl:hidden"
-            style="grid-template-columns: repeat(17, minmax(0, 1fr));">
-            {#each chars as char}
-                <button
-                    class="font-minecraft aspct-square h-9 w-9 rounded-md bg-zinc-900 p-2"
-                    onclick={() => editor.chain().focus().insertContent(char).run()}>{char}</button>
-            {/each}
-        </div>
-
-        <!-- smol screens -->
-        <!-- <div class="grid grid-flow-row-dense grid-cols-11 gap-1 md:hidden">
-            {#each chars as char}
-                <button
-                    class="font-minecraft aspct-square h-9 w-9 rounded-md bg-zinc-900 p-2"
-                    onclick={() => editor.chain().focus().insertContent(char).run()}>{char}</button>
-            {/each}
-        </div> --> 
     </div>
 </Modal>