From 3a38a48176cb33cfdaf5707c0bfd517ebaf18840 Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Sun, 20 Oct 2024 14:38:24 -0400
Subject: [PATCH 01/13] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20Upgrade=20to=20Svelt?=
 =?UTF-8?q?e=205?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json   |   8 +-
 pnpm-lock.yaml | 241 ++++++++++++++++++++-----------------------------
 2 files changed, 103 insertions(+), 146 deletions(-)

diff --git a/package.json b/package.json
index f28c5ed..e78052d 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
 		"@sveltejs/adapter-static": "^3.0.5",
 		"@sveltejs/kit": "^2.7.2",
 		"@sveltejs/package": "^2.3.5",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
 		"@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -103,7 +103,7 @@
 		"@types/cookie": "^0.6.0",
 		"@vitejs/plugin-basic-ssl": "^1.1.0",
 		"autoprefixer": "^10.4.20",
-		"cookie": "^0.7.2",
+		"cookie": "^1.0.1",
 		"eslint": "^9.13.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.45.1",
@@ -115,9 +115,9 @@
 		"prettier-plugin-svelte": "^3.2.7",
 		"prettier-plugin-tailwindcss": "^0.6.8",
 		"publint": "^0.2.11",
-		"svelte": "^4.2.19",
+		"svelte": "^5.0.3",
 		"svelte-check": "^4.0.5",
-		"svelte-eslint-parser": "^0.41.1",
+		"svelte-eslint-parser": "^0.42.0",
 		"tailwindcss": "^3.4.14",
 		"tslib": "^2.8.0",
 		"typescript": "^5.6.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fafe702..204e9c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,7 +35,7 @@ importers:
         version: 9.13.0
       '@natoboram/heroicons.svelte':
         specifier: ^1.0.6
-        version: 1.0.6(svelte@4.2.19)(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3)))
+        version: 1.0.6(svelte@5.0.3)(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3)))
       '@playwright/test':
         specifier: ^1.48.1
         version: 1.48.1
@@ -44,22 +44,22 @@ importers:
         version: 3.4.1(prettier@3.3.3)
       '@sveltejs/adapter-auto':
         specifier: ^3.2.5
-        version: 3.2.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))
+        version: 3.2.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))
       '@sveltejs/adapter-node':
         specifier: ^5.2.8
-        version: 5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))
+        version: 5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))
       '@sveltejs/adapter-static':
         specifier: ^3.0.5
-        version: 3.0.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))
+        version: 3.0.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))
       '@sveltejs/kit':
         specifier: ^2.7.2
-        version: 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))
+        version: 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))
       '@sveltejs/package':
         specifier: ^2.3.5
-        version: 2.3.5(svelte@4.2.19)(typescript@5.6.3)
+        version: 2.3.5(svelte@5.0.3)(typescript@5.6.3)
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.2
-        version: 3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))
+        specifier: ^4.0.0
+        version: 4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))
       '@tailwindcss/forms':
         specifier: ^0.5.9
         version: 0.5.9(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3)))
@@ -82,8 +82,8 @@ importers:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
       cookie:
-        specifier: ^0.7.2
-        version: 0.7.2
+        specifier: ^1.0.1
+        version: 1.0.1
       eslint:
         specifier: ^9.13.0
         version: 9.13.0(jiti@1.21.6)
@@ -92,7 +92,7 @@ importers:
         version: 9.1.0(eslint@9.13.0(jiti@1.21.6))
       eslint-plugin-svelte:
         specifier: ^2.45.1
-        version: 2.45.1(eslint@9.13.0(jiti@1.21.6))(svelte@4.2.19)(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3))
+        version: 2.45.1(eslint@9.13.0(jiti@1.21.6))(svelte@5.0.3)(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3))
       globals:
         specifier: ^15.11.0
         version: 15.11.0
@@ -110,22 +110,22 @@ importers:
         version: 3.3.3
       prettier-plugin-svelte:
         specifier: ^3.2.7
-        version: 3.2.7(prettier@3.3.3)(svelte@4.2.19)
+        version: 3.2.7(prettier@3.3.3)(svelte@5.0.3)
       prettier-plugin-tailwindcss:
         specifier: ^0.6.8
-        version: 0.6.8(@trivago/prettier-plugin-sort-imports@4.3.0(prettier@3.3.3))(prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@4.2.19))(prettier@3.3.3)
+        version: 0.6.8(@trivago/prettier-plugin-sort-imports@4.3.0(prettier@3.3.3))(prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.0.3))(prettier@3.3.3)
       publint:
         specifier: ^0.2.11
         version: 0.2.11
       svelte:
-        specifier: ^4.2.19
-        version: 4.2.19
+        specifier: ^5.0.3
+        version: 5.0.3
       svelte-check:
         specifier: ^4.0.5
-        version: 4.0.5(picomatch@4.0.2)(svelte@4.2.19)(typescript@5.6.3)
+        version: 4.0.5(picomatch@4.0.2)(svelte@5.0.3)(typescript@5.6.3)
       svelte-eslint-parser:
-        specifier: ^0.41.1
-        version: 0.41.1(svelte@4.2.19)
+        specifier: ^0.42.0
+        version: 0.42.0(svelte@5.0.3)
       tailwindcss:
         specifier: ^3.4.14
         version: 3.4.14(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3))
@@ -731,19 +731,19 @@ packages:
     peerDependencies:
       svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0':
-    resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0':
+    resolution: {integrity: sha512-hBxSYW/66989cq9dN248omD/ziskSdIV1NqfuueuAI1z6jGcg14k9Zd98pDIEnoA6wC9kWUGuQ6adzBbWwQyRg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^3.0.0
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      '@sveltejs/vite-plugin-svelte': ^4.0.0-next.0||^4.0.0
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
-  '@sveltejs/vite-plugin-svelte@3.1.2':
-    resolution: {integrity: sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte@4.0.0':
+    resolution: {integrity: sha512-kpVJwF+gNiMEsoHaw+FJL76IYiwBikkxYU83+BpqQLdVMff19KeRKLd2wisS8niNBMJ2omv5gG+iGDDwd8jzag==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
   '@tailwindcss/forms@0.5.9':
@@ -926,6 +926,11 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-typescript@1.4.13:
+    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
+    peerDependencies:
+      acorn: '>=8.9.0'
+
   acorn-walk@8.3.4:
     resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
     engines: {node: '>=0.4.0'}
@@ -1163,9 +1168,6 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
-  code-red@1.0.4:
-    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
-
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -1273,9 +1275,9 @@ packages:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
 
-  cookie@0.7.2:
-    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
-    engines: {node: '>= 0.6'}
+  cookie@1.0.1:
+    resolution: {integrity: sha512-Xd8lFX4LM9QEEwxQpF9J9NTUh8pmdJO0cyRJhFiDoLTk2eH8FXlRv2IFGYVadZpqI3j8fhNrSdKCeYPxiAhLXw==}
+    engines: {node: '>=18'}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@@ -1297,10 +1299,6 @@ packages:
   css-select@4.3.0:
     resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
 
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
   css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
@@ -1539,6 +1537,9 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
+  esrap@1.2.2:
+    resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -2059,9 +2060,6 @@ packages:
     resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
     engines: {node: '>=8'}
 
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-
   meow@8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
@@ -2361,9 +2359,6 @@ packages:
   pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -2879,15 +2874,6 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       typescript: '>=5.0.0'
 
-  svelte-eslint-parser@0.41.1:
-    resolution: {integrity: sha512-08ndI6zTghzI8SuJAFpvMbA/haPSGn3xz19pjre19yYMw8Nw/wQJ2PrZBI/L8ijGTgtkWCQQiLLy+Z1tfaCwNA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0-next.191
-    peerDependenciesMeta:
-      svelte:
-        optional: true
-
   svelte-eslint-parser@0.42.0:
     resolution: {integrity: sha512-e7LyqFPTuF43ZYhKOf0Gq1lzP+G64iWVJXAIcwVxohGx5FFyqdUkw7DEXNjZ+Fm+TAA98zPmDqWvgD1OpyMi5A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2897,21 +2883,15 @@ packages:
       svelte:
         optional: true
 
-  svelte-hmr@0.16.0:
-    resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
-    engines: {node: ^12.20 || ^14.13.1 || >= 16}
-    peerDependencies:
-      svelte: ^3.19.0 || ^4.0.0
-
   svelte2tsx@0.7.22:
     resolution: {integrity: sha512-hf55ujq17ufVpDQlJzaQfRr9EjlLIwGmFlpKq4uYrQAQFw/99q1OcVYyBT6568iJySgBUY9PdccURrORmfetmQ==}
     peerDependencies:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@4.2.19:
-    resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==}
-    engines: {node: '>=16'}
+  svelte@5.0.3:
+    resolution: {integrity: sha512-i8DopbAPRP9iaR3qqe++LPv4povQRshSseH3kSrzI4URZ9/7OTt3vCJPBp+5ACRQDik0S/tM1ZRA6EW/sGcKfw==}
+    engines: {node: '>=18'}
 
   tailwindcss@3.4.14:
     resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
@@ -3168,10 +3148,10 @@ packages:
       terser:
         optional: true
 
-  vitefu@0.2.5:
-    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
+  vitefu@1.0.3:
+    resolution: {integrity: sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0
     peerDependenciesMeta:
       vite:
         optional: true
@@ -3328,6 +3308,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -3831,9 +3814,9 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@natoboram/heroicons.svelte@1.0.6(svelte@4.2.19)(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3)))':
+  '@natoboram/heroicons.svelte@1.0.6(svelte@5.0.3)(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3)))':
     dependencies:
-      svelte: 4.2.19
+      svelte: 5.0.3
     optionalDependencies:
       tailwindcss: 3.4.14(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3))
 
@@ -3952,26 +3935,26 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.24.0':
     optional: true
 
-  '@sveltejs/adapter-auto@3.2.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))':
+  '@sveltejs/adapter-auto@3.2.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))':
     dependencies:
-      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))
+      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-node@5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))':
+  '@sveltejs/adapter-node@5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))':
     dependencies:
       '@rollup/plugin-commonjs': 28.0.1(rollup@4.24.0)
       '@rollup/plugin-json': 6.1.0(rollup@4.24.0)
       '@rollup/plugin-node-resolve': 15.3.0(rollup@4.24.0)
-      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))
+      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))
       rollup: 4.24.0
 
-  '@sveltejs/adapter-static@3.0.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))':
+  '@sveltejs/adapter-static@3.0.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))':
     dependencies:
-      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))
+      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))
 
-  '@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))':
+  '@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -3983,41 +3966,40 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.0
       sirv: 3.0.0
-      svelte: 4.2.19
+      svelte: 5.0.3
       tiny-glob: 0.2.9
       vite: 5.4.9(@types/node@22.7.7)
 
-  '@sveltejs/package@2.3.5(svelte@4.2.19)(typescript@5.6.3)':
+  '@sveltejs/package@2.3.5(svelte@5.0.3)(typescript@5.6.3)':
     dependencies:
       chokidar: 4.0.1
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.3
-      svelte: 4.2.19
-      svelte2tsx: 0.7.22(svelte@4.2.19)(typescript@5.6.3)
+      svelte: 5.0.3
+      svelte2tsx: 0.7.22(svelte@5.0.3)(typescript@5.6.3)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))
       debug: 4.3.7
-      svelte: 4.2.19
+      svelte: 5.0.3
       vite: 5.4.9(@types/node@22.7.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))':
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7)))(svelte@5.0.3)(vite@5.4.9(@types/node@22.7.7))
       debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 4.2.19
-      svelte-hmr: 0.16.0(svelte@4.2.19)
+      svelte: 5.0.3
       vite: 5.4.9(@types/node@22.7.7)
-      vitefu: 0.2.5(vite@5.4.9(@types/node@22.7.7))
+      vitefu: 1.0.3(vite@5.4.9(@types/node@22.7.7))
     transitivePeerDependencies:
       - supports-color
 
@@ -4261,6 +4243,10 @@ snapshots:
     dependencies:
       acorn: 8.13.0
 
+  acorn-typescript@1.4.13(acorn@8.13.0):
+    dependencies:
+      acorn: 8.13.0
+
   acorn-walk@8.3.4:
     dependencies:
       acorn: 8.13.0
@@ -4497,14 +4483,6 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
-  code-red@1.0.4:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-      acorn: 8.13.0
-      estree-walker: 3.0.3
-      periscopic: 3.1.0
-
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -4643,7 +4621,7 @@ snapshots:
 
   cookie@0.6.0: {}
 
-  cookie@0.7.2: {}
+  cookie@1.0.1: {}
 
   core-util-is@1.0.3: {}
 
@@ -4671,11 +4649,6 @@ snapshots:
       domutils: 2.8.0
       nth-check: 2.1.1
 
-  css-tree@2.3.1:
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.1
-
   css-what@6.1.0: {}
 
   cssesc@3.0.0: {}
@@ -4842,7 +4815,7 @@ snapshots:
     dependencies:
       eslint: 9.13.0(jiti@1.21.6)
 
-  eslint-plugin-svelte@2.45.1(eslint@9.13.0(jiti@1.21.6))(svelte@4.2.19)(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3)):
+  eslint-plugin-svelte@2.45.1(eslint@9.13.0(jiti@1.21.6))(svelte@5.0.3)(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3)):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@1.21.6))
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -4855,9 +4828,9 @@ snapshots:
       postcss-safe-parser: 6.0.0(postcss@8.4.47)
       postcss-selector-parser: 6.1.2
       semver: 7.6.3
-      svelte-eslint-parser: 0.42.0(svelte@4.2.19)
+      svelte-eslint-parser: 0.42.0(svelte@5.0.3)
     optionalDependencies:
-      svelte: 4.2.19
+      svelte: 5.0.3
     transitivePeerDependencies:
       - ts-node
 
@@ -4935,6 +4908,11 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  esrap@1.2.2:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.6
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -5391,8 +5369,6 @@ snapshots:
 
   map-obj@4.3.0: {}
 
-  mdn-data@2.0.30: {}
-
   meow@8.1.2:
     dependencies:
       '@types/minimist': 1.2.5
@@ -5693,12 +5669,6 @@ snapshots:
 
   pend@1.2.0: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.6
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -5801,17 +5771,17 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@4.2.19):
+  prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.0.3):
     dependencies:
       prettier: 3.3.3
-      svelte: 4.2.19
+      svelte: 5.0.3
 
-  prettier-plugin-tailwindcss@0.6.8(@trivago/prettier-plugin-sort-imports@4.3.0(prettier@3.3.3))(prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@4.2.19))(prettier@3.3.3):
+  prettier-plugin-tailwindcss@0.6.8(@trivago/prettier-plugin-sort-imports@4.3.0(prettier@3.3.3))(prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.0.3))(prettier@3.3.3):
     dependencies:
       prettier: 3.3.3
     optionalDependencies:
       '@trivago/prettier-plugin-sort-imports': 4.3.0(prettier@3.3.3)
-      prettier-plugin-svelte: 3.2.7(prettier@3.3.3)(svelte@4.2.19)
+      prettier-plugin-svelte: 3.2.7(prettier@3.3.3)(svelte@5.0.3)
 
   prettier@2.8.8: {}
 
@@ -6152,19 +6122,19 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.0.5(picomatch@4.0.2)(svelte@4.2.19)(typescript@5.6.3):
+  svelte-check@4.0.5(picomatch@4.0.2)(svelte@5.0.3)(typescript@5.6.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.1
       fdir: 6.4.2(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 4.2.19
+      svelte: 5.0.3
       typescript: 5.6.3
     transitivePeerDependencies:
       - picomatch
 
-  svelte-eslint-parser@0.41.1(svelte@4.2.19):
+  svelte-eslint-parser@0.42.0(svelte@5.0.3):
     dependencies:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -6172,45 +6142,30 @@ snapshots:
       postcss: 8.4.47
       postcss-scss: 4.0.9(postcss@8.4.47)
     optionalDependencies:
-      svelte: 4.2.19
+      svelte: 5.0.3
 
-  svelte-eslint-parser@0.42.0(svelte@4.2.19):
-    dependencies:
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      postcss: 8.4.47
-      postcss-scss: 4.0.9(postcss@8.4.47)
-    optionalDependencies:
-      svelte: 4.2.19
-
-  svelte-hmr@0.16.0(svelte@4.2.19):
-    dependencies:
-      svelte: 4.2.19
-
-  svelte2tsx@0.7.22(svelte@4.2.19)(typescript@5.6.3):
+  svelte2tsx@0.7.22(svelte@5.0.3)(typescript@5.6.3):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 4.2.19
+      svelte: 5.0.3
       typescript: 5.6.3
 
-  svelte@4.2.19:
+  svelte@5.0.3:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
       '@types/estree': 1.0.6
       acorn: 8.13.0
+      acorn-typescript: 1.4.13(acorn@8.13.0)
       aria-query: 5.3.2
       axobject-query: 4.1.0
-      code-red: 1.0.4
-      css-tree: 2.3.1
-      estree-walker: 3.0.3
+      esm-env: 1.0.0
+      esrap: 1.2.2
       is-reference: 3.0.2
       locate-character: 3.0.0
       magic-string: 0.30.12
-      periscopic: 3.1.0
+      zimmerframe: 1.1.2
 
   tailwindcss@3.4.14(ts-node@10.9.2(@types/node@22.7.7)(typescript@5.6.3)):
     dependencies:
@@ -6464,7 +6419,7 @@ snapshots:
       '@types/node': 22.7.7
       fsevents: 2.3.3
 
-  vitefu@0.2.5(vite@5.4.9(@types/node@22.7.7)):
+  vitefu@1.0.3(vite@5.4.9(@types/node@22.7.7)):
     optionalDependencies:
       vite: 5.4.9(@types/node@22.7.7)
 
@@ -6629,3 +6584,5 @@ snapshots:
   yn@3.1.1: {}
 
   yocto-queue@0.1.0: {}
+
+  zimmerframe@1.1.2: {}

From 0f877b340b1058ec42d314f63c66b9a192157d66 Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Sun, 20 Oct 2024 14:38:57 -0400
Subject: [PATCH 02/13] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20element=5Finvalid=5F?=
 =?UTF-8?q?self=5Fclosing=5Ftag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/Modal.svelte                      | 2 +-
 src/lib/Spinner.svelte                    | 2 +-
 src/lib/comments/CommentForm.svelte       | 2 +-
 src/lib/comments/PurgeCommentForm.svelte  | 2 +-
 src/lib/comments/RemoveCommentForm.svelte | 2 +-
 src/lib/comments/ReportCommentForm.svelte | 2 +-
 src/lib/community/CommunityGrid.svelte    | 2 +-
 src/lib/community/CommunityIcon.svelte    | 2 +-
 src/lib/person/PersonCard.svelte          | 2 +-
 src/lib/person/PersonIcon.svelte          | 2 +-
 src/lib/posts/PurgePostForm.svelte        | 2 +-
 src/lib/posts/ReportPostForm.svelte       | 2 +-
 src/routes/HomeSiteCard.svelte            | 2 +-
 src/routes/PersonInfobanner.svelte        | 4 ++--
 src/routes/SiteInfobanner.svelte          | 2 +-
 15 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/lib/Modal.svelte b/src/lib/Modal.svelte
index ca06d9e..8823368 100644
--- a/src/lib/Modal.svelte
+++ b/src/lib/Modal.svelte
@@ -6,7 +6,7 @@
 
 <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
 	<!-- Backdrop -->
-	<div class="fixed inset-0 bg-base bg-opacity-50 transition-opacity" />
+	<div class="fixed inset-0 bg-base bg-opacity-50 transition-opacity"></div>
 
 	<div class="fixed inset-0 z-10 overflow-y-auto">
 		<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
diff --git a/src/lib/Spinner.svelte b/src/lib/Spinner.svelte
index 2d90418..707a5d5 100644
--- a/src/lib/Spinner.svelte
+++ b/src/lib/Spinner.svelte
@@ -10,4 +10,4 @@
 	class="inline-block animate-spin rounded-full border-4 border-solid border-current
 		border-r-transparent {className}"
 	role="status"
-/>
+></div>
diff --git a/src/lib/comments/CommentForm.svelte b/src/lib/comments/CommentForm.svelte
index e9ea448..7724de1 100644
--- a/src/lib/comments/CommentForm.svelte
+++ b/src/lib/comments/CommentForm.svelte
@@ -70,7 +70,7 @@
 		{placeholder}
 		class="h-32 w-full resize-y rounded-xl border-0 bg-surface-container p-4 text-on-surface-container focus:border-on-surface-container/25 focus:ring-on-surface-container/25"
 		bind:value={content}
-	/>
+	></textarea>
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-between gap-4">
diff --git a/src/lib/comments/PurgeCommentForm.svelte b/src/lib/comments/PurgeCommentForm.svelte
index dbcd686..40f76a8 100644
--- a/src/lib/comments/PurgeCommentForm.svelte
+++ b/src/lib/comments/PurgeCommentForm.svelte
@@ -27,7 +27,7 @@
 		{placeholder}
 		bind:value
 		class="surface-container rounded-md border-none px-4 py-2"
-	/>
+	></textarea>
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-end gap-4">
diff --git a/src/lib/comments/RemoveCommentForm.svelte b/src/lib/comments/RemoveCommentForm.svelte
index 8c48067..f324c98 100644
--- a/src/lib/comments/RemoveCommentForm.svelte
+++ b/src/lib/comments/RemoveCommentForm.svelte
@@ -27,7 +27,7 @@
 		{placeholder}
 		bind:value
 		class="surface-container rounded-md border-none px-4 py-2"
-	/>
+	></textarea>
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-end gap-4">
diff --git a/src/lib/comments/ReportCommentForm.svelte b/src/lib/comments/ReportCommentForm.svelte
index 4953935..e5b877e 100644
--- a/src/lib/comments/ReportCommentForm.svelte
+++ b/src/lib/comments/ReportCommentForm.svelte
@@ -47,7 +47,7 @@
 		{placeholder}
 		bind:value
 		class="surface-container rounded-md border-none px-4 py-2"
-	/>
+	></textarea>
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-end gap-4">
diff --git a/src/lib/community/CommunityGrid.svelte b/src/lib/community/CommunityGrid.svelte
index 1711dbf..5c26b7f 100644
--- a/src/lib/community/CommunityGrid.svelte
+++ b/src/lib/community/CommunityGrid.svelte
@@ -22,7 +22,7 @@
 				<th class="max-sm:hidden">Subscribers</th>
 				<th class="max-md:hidden">Posts</th>
 				<th class="max-lg:hidden">Comments</th>
-				<th class="" />
+				<th class=""></th>
 			</tr>
 		</thead>
 
diff --git a/src/lib/community/CommunityIcon.svelte b/src/lib/community/CommunityIcon.svelte
index fcbe073..6a6feec 100644
--- a/src/lib/community/CommunityIcon.svelte
+++ b/src/lib/community/CommunityIcon.svelte
@@ -10,5 +10,5 @@
 {#if community.icon}
 	<img src={community.icon} alt="icon" class="object-cover {className}" />
 {:else}
-	<div class="bg-muted {className}" />
+	<div class="bg-muted {className}"></div>
 {/if}
diff --git a/src/lib/person/PersonCard.svelte b/src/lib/person/PersonCard.svelte
index af81d44..65302ce 100644
--- a/src/lib/person/PersonCard.svelte
+++ b/src/lib/person/PersonCard.svelte
@@ -27,7 +27,7 @@
 			src={personView.person.banner}
 		/>
 	{:else}
-		<div class="surface-container absolute left-0 right-0 top-0 h-32 object-cover" />
+		<div class="surface-container absolute left-0 right-0 top-0 h-32 object-cover"></div>
 	{/if}
 
 	<div class="flex flex-col gap-2">
diff --git a/src/lib/person/PersonIcon.svelte b/src/lib/person/PersonIcon.svelte
index d5c1d85..5321993 100644
--- a/src/lib/person/PersonIcon.svelte
+++ b/src/lib/person/PersonIcon.svelte
@@ -17,5 +17,5 @@
 		on:error={e => (error = e)}
 	/>
 {:else}
-	<div class="bg-muted {className}" />
+	<div class="bg-muted {className}"></div>
 {/if}
diff --git a/src/lib/posts/PurgePostForm.svelte b/src/lib/posts/PurgePostForm.svelte
index dfe761c..30d4b28 100644
--- a/src/lib/posts/PurgePostForm.svelte
+++ b/src/lib/posts/PurgePostForm.svelte
@@ -27,7 +27,7 @@
 		{placeholder}
 		bind:value
 		class="surface-container rounded-md border-none px-4 py-2"
-	/>
+	></textarea>
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-end gap-4">
diff --git a/src/lib/posts/ReportPostForm.svelte b/src/lib/posts/ReportPostForm.svelte
index 7da79ca..941afbc 100644
--- a/src/lib/posts/ReportPostForm.svelte
+++ b/src/lib/posts/ReportPostForm.svelte
@@ -47,7 +47,7 @@
 		{placeholder}
 		bind:value
 		class="surface-container rounded-md border-none px-4 py-2"
-	/>
+	></textarea>
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-end gap-4">
diff --git a/src/routes/HomeSiteCard.svelte b/src/routes/HomeSiteCard.svelte
index a5bccf0..070b484 100644
--- a/src/routes/HomeSiteCard.svelte
+++ b/src/routes/HomeSiteCard.svelte
@@ -26,7 +26,7 @@
 		<!-- Anonymous infobanner -->
 		<div class="flex flex-row items-center gap-4 bg-surface-container/25 p-4">
 			<!-- Avatar -->
-			<div class="h-24 w-24 rounded-full bg-muted object-cover" />
+			<div class="h-24 w-24 rounded-full bg-muted object-cover"></div>
 
 			<div class="text-xl font-semibold">Anonymous</div>
 		</div>
diff --git a/src/routes/PersonInfobanner.svelte b/src/routes/PersonInfobanner.svelte
index a713db5..7592a23 100644
--- a/src/routes/PersonInfobanner.svelte
+++ b/src/routes/PersonInfobanner.svelte
@@ -21,7 +21,7 @@
 	{:else}
 		<div
 			class="surface-container absolute left-0 right-0 top-0 h-full w-full object-cover opacity-25"
-		/>
+		></div>
 	{/if}
 
 	<div class="relative flex flex-row items-center gap-4">
@@ -29,7 +29,7 @@
 		{#if myUser.local_user_view.person.avatar}
 			<img class="h-24 w-24 object-cover" src={myUser.local_user_view.person.avatar} alt="avatar" />
 		{:else}
-			<div class="h-24 w-24 rounded-full bg-muted object-cover" />
+			<div class="h-24 w-24 rounded-full bg-muted object-cover"></div>
 		{/if}
 
 		<div>
diff --git a/src/routes/SiteInfobanner.svelte b/src/routes/SiteInfobanner.svelte
index aefc76c..75abafa 100644
--- a/src/routes/SiteInfobanner.svelte
+++ b/src/routes/SiteInfobanner.svelte
@@ -59,7 +59,7 @@
 				alt="avatar"
 			/>
 		{:else}
-			<div class="h-24 w-24 rounded-full bg-muted object-cover" />
+			<div class="h-24 w-24 rounded-full bg-muted object-cover"></div>
 		{/if}
 
 		<div>

From da5a5c52651d65f792c6c663f741c8f2ccf516a3 Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Sun, 20 Oct 2024 14:47:00 -0400
Subject: [PATCH 03/13] =?UTF-8?q?=F0=9F=91=BD=EF=B8=8F=20Migrate=20compone?=
 =?UTF-8?q?nt=20to=20Svelte=205=20syntax?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/ClickOutside.svelte                  | 14 +++--
 src/lib/Dismissable.svelte                   | 14 +++--
 src/lib/LimitSelector.svelte                 | 12 ++--
 src/lib/PaginationBar.svelte                 | 18 +++---
 src/lib/QSelector.svelte                     | 10 +++-
 src/lib/SearchTypeSelector.svelte            | 12 ++--
 src/lib/ShowNsfwSelector.svelte              | 12 ++--
 src/lib/SortSelector.svelte                  | 10 +++-
 src/lib/buttons/BlockCommunityButton.svelte  | 12 ++--
 src/lib/buttons/BlockPersonButton.svelte     | 24 ++++----
 src/lib/buttons/DeleteCommentButton.svelte   | 12 ++--
 src/lib/buttons/DeletePostButton.svelte      | 12 ++--
 src/lib/buttons/DistinguishButton.svelte     | 12 ++--
 src/lib/buttons/FeatureButton.svelte         | 14 +++--
 src/lib/buttons/FollowCommunityButton.svelte | 12 ++--
 src/lib/buttons/LockPostButton.svelte        | 12 ++--
 src/lib/buttons/MarkPostAsReadButton.svelte  | 12 ++--
 src/lib/buttons/RemoveCommentButton.svelte   | 12 ++--
 src/lib/buttons/RemovePostButton.svelte      | 12 ++--
 src/lib/buttons/SaveCommentButton.svelte     | 12 ++--
 src/lib/buttons/SavePostButton.svelte        | 12 ++--
 src/lib/comments/CommentBottomBar.svelte     | 20 ++++---
 src/lib/comments/CommentForm.svelte          | 26 ++++++---
 src/lib/comments/CommentMeatballs.svelte     | 28 +++++++---
 src/lib/comments/CommentNode.svelte          | 59 ++++++++++++--------
 src/lib/comments/CommentSortSelector.svelte  | 10 +++-
 src/lib/comments/PurgeCommentForm.svelte     | 10 +++-
 src/lib/comments/RemoveCommentForm.svelte    | 10 +++-
 src/lib/comments/ReportCommentForm.svelte    | 10 +++-
 src/lib/posts/Post.svelte                    | 50 ++++++++++-------
 src/lib/posts/PostBottomBar.svelte           | 22 ++++----
 src/lib/posts/PostMeatballs.svelte           | 30 ++++++----
 src/lib/posts/PurgePostForm.svelte           | 10 +++-
 src/lib/posts/ReportPostForm.svelte          | 10 +++-
 src/routes/SiteInfobanner.svelte             | 18 +++---
 35 files changed, 363 insertions(+), 222 deletions(-)

diff --git a/src/lib/ClickOutside.svelte b/src/lib/ClickOutside.svelte
index 4d8ee50..69acac1 100644
--- a/src/lib/ClickOutside.svelte
+++ b/src/lib/ClickOutside.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte'
+	import { createEventDispatcher, onMount, type Snippet } from 'svelte'
 
 	const dispatch = createEventDispatcher<{ clickoutside: MouseEvent }>()
-	let node: Node
+	let node: Node = $state()
 
-	let className: string | undefined = ''
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly children?: Snippet
+	}
+
+	const { class: className = '', children }: Props = $props()
 
 	function handleClick(event: MouseEvent) {
 		if (!node.contains(event.target as Node)) dispatch('clickoutside', event)
@@ -20,5 +24,5 @@
 </script>
 
 <div class={className} bind:this={node}>
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/src/lib/Dismissable.svelte b/src/lib/Dismissable.svelte
index 2835bae..3e6024b 100644
--- a/src/lib/Dismissable.svelte
+++ b/src/lib/Dismissable.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
 	import { XMark } from '@natoboram/heroicons.svelte/24/solid'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, type Snippet } from 'svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly children?: Snippet
+	}
+
+	const { class: className = undefined, children }: Props = $props()
 
 	const dispatch = createEventDispatcher<{ dismiss: undefined }>()
 </script>
 
 <div class="relative rounded-md p-4 pr-12 {className}">
-	<button class="absolute right-4 top-4" on:click={() => dispatch('dismiss')}>
+	<button class="absolute right-4 top-4" onclick={() => dispatch('dismiss')}>
 		<XMark class="h-6 w-6" />
 	</button>
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/src/lib/LimitSelector.svelte b/src/lib/LimitSelector.svelte
index 28adbc8..1e9bb47 100644
--- a/src/lib/LimitSelector.svelte
+++ b/src/lib/LimitSelector.svelte
@@ -3,10 +3,14 @@
 	import { page } from '$app/stores'
 	import { createEventDispatcher } from 'svelte'
 
-	export let limit: number
+	interface Props {
+		readonly limit: number
+	}
+
+	const { limit }: Props = $props()
 
 	const dispatch = createEventDispatcher<{ limit: number }>()
-	let input: HTMLInputElement
+	let input: HTMLInputElement = $state()
 
 	let timeout: NodeJS.Timeout
 	function debounceChangeLimit(url: URL) {
@@ -43,10 +47,10 @@
 		id="limit"
 		max={50}
 		min={1}
-		on:change={() => {
+		onchange={() => {
 			debounceChangeLimit($page.url)
 		}}
-		on:keypress={e => {
+		onkeypress={e => {
 			if (e.key === 'Enter') debounceChangeLimit($page.url)
 		}}
 		type="number"
diff --git a/src/lib/PaginationBar.svelte b/src/lib/PaginationBar.svelte
index d5183a8..85c38d2 100644
--- a/src/lib/PaginationBar.svelte
+++ b/src/lib/PaginationBar.svelte
@@ -9,15 +9,17 @@
 	import { createEventDispatcher } from 'svelte'
 	import FlatButton from './buttons/FlatButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly length: number
+		readonly limit: number
+		readonly nav?: HTMLElement | undefined
+	}
 
-	export let length: number
-	export let limit: number
-	export let nav: HTMLElement | undefined = undefined
+	let { class: className = undefined, length, limit, nav = $bindable(undefined) }: Props = $props()
 
 	const dispatch = createEventDispatcher<{ previous: number; next: number; first: 1 }>()
-	let input: HTMLInputElement
+	let input: HTMLInputElement = $state()
 
 	function initialIndex(url: URL): number {
 		const index = Number(url.searchParams.get('page') ?? 1)
@@ -125,10 +127,10 @@
 			class="w-16 rounded-md border-none bg-base-container px-4 py-2 text-on-base-container [-moz-appearance:textfield]"
 			id="page"
 			min={1}
-			on:change={() => {
+			onchange={() => {
 				debounceChangePage($page.url)
 			}}
-			on:keypress={e => {
+			onkeypress={e => {
 				if (e.key === 'Enter') debounceChangePage($page.url)
 			}}
 			type="number"
diff --git a/src/lib/QSelector.svelte b/src/lib/QSelector.svelte
index a1ae884..f048860 100644
--- a/src/lib/QSelector.svelte
+++ b/src/lib/QSelector.svelte
@@ -3,11 +3,15 @@
 	import { page } from '$app/stores'
 	import { createEventDispatcher } from 'svelte'
 
-	export let q: string
+	interface Props {
+		readonly q: string
+	}
+
+	let { q = $bindable() }: Props = $props()
 
 	const dispatch = createEventDispatcher<{ q: string }>()
 
-	let input: HTMLInputElement
+	let input: HTMLInputElement = $state()
 	let timeout: NodeJS.Timeout
 
 	function debounceChangeQ(url: URL) {
@@ -29,7 +33,7 @@
 	bind:this={input}
 	bind:value={q}
 	class="base-container rounded-md border-none px-4 py-2"
-	on:change={() => {
+	onchange={() => {
 		debounceChangeQ($page.url)
 	}}
 	placeholder="Search"
diff --git a/src/lib/SearchTypeSelector.svelte b/src/lib/SearchTypeSelector.svelte
index 3feab3f..8787e76 100644
--- a/src/lib/SearchTypeSelector.svelte
+++ b/src/lib/SearchTypeSelector.svelte
@@ -5,10 +5,14 @@
 	import { createEventDispatcher } from 'svelte'
 	import { isSearchType } from './utils/index.js'
 
-	export let name = 'type_'
-	export let type_: SearchType
+	interface Props {
+		readonly name?: string
+		readonly type_: SearchType
+	}
+
+	const { name = 'type_', type_ }: Props = $props()
 
-	let select: HTMLSelectElement
+	let select: HTMLSelectElement = $state()
 
 	const dispatch = createEventDispatcher<{ search: SearchType }>()
 
@@ -35,7 +39,7 @@
 	bind:this={select}
 	value={type_}
 	class="rounded-md border-none bg-base-container px-4 py-2 text-on-base-container"
-	on:change={() => {
+	onchange={() => {
 		debounceChangeSearch($page.url)
 	}}
 >
diff --git a/src/lib/ShowNsfwSelector.svelte b/src/lib/ShowNsfwSelector.svelte
index 80085df..aa4ca7c 100644
--- a/src/lib/ShowNsfwSelector.svelte
+++ b/src/lib/ShowNsfwSelector.svelte
@@ -3,12 +3,14 @@
 	import { page } from '$app/stores'
 	import { createEventDispatcher } from 'svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly showNsfw: boolean
+	}
 
-	export let showNsfw: boolean
+	const { class: className = undefined, showNsfw }: Props = $props()
 	const dispatch = createEventDispatcher<{ show_nsfw: boolean }>()
-	let checkbox: HTMLInputElement
+	let checkbox: HTMLInputElement = $state()
 
 	let timeout: NodeJS.Timeout
 	function debounceChangeShowNsfw(url: URL) {
@@ -31,7 +33,7 @@
 		checked={showNsfw}
 		class="border-on-base-container/25 bg-base-container text-primary focus:ring-1 focus:ring-offset-0"
 		id="show_nsfw"
-		on:change={() => {
+		onchange={() => {
 			debounceChangeShowNsfw($page.url)
 		}}
 		type="checkbox"
diff --git a/src/lib/SortSelector.svelte b/src/lib/SortSelector.svelte
index 393b125..12b8455 100644
--- a/src/lib/SortSelector.svelte
+++ b/src/lib/SortSelector.svelte
@@ -5,9 +5,13 @@
 	import type { SortType } from 'lemmy-js-client'
 	import { createEventDispatcher } from 'svelte'
 
-	export let sort: SortType
+	interface Props {
+		readonly sort: SortType
+	}
+
+	const { sort }: Props = $props()
 
-	let select: HTMLSelectElement
+	let select: HTMLSelectElement = $state()
 
 	const dispatch = createEventDispatcher<{ sort: SortType }>()
 
@@ -34,7 +38,7 @@
 	bind:this={select}
 	value={sort}
 	class="rounded-md border-none bg-base-container px-4 py-2 text-on-base-container"
-	on:change={() => {
+	onchange={() => {
 		debounceChangeSort($page.url)
 	}}
 >
diff --git a/src/lib/buttons/BlockCommunityButton.svelte b/src/lib/buttons/BlockCommunityButton.svelte
index 96ca448..07eb39e 100644
--- a/src/lib/buttons/BlockCommunityButton.svelte
+++ b/src/lib/buttons/BlockCommunityButton.svelte
@@ -5,13 +5,15 @@
 	import type { BlockCommunityResponse, CommunityId, CommunityView } from 'lemmy-js-client'
 	import { createEventDispatcher } from 'svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
-
 	const client = getClientContext()
 
-	export let communityView: CommunityView
-	export let jwt: string
+	interface Props {
+		readonly class?: string | undefined
+		readonly communityView: CommunityView
+		readonly jwt: string
+	}
+
+	const { class: className = undefined, communityView, jwt }: Props = $props()
 
 	const dispatch = createEventDispatcher<{
 		block_community: BlockCommunityResponse
diff --git a/src/lib/buttons/BlockPersonButton.svelte b/src/lib/buttons/BlockPersonButton.svelte
index 8ad8f1f..49fbf4f 100644
--- a/src/lib/buttons/BlockPersonButton.svelte
+++ b/src/lib/buttons/BlockPersonButton.svelte
@@ -5,19 +5,23 @@
 	import { createEventDispatcher } from 'svelte'
 	import FlatButton from './FlatButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
-
 	const client = getClientContext()
 
-	export let jwt: string
-	export let myUser: MyUserInfo
-	export let personView: PersonView
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly myUser: MyUserInfo
+		readonly personView: PersonView
+	}
+
+	const { class: className = undefined, jwt, myUser, personView }: Props = $props()
 
-	let request: Promise<BlockPersonResponse> = Promise.resolve({
-		blocked: myUser.person_blocks.some(block => block.target.id === personView.person.id),
-		person_view: personView,
-	})
+	let request: Promise<BlockPersonResponse> = $state(
+		Promise.resolve({
+			blocked: myUser.person_blocks.some(block => block.target.id === personView.person.id),
+			person_view: personView,
+		}),
+	)
 
 	const dispatch = createEventDispatcher<{
 		error: Error
diff --git a/src/lib/buttons/DeleteCommentButton.svelte b/src/lib/buttons/DeleteCommentButton.svelte
index 1cf8861..0051eef 100644
--- a/src/lib/buttons/DeleteCommentButton.svelte
+++ b/src/lib/buttons/DeleteCommentButton.svelte
@@ -7,11 +7,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly comment: Comment
+	}
 
-	export let jwt: string
-	export let comment: Comment
+	let { class: className = undefined, jwt, comment = $bindable() }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -20,7 +22,7 @@
 		response: Response
 	}>()
 
-	let deletePending = false
+	let deletePending = $state(false)
 
 	async function deleteComment() {
 		if (!jwt) return dispatch('error', new Error('You must be logged in to delete comments.'))
diff --git a/src/lib/buttons/DeletePostButton.svelte b/src/lib/buttons/DeletePostButton.svelte
index 87b8ea7..5cd9a2a 100644
--- a/src/lib/buttons/DeletePostButton.svelte
+++ b/src/lib/buttons/DeletePostButton.svelte
@@ -7,11 +7,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly post: Post
+	}
 
-	export let jwt: string
-	export let post: Post
+	let { class: className = undefined, jwt, post = $bindable() }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -20,7 +22,7 @@
 		response: Response
 	}>()
 
-	let deletePending = false
+	let deletePending = $state(false)
 
 	async function deletePost() {
 		if (!jwt) return dispatch('error', new Error('You must be logged in to delete posts.'))
diff --git a/src/lib/buttons/DistinguishButton.svelte b/src/lib/buttons/DistinguishButton.svelte
index 55d35ca..5d25444 100644
--- a/src/lib/buttons/DistinguishButton.svelte
+++ b/src/lib/buttons/DistinguishButton.svelte
@@ -7,11 +7,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly comment: Comment
+	}
 
-	export let jwt: string
-	export let comment: Comment
+	let { class: className = undefined, jwt, comment = $bindable() }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -20,7 +22,7 @@
 		response: Response
 	}>()
 
-	let distinguishPending = false
+	let distinguishPending = $state(false)
 
 	async function distinguishComment() {
 		if (!jwt) return dispatch('error', new Error('You must be logged in to distinguish comments.'))
diff --git a/src/lib/buttons/FeatureButton.svelte b/src/lib/buttons/FeatureButton.svelte
index d315a2e..3327aef 100644
--- a/src/lib/buttons/FeatureButton.svelte
+++ b/src/lib/buttons/FeatureButton.svelte
@@ -6,12 +6,14 @@
 	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly postView: PostView
+		readonly type: PostFeatureType
+	}
 
-	export let jwt: string
-	export let postView: PostView
-	export let type: PostFeatureType
+	let { class: className = undefined, jwt, postView = $bindable(), type }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -20,7 +22,7 @@
 		response: Response
 	}>()
 
-	let featurePending = false
+	let featurePending = $state(false)
 
 	function featuredValue(postView: PostView, type: PostFeatureType) {
 		switch (type) {
diff --git a/src/lib/buttons/FollowCommunityButton.svelte b/src/lib/buttons/FollowCommunityButton.svelte
index 3091509..2ee2ccb 100644
--- a/src/lib/buttons/FollowCommunityButton.svelte
+++ b/src/lib/buttons/FollowCommunityButton.svelte
@@ -5,13 +5,15 @@
 	import { createEventDispatcher } from 'svelte'
 	import FlatButton from './FlatButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
-
 	const client = getClientContext()
 
-	export let communityView: CommunityView
-	export let jwt: string
+	interface Props {
+		readonly class?: string | undefined
+		readonly communityView: CommunityView
+		readonly jwt: string
+	}
+
+	const { class: className = undefined, communityView, jwt }: Props = $props()
 
 	const dispatch = createEventDispatcher<{
 		error: Error
diff --git a/src/lib/buttons/LockPostButton.svelte b/src/lib/buttons/LockPostButton.svelte
index fdc24a0..ad62385 100644
--- a/src/lib/buttons/LockPostButton.svelte
+++ b/src/lib/buttons/LockPostButton.svelte
@@ -7,11 +7,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly post: Post
+	}
 
-	export let jwt: string
-	export let post: Post
+	let { class: className = undefined, jwt, post = $bindable() }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -20,7 +22,7 @@
 		response: Response
 	}>()
 
-	let lockPending = false
+	let lockPending = $state(false)
 
 	async function lockPost() {
 		if (!jwt) return dispatch('error', new Error('You must be logged in to lock posts.'))
diff --git a/src/lib/buttons/MarkPostAsReadButton.svelte b/src/lib/buttons/MarkPostAsReadButton.svelte
index 3eca96a..fdc84ab 100644
--- a/src/lib/buttons/MarkPostAsReadButton.svelte
+++ b/src/lib/buttons/MarkPostAsReadButton.svelte
@@ -6,11 +6,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly postView: PostView
+	}
 
-	export let jwt: string
-	export let postView: PostView
+	let { class: className = undefined, jwt, postView = $bindable() }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -19,7 +21,7 @@
 		response: Response
 	}>()
 
-	let markPending = false
+	let markPending = $state(false)
 
 	async function markPostAsRead() {
 		if (!jwt) return dispatch('error', new Error('You must be logged in to mark posts as read.'))
diff --git a/src/lib/buttons/RemoveCommentButton.svelte b/src/lib/buttons/RemoveCommentButton.svelte
index 9c9b2c8..1c92c12 100644
--- a/src/lib/buttons/RemoveCommentButton.svelte
+++ b/src/lib/buttons/RemoveCommentButton.svelte
@@ -7,11 +7,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly comment: Comment
+	}
 
-	export let jwt: string
-	export let comment: Comment
+	let { class: className = undefined, jwt, comment = $bindable() }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -21,7 +23,7 @@
 		restore: CommentResponse
 	}>()
 
-	let removePending = false
+	let removePending = $state(false)
 
 	async function removeComment() {
 		if (!jwt) return dispatch('error', new Error('You must be logged in to remove comments.'))
diff --git a/src/lib/buttons/RemovePostButton.svelte b/src/lib/buttons/RemovePostButton.svelte
index 6832ee7..608d2d8 100644
--- a/src/lib/buttons/RemovePostButton.svelte
+++ b/src/lib/buttons/RemovePostButton.svelte
@@ -7,11 +7,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly post: Post
+	}
 
-	export let jwt: string
-	export let post: Post
+	let { class: className = undefined, jwt, post = $bindable() }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -20,7 +22,7 @@
 		response: Response
 	}>()
 
-	let removePending = false
+	let removePending = $state(false)
 
 	async function removePost() {
 		if (!jwt) return dispatch('error', new Error('You must be logged in to remove posts.'))
diff --git a/src/lib/buttons/SaveCommentButton.svelte b/src/lib/buttons/SaveCommentButton.svelte
index 6afcc81..846ff2d 100644
--- a/src/lib/buttons/SaveCommentButton.svelte
+++ b/src/lib/buttons/SaveCommentButton.svelte
@@ -7,11 +7,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly commentView: CommentView
+	}
 
-	export let jwt: string
-	export let commentView: CommentView
+	let { class: className = undefined, jwt, commentView = $bindable() }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -20,7 +22,7 @@
 		response: Response
 	}>()
 
-	let savePending = false
+	let savePending = $state(false)
 
 	async function saveComment() {
 		if (!jwt) return dispatch('error', new Error('You must be logged in to save comments.'))
diff --git a/src/lib/buttons/SavePostButton.svelte b/src/lib/buttons/SavePostButton.svelte
index aa8621c..5b33dcc 100644
--- a/src/lib/buttons/SavePostButton.svelte
+++ b/src/lib/buttons/SavePostButton.svelte
@@ -7,11 +7,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly postView: PostView
+	}
 
-	export let jwt: string
-	export let postView: PostView
+	let { class: className = undefined, jwt, postView = $bindable() }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -20,7 +22,7 @@
 		response: Response
 	}>()
 
-	let savePending = false
+	let savePending = $state(false)
 
 	async function savePost() {
 		if (!jwt) return dispatch('error', new Error('You must be logged in to save posts.'))
diff --git a/src/lib/comments/CommentBottomBar.svelte b/src/lib/comments/CommentBottomBar.svelte
index f27c2d6..c3e4039 100644
--- a/src/lib/comments/CommentBottomBar.svelte
+++ b/src/lib/comments/CommentBottomBar.svelte
@@ -6,12 +6,14 @@
 	import { createEventDispatcher } from 'svelte'
 	import CommentMeatballs from './CommentMeatballs.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly commentView: CommentView
+		readonly jwt: string | undefined
+		readonly myUser: MyUserInfo | undefined
+	}
 
-	export let commentView: CommentView
-	export let jwt: string | undefined
-	export let myUser: MyUserInfo | undefined
+	let { class: className = undefined, commentView = $bindable(), jwt, myUser }: Props = $props()
 
 	const dispatch = createEventDispatcher<{
 		error: Error
@@ -21,7 +23,7 @@
 
 	const client = getClientContext()
 
-	let votePending = false
+	let votePending = $state(false)
 
 	async function like() {
 		const score = (commentView.my_vote ?? 0) <= 0 ? 1 : 0
@@ -60,7 +62,7 @@
 			class:text-muted={votePending}
 			class:text-primary={!votePending && (commentView.my_vote ?? 0) > 0}
 			disabled={votePending}
-			on:click={like}
+			onclick={like}
 			title="Upvote ({commentView.counts.upvotes})"
 		>
 			<ArrowUp />
@@ -72,7 +74,7 @@
 			class:text-muted={votePending}
 			class:text-primary={!votePending && (commentView.my_vote ?? 0) < 0}
 			disabled={votePending}
-			on:click={dislike}
+			onclick={dislike}
 			title="Downvote ({commentView.counts.downvotes})"
 		>
 			<ArrowDown />
@@ -81,7 +83,7 @@
 
 	<!-- Reply button -->
 	{#if myUser && !commentView.post.locked}
-		<button class="flex flex-row items-center gap-2" on:click={() => dispatch('reply')}>
+		<button class="flex flex-row items-center gap-2" onclick={() => dispatch('reply')}>
 			<ChatBubbleLeftEllipsis class="h-5 w-5" /> Reply
 		</button>
 	{/if}
diff --git a/src/lib/comments/CommentForm.svelte b/src/lib/comments/CommentForm.svelte
index 7724de1..1ef1fb1 100644
--- a/src/lib/comments/CommentForm.svelte
+++ b/src/lib/comments/CommentForm.svelte
@@ -9,14 +9,24 @@
 		readonly cancel: undefined
 	}>()
 
-	export let allLanguages: Language[]
-	export let content: string
-	export let disabled: boolean
-	export let myUser: MyUserInfo
-	export let languageId = myUser.discussion_languages[0] ?? 0
+	interface Props {
+		readonly allLanguages: Language[]
+		readonly content: string
+		readonly disabled: boolean
+		readonly myUser: MyUserInfo
+		readonly languageId?: any
+	}
+
+	let {
+		allLanguages,
+		content = $bindable(),
+		disabled,
+		myUser,
+		languageId = $bindable(myUser.discussion_languages[0] ?? 0),
+	}: Props = $props()
 
-	$: myLanguages = myUser.discussion_languages.flatMap(
-		id => allLanguages.find(l => l.id === id) ?? [],
+	const myLanguages = $derived(
+		myUser.discussion_languages.flatMap(id => allLanguages.find(l => l.id === id) ?? []),
 	)
 
 	const placeholders = [
@@ -51,7 +61,7 @@
 		return dispatch('submit', { content: content, languageId })
 	}
 
-	let previewing = false
+	let previewing = $state(false)
 </script>
 
 <div class="flex flex-col gap-4">
diff --git a/src/lib/comments/CommentMeatballs.svelte b/src/lib/comments/CommentMeatballs.svelte
index 7ada99f..cc24daf 100644
--- a/src/lib/comments/CommentMeatballs.svelte
+++ b/src/lib/comments/CommentMeatballs.svelte
@@ -11,13 +11,21 @@
 	import type { CommentView, MyUserInfo } from 'lemmy-js-client'
 	import { createEventDispatcher } from 'svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly myUser: MyUserInfo
+		readonly position?: string
+		readonly commentView: CommentView
+	}
 
-	export let jwt: string
-	export let myUser: MyUserInfo
-	export let position = 'left-8 -top-4'
-	export let commentView: CommentView
+	const {
+		class: className = undefined,
+		jwt,
+		myUser,
+		position = 'left-8 -top-4',
+		commentView,
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{
 		edit: undefined
@@ -25,13 +33,15 @@
 		report: undefined
 	}>()
 
-	let opened = false
+	let opened = $state(false)
 
 	function onclick() {
 		opened = !opened
 	}
 
-	$: moderator = myUser.moderates.some(m => m.community.id === commentView.post.community_id)
+	const moderator = $derived(
+		myUser.moderates.some(m => m.community.id === commentView.post.community_id),
+	)
 
 	function clickReport() {
 		dispatch('report')
@@ -117,7 +127,7 @@
 		</div>
 	{/if}
 
-	<button on:click={onclick}>
+	<button {onclick}>
 		<EllipsisVertical />
 	</button>
 </div>
diff --git a/src/lib/comments/CommentNode.svelte b/src/lib/comments/CommentNode.svelte
index c54a248..d47e03e 100644
--- a/src/lib/comments/CommentNode.svelte
+++ b/src/lib/comments/CommentNode.svelte
@@ -18,21 +18,34 @@
 		SuccessResponse,
 	} from 'lemmy-js-client'
 	import { createEventDispatcher } from 'svelte'
+	import CommentNode_1 from './CommentNode.svelte'
 	import PurgeCommentForm from './PurgeCommentForm.svelte'
 	import RemoveCommentForm from './RemoveCommentForm.svelte'
 	import type { CommentNode } from './comment_node.js'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly allLanguages: Language[]
+		readonly children: CommentNode[]
+		readonly commentView: CommentView
+		readonly jwt: string | undefined
+		readonly moderators: CommunityModeratorView[]
+		readonly myUser: MyUserInfo | undefined
+		readonly personView: PersonView | undefined
+		readonly site: Site
+	}
 
-	export let allLanguages: Language[]
-	export let children: CommentNode[]
-	export let commentView: CommentView
-	export let jwt: string | undefined
-	export let moderators: CommunityModeratorView[]
-	export let myUser: MyUserInfo | undefined
-	export let personView: PersonView | undefined
-	export let site: Site
+	let {
+		class: className = undefined,
+		allLanguages,
+		children,
+		commentView = $bindable(),
+		jwt,
+		moderators,
+		myUser,
+		personView,
+		site,
+	}: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{
@@ -40,18 +53,18 @@
 		purge: { commentView: CommentView; response: SuccessResponse }
 	}>()
 
-	let botErrorMessage = ''
-	let editing = false
-	let editPending = false
-	let purgePending = false
-	let purging = false
-	let removePending = false
-	let removing = false
-	let replying = false
-	let replyPending = false
-	let reporting = false
-	let reportPending = false
-	let topErrorMessage = ''
+	let botErrorMessage = $state('')
+	let editing = $state(false)
+	let editPending = $state(false)
+	let purgePending = $state(false)
+	let purging = $state(false)
+	let removePending = $state(false)
+	let removing = $state(false)
+	let replying = $state(false)
+	let replyPending = $state(false)
+	let reporting = $state(false)
+	let reportPending = $state(false)
+	let topErrorMessage = $state('')
 
 	async function createComment(e: CustomEvent<{ content: string; languageId: number }>) {
 		if (!jwt) return (botErrorMessage = 'You must be logged in to comment.')
@@ -325,7 +338,7 @@
 	<!-- Children -->
 	<div class="ml-4 flex flex-col gap-2 border-l border-muted pl-4">
 		{#each children as child (child.view.comment.id)}
-			<svelte:self
+			<CommentNode_1
 				{allLanguages}
 				{jwt}
 				{moderators}
diff --git a/src/lib/comments/CommentSortSelector.svelte b/src/lib/comments/CommentSortSelector.svelte
index 47db1e5..cf8892c 100644
--- a/src/lib/comments/CommentSortSelector.svelte
+++ b/src/lib/comments/CommentSortSelector.svelte
@@ -5,9 +5,13 @@
 	import type { CommentSortType } from 'lemmy-js-client'
 	import { createEventDispatcher } from 'svelte'
 
-	export let sort: CommentSortType
+	interface Props {
+		readonly sort: CommentSortType
+	}
+
+	const { sort }: Props = $props()
 
-	let select: HTMLSelectElement
+	let select: HTMLSelectElement = $state()
 
 	const dispatch = createEventDispatcher<{ sort: CommentSortType }>()
 
@@ -34,7 +38,7 @@
 	bind:this={select}
 	value={sort}
 	class="w-20 rounded-md border-none bg-base-container px-4 py-2 text-on-base-container"
-	on:change={() => {
+	onchange={() => {
 		debounceChangeSort($page.url)
 	}}
 >
diff --git a/src/lib/comments/PurgeCommentForm.svelte b/src/lib/comments/PurgeCommentForm.svelte
index 40f76a8..f378ce2 100644
--- a/src/lib/comments/PurgeCommentForm.svelte
+++ b/src/lib/comments/PurgeCommentForm.svelte
@@ -2,14 +2,18 @@
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let disabled = false
+	interface Props {
+		readonly disabled?: boolean
+	}
+
+	const { disabled = false }: Props = $props()
 
 	const placeholders = ['Reason for purging this comment...', 'Why are you purging this comment?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
 
 	const dispatch = createEventDispatcher<{ cancel: undefined; purge: string }>()
 
-	let value = ''
+	let value = $state('')
 
 	function onSubmit() {
 		dispatch('purge', value)
@@ -20,7 +24,7 @@
 	}
 </script>
 
-<form class="flex flex-col justify-start gap-4" on:submit={onSubmit}>
+<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit}>
 	<!-- Input -->
 	<textarea
 		{disabled}
diff --git a/src/lib/comments/RemoveCommentForm.svelte b/src/lib/comments/RemoveCommentForm.svelte
index f324c98..fc5f15b 100644
--- a/src/lib/comments/RemoveCommentForm.svelte
+++ b/src/lib/comments/RemoveCommentForm.svelte
@@ -2,14 +2,18 @@
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let disabled = false
+	interface Props {
+		readonly disabled?: boolean
+	}
+
+	const { disabled = false }: Props = $props()
 
 	const placeholders = ['Reason for removing this comment...', 'Why are you removing this comment?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
 
 	const dispatch = createEventDispatcher<{ cancel: undefined; remove: string }>()
 
-	let value = ''
+	let value = $state('')
 
 	function onSubmit() {
 		dispatch('remove', value)
@@ -20,7 +24,7 @@
 	}
 </script>
 
-<form class="flex flex-col justify-start gap-4" on:submit={onSubmit}>
+<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit}>
 	<!-- Input -->
 	<textarea
 		{disabled}
diff --git a/src/lib/comments/ReportCommentForm.svelte b/src/lib/comments/ReportCommentForm.svelte
index e5b877e..fb5fec5 100644
--- a/src/lib/comments/ReportCommentForm.svelte
+++ b/src/lib/comments/ReportCommentForm.svelte
@@ -2,7 +2,11 @@
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let disabled = false
+	interface Props {
+		readonly disabled?: boolean
+	}
+
+	const { disabled = false }: Props = $props()
 
 	const placeholders = [
 		'Describe the violation',
@@ -29,7 +33,7 @@
 
 	const dispatch = createEventDispatcher<{ cancel: undefined; report: string }>()
 
-	let value = ''
+	let value = $state('')
 
 	function onSubmit() {
 		dispatch('report', value)
@@ -40,7 +44,7 @@
 	}
 </script>
 
-<form class="flex flex-col justify-start gap-4" on:submit={onSubmit}>
+<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit}>
 	<!-- Input -->
 	<textarea
 		{disabled}
diff --git a/src/lib/posts/Post.svelte b/src/lib/posts/Post.svelte
index f9866c5..7c897b9 100644
--- a/src/lib/posts/Post.svelte
+++ b/src/lib/posts/Post.svelte
@@ -25,30 +25,42 @@
 	import PurgePostForm from './PurgePostForm.svelte'
 	import ReportPostForm from './ReportPostForm.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
-
-	export let allLanguages: Language[]
-	export let communityView: CommunityView | undefined
-	export let jwt: string | undefined
-	export let moderators: CommunityModeratorView[]
-	export let myUser: MyUserInfo | undefined
-	export let postView: PostView
-	export let site: Site
-	export let personView: PersonView | undefined
+	interface Props {
+		readonly class?: string | undefined
+		readonly allLanguages: Language[]
+		readonly communityView: CommunityView | undefined
+		readonly jwt: string | undefined
+		readonly moderators: CommunityModeratorView[]
+		readonly myUser: MyUserInfo | undefined
+		readonly postView: PostView
+		readonly site: Site
+		readonly personView: PersonView | undefined
+	}
+
+	let {
+		class: className = undefined,
+		allLanguages,
+		communityView,
+		jwt,
+		moderators,
+		myUser,
+		postView = $bindable(),
+		site,
+		personView,
+	}: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{ comment: CommentResponse }>()
 
-	let commenting = false
-	let commentPending = false
-	let purgePending = false
-	let purging = false
-	let reporting = false
-	let reportPending = false
+	let commenting = $state(false)
+	let commentPending = $state(false)
+	let purgePending = $state(false)
+	let purging = $state(false)
+	let reporting = $state(false)
+	let reportPending = $state(false)
 
-	let botErrorMessage = ''
-	let topErrorMessage = ''
+	let botErrorMessage = $state('')
+	let topErrorMessage = $state('')
 
 	async function createComment(e: CustomEvent<{ content: string; languageId: number }>) {
 		if (!jwt) return (botErrorMessage = 'You must be logged in to comment.')
diff --git a/src/lib/posts/PostBottomBar.svelte b/src/lib/posts/PostBottomBar.svelte
index c87abdd..28171bd 100644
--- a/src/lib/posts/PostBottomBar.svelte
+++ b/src/lib/posts/PostBottomBar.svelte
@@ -7,18 +7,20 @@
 	import { createEventDispatcher } from 'svelte'
 	import PostMeatballs from './PostMeatballs.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string | undefined
+		readonly myUser: MyUserInfo | undefined
+		readonly postView: PostView
+		readonly site: Site
+	}
 
-	export let jwt: string | undefined
-	export let myUser: MyUserInfo | undefined
-	export let postView: PostView
-	export let site: Site
+	let { class: className = undefined, jwt, myUser, postView = $bindable(), site }: Props = $props()
 
 	const client = getClientContext()
 	const dispatch = createEventDispatcher<{ comment: undefined; response: Response; error: Error }>()
 
-	let votePending = false
+	let votePending = $state(false)
 
 	async function like() {
 		const score = (postView.my_vote ?? 0) <= 0 ? 1 : 0
@@ -52,7 +54,7 @@
 			class:text-muted={votePending}
 			class:text-primary={!votePending && (postView.my_vote ?? 0) > 0}
 			disabled={votePending || !myUser}
-			on:click={like}
+			onclick={like}
 			title="Upvote ({postView.counts.upvotes})"
 		>
 			<ArrowUp />
@@ -62,7 +64,7 @@
 			class:text-muted={votePending}
 			class:text-primary={!votePending && (postView.my_vote ?? 0) < 0}
 			disabled={votePending || !myUser}
-			on:click={dislike}
+			onclick={dislike}
 			title="Downvote ({postView.counts.downvotes})"
 		>
 			<ArrowDown />
@@ -76,7 +78,7 @@
 	</a>
 
 	{#if myUser}
-		<button class="flex flex-row items-center gap-2" on:click={() => dispatch('comment')}>
+		<button class="flex flex-row items-center gap-2" onclick={() => dispatch('comment')}>
 			<ChatBubbleLeftEllipsis class="h-5 w-5" />
 			Reply
 		</button>
diff --git a/src/lib/posts/PostMeatballs.svelte b/src/lib/posts/PostMeatballs.svelte
index 58ed315..a511cef 100644
--- a/src/lib/posts/PostMeatballs.svelte
+++ b/src/lib/posts/PostMeatballs.svelte
@@ -12,27 +12,37 @@
 	import type { MyUserInfo, PostView } from 'lemmy-js-client'
 	import { createEventDispatcher } from 'svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
-
 	const dispatch = createEventDispatcher<{
 		edit: undefined
 		purge: undefined
 		report: undefined
 	}>()
 
-	export let jwt: string
-	export let myUser: MyUserInfo
-	export let position = 'left-8 -top-4'
-	export let postView: PostView
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly myUser: MyUserInfo
+		readonly position?: string
+		readonly postView: PostView
+	}
+
+	const {
+		class: className = undefined,
+		jwt,
+		myUser,
+		position = 'left-8 -top-4',
+		postView,
+	}: Props = $props()
 
-	let opened = false
+	let opened = $state(false)
 
 	function onclick() {
 		opened = !opened
 	}
 
-	$: moderator = myUser.moderates.some(m => m.community.id === postView.post.community_id)
+	const moderator = $derived(
+		myUser.moderates.some(m => m.community.id === postView.post.community_id),
+	)
 
 	function clickReport() {
 		dispatch('report')
@@ -127,7 +137,7 @@
 		</div>
 	{/if}
 
-	<button on:click={onclick}>
+	<button {onclick}>
 		<EllipsisVertical />
 	</button>
 </div>
diff --git a/src/lib/posts/PurgePostForm.svelte b/src/lib/posts/PurgePostForm.svelte
index 30d4b28..272c674 100644
--- a/src/lib/posts/PurgePostForm.svelte
+++ b/src/lib/posts/PurgePostForm.svelte
@@ -2,14 +2,18 @@
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let disabled = false
+	interface Props {
+		readonly disabled?: boolean
+	}
+
+	const { disabled = false }: Props = $props()
 
 	const placeholders = ['Reason for purging this post...', 'Why are you purging this post?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
 
 	const dispatch = createEventDispatcher<{ cancel: undefined; purge: string }>()
 
-	let value = ''
+	let value = $state('')
 
 	function onSubmit() {
 		dispatch('purge', value)
@@ -20,7 +24,7 @@
 	}
 </script>
 
-<form class="flex flex-col justify-start gap-4" on:submit={onSubmit}>
+<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit}>
 	<!-- Input -->
 	<textarea
 		{disabled}
diff --git a/src/lib/posts/ReportPostForm.svelte b/src/lib/posts/ReportPostForm.svelte
index 941afbc..d96c0b9 100644
--- a/src/lib/posts/ReportPostForm.svelte
+++ b/src/lib/posts/ReportPostForm.svelte
@@ -2,7 +2,11 @@
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let disabled = false
+	interface Props {
+		readonly disabled?: boolean
+	}
+
+	const { disabled = false }: Props = $props()
 
 	const placeholders = [
 		'Describe the violation',
@@ -29,7 +33,7 @@
 
 	const dispatch = createEventDispatcher<{ cancel: undefined; report: string }>()
 
-	let value = ''
+	let value = $state('')
 
 	function onSubmit() {
 		dispatch('report', value)
@@ -40,7 +44,7 @@
 	}
 </script>
 
-<form class="flex flex-col justify-start gap-4" on:submit={onSubmit}>
+<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit}>
 	<!-- Input -->
 	<textarea
 		{disabled}
diff --git a/src/routes/SiteInfobanner.svelte b/src/routes/SiteInfobanner.svelte
index 75abafa..db7cf9d 100644
--- a/src/routes/SiteInfobanner.svelte
+++ b/src/routes/SiteInfobanner.svelte
@@ -4,9 +4,6 @@
 	import { siteLink } from '$lib/utils/index.js'
 	import { createEventDispatcher } from 'svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
-
 	const dispatch = createEventDispatcher<{
 		current: HomeSite
 		default: HomeSite
@@ -14,7 +11,12 @@
 		hide: HomeSite
 	}>()
 
-	export let homeSite: HomeSite
+	interface Props {
+		readonly class?: string | undefined
+		readonly homeSite: HomeSite
+	}
+
+	const { class: className = undefined, homeSite }: Props = $props()
 
 	async function onDefault() {
 		const newHomeSite = { ...homeSite, default: !homeSite.default }
@@ -73,7 +75,7 @@
 					class:primary-container={homeSite.default}
 					class:surface-container={!homeSite.default}
 					class="rounded-full px-2 py-1"
-					on:click={onDefault}
+					onclick={onDefault}
 				>
 					Default
 				</button>
@@ -82,16 +84,16 @@
 					class:primary-container={homeSite.current}
 					class:surface-container={!homeSite.current}
 					class="rounded-full px-2 py-1"
-					on:click={onCurrent}
+					onclick={onCurrent}
 				>
 					Current
 				</button>
 
-				<button class="surface-container hover:warning rounded-full px-2 py-1" on:click={onHide}
+				<button class="surface-container hover:warning rounded-full px-2 py-1" onclick={onHide}
 					>Hide</button
 				>
 
-				<button class="surface-container hover:danger rounded-full px-2 py-1" on:click={onDelete}
+				<button class="surface-container hover:danger rounded-full px-2 py-1" onclick={onDelete}
 					>Delete</button
 				>
 			</div>

From 81d240a6cb01436451d90e62662a938d5226fca5 Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Sun, 20 Oct 2024 17:07:23 -0400
Subject: [PATCH 04/13] =?UTF-8?q?=F0=9F=92=84=20Add=20secondary=20colour?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/posts/PostBottomBar.svelte            |   2 +-
 src/routes/+page.svelte                       |  47 +++---
 src/routes/HomeSiteCard.svelte                |  10 +-
 src/routes/debug/theme/+page.server.ts        |  16 ++
 src/routes/debug/theme/+page.svelte           | 141 ++++++++++++++++++
 src/routes/debug/theme/BgColourTest.svelte    |  17 +++
 src/routes/debug/theme/TextColourTests.svelte |   6 +
 tailwind.config.cjs                           |   2 +
 8 files changed, 218 insertions(+), 23 deletions(-)
 create mode 100644 src/routes/debug/theme/+page.server.ts
 create mode 100644 src/routes/debug/theme/+page.svelte
 create mode 100644 src/routes/debug/theme/BgColourTest.svelte
 create mode 100644 src/routes/debug/theme/TextColourTests.svelte

diff --git a/src/lib/posts/PostBottomBar.svelte b/src/lib/posts/PostBottomBar.svelte
index 28171bd..92fb55c 100644
--- a/src/lib/posts/PostBottomBar.svelte
+++ b/src/lib/posts/PostBottomBar.svelte
@@ -62,7 +62,7 @@
 		<div>{postView.counts.score}</div>
 		<button
 			class:text-muted={votePending}
-			class:text-primary={!votePending && (postView.my_vote ?? 0) < 0}
+			class:text-secondary={!votePending && (postView.my_vote ?? 0) < 0}
 			disabled={votePending || !myUser}
 			onclick={dislike}
 			title="Downvote ({postView.counts.downvotes})"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 407a270..0ee8ec6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment'
 	import { goto } from '$app/navigation'
+	import Dismissable from '$lib/Dismissable.svelte'
 	import Spinner from '$lib/Spinner.svelte'
 	import {
 		findDefaultHomeSite,
@@ -13,29 +14,31 @@
 	import { onMount } from 'svelte'
 	import HomeSiteCard from './HomeSiteCard.svelte'
 
-	let input: string
-	let message: string | undefined
+	let input: string = $state('')
+	let message: string | undefined = $state()
+	let detail: string | undefined = $state()
 
 	onMount(() => {
 		void (async () => {
 			const homeSite = await findDefaultHomeSite()
-
 			if (homeSite) await goto(siteLink(homeSite.siteResponse.site_view.site))
 		})()
 	})
 
 	async function submit() {
-		if (input.startsWith('http://')) input = input.replace('http://', 'https://')
-		if (!input.startsWith('https://')) input = `https://${input}`
-
-		const url = newUrl(input)
+		const inputUrl = input.indexOf('//') === -1 ? `https://${input}` : input
+		const url = newUrl(inputUrl)
 		if (!url) {
 			message = 'Please enter a valid URL.'
 			return
 		}
 
-		const client = new LemmyHttp(input, { fetchFunction: clientFetch(undefined) })
-		const siteResponse = await client.getSite()
+		const client = new LemmyHttp(url.href, { fetchFunction: clientFetch(undefined) })
+		const siteResponse = await client.getSite().catch((error: unknown) => {
+			message = 'Failed to connect to the Lemmy instance.'
+			if (error instanceof Error) detail = error.message
+		})
+		if (!siteResponse) return
 
 		// Hidden sites need a way to connect to them
 		const found = await findHomeSite(siteResponse.site_view.site, siteResponse.my_user)
@@ -52,10 +55,9 @@
 		return goto(siteLink(siteResponse.site_view.site))
 	}
 
-	$: homeSitesPromise = browser && getHomeSites()
-
+	let homeSitesPromise = $state(getHomeSites())
 	function reloadHomeSites() {
-		homeSitesPromise = browser && getHomeSites()
+		if (browser) homeSitesPromise = getHomeSites()
 	}
 </script>
 
@@ -76,20 +78,29 @@
 			bind:value={input}
 			class="base-container rounded border-none p-2"
 			id="input"
-			on:keypress={k => k.key === 'Enter' && submit()}
-			on:submit={submit}
+			onkeypress={k => k.key === 'Enter' && submit()}
+			onsubmit={submit}
 			type="url"
 		/>
 
-		<button class="base-container rounded px-4 py-2" on:click={submit} type="submit">
+		<button class="base-container rounded px-4 py-2" onclick={submit} type="submit">
 			Submit
 		</button>
 	</div>
 
 	{#if message}
-		<p class="rounded-md bg-danger-container p-4 text-on-danger-container">
-			{message}
-		</p>
+		<Dismissable
+			on:dismiss={() => (message = undefined)}
+			class="bg-danger-container text-on-danger-container"
+		>
+			{@html message}
+
+			{#if detail}
+				<p class="text-muted">
+					{detail}
+				</p>
+			{/if}
+		</Dismissable>
 	{/if}
 
 	<h2 class="text-2xl font-semibold">Logins</h2>
diff --git a/src/routes/HomeSiteCard.svelte b/src/routes/HomeSiteCard.svelte
index 070b484..f58662f 100644
--- a/src/routes/HomeSiteCard.svelte
+++ b/src/routes/HomeSiteCard.svelte
@@ -3,12 +3,14 @@
 	import PersonInfobanner from './PersonInfobanner.svelte'
 	import SiteInfobanner from './SiteInfobanner.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly homeSite: HomeSite
+	}
 
-	export let homeSite: HomeSite
+	let { class: className = undefined, homeSite }: Props = $props()
 
-	$: if (homeSite.hidden) throw new Error('Attempting to render a hidden home site.')
+	if (homeSite.hidden) throw new Error('Attempting to render a hidden home site.')
 </script>
 
 <div class="flex flex-col justify-between {className}">
diff --git a/src/routes/debug/theme/+page.server.ts b/src/routes/debug/theme/+page.server.ts
new file mode 100644
index 0000000..ea77660
--- /dev/null
+++ b/src/routes/debug/theme/+page.server.ts
@@ -0,0 +1,16 @@
+import { LemmyHttp } from 'lemmy-js-client'
+import { serverFetch } from '$lib/index.js'
+import type { PageServerLoad } from './$types.js'
+
+export const load = (async ({ fetch }) => {
+	const client = new LemmyHttp('https://lemmy.world', {
+		fetchFunction: serverFetch(fetch, undefined),
+	})
+
+	const site = await client.getSite()
+	const post = await client.getPost({ id: 21074811 })
+
+	return { post, site }
+}) satisfies PageServerLoad
+
+export const prerender = true
diff --git a/src/routes/debug/theme/+page.svelte b/src/routes/debug/theme/+page.svelte
new file mode 100644
index 0000000..8b2466f
--- /dev/null
+++ b/src/routes/debug/theme/+page.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+	import CommunitySidebar from '$lib/community/CommunitySidebar.svelte'
+	import Post from '$lib/posts/Post.svelte'
+	import type { PageData } from './$types.js'
+	import BgColourTest from './BgColourTest.svelte'
+	import TextColourTests from './TextColourTests.svelte'
+
+	export let data: PageData
+</script>
+
+<div class="container mx-auto mt-32 flex flex-col items-center gap-4">
+	<div>
+		<h1 class="text-4xl font-bold">Debug</h1>
+	</div>
+
+	<div>
+		<h2 class="text-2xl font-bold">Elements</h2>
+	</div>
+
+	<div class="flex flex-row gap-2">
+		<Post
+			class="container mx-auto"
+			allLanguages={[]}
+			communityView={undefined}
+			jwt={undefined}
+			moderators={[]}
+			myUser={undefined}
+			personView={undefined}
+			postView={data.post.post_view}
+			site={data.site.site_view.site}
+		/>
+
+		<CommunitySidebar
+			class=""
+			communityView={data.post.community_view}
+			jwt={undefined}
+			myUser={undefined}
+			siteView={data.site.site_view}
+		/>
+	</div>
+
+	<div>
+		<h2 class="text-2xl font-bold">Colours</h2>
+	</div>
+
+	<!-- Base -->
+	<BgColourTest class="bg-base text-on-base" title="Base" message="All elements are on the base." />
+
+	<BgColourTest
+		class="bg-base-container text-on-base-container"
+		title="Base Container"
+		message="Elements on the base may be inside of a container."
+	/>
+
+	<!-- Surface -->
+	<BgColourTest
+		class="bg-surface text-on-surface"
+		title="Surface"
+		message="It heavily contrasts with the base colour."
+	/>
+
+	<BgColourTest
+		class="bg-surface-container text-on-surface-container"
+		title="Surface Container"
+		message="It slightly contrasts with the base container colour."
+	/>
+
+	<!-- Muted -->
+	<BgColourTest
+		class="bg-muted text-on-muted"
+		title="Muted"
+		message="For disabled or unimportant elements."
+	/>
+
+	<!-- Primary -->
+	<BgColourTest
+		class="bg-primary text-on-primary"
+		title="Primary"
+		message="This is the primary colour."
+	/>
+
+	<BgColourTest
+		class="bg-primary-container text-on-primary-container"
+		title="Primary Container"
+		message="This is the colour of a primary container."
+	/>
+
+	<!-- Secondary -->
+	<BgColourTest
+		class="bg-secondary text-on-secondary"
+		title="Secondary"
+		message="This is the secondary colour."
+	/>
+
+	<BgColourTest
+		class="bg-secondary-container text-on-secondary-container"
+		title="Secondary Container"
+		message="This is the colour of a secondary container."
+	/>
+
+	<!-- Success -->
+	<BgColourTest
+		class="bg-success text-on-success"
+		title="Success"
+		message="This is the colour of success."
+	>
+		<TextColourTests />
+	</BgColourTest>
+
+	<BgColourTest
+		class="bg-success-container text-on-success-container"
+		title="Success Container"
+		message="This contains success."
+	/>
+
+	<!-- Warning -->
+	<BgColourTest
+		class="bg-warning text-on-warning"
+		title="Warning"
+		message="This is the colour of warnings."
+	/>
+
+	<BgColourTest
+		class="bg-warning-container text-on-warning-container"
+		title="Warning Container"
+		message="Are you sure you want to proceed?"
+	/>
+
+	<!-- Danger -->
+	<BgColourTest
+		class="bg-danger text-on-danger"
+		title="Danger"
+		message="This is the colour of danger."
+	/>
+
+	<BgColourTest
+		class="bg-danger-container text-on-danger-container"
+		title="Danger Container"
+		message="This action will permanently delete something."
+	/>
+</div>
diff --git a/src/routes/debug/theme/BgColourTest.svelte b/src/routes/debug/theme/BgColourTest.svelte
new file mode 100644
index 0000000..c7deab1
--- /dev/null
+++ b/src/routes/debug/theme/BgColourTest.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import TextColourTests from './TextColourTests.svelte'
+
+	interface Props {
+		readonly class?: string | undefined
+		readonly title: string
+		readonly message: string
+	}
+
+	const { class: className = '', title, message }: Props = $props()
+</script>
+
+<div class="w-full p-4 {className}">
+	<h2 class="text-lg font-semibold">{title}</h2>
+	<p>{message}</p>
+	<TextColourTests />
+</div>
diff --git a/src/routes/debug/theme/TextColourTests.svelte b/src/routes/debug/theme/TextColourTests.svelte
new file mode 100644
index 0000000..4dc1c88
--- /dev/null
+++ b/src/routes/debug/theme/TextColourTests.svelte
@@ -0,0 +1,6 @@
+<script lang="ts"></script>
+
+Test for text colours: <span class="text-base">base</span>, <span class="text-danger">danger</span>,
+<span class="text-muted">muted</span>, <span class="text-primary">primary</span>,
+<span class="text-secondary">secondary</span>, <span class="text-success">success</span>,
+<span class="text-surface">surface</span>, <span class="text-warning">warning</span>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 2ac413d..bd5facc 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -12,6 +12,7 @@ export default {
 				danger: { container: colors.rose[800], DEFAULT: colors.rose[600] },
 				muted: colors.zinc[400],
 				primary: { container: colors.sky[900], DEFAULT: colors.sky[600] },
+				secondary: { container: colors.yellow[700], DEFAULT: colors.yellow[400] },
 				success: { container: colors.emerald[950], DEFAULT: colors.emerald[400] },
 				surface: { container: colors.neutral[800], DEFAULT: colors.neutral[200] },
 				warning: { container: colors.amber[900], DEFAULT: colors.amber[600] },
@@ -20,6 +21,7 @@ export default {
 					danger: { container: colors.rose[50], DEFAULT: colors.rose[50] },
 					muted: colors.zinc[50],
 					primary: { container: colors.sky[100], DEFAULT: colors.sky[50] },
+					secondary: { container: colors.yellow[200], DEFAULT: colors.yellow[800] },
 					success: { container: colors.emerald[50], DEFAULT: colors.emerald[950] },
 					surface: { container: colors.neutral[200], DEFAULT: colors.neutral[950] },
 					warning: { container: colors.amber[100], DEFAULT: colors.amber[50] },

From ed610ec8b3a8f994854cb09a4f2a43feaf047df5 Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Mon, 21 Oct 2024 01:05:59 -0400
Subject: [PATCH 05/13] =?UTF-8?q?=F0=9F=9A=A7=20Refactor=20event=20handlin?=
 =?UTF-8?q?g?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/ClickOutside.svelte                  |  10 +-
 src/lib/Dismissable.svelte                   |  14 ++-
 src/lib/LimitSelector.svelte                 |   9 +-
 src/lib/PaginationBar.svelte                 |  31 +++--
 src/lib/QSelector.svelte                     |  10 +-
 src/lib/SearchTypeSelector.svelte            |  10 +-
 src/lib/ShowNsfwSelector.svelte              |   9 +-
 src/lib/SortSelector.svelte                  |  10 +-
 src/lib/Taglines.svelte                      |  12 +-
 src/lib/buttons/BlockCommunityButton.svelte  |  32 +++--
 src/lib/buttons/BlockPersonButton.svelte     |  29 +++--
 src/lib/buttons/DeleteCommentButton.svelte   |  31 +++--
 src/lib/buttons/DeletePostButton.svelte      |  31 +++--
 src/lib/buttons/DistinguishButton.svelte     |  33 +++--
 src/lib/buttons/FeatureButton.svelte         |  34 ++++--
 src/lib/buttons/FlatButton.svelte            |  37 ++----
 src/lib/buttons/FollowCommunityButton.svelte |  34 +++---
 src/lib/buttons/LockPostButton.svelte        |  31 +++--
 src/lib/buttons/MarkPostAsReadButton.svelte  |  31 +++--
 src/lib/buttons/MeatballButton.svelte        |  35 ++----
 src/lib/buttons/RemoveCommentButton.svelte   |  37 ++++--
 src/lib/buttons/RemovePostButton.svelte      |  31 +++--
 src/lib/buttons/SaveCommentButton.svelte     |  33 +++--
 src/lib/buttons/SavePostButton.svelte        |  31 +++--
 src/lib/comments/CommentBottomBar.svelte     |  72 +++++++----
 src/lib/comments/CommentForm.svelte          |  18 ++-
 src/lib/comments/CommentMeatballs.svelte     |  80 ++++++++----
 src/lib/comments/CommentNode.svelte          | 122 +++++++++----------
 src/lib/comments/CommentSortSelector.svelte  |  10 +-
 src/lib/comments/CommentTopBar.svelte        |  39 ++++--
 src/lib/comments/Comments.svelte             |  49 ++++++--
 src/lib/comments/PurgeCommentForm.svelte     |  15 +--
 src/lib/comments/RemoveCommentForm.svelte    |  20 ++-
 src/lib/comments/ReportCommentForm.svelte    |  20 ++-
 src/lib/community/CommunityMeatballs.svelte  |  60 ++++++---
 src/lib/person/PersonMeatballs.svelte        |  49 +++++---
 src/lib/posts/Post.svelte                    | 119 ++++++++++--------
 src/lib/posts/PostBottomBar.svelte           |  72 ++++++++---
 src/lib/posts/PostMeatballs.svelte           |  86 +++++++------
 src/lib/posts/PostTopBar.svelte              |  54 +++++---
 src/lib/posts/PostUrl.svelte                 |  17 +--
 src/lib/posts/Posts.svelte                   |  28 ++---
 src/lib/posts/PurgePostForm.svelte           |  15 +--
 src/lib/posts/ReportPostForm.svelte          |  15 +--
 src/routes/+page.svelte                      |   2 +-
 src/routes/HomeSiteCard.svelte               |  15 ++-
 src/routes/SiteInfobanner.svelte             |  45 +++----
 src/routes/[site]/post/[post]/+page.svelte   |  48 ++++----
 src/routes/[site]/search/+page.svelte        |  45 +++----
 src/routes/debug/theme/+page.svelte          |   5 +-
 50 files changed, 1013 insertions(+), 712 deletions(-)

diff --git a/src/lib/ClickOutside.svelte b/src/lib/ClickOutside.svelte
index 69acac1..61abc8c 100644
--- a/src/lib/ClickOutside.svelte
+++ b/src/lib/ClickOutside.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount, type Snippet } from 'svelte'
+	import { onMount, type Snippet } from 'svelte'
 
-	const dispatch = createEventDispatcher<{ clickoutside: MouseEvent }>()
-	let node: Node = $state()
+	let node: Node
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly children?: Snippet
+		readonly onClickoutside: (event: MouseEvent) => void
 	}
 
-	const { class: className = '', children }: Props = $props()
+	const { class: className = '', children, onClickoutside }: Props = $props()
 
 	function handleClick(event: MouseEvent) {
-		if (!node.contains(event.target as Node)) dispatch('clickoutside', event)
+		if (!node.contains(event.target as Node)) onClickoutside(event)
 	}
 
 	onMount(() => {
diff --git a/src/lib/Dismissable.svelte b/src/lib/Dismissable.svelte
index 3e6024b..8f12e22 100644
--- a/src/lib/Dismissable.svelte
+++ b/src/lib/Dismissable.svelte
@@ -1,19 +1,23 @@
 <script lang="ts">
 	import { XMark } from '@natoboram/heroicons.svelte/24/solid'
-	import { createEventDispatcher, type Snippet } from 'svelte'
+	import type { Snippet } from 'svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly children?: Snippet
+		readonly onDismiss: () => void
 	}
 
-	const { class: className = undefined, children }: Props = $props()
-
-	const dispatch = createEventDispatcher<{ dismiss: undefined }>()
+	const { class: className = undefined, children, onDismiss }: Props = $props()
 </script>
 
 <div class="relative rounded-md p-4 pr-12 {className}">
-	<button class="absolute right-4 top-4" onclick={() => dispatch('dismiss')}>
+	<button
+		class="absolute right-4 top-4"
+		onclick={() => {
+			onDismiss()
+		}}
+	>
 		<XMark class="h-6 w-6" />
 	</button>
 	{@render children?.()}
diff --git a/src/lib/LimitSelector.svelte b/src/lib/LimitSelector.svelte
index 1e9bb47..76ba83e 100644
--- a/src/lib/LimitSelector.svelte
+++ b/src/lib/LimitSelector.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
 	import { goto, invalidate } from '$app/navigation'
 	import { page } from '$app/stores'
-	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
 		readonly limit: number
+		readonly onLimit?: (limit: number) => void
 	}
 
-	const { limit }: Props = $props()
+	const { limit, onLimit = () => {} }: Props = $props()
 
-	const dispatch = createEventDispatcher<{ limit: number }>()
-	let input: HTMLInputElement = $state()
+	let input: HTMLInputElement
 
 	let timeout: NodeJS.Timeout
 	function debounceChangeLimit(url: URL) {
@@ -35,7 +34,7 @@
 		url.searchParams.set('limit', String(newLimit))
 		await goto(url.toString(), { noScroll: true })
 		await invalidate('app:paginate')
-		dispatch('limit', newLimit)
+		onLimit(newLimit)
 	}
 </script>
 
diff --git a/src/lib/PaginationBar.svelte b/src/lib/PaginationBar.svelte
index 85c38d2..140a4cd 100644
--- a/src/lib/PaginationBar.svelte
+++ b/src/lib/PaginationBar.svelte
@@ -6,20 +6,29 @@
 		ChevronLeft,
 		ChevronRight,
 	} from '@natoboram/heroicons.svelte/20/solid'
-	import { createEventDispatcher } from 'svelte'
 	import FlatButton from './buttons/FlatButton.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly length: number
 		readonly limit: number
-		readonly nav?: HTMLElement | undefined
+		readonly nav?: HTMLElement
+		readonly onFirst: () => void
+		readonly onPrevious: (destination: number) => void
+		readonly onNext: (destination: number) => void
 	}
 
-	let { class: className = undefined, length, limit, nav = $bindable(undefined) }: Props = $props()
+	let {
+		class: className = undefined,
+		length,
+		limit,
+		nav = $bindable(undefined),
+		onFirst,
+		onNext,
+		onPrevious,
+	}: Props = $props()
 
-	const dispatch = createEventDispatcher<{ previous: number; next: number; first: 1 }>()
-	let input: HTMLInputElement = $state()
+	let input: HTMLInputElement
 
 	function initialIndex(url: URL): number {
 		const index = Number(url.searchParams.get('page') ?? 1)
@@ -52,7 +61,7 @@
 		url.searchParams.set('page', String(1))
 		await goto(url, { noScroll: true })
 
-		dispatch('first', 1)
+		onFirst()
 		await invalidate('app:paginate')
 	}
 
@@ -69,7 +78,7 @@
 		url.searchParams.set('page', String(destination))
 		await goto(url, { noScroll: true })
 
-		dispatch('next', destination)
+		onNext(destination)
 		await invalidate('app:paginate')
 	}
 
@@ -80,7 +89,7 @@
 		url.searchParams.set('page', String(destination))
 		await goto(url, { noScroll: true })
 
-		dispatch('previous', destination)
+		onPrevious(destination)
 		await invalidate('app:paginate')
 	}
 </script>
@@ -92,7 +101,7 @@
 	<div class="flex flex-row items-center gap-2 justify-self-start">
 		<!-- First -->
 		{#if canFirst($page.url)}
-			<FlatButton on:click={() => firstPage($page.url)} class="base-container w-28 rounded-lg">
+			<FlatButton onclick={() => firstPage($page.url)} class="base-container w-28 rounded-lg">
 				<ChevronDoubleLeft />
 				First
 			</FlatButton>
@@ -105,7 +114,7 @@
 
 		<!-- Previous -->
 		{#if hasPrevious($page.url)}
-			<FlatButton class="base-container w-32 rounded-lg" on:click={() => previous($page.url)}>
+			<FlatButton class="base-container w-32 rounded-lg" onclick={() => previous($page.url)}>
 				<ChevronLeft />
 				Previous
 			</FlatButton>
@@ -142,7 +151,7 @@
 	{#if length >= limit}
 		<FlatButton
 			class="base-container w-28 justify-self-end rounded-lg"
-			on:click={() => next($page.url)}
+			onclick={() => next($page.url)}
 		>
 			Next
 			<ChevronRight />
diff --git a/src/lib/QSelector.svelte b/src/lib/QSelector.svelte
index f048860..656d209 100644
--- a/src/lib/QSelector.svelte
+++ b/src/lib/QSelector.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
 	import { goto, invalidate } from '$app/navigation'
 	import { page } from '$app/stores'
-	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
 		readonly q: string
+		readonly onQ?: (q: string) => void
 	}
 
-	let { q = $bindable() }: Props = $props()
+	let { q = $bindable(), onQ = () => {} }: Props = $props()
 
-	const dispatch = createEventDispatcher<{ q: string }>()
-
-	let input: HTMLInputElement = $state()
+	let input: HTMLInputElement
 	let timeout: NodeJS.Timeout
 
 	function debounceChangeQ(url: URL) {
@@ -25,7 +23,7 @@
 		url.searchParams.set('q', newQ)
 		await goto(url.toString(), { noScroll: true })
 		await invalidate('app:paginate')
-		dispatch('q', newQ)
+		onQ(newQ)
 	}
 </script>
 
diff --git a/src/lib/SearchTypeSelector.svelte b/src/lib/SearchTypeSelector.svelte
index 8787e76..1782f20 100644
--- a/src/lib/SearchTypeSelector.svelte
+++ b/src/lib/SearchTypeSelector.svelte
@@ -2,19 +2,17 @@
 	import { goto, invalidate } from '$app/navigation'
 	import { page } from '$app/stores'
 	import type { SearchType } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import { isSearchType } from './utils/index.js'
 
 	interface Props {
 		readonly name?: string
 		readonly type_: SearchType
+		readonly onSearch?: (search: SearchType) => void
 	}
 
-	const { name = 'type_', type_ }: Props = $props()
+	const { name = 'type_', type_, onSearch = () => {} }: Props = $props()
 
-	let select: HTMLSelectElement = $state()
-
-	const dispatch = createEventDispatcher<{ search: SearchType }>()
+	let select: HTMLSelectElement
 
 	let timeout: NodeJS.Timeout
 	function debounceChangeSearch(url: URL) {
@@ -30,7 +28,7 @@
 			url.searchParams.set(name, String(value))
 			await goto(url.toString(), { noScroll: true })
 			await invalidate('app:paginate')
-			dispatch('search', value)
+			onSearch(value)
 		}
 	}
 </script>
diff --git a/src/lib/ShowNsfwSelector.svelte b/src/lib/ShowNsfwSelector.svelte
index aa4ca7c..228be71 100644
--- a/src/lib/ShowNsfwSelector.svelte
+++ b/src/lib/ShowNsfwSelector.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
 	import { goto, invalidate } from '$app/navigation'
 	import { page } from '$app/stores'
-	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly showNsfw: boolean
+		readonly onShowNsfw: (showNsfw: boolean) => void
 	}
 
-	const { class: className = undefined, showNsfw }: Props = $props()
-	const dispatch = createEventDispatcher<{ show_nsfw: boolean }>()
-	let checkbox: HTMLInputElement = $state()
+	const { class: className = undefined, showNsfw, onShowNsfw }: Props = $props()
+	let checkbox: HTMLInputElement
 
 	let timeout: NodeJS.Timeout
 	function debounceChangeShowNsfw(url: URL) {
@@ -22,7 +21,7 @@
 		url.searchParams.set('show_nsfw', checkbox.checked.toString())
 		await goto(url.toString(), { noScroll: true })
 		await invalidate('app:paginate')
-		dispatch('show_nsfw', checkbox.checked)
+		onShowNsfw(checkbox.checked)
 	}
 </script>
 
diff --git a/src/lib/SortSelector.svelte b/src/lib/SortSelector.svelte
index 12b8455..34d08db 100644
--- a/src/lib/SortSelector.svelte
+++ b/src/lib/SortSelector.svelte
@@ -3,17 +3,15 @@
 	import { page } from '$app/stores'
 	import { isSortType } from '$lib/utils/index.js'
 	import type { SortType } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
 		readonly sort: SortType
+		readonly onSort?: (sort: SortType) => void
 	}
 
-	const { sort }: Props = $props()
+	const { sort, onSort = () => {} }: Props = $props()
 
-	let select: HTMLSelectElement = $state()
-
-	const dispatch = createEventDispatcher<{ sort: SortType }>()
+	let select: HTMLSelectElement
 
 	let timeout: NodeJS.Timeout
 	function debounceChangeSort(url: URL) {
@@ -29,7 +27,7 @@
 			url.searchParams.set('sort', String(value))
 			await goto(url.toString(), { noScroll: true })
 			await invalidate('app:paginate')
-			dispatch('sort', value)
+			onSort(value)
 		}
 	}
 </script>
diff --git a/src/lib/Taglines.svelte b/src/lib/Taglines.svelte
index 853dc4b..aa7a598 100644
--- a/src/lib/Taglines.svelte
+++ b/src/lib/Taglines.svelte
@@ -4,14 +4,16 @@
 	import { onMount } from 'svelte'
 	import { fly } from 'svelte/transition'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly taglines: Tagline[]
+	}
 
-	export let taglines: Tagline[]
+	const { class: className = undefined, taglines }: Props = $props()
 
 	// Start with a random tagline
-	let index = Math.floor(Math.random() * taglines.length)
-	$: tagline = taglines[index]
+	let index = $state(Math.floor(Math.random() * taglines.length))
+	const tagline = $derived(taglines[index])
 
 	onMount(() => {
 		if (!taglines.length) return
diff --git a/src/lib/buttons/BlockCommunityButton.svelte b/src/lib/buttons/BlockCommunityButton.svelte
index 07eb39e..c5f840b 100644
--- a/src/lib/buttons/BlockCommunityButton.svelte
+++ b/src/lib/buttons/BlockCommunityButton.svelte
@@ -3,7 +3,6 @@
 	import { getClientContext } from '$lib/contexts/index.js'
 	import { NoSymbol } from '@natoboram/heroicons.svelte/20/solid'
 	import type { BlockCommunityResponse, CommunityId, CommunityView } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 
 	const client = getClientContext()
 
@@ -11,18 +10,25 @@
 		readonly class?: string | undefined
 		readonly communityView: CommunityView
 		readonly jwt: string
+		readonly onBlockCommunity: (response: BlockCommunityResponse) => void
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
 	}
 
-	const { class: className = undefined, communityView, jwt }: Props = $props()
-
-	const dispatch = createEventDispatcher<{
-		block_community: BlockCommunityResponse
-		error: Error
-		response: Response
-	}>()
+	const {
+		class: className = undefined,
+		communityView,
+		jwt,
+		onBlockCommunity,
+		onError,
+		onResponse,
+	}: Props = $props()
 
 	async function blockCommunity(block: boolean, community_id: CommunityId) {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to block a community.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to block a community.'))
+			return
+		}
 
 		const response = await client
 			.blockCommunity({
@@ -30,21 +36,21 @@
 				community_id,
 			})
 			.catch((r: Response) => {
-				dispatch('response', r)
+				onResponse(r)
 			})
 
-		if (response) dispatch('block_community', response)
+		if (response) onBlockCommunity(response)
 		return response
 	}
 </script>
 
 {#if communityView.blocked}
-	<FlatButton class={className} on:click={() => blockCommunity(false, communityView.community.id)}>
+	<FlatButton class={className} onclick={() => blockCommunity(false, communityView.community.id)}>
 		Blocked
 		<NoSymbol class="h-5 w-5 text-danger" />
 	</FlatButton>
 {:else}
-	<FlatButton class={className} on:click={() => blockCommunity(true, communityView.community.id)}>
+	<FlatButton class={className} onclick={() => blockCommunity(true, communityView.community.id)}>
 		Block
 	</FlatButton>
 {/if}
diff --git a/src/lib/buttons/BlockPersonButton.svelte b/src/lib/buttons/BlockPersonButton.svelte
index 49fbf4f..9a84803 100644
--- a/src/lib/buttons/BlockPersonButton.svelte
+++ b/src/lib/buttons/BlockPersonButton.svelte
@@ -2,7 +2,6 @@
 	import { getClientContext } from '$lib/contexts/index.js'
 	import { NoSymbol } from '@natoboram/heroicons.svelte/20/solid'
 	import type { BlockPersonResponse, MyUserInfo, PersonId, PersonView } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import FlatButton from './FlatButton.svelte'
 
 	const client = getClientContext()
@@ -11,10 +10,21 @@
 		readonly class?: string | undefined
 		readonly jwt: string
 		readonly myUser: MyUserInfo
+		readonly onBlockPerson: (response: BlockPersonResponse) => void
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
 		readonly personView: PersonView
 	}
 
-	const { class: className = undefined, jwt, myUser, personView }: Props = $props()
+	const {
+		class: className = undefined,
+		jwt,
+		myUser,
+		personView,
+		onBlockPerson,
+		onError,
+		onResponse,
+	}: Props = $props()
 
 	let request: Promise<BlockPersonResponse> = $state(
 		Promise.resolve({
@@ -23,14 +33,11 @@
 		}),
 	)
 
-	const dispatch = createEventDispatcher<{
-		error: Error
-		block_person: BlockPersonResponse
-		response: Response
-	}>()
-
 	async function blockPerson(block: boolean, person_id: PersonId) {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to block a person.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to block a person.'))
+			return
+		}
 
 		request = client.blockPerson({
 			block,
@@ -38,10 +45,10 @@
 		})
 
 		const response = await request.catch((r: Response) => {
-			dispatch('response', r)
+			onResponse(r)
 		})
 
-		if (response) dispatch('block_person', response)
+		if (response) onBlockPerson(response)
 		return response
 	}
 </script>
diff --git a/src/lib/buttons/DeleteCommentButton.svelte b/src/lib/buttons/DeleteCommentButton.svelte
index 0051eef..5e675d6 100644
--- a/src/lib/buttons/DeleteCommentButton.svelte
+++ b/src/lib/buttons/DeleteCommentButton.svelte
@@ -4,28 +4,35 @@
 	import { Trash as TrashOutline } from '@natoboram/heroicons.svelte/24/outline'
 	import { Trash as TrashSolid } from '@natoboram/heroicons.svelte/24/solid'
 	import type { Comment, CommentResponse } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly jwt: string
 		readonly comment: Comment
+		readonly onDelete: (deleted: CommentResponse) => void
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
 	}
 
-	let { class: className = undefined, jwt, comment = $bindable() }: Props = $props()
+	let {
+		class: className = undefined,
+		jwt,
+		comment = $bindable(),
+		onDelete,
+		onError,
+		onResponse,
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		delete: CommentResponse
-		error: Error
-		response: Response
-	}>()
 
 	let deletePending = $state(false)
 
 	async function deleteComment() {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to delete comments.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to delete comments.'))
+			return
+		}
 		if (deletePending) return
 
 		deletePending = true
@@ -34,11 +41,13 @@
 				comment_id: comment.id,
 				deleted: !comment.deleted,
 			})
-			.catch((e: Response) => void dispatch('response', e))
+			.catch((e: Response) => {
+				onResponse(e)
+			})
 
 		if (deleted) {
 			comment = deleted.comment_view.comment
-			dispatch('delete', deleted)
+			onDelete(deleted)
 		}
 
 		deletePending = false
@@ -47,7 +56,7 @@
 </script>
 
 <MeatballButton
-	on:click={deleteComment}
+	onclick={deleteComment}
 	class="{deletePending ? 'cursor-progress' : ''} hover:surface surface-container {className}"
 	disabled={deletePending}
 >
diff --git a/src/lib/buttons/DeletePostButton.svelte b/src/lib/buttons/DeletePostButton.svelte
index 5cd9a2a..50c2433 100644
--- a/src/lib/buttons/DeletePostButton.svelte
+++ b/src/lib/buttons/DeletePostButton.svelte
@@ -4,28 +4,35 @@
 	import { Trash as TrashOutline } from '@natoboram/heroicons.svelte/24/outline'
 	import { Trash as TrashSolid } from '@natoboram/heroicons.svelte/24/solid'
 	import type { Post, PostResponse } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly jwt: string
 		readonly post: Post
+		readonly onDelete: (deleted: PostResponse) => void
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
 	}
 
-	let { class: className = undefined, jwt, post = $bindable() }: Props = $props()
+	let {
+		class: className = undefined,
+		jwt,
+		onDelete,
+		onError,
+		onResponse,
+		post = $bindable(),
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		delete: PostResponse
-		error: Error
-		response: Response
-	}>()
 
 	let deletePending = $state(false)
 
 	async function deletePost() {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to delete posts.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to delete posts.'))
+			return
+		}
 		if (deletePending) return
 
 		deletePending = true
@@ -34,11 +41,13 @@
 				post_id: post.id,
 				deleted: !post.deleted,
 			})
-			.catch((e: Response) => void dispatch('response', e))
+			.catch((e: Response) => {
+				onResponse(e)
+			})
 
 		if (deleted) {
 			post = deleted.post_view.post
-			dispatch('delete', deleted)
+			onDelete(deleted)
 		}
 
 		deletePending = false
@@ -47,7 +56,7 @@
 </script>
 
 <MeatballButton
-	on:click={deletePost}
+	onclick={deletePost}
 	class="{deletePending ? 'cursor-progress' : ''} hover:surface surface-container {className}"
 	disabled={deletePending}
 >
diff --git a/src/lib/buttons/DistinguishButton.svelte b/src/lib/buttons/DistinguishButton.svelte
index 5d25444..966a558 100644
--- a/src/lib/buttons/DistinguishButton.svelte
+++ b/src/lib/buttons/DistinguishButton.svelte
@@ -4,28 +4,35 @@
 	import { Sparkles as SparklesOutline } from '@natoboram/heroicons.svelte/24/outline'
 	import { Sparkles as SparklesSolid } from '@natoboram/heroicons.svelte/24/solid'
 	import type { Comment, CommentResponse } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
-		readonly jwt: string
 		readonly comment: Comment
+		readonly jwt: string
+		readonly onDistinguish: (distinguished: CommentResponse) => void
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
 	}
 
-	let { class: className = undefined, jwt, comment = $bindable() }: Props = $props()
+	let {
+		class: className = undefined,
+		comment = $bindable(),
+		jwt,
+		onDistinguish,
+		onError,
+		onResponse,
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		distinguish: CommentResponse
-		error: Error
-		response: Response
-	}>()
 
 	let distinguishPending = $state(false)
 
 	async function distinguishComment() {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to distinguish comments.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to distinguish comments.'))
+			return
+		}
 		if (distinguishPending) return
 
 		distinguishPending = true
@@ -35,11 +42,13 @@
 				comment_id: comment.id,
 				distinguished: !comment.distinguished,
 			})
-			.catch((e: Response) => void dispatch('response', e))
+			.catch((e: Response) => {
+				onResponse(e)
+			})
 
 		if (distinguished) {
 			comment = distinguished.comment_view.comment
-			dispatch('distinguish', distinguished)
+			onDistinguish(distinguished)
 		}
 
 		distinguishPending = false
@@ -48,7 +57,7 @@
 </script>
 
 <MeatballButton
-	on:click={distinguishComment}
+	onclick={distinguishComment}
 	class="{distinguishPending ? 'cursor-progress' : ''} hover:surface surface-container {className}"
 	disabled={distinguishPending}
 >
diff --git a/src/lib/buttons/FeatureButton.svelte b/src/lib/buttons/FeatureButton.svelte
index 3327aef..f794340 100644
--- a/src/lib/buttons/FeatureButton.svelte
+++ b/src/lib/buttons/FeatureButton.svelte
@@ -3,7 +3,6 @@
 	import { getClientContext } from '$lib/contexts/index.js'
 	import { PushPin, PushPinFill } from '$lib/svg/index.js'
 	import type { PostFeatureType, PostResponse, PostView } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
 	interface Props {
@@ -11,16 +10,22 @@
 		readonly jwt: string
 		readonly postView: PostView
 		readonly type: PostFeatureType
+		readonly onFeature: (featured: PostResponse) => void
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
 	}
 
-	let { class: className = undefined, jwt, postView = $bindable(), type }: Props = $props()
+	let {
+		class: className = undefined,
+		jwt,
+		onError,
+		onFeature,
+		onResponse,
+		postView = $bindable(),
+		type,
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		feature: PostResponse
-		error: Error
-		response: Response
-	}>()
 
 	let featurePending = $state(false)
 
@@ -33,14 +38,17 @@
 
 			default: {
 				const error = new Error('Invalid feature type.')
-				dispatch('error', error)
+				onError(error)
 				throw error
 			}
 		}
 	}
 
 	async function featurePost() {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to feature posts.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to feature posts.'))
+			return
+		}
 		if (featurePending) return
 
 		featurePending = true
@@ -51,11 +59,13 @@
 				featured: !featuredValue(postView, type),
 				post_id: postView.post.id,
 			})
-			.catch((e: Response) => void dispatch('response', e))
+			.catch((e: Response) => {
+				onResponse(e)
+			})
 
 		if (featured) {
 			postView = featured.post_view
-			dispatch('feature', featured)
+			onFeature(featured)
 		}
 
 		featurePending = false
@@ -64,7 +74,7 @@
 </script>
 
 <MeatballButton
-	on:click={featurePost}
+	onclick={featurePost}
 	class="{featurePending ? 'cursor-progress' : ''} hover:surface surface-container {className}"
 	disabled={featurePending}
 >
diff --git a/src/lib/buttons/FlatButton.svelte b/src/lib/buttons/FlatButton.svelte
index 5fd3e26..52ff817 100644
--- a/src/lib/buttons/FlatButton.svelte
+++ b/src/lib/buttons/FlatButton.svelte
@@ -1,32 +1,15 @@
 <script lang="ts">
-	let className: string | undefined = undefined
-	export { className as class }
+	import type { Snippet } from 'svelte'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
 
-	export let disabled: boolean | null | undefined = undefined
-	export let form: string | null | undefined = undefined
-	export let formaction: string | null | undefined = undefined
-	export let formenctype: string | null | undefined = undefined
-	export let formmethod: string | null | undefined = undefined
-	export let formnovalidate: boolean | null | undefined = undefined
-	export let formtarget: string | null | undefined = undefined
-	export let name: string | null | undefined = undefined
-	export let type: 'button' | 'reset' | 'submit' | null | undefined = undefined
-	export let value: string[] | number | string | null | undefined = undefined
+	interface Props extends HTMLButtonAttributes {
+		readonly children?: Snippet
+		readonly class?: string | undefined
+	}
+
+	const { children, class: className = undefined, ...props }: Props = $props()
 </script>
 
-<button
-	{disabled}
-	{form}
-	{formaction}
-	{formenctype}
-	{formmethod}
-	{formnovalidate}
-	{formtarget}
-	{name}
-	{type}
-	{value}
-	class="flex flex-row items-center justify-center gap-2 px-4 py-2 {className}"
-	on:click
->
-	<slot />
+<button class="flex flex-row items-center justify-center gap-2 px-4 py-2 {className}" {...props}>
+	{@render children?.()}
 </button>
diff --git a/src/lib/buttons/FollowCommunityButton.svelte b/src/lib/buttons/FollowCommunityButton.svelte
index 2ee2ccb..5af8588 100644
--- a/src/lib/buttons/FollowCommunityButton.svelte
+++ b/src/lib/buttons/FollowCommunityButton.svelte
@@ -2,7 +2,6 @@
 	import { getClientContext } from '$lib/contexts/index.js'
 	import { Check } from '@natoboram/heroicons.svelte/20/solid'
 	import type { CommunityId, CommunityResponse, CommunityView } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import FlatButton from './FlatButton.svelte'
 
 	const client = getClientContext()
@@ -11,18 +10,25 @@
 		readonly class?: string | undefined
 		readonly communityView: CommunityView
 		readonly jwt: string
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
+		readonly onFollowCommunity: (response: CommunityResponse) => void
 	}
 
-	const { class: className = undefined, communityView, jwt }: Props = $props()
-
-	const dispatch = createEventDispatcher<{
-		error: Error
-		follow_community: CommunityResponse
-		response: Response
-	}>()
+	const {
+		class: className = undefined,
+		communityView,
+		jwt,
+		onError,
+		onResponse,
+		onFollowCommunity,
+	}: Props = $props()
 
 	async function followCommunity(follow: boolean, community_id: CommunityId) {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to follow a community.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to follow a community.'))
+			return
+		}
 
 		const response = await client
 			.followCommunity({
@@ -30,25 +36,25 @@
 				follow,
 			})
 			.catch((r: Response) => {
-				dispatch('response', r)
+				onResponse(r)
 			})
 
-		if (response) dispatch('follow_community', response)
+		if (response) onFollowCommunity(response)
 		return response
 	}
 </script>
 
 {#if communityView.subscribed === 'Subscribed'}
-	<FlatButton class={className} on:click={() => followCommunity(false, communityView.community.id)}>
+	<FlatButton class={className} onclick={() => followCommunity(false, communityView.community.id)}>
 		Subscribed
 		<Check class="h-5 w-5 text-success" />
 	</FlatButton>
 {:else if communityView.subscribed === 'NotSubscribed'}
-	<FlatButton class={className} on:click={() => followCommunity(true, communityView.community.id)}>
+	<FlatButton class={className} onclick={() => followCommunity(true, communityView.community.id)}>
 		Subscribe
 	</FlatButton>
 {:else if communityView.subscribed === 'Pending'}
-	<FlatButton class={className} on:click={() => followCommunity(false, communityView.community.id)}>
+	<FlatButton class={className} onclick={() => followCommunity(false, communityView.community.id)}>
 		Pending
 	</FlatButton>
 {/if}
diff --git a/src/lib/buttons/LockPostButton.svelte b/src/lib/buttons/LockPostButton.svelte
index ad62385..b5e39eb 100644
--- a/src/lib/buttons/LockPostButton.svelte
+++ b/src/lib/buttons/LockPostButton.svelte
@@ -4,28 +4,35 @@
 	import { LockClosed as LockClosedOutline } from '@natoboram/heroicons.svelte/24/outline'
 	import { LockClosed as LockClosedSolid } from '@natoboram/heroicons.svelte/24/solid'
 	import type { Post, PostResponse } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly jwt: string
 		readonly post: Post
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
+		readonly onLock: (locked: PostResponse) => void
 	}
 
-	let { class: className = undefined, jwt, post = $bindable() }: Props = $props()
+	let {
+		class: className = undefined,
+		jwt,
+		onError,
+		onLock,
+		onResponse,
+		post = $bindable(),
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		lock: PostResponse
-		error: Error
-		response: Response
-	}>()
 
 	let lockPending = $state(false)
 
 	async function lockPost() {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to lock posts.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to lock posts.'))
+			return
+		}
 		if (lockPending) return
 
 		lockPending = true
@@ -34,11 +41,13 @@
 				locked: !post.locked,
 				post_id: post.id,
 			})
-			.catch((e: Response) => void dispatch('response', e))
+			.catch((e: Response) => {
+				onResponse(e)
+			})
 
 		if (locked) {
 			post = locked.post_view.post
-			dispatch('lock', locked)
+			onLock(locked)
 		}
 
 		lockPending = false
@@ -47,7 +56,7 @@
 </script>
 
 <MeatballButton
-	on:click={lockPost}
+	onclick={lockPost}
 	class="{lockPending ? 'cursor-progress' : ''} hover:surface surface-container {className}"
 	disabled={lockPending}
 >
diff --git a/src/lib/buttons/MarkPostAsReadButton.svelte b/src/lib/buttons/MarkPostAsReadButton.svelte
index fdc84ab..cc115c6 100644
--- a/src/lib/buttons/MarkPostAsReadButton.svelte
+++ b/src/lib/buttons/MarkPostAsReadButton.svelte
@@ -3,38 +3,47 @@
 	import { getClientContext } from '$lib/contexts/index.js'
 	import { Check } from '@natoboram/heroicons.svelte/20/solid'
 	import type { PostView } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly jwt: string
+		readonly onError: (error: Error) => void
+		readonly onRead: (post: PostView) => void
+		readonly onResponse: (response: Response) => void
 		readonly postView: PostView
 	}
 
-	let { class: className = undefined, jwt, postView = $bindable() }: Props = $props()
+	let {
+		class: className = undefined,
+		jwt,
+		onError,
+		onRead,
+		onResponse,
+		postView = $bindable(),
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		read: PostView
-		error: Error
-		response: Response
-	}>()
 
 	let markPending = $state(false)
 
 	async function markPostAsRead() {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to mark posts as read.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to mark posts as read.'))
+			return
+		}
 		if (markPending) return
 
 		markPending = true
 		const marked = await client
 			.markPostAsRead({ post_ids: [postView.post.id], read: !postView.read })
-			.catch((e: Response) => void dispatch('response', e))
+			.catch((e: Response) => {
+				onResponse(e)
+			})
 
 		if (marked?.success) {
 			postView.read = !postView.read
-			dispatch('read', postView)
+			onRead(postView)
 		}
 
 		markPending = false
@@ -43,7 +52,7 @@
 </script>
 
 <MeatballButton
-	on:click={markPostAsRead}
+	onclick={markPostAsRead}
 	class="{markPending ? 'cursor-progress' : ''} hover:surface surface-container {className}"
 	disabled={markPending}
 >
diff --git a/src/lib/buttons/MeatballButton.svelte b/src/lib/buttons/MeatballButton.svelte
index 9ee7873..1e5b4ff 100644
--- a/src/lib/buttons/MeatballButton.svelte
+++ b/src/lib/buttons/MeatballButton.svelte
@@ -1,33 +1,20 @@
 <script lang="ts">
-	let className: string | undefined = undefined
-	export { className as class }
+	import type { Snippet } from 'svelte'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
 
-	export let disabled: boolean | null | undefined = undefined
-	export let form: string | null | undefined = undefined
-	export let formaction: string | null | undefined = undefined
-	export let formenctype: string | null | undefined = undefined
-	export let formmethod: string | null | undefined = undefined
-	export let formnovalidate: boolean | null | undefined = undefined
-	export let formtarget: string | null | undefined = undefined
-	export let name: string | null | undefined = undefined
-	export let type: 'button' | 'reset' | 'submit' | null | undefined = undefined
-	export let value: string[] | number | string | null | undefined = undefined
+	interface Props extends HTMLButtonAttributes {
+		readonly children?: Snippet
+		readonly class?: string | undefined
+		readonly disabled?: boolean | null | undefined
+	}
+
+	const { children, class: className = undefined, disabled = undefined, ...props }: Props = $props()
 </script>
 
 <button
-	{disabled}
-	{form}
-	{formaction}
-	{formenctype}
-	{formmethod}
-	{formnovalidate}
-	{formtarget}
-	{name}
-	{type}
-	{value}
+	{...props}
 	class:muted={disabled}
 	class="flex flex-row items-center justify-start gap-2 whitespace-nowrap px-4 py-2 {className}"
-	on:click
 >
-	<slot />
+	{@render children?.()}
 </button>
diff --git a/src/lib/buttons/RemoveCommentButton.svelte b/src/lib/buttons/RemoveCommentButton.svelte
index 1c92c12..7ef315a 100644
--- a/src/lib/buttons/RemoveCommentButton.svelte
+++ b/src/lib/buttons/RemoveCommentButton.svelte
@@ -4,29 +4,37 @@
 	import { Trash as TrashOutline } from '@natoboram/heroicons.svelte/24/outline'
 	import { Trash as TrashSolid } from '@natoboram/heroicons.svelte/24/solid'
 	import type { Comment, CommentResponse } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly jwt: string
 		readonly comment: Comment
+		readonly onError: (error: Error) => void
+		readonly onRemove: () => void
+		readonly onResponse: (response: Response) => void
+		readonly onRestore: (response: CommentResponse) => void
 	}
 
-	let { class: className = undefined, jwt, comment = $bindable() }: Props = $props()
+	let {
+		class: className = undefined,
+		comment = $bindable(),
+		jwt,
+		onError,
+		onRemove,
+		onResponse,
+		onRestore,
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		error: Error
-		remove: undefined
-		response: Response
-		restore: CommentResponse
-	}>()
 
 	let removePending = $state(false)
 
 	async function removeComment() {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to remove comments.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to remove comments.'))
+			return
+		}
 		if (removePending) return
 
 		removePending = true
@@ -35,11 +43,13 @@
 				comment_id: comment.id,
 				removed: !comment.removed,
 			})
-			.catch((e: Response) => void dispatch('response', e))
+			.catch((e: Response) => {
+				onResponse(e)
+			})
 
 		if (removed) {
 			comment = removed.comment_view.comment
-			dispatch('restore', removed)
+			onRestore(removed)
 		}
 
 		removePending = false
@@ -50,13 +60,14 @@
 		if (comment.removed) {
 			return removeComment()
 		} else {
-			return dispatch('remove')
+			onRemove()
+			return
 		}
 	}
 </script>
 
 <MeatballButton
-	on:click={() => onClick(comment)}
+	onclick={() => onClick(comment)}
 	class="{removePending ? 'cursor-progress' : ''} hover:surface surface-container {className}"
 	disabled={removePending}
 >
diff --git a/src/lib/buttons/RemovePostButton.svelte b/src/lib/buttons/RemovePostButton.svelte
index 608d2d8..f1c6797 100644
--- a/src/lib/buttons/RemovePostButton.svelte
+++ b/src/lib/buttons/RemovePostButton.svelte
@@ -4,28 +4,35 @@
 	import { Trash as TrashOutline } from '@natoboram/heroicons.svelte/24/outline'
 	import { Trash as TrashSolid } from '@natoboram/heroicons.svelte/24/solid'
 	import type { Post, PostResponse } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly jwt: string
+		readonly onError: (error: Error) => void
+		readonly onRemove: (post: PostResponse) => void
+		readonly onResponse: (response: Response) => void
 		readonly post: Post
 	}
 
-	let { class: className = undefined, jwt, post = $bindable() }: Props = $props()
+	let {
+		class: className = undefined,
+		jwt,
+		onError,
+		onRemove,
+		onResponse,
+		post = $bindable(),
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		remove: PostResponse
-		error: Error
-		response: Response
-	}>()
 
 	let removePending = $state(false)
 
 	async function removePost() {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to remove posts.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to remove posts.'))
+			return
+		}
 		if (removePending) return
 
 		removePending = true
@@ -34,11 +41,13 @@
 				post_id: post.id,
 				removed: !post.removed,
 			})
-			.catch((e: Response) => void dispatch('response', e))
+			.catch((e: Response) => {
+				onResponse(e)
+			})
 
 		if (removed) {
 			post = removed.post_view.post
-			dispatch('remove', removed)
+			onRemove(removed)
 		}
 
 		removePending = false
@@ -47,7 +56,7 @@
 </script>
 
 <MeatballButton
-	on:click={removePost}
+	onclick={removePost}
 	class="{removePending ? 'cursor-progress' : ''} hover:surface surface-container {className}"
 	disabled={removePending}
 >
diff --git a/src/lib/buttons/SaveCommentButton.svelte b/src/lib/buttons/SaveCommentButton.svelte
index 846ff2d..a373d35 100644
--- a/src/lib/buttons/SaveCommentButton.svelte
+++ b/src/lib/buttons/SaveCommentButton.svelte
@@ -4,28 +4,35 @@
 	import { Star as StarOutline } from '@natoboram/heroicons.svelte/24/outline'
 	import { Star as StarSolid } from '@natoboram/heroicons.svelte/24/solid'
 	import type { CommentResponse, CommentView } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
-		readonly jwt: string
 		readonly commentView: CommentView
+		readonly jwt: string
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
+		readonly onSave: (comment: CommentResponse) => void
 	}
 
-	let { class: className = undefined, jwt, commentView = $bindable() }: Props = $props()
+	let {
+		class: className = undefined,
+		commentView = $bindable(),
+		jwt,
+		onError,
+		onResponse,
+		onSave,
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		save: CommentResponse
-		error: Error
-		response: Response
-	}>()
 
 	let savePending = $state(false)
 
 	async function saveComment() {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to save comments.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to save comments.'))
+			return
+		}
 		if (savePending) return
 
 		savePending = true
@@ -34,11 +41,13 @@
 				comment_id: commentView.comment.id,
 				save: !commentView.saved,
 			})
-			.catch((e: Response) => void dispatch('response', e))
+			.catch((e: Response) => {
+				onResponse(e)
+			})
 
 		if (saved) {
 			commentView = saved.comment_view
-			dispatch('save', saved)
+			onSave(saved)
 		}
 
 		savePending = false
@@ -47,7 +56,7 @@
 </script>
 
 <MeatballButton
-	on:click={saveComment}
+	onclick={saveComment}
 	class="{savePending ? 'cursor-progress' : ''} hover:surface surface-container {className}"
 	disabled={savePending}
 >
diff --git a/src/lib/buttons/SavePostButton.svelte b/src/lib/buttons/SavePostButton.svelte
index 5b33dcc..ddca12e 100644
--- a/src/lib/buttons/SavePostButton.svelte
+++ b/src/lib/buttons/SavePostButton.svelte
@@ -4,28 +4,35 @@
 	import { Star as StarOutline } from '@natoboram/heroicons.svelte/24/outline'
 	import { Star as StarSolid } from '@natoboram/heroicons.svelte/24/solid'
 	import type { PostResponse, PostView } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import MeatballButton from './MeatballButton.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly jwt: string
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
+		readonly onSave: (post: PostResponse) => void
 		readonly postView: PostView
 	}
 
-	let { class: className = undefined, jwt, postView = $bindable() }: Props = $props()
+	let {
+		class: className = undefined,
+		jwt,
+		onError,
+		onResponse,
+		onSave,
+		postView = $bindable(),
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		save: PostResponse
-		error: Error
-		response: Response
-	}>()
 
 	let savePending = $state(false)
 
 	async function savePost() {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to save posts.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to save posts.'))
+			return
+		}
 		if (savePending) return
 
 		savePending = true
@@ -34,11 +41,13 @@
 				post_id: postView.post.id,
 				save: !postView.saved,
 			})
-			.catch((e: Response) => void dispatch('response', e))
+			.catch((e: Response) => {
+				onResponse(e)
+			})
 
 		if (save) {
 			postView = save.post_view
-			dispatch('save', save)
+			onSave(save)
 		}
 
 		savePending = false
@@ -47,7 +56,7 @@
 </script>
 
 <MeatballButton
-	on:click={savePost}
+	onclick={savePost}
 	class="{savePending ? 'cursor-progress' : ''} hover:surface surface-container {className}"
 	disabled={savePending}
 >
diff --git a/src/lib/comments/CommentBottomBar.svelte b/src/lib/comments/CommentBottomBar.svelte
index c3e4039..0a2fb32 100644
--- a/src/lib/comments/CommentBottomBar.svelte
+++ b/src/lib/comments/CommentBottomBar.svelte
@@ -2,8 +2,7 @@
 	import { getClientContext } from '$lib/contexts/index.js'
 	import { ArrowDown, ArrowUp } from '@natoboram/heroicons.svelte/20/solid'
 	import { ChatBubbleLeftEllipsis } from '@natoboram/heroicons.svelte/24/outline'
-	import type { CommentView, MyUserInfo } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
+	import type { CommentResponse, CommentView, MyUserInfo } from 'lemmy-js-client'
 	import CommentMeatballs from './CommentMeatballs.svelte'
 
 	interface Props {
@@ -11,15 +10,36 @@
 		readonly commentView: CommentView
 		readonly jwt: string | undefined
 		readonly myUser: MyUserInfo | undefined
+		readonly onDelete: (deleted: CommentResponse) => void
+		readonly onDistinguish: (distinguished: CommentResponse) => void
+		readonly onEdit: () => void
+		readonly onError: (error: Error) => void
+		readonly onPurge: () => void
+		readonly onRemove: () => void
+		readonly onReply: () => void
+		readonly onReport: () => void
+		readonly onResponse: (response: Response) => void
+		readonly onRestore: (response: CommentResponse) => void
+		readonly onSave: (comment: CommentResponse) => void
 	}
 
-	let { class: className = undefined, commentView = $bindable(), jwt, myUser }: Props = $props()
-
-	const dispatch = createEventDispatcher<{
-		error: Error
-		reply: undefined
-		response: Response
-	}>()
+	let {
+		class: className = undefined,
+		commentView = $bindable(),
+		jwt,
+		myUser,
+		onDelete,
+		onDistinguish,
+		onEdit,
+		onError,
+		onPurge,
+		onRemove,
+		onReply,
+		onReport,
+		onResponse,
+		onRestore,
+		onSave,
+	}: Props = $props()
 
 	const client = getClientContext()
 
@@ -36,7 +56,10 @@
 	}
 
 	async function likeComment(score: number) {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to vote.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to vote.'))
+			return
+		}
 
 		votePending = true
 
@@ -46,7 +69,7 @@
 				score: score,
 			})
 			.catch((e: unknown) => {
-				if (e instanceof Response) dispatch('response', e)
+				if (e instanceof Response) onResponse(e)
 			})
 
 		if (response) commentView = response.comment_view
@@ -83,7 +106,12 @@
 
 	<!-- Reply button -->
 	{#if myUser && !commentView.post.locked}
-		<button class="flex flex-row items-center gap-2" onclick={() => dispatch('reply')}>
+		<button
+			class="flex flex-row items-center gap-2"
+			onclick={() => {
+				onReply()
+			}}
+		>
 			<ChatBubbleLeftEllipsis class="h-5 w-5" /> Reply
 		</button>
 	{/if}
@@ -94,16 +122,16 @@
 			{commentView}
 			{jwt}
 			{myUser}
-			on:delete
-			on:distinguish
-			on:edit
-			on:error
-			on:purge
-			on:remove
-			on:report
-			on:response
-			on:restore
-			on:save
+			{onDelete}
+			{onDistinguish}
+			{onEdit}
+			{onError}
+			{onPurge}
+			{onRemove}
+			{onReport}
+			{onResponse}
+			{onRestore}
+			{onSave}
 		/>
 	{/if}
 </div>
diff --git a/src/lib/comments/CommentForm.svelte b/src/lib/comments/CommentForm.svelte
index 1ef1fb1..d7e89b4 100644
--- a/src/lib/comments/CommentForm.svelte
+++ b/src/lib/comments/CommentForm.svelte
@@ -2,12 +2,6 @@
 	import Prose from '$lib/Prose.svelte'
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
 	import type { Language, LanguageId, MyUserInfo } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
-
-	const dispatch = createEventDispatcher<{
-		readonly submit: { readonly content: string; readonly languageId: LanguageId }
-		readonly cancel: undefined
-	}>()
 
 	interface Props {
 		readonly allLanguages: Language[]
@@ -15,6 +9,8 @@
 		readonly disabled: boolean
 		readonly myUser: MyUserInfo
 		readonly languageId?: any
+		readonly onSubmit: (content: string, languageId: LanguageId) => void
+		readonly onCancel: () => void
 	}
 
 	let {
@@ -23,6 +19,8 @@
 		disabled,
 		myUser,
 		languageId = $bindable(myUser.discussion_languages[0] ?? 0),
+		onSubmit,
+		onCancel,
 	}: Props = $props()
 
 	const myLanguages = $derived(
@@ -58,7 +56,7 @@
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
 
 	function clickSubmit() {
-		return dispatch('submit', { content: content, languageId })
+		onSubmit(content, languageId)
 	}
 
 	let previewing = $state(false)
@@ -97,14 +95,14 @@
 		<div class="flex flex-row items-center gap-4">
 			<FlatButton
 				class="rounded-lg bg-surface-container px-4 py-2 text-on-surface-container"
-				on:click={() => dispatch('cancel')}
+				onclick={onCancel}
 			>
 				Cancel
 			</FlatButton>
 
 			<FlatButton
 				class="rounded-lg bg-surface-container px-4 py-2 text-on-surface-container"
-				on:click={() => (previewing = !previewing)}
+				onclick={() => (previewing = !previewing)}
 			>
 				Preview
 			</FlatButton>
@@ -112,7 +110,7 @@
 			<FlatButton
 				class="rounded-lg bg-surface px-4 py-2 text-on-surface"
 				{disabled}
-				on:click={clickSubmit}
+				onclick={clickSubmit}
 			>
 				Submit
 			</FlatButton>
diff --git a/src/lib/comments/CommentMeatballs.svelte b/src/lib/comments/CommentMeatballs.svelte
index cc24daf..bca862b 100644
--- a/src/lib/comments/CommentMeatballs.svelte
+++ b/src/lib/comments/CommentMeatballs.svelte
@@ -8,31 +8,44 @@
 	import { Clipboard } from '@capacitor/clipboard'
 	import { DocumentDuplicate, Flag, Pencil } from '@natoboram/heroicons.svelte/24/outline'
 	import { EllipsisVertical } from '@natoboram/heroicons.svelte/24/solid'
-	import type { CommentView, MyUserInfo } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
+	import type { CommentResponse, CommentView, MyUserInfo } from 'lemmy-js-client'
 
 	interface Props {
 		readonly class?: string | undefined
+		readonly commentView: CommentView
 		readonly jwt: string
 		readonly myUser: MyUserInfo
+		readonly onDelete: (deleted: CommentResponse) => void
+		readonly onDistinguish: (distinguished: CommentResponse) => void
+		readonly onEdit: () => void
+		readonly onError: (error: Error) => void
+		readonly onPurge: () => void
+		readonly onRemove: () => void
+		readonly onReport: () => void
+		readonly onResponse: (response: Response) => void
+		readonly onRestore: (response: CommentResponse) => void
+		readonly onSave: (comment: CommentResponse) => void
 		readonly position?: string
-		readonly commentView: CommentView
 	}
 
 	const {
 		class: className = undefined,
+		commentView,
 		jwt,
 		myUser,
+		onDelete,
+		onDistinguish,
+		onEdit,
+		onError,
+		onPurge,
+		onRemove,
+		onReport,
+		onResponse,
+		onRestore,
+		onSave,
 		position = 'left-8 -top-4',
-		commentView,
 	}: Props = $props()
 
-	const dispatch = createEventDispatcher<{
-		edit: undefined
-		purge: undefined
-		report: undefined
-	}>()
-
 	let opened = $state(false)
 
 	function onclick() {
@@ -44,12 +57,12 @@
 	)
 
 	function clickReport() {
-		dispatch('report')
+		onReport()
 		opened = false
 	}
 
 	function clickPurge() {
-		dispatch('purge')
+		onPurge()
 		opened = false
 	}
 
@@ -62,17 +75,17 @@
 <div class="relative flex flex-col items-center {className}">
 	{#if opened}
 		<div class="surface-container absolute z-10 rounded py-1 {position}">
-			<ClickOutside on:clickoutside={() => (opened = false)} class="flex flex-col">
-				<MeatballButton class="hover:surface surface-container" on:click={clickCopy}>
+			<ClickOutside onClickoutside={() => (opened = false)} class="flex flex-col">
+				<MeatballButton class="hover:surface surface-container" onclick={clickCopy}>
 					<DocumentDuplicate class="h-5 w-5" />
 					Copy markdown
 				</MeatballButton>
 
 				<!-- Authenticated -->
 				{#if jwt}
-					<SaveCommentButton {jwt} {commentView} on:error on:response on:save />
+					<SaveCommentButton {jwt} {commentView} {onError} {onResponse} {onSave} />
 
-					<MeatballButton class="hover:surface surface-container" on:click={clickReport}>
+					<MeatballButton class="hover:surface surface-container" onclick={clickReport}>
 						<Flag class="h-5 w-5" />
 						Report
 					</MeatballButton>
@@ -82,12 +95,23 @@
 				{#if commentView.comment.creator_id === myUser.local_user_view.person.id}
 					<hr class="my-2 border-muted" />
 
-					<MeatballButton class="hover:surface surface-container" on:click={() => dispatch('edit')}>
+					<MeatballButton
+						class="hover:surface surface-container"
+						onclick={() => {
+							onEdit()
+						}}
+					>
 						<Pencil class="h-5 w-5" />
 						Edit
 					</MeatballButton>
 
-					<DeleteCommentButton {jwt} on:delete on:error on:response comment={commentView.comment} />
+					<DeleteCommentButton
+						{jwt}
+						{onDelete}
+						{onError}
+						{onResponse}
+						comment={commentView.comment}
+					/>
 				{/if}
 
 				<!-- Moderator -->
@@ -98,20 +122,22 @@
 						{jwt}
 						class="hover:surface surface-container"
 						comment={commentView.comment}
-						on:error
-						on:distinguish
-						on:response
+						{onError}
+						{onDistinguish}
+						{onResponse}
 					/>
 
 					<RemoveCommentButton
 						{jwt}
+						{onError}
+						{onResponse}
+						{onRestore}
 						class="hover:surface surface-container"
 						comment={commentView.comment}
-						on:error
-						on:remove
-						on:remove={() => (opened = !opened)}
-						on:response
-						on:restore
+						onRemove={() => {
+							opened = !opened
+							onRemove()
+						}}
 					/>
 				{/if}
 
@@ -119,7 +145,7 @@
 				{#if myUser.local_user_view.local_user.admin}
 					<hr class="my-2 border-muted" />
 
-					<MeatballButton class="hover:surface surface-container" on:click={clickPurge}>
+					<MeatballButton class="hover:surface surface-container" onclick={clickPurge}>
 						Purge
 					</MeatballButton>
 				{/if}
diff --git a/src/lib/comments/CommentNode.svelte b/src/lib/comments/CommentNode.svelte
index d47e03e..6ccb6b4 100644
--- a/src/lib/comments/CommentNode.svelte
+++ b/src/lib/comments/CommentNode.svelte
@@ -8,6 +8,7 @@
 	import ReportForm from '$lib/posts/ReportPostForm.svelte'
 	import { siteHostname } from '$lib/utils/index.js'
 	import type {
+		BlockPersonResponse,
 		CommentResponse,
 		CommentView,
 		CommunityModeratorView,
@@ -17,41 +18,42 @@
 		Site,
 		SuccessResponse,
 	} from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
-	import CommentNode_1 from './CommentNode.svelte'
+	import CommentNodeSvelte from './CommentNode.svelte'
 	import PurgeCommentForm from './PurgeCommentForm.svelte'
 	import RemoveCommentForm from './RemoveCommentForm.svelte'
 	import type { CommentNode } from './comment_node.js'
 
 	interface Props {
-		readonly class?: string | undefined
 		readonly allLanguages: Language[]
 		readonly children: CommentNode[]
+		readonly class?: string | undefined
 		readonly commentView: CommentView
 		readonly jwt: string | undefined
 		readonly moderators: CommunityModeratorView[]
 		readonly myUser: MyUserInfo | undefined
+		readonly onBlockPerson?: (response: BlockPersonResponse) => void
+		readonly onComment: (response: CommentResponse) => void
+		readonly onPurge: (commentView: CommentView, response: SuccessResponse) => void
 		readonly personView: PersonView | undefined
 		readonly site: Site
 	}
 
 	let {
-		class: className = undefined,
 		allLanguages,
 		children,
+		class: className = undefined,
 		commentView = $bindable(),
 		jwt,
 		moderators,
 		myUser,
+		onBlockPerson = () => {},
+		onComment,
+		onPurge,
 		personView,
 		site,
 	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{
-		comment: CommentResponse
-		purge: { commentView: CommentView; response: SuccessResponse }
-	}>()
 
 	let botErrorMessage = $state('')
 	let editing = $state(false)
@@ -66,14 +68,14 @@
 	let reportPending = $state(false)
 	let topErrorMessage = $state('')
 
-	async function createComment(e: CustomEvent<{ content: string; languageId: number }>) {
+	async function createComment(content: string, languageId: number) {
 		if (!jwt) return (botErrorMessage = 'You must be logged in to comment.')
 
 		replyPending = true
 		const response = await client
 			.createComment({
-				content: e.detail.content,
-				language_id: e.detail.languageId,
+				content: content,
+				language_id: languageId,
 				parent_id: commentView.comment.id,
 				post_id: commentView.post.id,
 			})
@@ -82,7 +84,7 @@
 			})
 
 		if (response) {
-			dispatch('comment', response)
+			onComment(response)
 			replying = false
 		}
 		replyPending = false
@@ -111,14 +113,14 @@
 		return count
 	}
 
-	async function createCommentReport(e: CustomEvent<string>) {
+	async function createCommentReport(e: string) {
 		if (!jwt) return (botErrorMessage = 'You must be logged in to report comments.')
 
 		reportPending = true
 		const reported = await client
 			.createCommentReport({
 				comment_id: commentView.comment.id,
-				reason: e.detail,
+				reason: e,
 			})
 			.catch(async (e: Response) => {
 				botErrorMessage = await e.text()
@@ -142,15 +144,15 @@
 		return reported
 	}
 
-	async function editComment(e: CustomEvent<{ content: string; languageId: number }>) {
+	async function editComment(content: string, languageId: number) {
 		if (!jwt) return (botErrorMessage = 'You must be logged in to edit your comment.')
 
 		editPending = true
 		const response = await client
 			.editComment({
 				comment_id: commentView.comment.id,
-				content: e.detail.content,
-				language_id: e.detail.languageId,
+				content: content,
+				language_id: languageId,
 			})
 			.catch(async (e: Response) => {
 				botErrorMessage = await e.text()
@@ -165,12 +167,12 @@
 		return response
 	}
 
-	function onBotError(e: CustomEvent<Error>) {
-		return (botErrorMessage = e.detail.message)
+	function onBotError(e: Error) {
+		return (botErrorMessage = e.message)
 	}
 
-	function onTopError(e: CustomEvent<Error>) {
-		return (topErrorMessage = e.detail.message)
+	function onTopError(e: Error) {
+		return (topErrorMessage = e.message)
 	}
 
 	function toggleEditing() {
@@ -181,16 +183,16 @@
 		return (replying = !replying)
 	}
 
-	async function onBotResponse(e: CustomEvent<Response>) {
-		return (botErrorMessage = await e.detail.text())
+	async function onBotResponse(e: Response) {
+		return (botErrorMessage = await e.text())
 	}
 
-	async function onTopResponse(e: CustomEvent<Response>) {
-		return (topErrorMessage = await e.detail.text())
+	async function onTopResponse(e: Response) {
+		return (topErrorMessage = await e.text())
 	}
 
-	function onCommentResponse(e: CustomEvent<CommentResponse>) {
-		commentView = e.detail.comment_view
+	function onCommentResponse(e: CommentResponse) {
+		commentView = e.comment_view
 	}
 
 	function toggleReport() {
@@ -201,20 +203,20 @@
 		return (purging = !purging)
 	}
 
-	async function purgeComment(e: CustomEvent<string>) {
+	async function purgeComment(e: string) {
 		if (!jwt) return (botErrorMessage = 'You must be logged in to purge comments.')
 
 		purgePending = true
 		const purged = await client
 			.purgeComment({
 				comment_id: commentView.comment.id,
-				reason: e.detail,
+				reason: e,
 			})
 			.catch(async (e: Response) => void (botErrorMessage = await e.text()))
 
 		if (purged?.success) {
 			purging = false
-			dispatch('purge', { commentView, response: purged })
+			onPurge(commentView, purged)
 		}
 
 		purgePending = false
@@ -225,14 +227,14 @@
 		return (removing = !removing)
 	}
 
-	async function removeComment(e: CustomEvent<string>) {
+	async function removeComment(e: string) {
 		if (!jwt) return (botErrorMessage = 'You must be logged in to remove comments.')
 
 		removePending = true
 		const removed = await client
 			.removeComment({
 				comment_id: commentView.comment.id,
-				reason: e.detail,
+				reason: e,
 				removed: !commentView.comment.removed,
 			})
 			.catch(async (e: Response) => void (botErrorMessage = await e.text()))
@@ -252,13 +254,13 @@
 		{myUser}
 		{personView}
 		{site}
-		on:block_person
-		on:error={onTopError}
-		on:response={onTopResponse}
+		{onBlockPerson}
+		onError={onTopError}
+		onResponse={onTopResponse}
 	/>
 
 	{#if topErrorMessage}
-		<Dismissable on:dismiss={() => (topErrorMessage = '')} class="danger-container">
+		<Dismissable onDismiss={() => (topErrorMessage = '')} class="danger-container">
 			{topErrorMessage}
 		</Dismissable>
 	{/if}
@@ -271,8 +273,8 @@
 			content={commentView.comment.content}
 			disabled={editPending}
 			languageId={commentView.comment.language_id}
-			on:cancel={toggleEditing}
-			on:submit={editComment}
+			onCancel={toggleEditing}
+			onSubmit={editComment}
 		/>
 	{:else}
 		<Prose
@@ -285,42 +287,38 @@
 		{commentView}
 		{jwt}
 		{myUser}
-		on:delete={onCommentResponse}
-		on:distinguish={onCommentResponse}
-		on:edit={toggleEditing}
-		on:error={onBotError}
-		on:purge={togglePurge}
-		on:remove={toggleRemove}
-		on:reply={toggleReplying}
-		on:report={toggleReport}
-		on:response={onBotResponse}
-		on:restore={onCommentResponse}
-		on:save={onCommentResponse}
+		onError={onBotError}
+		onResponse={onBotResponse}
+		onDelete={onCommentResponse}
+		onDistinguish={onCommentResponse}
+		onEdit={toggleEditing}
+		onPurge={togglePurge}
+		onRemove={toggleRemove}
+		onReply={toggleReplying}
+		onReport={toggleReport}
+		onRestore={onCommentResponse}
+		onSave={onCommentResponse}
 	/>
 
 	{#if botErrorMessage}
-		<Dismissable on:dismiss={() => (botErrorMessage = '')} class="danger-container">
+		<Dismissable onDismiss={() => (botErrorMessage = '')} class="danger-container">
 			{botErrorMessage}
 		</Dismissable>
 	{/if}
 
 	<!-- Purging -->
 	{#if purging}
-		<PurgeCommentForm on:cancel={togglePurge} on:purge={purgeComment} disabled={purgePending} />
+		<PurgeCommentForm onCancel={togglePurge} onPurge={purgeComment} disabled={purgePending} />
 	{/if}
 
 	<!-- Removing -->
 	{#if removing}
-		<RemoveCommentForm
-			on:cancel={toggleRemove}
-			on:remove={removeComment}
-			disabled={removePending}
-		/>
+		<RemoveCommentForm onCancel={toggleRemove} onRemove={removeComment} disabled={removePending} />
 	{/if}
 
 	<!-- Reporting -->
 	{#if reporting}
-		<ReportForm on:cancel={toggleReport} on:report={createCommentReport} disabled={reportPending} />
+		<ReportForm onCancel={toggleReport} onReport={createCommentReport} disabled={reportPending} />
 	{/if}
 
 	<!-- Replying -->
@@ -330,15 +328,15 @@
 			{myUser}
 			content={''}
 			disabled={replyPending}
-			on:cancel={toggleReplying}
-			on:submit={createComment}
+			onCancel={toggleReplying}
+			onSubmit={createComment}
 		/>
 	{/if}
 
 	<!-- Children -->
 	<div class="ml-4 flex flex-col gap-2 border-l border-muted pl-4">
 		{#each children as child (child.view.comment.id)}
-			<CommentNode_1
+			<CommentNodeSvelte
 				{allLanguages}
 				{jwt}
 				{moderators}
@@ -346,8 +344,8 @@
 				{site}
 				children={child.children}
 				commentView={child.view}
-				on:comment
-				on:purge
+				{onComment}
+				{onPurge}
 				personView={undefined}
 			/>
 		{/each}
diff --git a/src/lib/comments/CommentSortSelector.svelte b/src/lib/comments/CommentSortSelector.svelte
index cf8892c..4d342e5 100644
--- a/src/lib/comments/CommentSortSelector.svelte
+++ b/src/lib/comments/CommentSortSelector.svelte
@@ -3,17 +3,15 @@
 	import { page } from '$app/stores'
 	import { isCommentSortType } from '$lib/utils/index.js'
 	import type { CommentSortType } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
 		readonly sort: CommentSortType
+		readonly onSort?: (sort: CommentSortType) => void
 	}
 
-	const { sort }: Props = $props()
+	const { sort, onSort = () => {} }: Props = $props()
 
-	let select: HTMLSelectElement = $state()
-
-	const dispatch = createEventDispatcher<{ sort: CommentSortType }>()
+	let select: HTMLSelectElement
 
 	let timeout: NodeJS.Timeout
 	function debounceChangeSort(url: URL) {
@@ -29,7 +27,7 @@
 			url.searchParams.set('sort', String(value))
 			await goto(url.toString(), { noScroll: true })
 			await invalidate('app:paginate')
-			dispatch('sort', value)
+			onSort(value)
 		}
 	}
 </script>
diff --git a/src/lib/comments/CommentTopBar.svelte b/src/lib/comments/CommentTopBar.svelte
index 7830b0e..aa4abd1 100644
--- a/src/lib/comments/CommentTopBar.svelte
+++ b/src/lib/comments/CommentTopBar.svelte
@@ -7,6 +7,7 @@
 	import { Trash } from '@natoboram/heroicons.svelte/20/solid'
 	import { Pencil } from '@natoboram/heroicons.svelte/24/outline'
 	import type {
+		BlockPersonResponse,
 		CommentView,
 		CommunityModeratorView,
 		MyUserInfo,
@@ -14,15 +15,31 @@
 		Site,
 	} from 'lemmy-js-client'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly commentView: CommentView
+		readonly jwt: string | undefined
+		readonly moderators: CommunityModeratorView[]
+		readonly myUser: MyUserInfo | undefined
+		readonly onBlockPerson: (response: BlockPersonResponse) => void
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
+		readonly personView: PersonView | undefined
+		readonly site: Site
+	}
 
-	export let commentView: CommentView
-	export let moderators: CommunityModeratorView[]
-	export let site: Site
-	export let jwt: string | undefined
-	export let myUser: MyUserInfo | undefined
-	export let personView: PersonView | undefined
+	const {
+		class: className = undefined,
+		commentView,
+		jwt,
+		moderators,
+		myUser,
+		onBlockPerson,
+		onError,
+		onResponse,
+		personView,
+		site,
+	}: Props = $props()
 
 	function commentLink(url: URL) {
 		const clone = new URL(url.href)
@@ -66,9 +83,9 @@
 				{jwt}
 				{myUser}
 				{personView}
-				on:block_person
-				on:error
-				on:response
+				{onBlockPerson}
+				{onError}
+				{onResponse}
 				personId={commentView.creator.id}
 			/>
 		{/if}
diff --git a/src/lib/comments/Comments.svelte b/src/lib/comments/Comments.svelte
index 799f3be..ba10187 100644
--- a/src/lib/comments/Comments.svelte
+++ b/src/lib/comments/Comments.svelte
@@ -1,17 +1,42 @@
 <script lang="ts">
 	import { CommentNode as CommentNodeSvelte } from '$lib/comments/index.js'
-	import type { CommunityModeratorView, Language, MyUserInfo, Site } from 'lemmy-js-client'
+	import type {
+		BlockPersonResponse,
+		CommentResponse,
+		CommentView,
+		CommunityModeratorView,
+		Language,
+		MyUserInfo,
+		Site,
+		SuccessResponse,
+	} from 'lemmy-js-client'
 	import type { CommentNode } from './comment_node.js'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly allLanguages: Language[]
+		readonly class?: string | undefined
+		readonly jwt: string | undefined
+		readonly moderators: CommunityModeratorView[]
+		readonly myUser: MyUserInfo | undefined
+		readonly onBlockPerson?: (response: BlockPersonResponse) => void
+		readonly onComment: (response: CommentResponse) => void
+		readonly onPurge?: (commentView: CommentView, response: SuccessResponse) => void
+		readonly site: Site
+		readonly tree: CommentNode[]
+	}
 
-	export let allLanguages: Language[]
-	export let jwt: string | undefined
-	export let moderators: CommunityModeratorView[]
-	export let myUser: MyUserInfo | undefined
-	export let site: Site
-	export let tree: CommentNode[]
+	const {
+		allLanguages,
+		class: className = undefined,
+		jwt,
+		moderators,
+		myUser,
+		onBlockPerson = () => {},
+		onComment,
+		onPurge = () => {},
+		site,
+		tree,
+	}: Props = $props()
 </script>
 
 <div class="flex flex-col gap-4 {className}">
@@ -21,12 +46,12 @@
 			{jwt}
 			{moderators}
 			{myUser}
+			{onBlockPerson}
+			{onComment}
+			{onPurge}
 			{site}
 			children={node.children}
 			commentView={node.view}
-			on:block_person
-			on:comment
-			on:purge
 			personView={undefined}
 		/>
 	{/each}
diff --git a/src/lib/comments/PurgeCommentForm.svelte b/src/lib/comments/PurgeCommentForm.svelte
index f378ce2..669b9e5 100644
--- a/src/lib/comments/PurgeCommentForm.svelte
+++ b/src/lib/comments/PurgeCommentForm.svelte
@@ -1,26 +1,21 @@
 <script lang="ts">
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
-	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
 		readonly disabled?: boolean
+		readonly onCancel: () => void
+		readonly onPurge: (reason: string) => void
 	}
 
-	const { disabled = false }: Props = $props()
+	const { disabled = false, onCancel, onPurge }: Props = $props()
 
 	const placeholders = ['Reason for purging this comment...', 'Why are you purging this comment?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
 
-	const dispatch = createEventDispatcher<{ cancel: undefined; purge: string }>()
-
 	let value = $state('')
 
 	function onSubmit() {
-		dispatch('purge', value)
-	}
-
-	function onCancel() {
-		dispatch('cancel')
+		onPurge(value)
 	}
 </script>
 
@@ -35,7 +30,7 @@
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-end gap-4">
-		<FlatButton type="button" class="surface-container rounded-lg" on:click={onCancel}>
+		<FlatButton type="button" class="surface-container rounded-lg" onclick={onCancel}>
 			Cancel
 		</FlatButton>
 		<FlatButton {disabled} type="submit" class="danger rounded-lg">Purge</FlatButton>
diff --git a/src/lib/comments/RemoveCommentForm.svelte b/src/lib/comments/RemoveCommentForm.svelte
index fc5f15b..30cec98 100644
--- a/src/lib/comments/RemoveCommentForm.svelte
+++ b/src/lib/comments/RemoveCommentForm.svelte
@@ -1,30 +1,26 @@
 <script lang="ts">
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import type { HTMLFormAttributes } from 'svelte/elements'
 
-	interface Props {
+	interface Props extends HTMLFormAttributes {
 		readonly disabled?: boolean
+		readonly onCancel: () => void
+		readonly onRemove: (reason: string) => void
 	}
 
-	const { disabled = false }: Props = $props()
+	const { disabled = false, onCancel, onRemove, ...props }: Props = $props()
 
 	const placeholders = ['Reason for removing this comment...', 'Why are you removing this comment?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
 
-	const dispatch = createEventDispatcher<{ cancel: undefined; remove: string }>()
-
 	let value = $state('')
 
 	function onSubmit() {
-		dispatch('remove', value)
-	}
-
-	function onCancel() {
-		dispatch('cancel')
+		onRemove(value)
 	}
 </script>
 
-<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit}>
+<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit} {...props}>
 	<!-- Input -->
 	<textarea
 		{disabled}
@@ -35,7 +31,7 @@
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-end gap-4">
-		<FlatButton type="button" class="surface-container rounded-lg" on:click={onCancel}>
+		<FlatButton type="button" class="surface-container rounded-lg" onclick={onCancel}>
 			Cancel
 		</FlatButton>
 		<FlatButton {disabled} type="submit" class="danger rounded-lg">Remove</FlatButton>
diff --git a/src/lib/comments/ReportCommentForm.svelte b/src/lib/comments/ReportCommentForm.svelte
index fb5fec5..caf51a2 100644
--- a/src/lib/comments/ReportCommentForm.svelte
+++ b/src/lib/comments/ReportCommentForm.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import type { HTMLFormAttributes } from 'svelte/elements'
 
-	interface Props {
+	interface Props extends HTMLFormAttributes {
 		readonly disabled?: boolean
+		readonly onCancel: () => void
+		readonly onReport: (reason: string) => void
 	}
 
-	const { disabled = false }: Props = $props()
+	const { disabled = false, onCancel, onReport, ...props }: Props = $props()
 
 	const placeholders = [
 		'Describe the violation',
@@ -31,20 +33,14 @@
 	]
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
 
-	const dispatch = createEventDispatcher<{ cancel: undefined; report: string }>()
-
 	let value = $state('')
 
 	function onSubmit() {
-		dispatch('report', value)
-	}
-
-	function onCancel() {
-		dispatch('cancel')
+		onReport(value)
 	}
 </script>
 
-<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit}>
+<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit} {...props}>
 	<!-- Input -->
 	<textarea
 		{disabled}
@@ -55,7 +51,7 @@
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-end gap-4">
-		<FlatButton type="button" class="surface-container rounded-lg" on:click={onCancel}>
+		<FlatButton type="button" class="surface-container rounded-lg" onclick={onCancel}>
 			Cancel
 		</FlatButton>
 		<FlatButton {disabled} type="submit" class="danger rounded-lg">Report</FlatButton>
diff --git a/src/lib/community/CommunityMeatballs.svelte b/src/lib/community/CommunityMeatballs.svelte
index dae5676..4982a0f 100644
--- a/src/lib/community/CommunityMeatballs.svelte
+++ b/src/lib/community/CommunityMeatballs.svelte
@@ -4,22 +4,44 @@
 	import FollowCommunityButton from '$lib/buttons/FollowCommunityButton.svelte'
 	import { getClientContext } from '$lib/contexts/index.js'
 	import { EllipsisVertical } from '@natoboram/heroicons.svelte/24/solid'
-	import type { CommunityId, CommunityView } from 'lemmy-js-client'
-
-	let className: string | undefined = 'w-6 h-6'
-	export { className as class }
+	import type {
+		BlockCommunityResponse,
+		CommunityId,
+		CommunityResponse,
+		CommunityView,
+	} from 'lemmy-js-client'
 
 	const client = getClientContext()
 
-	export let communityView: CommunityView | undefined
-	export let jwt: string
-	export let communityId: CommunityId
-	export let position = 'bottom-8'
+	interface Props {
+		readonly class?: string | undefined
+		readonly communityView: CommunityView | undefined
+		readonly jwt: string
+		readonly communityId: CommunityId
+		readonly position?: string
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
+		readonly onFollowCommunity: (response: CommunityResponse) => void
+		readonly onBlockCommunity: (response: BlockCommunityResponse) => void
+	}
+
+	const {
+		class: className = 'w-6 h-6',
+		communityId,
+		communityView,
+		jwt,
+		onBlockCommunity,
+		onError,
+		onFollowCommunity,
+		onResponse,
+		position = 'bottom-8',
+	}: Props = $props()
 
-	let communityViewPromise: Promise<CommunityView> | undefined =
-		communityView && Promise.resolve(communityView)
+	let communityViewPromise: Promise<CommunityView> | undefined = $state(
+		communityView && Promise.resolve(communityView),
+	)
 
-	let opened = false
+	let opened = $state(false)
 
 	function onclick() {
 		if (!opened && !communityViewPromise && jwt)
@@ -32,31 +54,31 @@
 <div class="relative flex flex-col items-center {className}">
 	{#if opened && communityViewPromise}
 		<div class="surface-container absolute z-10 rounded px-2 py-1 {position}">
-			<ClickOutside on:clickoutside={() => (opened = false)} class="flex flex-col items-stretch">
+			<ClickOutside onClickoutside={() => (opened = false)} class="flex flex-col items-stretch">
 				{#await communityViewPromise}
 					Loading...
 				{:then view}
 					<FollowCommunityButton
 						{jwt}
+						{onError}
+						{onFollowCommunity}
+						{onResponse}
 						communityView={view}
-						on:error
-						on:follow_community
-						on:response
 					/>
 
 					<BlockCommunityButton
 						{jwt}
+						{onBlockCommunity}
+						{onError}
+						{onResponse}
 						communityView={view}
-						on:block_community
-						on:error
-						on:response
 					/>
 				{/await}
 			</ClickOutside>
 		</div>
 	{/if}
 
-	<button on:click={onclick}>
+	<button {onclick}>
 		<EllipsisVertical />
 	</button>
 </div>
diff --git a/src/lib/person/PersonMeatballs.svelte b/src/lib/person/PersonMeatballs.svelte
index d26c410..9ac50da 100644
--- a/src/lib/person/PersonMeatballs.svelte
+++ b/src/lib/person/PersonMeatballs.svelte
@@ -3,22 +3,39 @@
 	import BlockPersonButton from '$lib/buttons/BlockPersonButton.svelte'
 	import { getClientContext } from '$lib/contexts/index.js'
 	import { EllipsisVertical } from '@natoboram/heroicons.svelte/24/solid'
-	import type { MyUserInfo, PersonId, PersonView } from 'lemmy-js-client'
-
-	let className: string | undefined = 'w-6 h-6'
-	export { className as class }
+	import type { BlockPersonResponse, MyUserInfo, PersonId, PersonView } from 'lemmy-js-client'
 
 	const client = getClientContext()
 
-	export let jwt: string
-	export let myUser: MyUserInfo
-	export let personId: PersonId
-	export let personView: PersonView | undefined
-	export let position = 'bottom-8'
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string
+		readonly myUser: MyUserInfo
+		readonly onBlockPerson: (response: BlockPersonResponse) => void
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
+		readonly personId: PersonId
+		readonly personView: PersonView | undefined
+		readonly position?: string
+	}
+
+	const {
+		class: className = 'w-6 h-6',
+		jwt,
+		myUser,
+		onBlockPerson,
+		onError,
+		onResponse,
+		personId,
+		personView,
+		position = 'bottom-8',
+	}: Props = $props()
 
-	let personViewPromise: Promise<PersonView> | undefined = personView && Promise.resolve(personView)
+	let personViewPromise: Promise<PersonView> | undefined = $state(
+		personView && Promise.resolve(personView),
+	)
 
-	let opened = false
+	let opened = $state(false)
 
 	function onclick() {
 		if (!opened && !personViewPromise && jwt)
@@ -31,16 +48,16 @@
 <div class="relative flex flex-col items-center {className}">
 	{#if opened && personViewPromise}
 		<div class="surface-container absolute z-10 rounded px-2 py-1 {position}">
-			<ClickOutside on:clickoutside={() => (opened = false)} class="flex flex-col">
+			<ClickOutside onClickoutside={() => (opened = false)} class="flex flex-col">
 				{#await personViewPromise}
 					Loading...
 				{:then view}
 					<BlockPersonButton
 						{jwt}
 						{myUser}
-						on:block_person
-						on:error
-						on:response
+						{onBlockPerson}
+						{onError}
+						{onResponse}
 						personView={view}
 					/>
 				{/await}
@@ -48,7 +65,7 @@
 		</div>
 	{/if}
 
-	<button on:click={onclick}>
+	<button {onclick}>
 		<EllipsisVertical />
 	</button>
 </div>
diff --git a/src/lib/posts/Post.svelte b/src/lib/posts/Post.svelte
index 7c897b9..7a6094a 100644
--- a/src/lib/posts/Post.svelte
+++ b/src/lib/posts/Post.svelte
@@ -8,17 +8,20 @@
 	import { communityLink, postLink } from '$lib/utils/index.js'
 	import { LockClosed, Star, Trash } from '@natoboram/heroicons.svelte/20/solid'
 	import type {
+		BlockCommunityResponse,
+		BlockPersonResponse,
 		CommentResponse,
 		CommunityModeratorView,
+		CommunityResponse,
 		CommunityView,
 		Language,
+		LanguageId,
 		MyUserInfo,
 		PersonView,
 		PostResponse,
 		PostView,
 		Site,
 	} from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
 	import PostBottomBar from './PostBottomBar.svelte'
 	import PostTopBar from './PostTopBar.svelte'
 	import PostUrl from './PostUrl.svelte'
@@ -26,31 +29,38 @@
 	import ReportPostForm from './ReportPostForm.svelte'
 
 	interface Props {
-		readonly class?: string | undefined
 		readonly allLanguages: Language[]
+		readonly class?: string | undefined
 		readonly communityView: CommunityView | undefined
 		readonly jwt: string | undefined
 		readonly moderators: CommunityModeratorView[]
 		readonly myUser: MyUserInfo | undefined
+		readonly onBlockCommunity?: (response: BlockCommunityResponse) => void
+		readonly onBlockPerson?: (response: BlockPersonResponse) => void
+		readonly onComment?: (comment: CommentResponse) => void
+		readonly onFollowCommunity?: (response: CommunityResponse) => void
+		readonly personView: PersonView | undefined
 		readonly postView: PostView
 		readonly site: Site
-		readonly personView: PersonView | undefined
 	}
 
 	let {
-		class: className = undefined,
 		allLanguages,
+		class: className = undefined,
 		communityView,
 		jwt,
 		moderators,
 		myUser,
+		onBlockCommunity = () => {},
+		onBlockPerson = () => {},
+		onComment = () => {},
+		onFollowCommunity = () => {},
+		personView,
 		postView = $bindable(),
 		site,
-		personView,
 	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{ comment: CommentResponse }>()
 
 	let commenting = $state(false)
 	let commentPending = $state(false)
@@ -62,14 +72,14 @@
 	let botErrorMessage = $state('')
 	let topErrorMessage = $state('')
 
-	async function createComment(e: CustomEvent<{ content: string; languageId: number }>) {
+	async function createComment(content: string, languageId: LanguageId) {
 		if (!jwt) return (botErrorMessage = 'You must be logged in to comment.')
 
 		commentPending = true
 		const response = await client
 			.createComment({
-				content: e.detail.content,
-				language_id: e.detail.languageId,
+				content: content,
+				language_id: languageId,
 				post_id: postView.post.id,
 			})
 			.catch(async (e: Response) => {
@@ -77,7 +87,7 @@
 			})
 
 		if (response) {
-			dispatch('comment', response)
+			onComment(response)
 			commenting = false
 		}
 
@@ -85,31 +95,31 @@
 		return response
 	}
 
-	function onBotError(event: CustomEvent<Error>) {
-		botErrorMessage = event.detail.message
+	function onBotError(event: Error) {
+		botErrorMessage = event.message
 	}
 
-	async function onBotResponse(event: CustomEvent<Response>) {
-		botErrorMessage = await event.detail.text()
+	async function onBotResponse(event: Response) {
+		botErrorMessage = await event.text()
 	}
 
-	function onTopError(event: CustomEvent<Error>) {
-		topErrorMessage = event.detail.message
+	function onTopError(event: Error) {
+		topErrorMessage = event.message
 	}
 
-	async function onTopResponse(event: CustomEvent<Response>) {
-		topErrorMessage = await event.detail.text()
+	async function onTopResponse(event: Response) {
+		topErrorMessage = await event.text()
 	}
 
-	async function createPostReport(e: CustomEvent<string>) {
+	async function createPostReport(e: string) {
 		if (!jwt) return (botErrorMessage = 'You must be logged in to report posts.')
-		if (!e.detail) return
+		if (!e) return
 
 		reportPending = true
 		const response = await client
 			.createPostReport({
 				post_id: postView.post.id,
-				reason: e.detail,
+				reason: e,
 			})
 			.catch(async (e: Response) => {
 				botErrorMessage = await e.text()
@@ -121,23 +131,23 @@
 		return response
 	}
 
-	function onPostReponse(event: CustomEvent<PostResponse>) {
-		postView = event.detail.post_view
+	function onPostReponse(event: PostResponse) {
+		postView = event.post_view
 	}
 
-	function onPostView(event: CustomEvent<PostView>) {
-		postView = event.detail
+	function onPostView(event: PostView) {
+		postView = event
 	}
 
-	async function purgePost(event: CustomEvent<string>) {
+	async function purgePost(event: string) {
 		if (!jwt) return (botErrorMessage = 'You must be logged in to purge posts.')
-		if (!event.detail) return
+		if (!event) return
 
 		purgePending = true
 		const purged = await client
 			.purgePost({
 				post_id: postView.post.id,
-				reason: event.detail,
+				reason: event,
 			})
 			.catch(async (e: Response) => {
 				botErrorMessage = await e.text()
@@ -151,6 +161,10 @@
 		purgePending = false
 		return purged
 	}
+
+	function onEdit() {
+		botErrorMessage = 'Editing posts is not yet supported.'
+	}
 </script>
 
 <article
@@ -162,18 +176,18 @@
 		{jwt}
 		{moderators}
 		{myUser}
+		{onBlockCommunity}
+		{onBlockPerson}
+		{onFollowCommunity}
 		{personView}
 		{postView}
 		{site}
-		on:block_community
-		on:block_person
-		on:error={onTopError}
-		on:follow_community
-		on:response={onTopResponse}
+		onError={onTopError}
+		onResponse={onTopResponse}
 	/>
 
 	{#if topErrorMessage}
-		<Dismissable class="danger-container" on:dismiss={() => (topErrorMessage = '')}>
+		<Dismissable class="danger-container" onDismiss={() => (topErrorMessage = '')}>
 			{topErrorMessage}
 		</Dismissable>
 	{/if}
@@ -251,21 +265,22 @@
 		{myUser}
 		{postView}
 		{site}
-		on:comment={() => (commenting = !commenting)}
-		on:delete={onPostReponse}
-		on:error={onBotError}
-		on:feature={onPostReponse}
-		on:lock={onPostReponse}
-		on:purge={() => (purging = !purging)}
-		on:read={onPostView}
-		on:remove={onPostReponse}
-		on:report={() => (reporting = !reporting)}
-		on:response={onBotResponse}
-		on:save={onPostReponse}
+		onComment={() => (commenting = !commenting)}
+		onDelete={onPostReponse}
+		onError={onBotError}
+		onFeature={onPostReponse}
+		onLock={onPostReponse}
+		onPurge={() => (purging = !purging)}
+		onRead={onPostView}
+		onRemove={onPostReponse}
+		onReport={() => (reporting = !reporting)}
+		onResponse={onBotResponse}
+		onSave={onPostReponse}
+		{onEdit}
 	/>
 
 	{#if botErrorMessage}
-		<Dismissable class="danger-container" on:dismiss={() => (botErrorMessage = '')}>
+		<Dismissable class="danger-container" onDismiss={() => (botErrorMessage = '')}>
 			{botErrorMessage}
 		</Dismissable>
 	{/if}
@@ -274,8 +289,8 @@
 	{#if purging}
 		<PurgePostForm
 			disabled={purgePending}
-			on:cancel={() => (purging = !purging)}
-			on:purge={purgePost}
+			onCancel={() => (purging = !purging)}
+			onPurge={purgePost}
 		/>
 	{/if}
 
@@ -283,8 +298,8 @@
 	{#if reporting}
 		<ReportPostForm
 			disabled={reportPending}
-			on:cancel={() => (reporting = !reporting)}
-			on:report={createPostReport}
+			onCancel={() => (reporting = !reporting)}
+			onReport={createPostReport}
 		/>
 	{/if}
 
@@ -295,8 +310,8 @@
 			{myUser}
 			content=""
 			disabled={commentPending}
-			on:cancel={() => (commenting = !commenting)}
-			on:submit={createComment}
+			onCancel={() => (commenting = !commenting)}
+			onSubmit={createComment}
 		/>
 	{/if}
 </article>
diff --git a/src/lib/posts/PostBottomBar.svelte b/src/lib/posts/PostBottomBar.svelte
index 92fb55c..615a811 100644
--- a/src/lib/posts/PostBottomBar.svelte
+++ b/src/lib/posts/PostBottomBar.svelte
@@ -3,22 +3,50 @@
 	import { postLink } from '$lib/utils/index.js'
 	import { ArrowDown, ArrowUp } from '@natoboram/heroicons.svelte/20/solid'
 	import { ChatBubbleLeft, ChatBubbleLeftEllipsis } from '@natoboram/heroicons.svelte/24/outline'
-	import type { MyUserInfo, PostView, Site } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
+	import type { MyUserInfo, PostResponse, PostView, Site } from 'lemmy-js-client'
 	import PostMeatballs from './PostMeatballs.svelte'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly jwt: string | undefined
 		readonly myUser: MyUserInfo | undefined
+		readonly onComment: () => void
+		readonly onDelete: (deleted: PostResponse) => void
+		readonly onEdit: () => void
+		readonly onError: (error: Error) => void
+		readonly onFeature: (featured: PostResponse) => void
+		readonly onLock: (locked: PostResponse) => void
+		readonly onPurge: () => void
+		readonly onRead: (post: PostView) => void
+		readonly onRemove: (post: PostResponse) => void
+		readonly onReport: () => void
+		readonly onResponse: (response: Response) => void
+		readonly onSave: (post: PostResponse) => void
 		readonly postView: PostView
 		readonly site: Site
 	}
 
-	let { class: className = undefined, jwt, myUser, postView = $bindable(), site }: Props = $props()
+	let {
+		class: className = undefined,
+		jwt,
+		myUser,
+		onComment,
+		onDelete,
+		onEdit,
+		onError,
+		onFeature,
+		onLock,
+		onPurge,
+		onRead,
+		onRemove,
+		onReport,
+		onResponse,
+		onSave,
+		postView = $bindable(),
+		site,
+	}: Props = $props()
 
 	const client = getClientContext()
-	const dispatch = createEventDispatcher<{ comment: undefined; response: Response; error: Error }>()
 
 	let votePending = $state(false)
 
@@ -33,13 +61,16 @@
 	}
 
 	async function likePost(score: -1 | 0 | 1) {
-		if (!jwt) return dispatch('error', new Error('You must be logged in to vote on posts.'))
+		if (!jwt) {
+			onError(new Error('You must be logged in to vote on posts.'))
+			return
+		}
 
 		votePending = true
 		const response = await client
 			.likePost({ post_id: postView.post.id, score: score })
 			.catch((e: unknown) => {
-				if (e instanceof Response) dispatch('response', e)
+				if (e instanceof Response) onResponse(e)
 			})
 
 		if (response) postView = response.post_view
@@ -78,7 +109,12 @@
 	</a>
 
 	{#if myUser}
-		<button class="flex flex-row items-center gap-2" onclick={() => dispatch('comment')}>
+		<button
+			class="flex flex-row items-center gap-2"
+			onclick={() => {
+				onComment()
+			}}
+		>
 			<ChatBubbleLeftEllipsis class="h-5 w-5" />
 			Reply
 		</button>
@@ -88,17 +124,17 @@
 				{jwt}
 				{myUser}
 				{postView}
-				on:delete
-				on:edit
-				on:error
-				on:feature
-				on:lock
-				on:purge
-				on:read
-				on:remove
-				on:report
-				on:response
-				on:save
+				{onDelete}
+				{onEdit}
+				{onError}
+				{onFeature}
+				{onLock}
+				{onPurge}
+				{onRead}
+				{onRemove}
+				{onReport}
+				{onResponse}
+				{onSave}
 			/>
 		{/if}
 	{/if}
diff --git a/src/lib/posts/PostMeatballs.svelte b/src/lib/posts/PostMeatballs.svelte
index a511cef..fb9e85f 100644
--- a/src/lib/posts/PostMeatballs.svelte
+++ b/src/lib/posts/PostMeatballs.svelte
@@ -9,19 +9,23 @@
 	import SavePostButton from '$lib/buttons/SavePostButton.svelte'
 	import { Flag, Pencil } from '@natoboram/heroicons.svelte/24/outline'
 	import { EllipsisVertical } from '@natoboram/heroicons.svelte/24/solid'
-	import type { MyUserInfo, PostView } from 'lemmy-js-client'
-	import { createEventDispatcher } from 'svelte'
-
-	const dispatch = createEventDispatcher<{
-		edit: undefined
-		purge: undefined
-		report: undefined
-	}>()
+	import type { MyUserInfo, PostResponse, PostView } from 'lemmy-js-client'
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly jwt: string
 		readonly myUser: MyUserInfo
+		readonly onDelete: (deleted: PostResponse) => void
+		readonly onEdit: () => void
+		readonly onError: (error: Error) => void
+		readonly onFeature: (featured: PostResponse) => void
+		readonly onLock: (locked: PostResponse) => void
+		readonly onPurge: () => void
+		readonly onRead: (post: PostView) => void
+		readonly onRemove: (post: PostResponse) => void
+		readonly onReport: () => void
+		readonly onResponse: (response: Response) => void
+		readonly onSave: (post: PostResponse) => void
 		readonly position?: string
 		readonly postView: PostView
 	}
@@ -30,6 +34,17 @@
 		class: className = undefined,
 		jwt,
 		myUser,
+		onDelete,
+		onEdit,
+		onError,
+		onFeature,
+		onLock,
+		onPurge,
+		onRead,
+		onRemove,
+		onReport,
+		onResponse,
+		onSave,
 		position = 'left-8 -top-4',
 		postView,
 	}: Props = $props()
@@ -45,7 +60,7 @@
 	)
 
 	function clickReport() {
-		dispatch('report')
+		onReport()
 		opened = false
 	}
 </script>
@@ -53,12 +68,12 @@
 <div class="relative flex flex-col items-center {className}">
 	{#if opened}
 		<div class="surface-container absolute z-10 rounded py-1 {position}">
-			<ClickOutside on:clickoutside={() => (opened = false)} class="flex flex-col">
+			<ClickOutside onClickoutside={() => (opened = false)} class="flex flex-col">
 				<!-- Authenticated -->
 				{#if jwt}
-					<MarkPostAsReadButton {jwt} {postView} on:error on:read on:response />
-					<SavePostButton {jwt} {postView} on:error on:response on:save />
-					<MeatballButton class="hover:surface surface-container" on:click={clickReport}>
+					<MarkPostAsReadButton {jwt} {postView} {onError} {onRead} {onResponse} />
+					<SavePostButton {jwt} {postView} {onError} {onResponse} {onSave} />
+					<MeatballButton class="hover:surface surface-container" onclick={clickReport}>
 						<Flag class="h-5 w-5" />
 						Report
 					</MeatballButton>
@@ -68,11 +83,16 @@
 				{#if postView.post.creator_id === myUser.local_user_view.person.id}
 					<hr class="my-2 border-muted" />
 
-					<MeatballButton class="hover:surface surface-container" on:click={() => dispatch('edit')}>
+					<MeatballButton
+						class="hover:surface surface-container"
+						onclick={() => {
+							onEdit()
+						}}
+					>
 						<Pencil class="h-5 w-5" />
 						Edit
 					</MeatballButton>
-					<DeletePostButton {jwt} on:delete on:error on:response post={postView.post} />
+					<DeletePostButton {jwt} {onDelete} {onError} {onResponse} post={postView.post} />
 				{/if}
 
 				<!-- Moderator -->
@@ -83,33 +103,29 @@
 						{jwt}
 						{postView}
 						class="hover:surface surface-container"
-						on:error
-						on:feature
-						on:response
+						{onError}
+						{onFeature}
+						{onResponse}
 						type="Community"
 					/>
 
 					<LockPostButton
 						{jwt}
 						class="hover:surface surface-container"
-						on:error
-						on:lock
-						on:response
+						{onError}
+						{onLock}
+						{onResponse}
 						post={postView.post}
-					>
-						Lock
-					</LockPostButton>
+					/>
 
 					<RemovePostButton
 						{jwt}
 						class="hover:surface surface-container"
-						on:error
-						on:remove
-						on:response
+						{onError}
+						{onRemove}
+						{onResponse}
 						post={postView.post}
-					>
-						Remove
-					</RemovePostButton>
+					/>
 				{/if}
 
 				<!-- Administrator -->
@@ -120,15 +136,17 @@
 						{jwt}
 						{postView}
 						class="hover:surface surface-container"
-						on:error
-						on:feature
-						on:response
+						{onError}
+						{onFeature}
+						{onResponse}
 						type="Local"
 					/>
 
 					<MeatballButton
 						class="hover:surface surface-container"
-						on:click={() => dispatch('purge')}
+						onclick={() => {
+							onPurge()
+						}}
 					>
 						Purge
 					</MeatballButton>
diff --git a/src/lib/posts/PostTopBar.svelte b/src/lib/posts/PostTopBar.svelte
index 06149b5..06a3978 100644
--- a/src/lib/posts/PostTopBar.svelte
+++ b/src/lib/posts/PostTopBar.svelte
@@ -4,7 +4,10 @@
 	import { communityLink, lemmyDate, postLink, timeAgo } from '$lib/utils/index.js'
 	import { Pencil } from '@natoboram/heroicons.svelte/24/outline'
 	import type {
+		BlockCommunityResponse,
+		BlockPersonResponse,
 		CommunityModeratorView,
+		CommunityResponse,
 		CommunityView,
 		MyUserInfo,
 		PersonView,
@@ -13,16 +16,37 @@
 	} from 'lemmy-js-client'
 	import PersonMeatballs from '../person/PersonMeatballs.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly communityView: CommunityView | undefined
+		readonly jwt: string | undefined
+		readonly moderators: CommunityModeratorView[]
+		readonly myUser: MyUserInfo | undefined
+		readonly onBlockCommunity: (response: BlockCommunityResponse) => void
+		readonly onBlockPerson: (response: BlockPersonResponse) => void
+		readonly onError: (error: Error) => void
+		readonly onFollowCommunity: (response: CommunityResponse) => void
+		readonly onResponse: (response: Response) => void
+		readonly personView: PersonView | undefined
+		readonly postView: PostView
+		readonly site: Site
+	}
 
-	export let communityView: CommunityView | undefined
-	export let jwt: string | undefined
-	export let moderators: CommunityModeratorView[]
-	export let myUser: MyUserInfo | undefined
-	export let personView: PersonView | undefined
-	export let postView: PostView
-	export let site: Site
+	const {
+		class: className = undefined,
+		communityView,
+		jwt,
+		moderators,
+		myUser,
+		onBlockCommunity,
+		onBlockPerson,
+		onError,
+		onFollowCommunity,
+		onResponse,
+		personView,
+		postView,
+		site,
+	}: Props = $props()
 
 	const dtf = Intl.DateTimeFormat('en-GB', {
 		year: 'numeric',
@@ -48,9 +72,11 @@
 				<CommunityMeatballs
 					{communityView}
 					{jwt}
+					{onBlockCommunity}
+					{onError}
+					{onFollowCommunity}
+					{onResponse}
 					communityId={postView.community.id}
-					on:block_community
-					on:follow_community
 					position="top-8"
 				/>
 			{/if}
@@ -76,9 +102,9 @@
 					{jwt}
 					{myUser}
 					{personView}
-					on:block_person
-					on:error
-					on:response
+					{onBlockPerson}
+					{onError}
+					{onResponse}
 					personId={postView.creator.id}
 					position="top-8"
 				/>
diff --git a/src/lib/posts/PostUrl.svelte b/src/lib/posts/PostUrl.svelte
index cbdefd6..61e5d52 100644
--- a/src/lib/posts/PostUrl.svelte
+++ b/src/lib/posts/PostUrl.svelte
@@ -3,14 +3,12 @@
 	import { ArrowTopRightOnSquare } from '@natoboram/heroicons.svelte/20/solid'
 	import type { PostView } from 'lemmy-js-client'
 
-	let className: string | undefined = undefined
-	export { className as class }
-
-	export let postView: PostView
+	interface Props {
+		readonly class?: string | undefined
+		readonly postView: PostView
+	}
 
-	$: url = getFirstUrl(postView)
-	$: videoType = url && getVideoType(url)
-	$: audioType = url && getAudioType(url)
+	const { class: className = undefined, postView }: Props = $props()
 
 	function getVideoType(url: URL) {
 		const found = Object.entries(videoTypes).find(([, extensions]) =>
@@ -33,10 +31,13 @@
 		if (url) return new URL(url)
 		else return
 	}
+	const url = $derived(getFirstUrl(postView))
+	const videoType = $derived(url && getVideoType(url))
+	const audioType = $derived(url && getAudioType(url))
 </script>
 
 {#if url && videoType}
-	<!-- svelte-ignore a11y-media-has-caption -->
+	<!-- svelte-ignore a11y_media_has_caption -->
 	<video controls={true} class="max-h-screen w-full object-contain {className}">
 		<source type={videoType} src={url.href} />
 	</video>
diff --git a/src/lib/posts/Posts.svelte b/src/lib/posts/Posts.svelte
index de87685..f741e13 100644
--- a/src/lib/posts/Posts.svelte
+++ b/src/lib/posts/Posts.svelte
@@ -25,40 +25,38 @@
 	export let postViews: PostView[]
 	export let site: Site
 
-	function onBlockCommunity(event: CustomEvent<BlockCommunityResponse>) {
-		if (!event.detail.blocked) return
+	function onBlockCommunity(event: BlockCommunityResponse) {
+		if (!event.blocked) return
 		postViews = postViews.filter(
-			postView => postView.community.id !== event.detail.community_view.community.id,
+			postView => postView.community.id !== event.community_view.community.id,
 		)
 
 		if (!myUser) return
 		myUser.community_blocks.push({
-			community: event.detail.community_view.community,
+			community: event.community_view.community,
 			person: myUser.local_user_view.person,
 		})
 		myUser = myUser
 	}
 
-	function onBlockPerson(event: CustomEvent<BlockPersonResponse>) {
-		if (!event.detail.blocked) return
+	function onBlockPerson(event: BlockPersonResponse) {
+		if (!event.blocked) return
 
 		if (!personView)
-			postViews = postViews.filter(
-				postView => postView.creator.id !== event.detail.person_view.person.id,
-			)
+			postViews = postViews.filter(postView => postView.creator.id !== event.person_view.person.id)
 
 		if (!myUser) return
 		myUser.person_blocks.push({
-			target: event.detail.person_view.person,
+			target: event.person_view.person,
 			person: myUser.local_user_view.person,
 		})
 		myUser = myUser
 	}
 
-	function onFollowCommunity(event: CustomEvent<CommunityResponse>) {
+	function onFollowCommunity(event: CommunityResponse) {
 		if (!myUser) return
 		myUser.follows.push({
-			community: event.detail.community_view.community,
+			community: event.community_view.community,
 			follower: myUser.local_user_view.person,
 		})
 	}
@@ -75,9 +73,9 @@
 			{personView}
 			{postView}
 			{site}
-			on:block_community={onBlockCommunity}
-			on:block_person={onBlockPerson}
-			on:follow_community={onFollowCommunity}
+			{onBlockCommunity}
+			{onBlockPerson}
+			{onFollowCommunity}
 		/>
 	{/each}
 </div>
diff --git a/src/lib/posts/PurgePostForm.svelte b/src/lib/posts/PurgePostForm.svelte
index 272c674..fbb17de 100644
--- a/src/lib/posts/PurgePostForm.svelte
+++ b/src/lib/posts/PurgePostForm.svelte
@@ -1,26 +1,21 @@
 <script lang="ts">
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
-	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
 		readonly disabled?: boolean
+		readonly onCancel: () => void
+		readonly onPurge: (reason: string) => void
 	}
 
-	const { disabled = false }: Props = $props()
+	const { disabled = false, onPurge, onCancel }: Props = $props()
 
 	const placeholders = ['Reason for purging this post...', 'Why are you purging this post?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
 
-	const dispatch = createEventDispatcher<{ cancel: undefined; purge: string }>()
-
 	let value = $state('')
 
 	function onSubmit() {
-		dispatch('purge', value)
-	}
-
-	function onCancel() {
-		dispatch('cancel')
+		onPurge(value)
 	}
 </script>
 
@@ -35,7 +30,7 @@
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-end gap-4">
-		<FlatButton type="button" class="surface-container rounded-lg" on:click={onCancel}>
+		<FlatButton type="button" class="surface-container rounded-lg" onclick={onCancel}>
 			Cancel
 		</FlatButton>
 		<FlatButton {disabled} type="submit" class="danger rounded-lg">Purge</FlatButton>
diff --git a/src/lib/posts/ReportPostForm.svelte b/src/lib/posts/ReportPostForm.svelte
index d96c0b9..07a4e8f 100644
--- a/src/lib/posts/ReportPostForm.svelte
+++ b/src/lib/posts/ReportPostForm.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import FlatButton from '$lib/buttons/FlatButton.svelte'
-	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
 		readonly disabled?: boolean
+		readonly onCancel: () => void
+		readonly onReport: (reason: string) => void
 	}
 
-	const { disabled = false }: Props = $props()
+	const { disabled = false, onCancel, onReport }: Props = $props()
 
 	const placeholders = [
 		'Describe the violation',
@@ -31,16 +32,10 @@
 	]
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
 
-	const dispatch = createEventDispatcher<{ cancel: undefined; report: string }>()
-
 	let value = $state('')
 
 	function onSubmit() {
-		dispatch('report', value)
-	}
-
-	function onCancel() {
-		dispatch('cancel')
+		onReport(value)
 	}
 </script>
 
@@ -55,7 +50,7 @@
 
 	<!-- Actions -->
 	<div class="flex flex-row items-center justify-end gap-4">
-		<FlatButton type="button" class="surface-container rounded-lg" on:click={onCancel}>
+		<FlatButton type="button" class="surface-container rounded-lg" onclick={onCancel}>
 			Cancel
 		</FlatButton>
 		<FlatButton {disabled} type="submit" class="danger rounded-lg">Report</FlatButton>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0ee8ec6..051f0d9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -26,7 +26,7 @@
 	})
 
 	async function submit() {
-		const inputUrl = input.indexOf('//') === -1 ? `https://${input}` : input
+		const inputUrl = !input.includes('//') ? `https://${input}` : input
 		const url = newUrl(inputUrl)
 		if (!url) {
 			message = 'Please enter a valid URL.'
diff --git a/src/routes/HomeSiteCard.svelte b/src/routes/HomeSiteCard.svelte
index f58662f..5d01e57 100644
--- a/src/routes/HomeSiteCard.svelte
+++ b/src/routes/HomeSiteCard.svelte
@@ -6,16 +6,27 @@
 	interface Props {
 		readonly class?: string | undefined
 		readonly homeSite: HomeSite
+		readonly onCurrent: (homeSite: HomeSite) => void
+		readonly onDefault: (homeSite: HomeSite) => void
+		readonly onDelete: (homeSite: HomeSite) => void
+		readonly onHide: (homeSite: HomeSite) => void
 	}
 
-	let { class: className = undefined, homeSite }: Props = $props()
+	const {
+		class: className = undefined,
+		homeSite,
+		onCurrent,
+		onDefault,
+		onDelete,
+		onHide,
+	}: Props = $props()
 
 	if (homeSite.hidden) throw new Error('Attempting to render a hidden home site.')
 </script>
 
 <div class="flex flex-col justify-between {className}">
 	<!-- Site infobanner -->
-	<SiteInfobanner {homeSite} on:current on:default on:delete on:hide />
+	<SiteInfobanner {homeSite} {onCurrent} {onDefault} {onDelete} {onHide} />
 
 	{#if homeSite.siteResponse.my_user}
 		<!-- User infobanner -->
diff --git a/src/routes/SiteInfobanner.svelte b/src/routes/SiteInfobanner.svelte
index db7cf9d..a9b643f 100644
--- a/src/routes/SiteInfobanner.svelte
+++ b/src/routes/SiteInfobanner.svelte
@@ -2,43 +2,46 @@
 	import type { HomeSite } from '$lib/preferences/index.js'
 	import { editHomeSite, removeHomeSite } from '$lib/preferences/index.js'
 	import { siteLink } from '$lib/utils/index.js'
-	import { createEventDispatcher } from 'svelte'
-
-	const dispatch = createEventDispatcher<{
-		current: HomeSite
-		default: HomeSite
-		delete: HomeSite
-		hide: HomeSite
-	}>()
 
 	interface Props {
 		readonly class?: string | undefined
 		readonly homeSite: HomeSite
+		readonly onCurrent: (homeSite: HomeSite) => void
+		readonly onDefault: (homeSite: HomeSite) => void
+		readonly onDelete: (homeSite: HomeSite) => void
+		readonly onHide: (homeSite: HomeSite) => void
 	}
 
-	const { class: className = undefined, homeSite }: Props = $props()
+	const {
+		class: className = undefined,
+		homeSite,
+		onCurrent,
+		onDefault,
+		onDelete,
+		onHide,
+	}: Props = $props()
 
-	async function onDefault() {
+	async function handleDefault() {
 		const newHomeSite = { ...homeSite, default: !homeSite.default }
 		await editHomeSite(newHomeSite)
-		dispatch('default', newHomeSite)
+		onDefault(newHomeSite)
 	}
 
-	async function onCurrent() {
+	async function handleCurrent() {
 		const newHomeSite = { ...homeSite, current: !homeSite.current }
 		await editHomeSite(newHomeSite)
-		dispatch('current', newHomeSite)
+		onCurrent(newHomeSite)
 	}
 
-	async function onHide() {
+	async function handleHide() {
 		const newHomeSite = { ...homeSite, hidden: !homeSite.hidden }
 		await editHomeSite(newHomeSite)
-		dispatch('hide', newHomeSite)
+		onHide(newHomeSite)
 	}
 
-	async function onDelete() {
+	async function handleDelete() {
 		await removeHomeSite(homeSite.siteResponse.site_view.site, homeSite.siteResponse.my_user)
-		dispatch('delete', homeSite)
+		onDelete(homeSite)
 	}
 </script>
 
@@ -75,7 +78,7 @@
 					class:primary-container={homeSite.default}
 					class:surface-container={!homeSite.default}
 					class="rounded-full px-2 py-1"
-					onclick={onDefault}
+					onclick={handleDefault}
 				>
 					Default
 				</button>
@@ -84,16 +87,16 @@
 					class:primary-container={homeSite.current}
 					class:surface-container={!homeSite.current}
 					class="rounded-full px-2 py-1"
-					onclick={onCurrent}
+					onclick={handleCurrent}
 				>
 					Current
 				</button>
 
-				<button class="surface-container hover:warning rounded-full px-2 py-1" onclick={onHide}
+				<button class="surface-container hover:warning rounded-full px-2 py-1" onclick={handleHide}
 					>Hide</button
 				>
 
-				<button class="surface-container hover:danger rounded-full px-2 py-1" onclick={onDelete}
+				<button class="surface-container hover:danger rounded-full px-2 py-1" onclick={handleDelete}
 					>Delete</button
 				>
 			</div>
diff --git a/src/routes/[site]/post/[post]/+page.svelte b/src/routes/[site]/post/[post]/+page.svelte
index c357e33..9180510 100644
--- a/src/routes/[site]/post/[post]/+page.svelte
+++ b/src/routes/[site]/post/[post]/+page.svelte
@@ -16,12 +16,16 @@
 	} from 'lemmy-js-client'
 	import type { PageData } from './$types.js'
 
-	export let data: PageData
+	interface Props {
+		readonly data: PageData
+	}
+
+	let { data = $bindable() }: Props = $props()
 
-	$: tree = buildCommentTree(data.comments, data.parent_id ?? 0)
+	const tree = $derived(buildCommentTree(data.comments, data.parent_id ?? 0))
 
-	function onComment(e: CustomEvent<CommentResponse>) {
-		data.comments.unshift(e.detail.comment_view)
+	function onComment(e: CommentResponse) {
+		data.comments.unshift(e.comment_view)
 		data = data
 	}
 
@@ -43,23 +47,19 @@
 			?.scrollIntoView({ block: 'start', behavior: 'smooth' })
 	}
 
-	function onBlockPerson(event: CustomEvent<BlockPersonResponse>) {
-		if (!event.detail.blocked) return
+	function onBlockPerson(event: BlockPersonResponse) {
+		if (!event.blocked) return
 
 		data.comments = data.comments.filter(
-			comment => comment.creator.id !== event.detail.person_view.person.id,
+			comment => comment.creator.id !== event.person_view.person.id,
 		)
 		data = data
 	}
 
-	export function onPurge(
-		event: CustomEvent<{ commentView: CommentView; response: SuccessResponse }>,
-	) {
-		if (!event.detail.response.success) return
+	export function onPurge(commentView: CommentView, response: SuccessResponse) {
+		if (!response.success) return
 
-		data.comments = data.comments.filter(
-			view => view.comment.id !== event.detail.commentView.comment.id,
-		)
+		data.comments = data.comments.filter(view => view.comment.id !== commentView.comment.id)
 		data = data
 	}
 
@@ -120,7 +120,7 @@
 			jwt={data.jwt}
 			moderators={data.moderators}
 			myUser={data.my_user}
-			on:comment={onComment}
+			{onComment}
 			personView={undefined}
 			postView={data.post_view}
 			site={data.site_view.site}
@@ -160,9 +160,9 @@
 			<PaginationBar
 				length={data.comments.length}
 				limit={data.limit ?? 50}
-				on:next={onNext}
-				on:previous={onPrevious}
-				on:first={onNext}
+				{onNext}
+				{onPrevious}
+				onFirst={onNext}
 			/>
 		{/if}
 
@@ -172,9 +172,9 @@
 			jwt={data.jwt}
 			moderators={data.moderators}
 			myUser={data.my_user}
-			on:block_person={onBlockPerson}
-			on:comment={onComment}
-			on:purge={onPurge}
+			{onBlockPerson}
+			{onComment}
+			{onPurge}
 			site={data.site_view.site}
 		/>
 
@@ -182,9 +182,9 @@
 			<PaginationBar
 				length={data.comments.length}
 				limit={data.limit ?? 50}
-				on:next={onNext}
-				on:previous={onPrevious}
-				on:first={onNext}
+				{onNext}
+				{onPrevious}
+				onFirst={onNext}
 			/>
 		{/if}
 	</main>
diff --git a/src/routes/[site]/search/+page.svelte b/src/routes/[site]/search/+page.svelte
index a31d812..478b737 100644
--- a/src/routes/[site]/search/+page.svelte
+++ b/src/routes/[site]/search/+page.svelte
@@ -12,15 +12,16 @@
 	import type { BlockCommunityResponse, CommentResponse, CommunityResponse } from 'lemmy-js-client'
 	import type { PageData } from './$types.js'
 
-	export let data: PageData
+	interface Props {
+		readonly data: PageData
+	}
+
+	let { data = $bindable() }: Props = $props()
 
-	$: tree = buildCommentTree(data.comments, undefined)
+	const tree = $derived(buildCommentTree(data.comments, undefined))
 
-	$: length = Math.max(
-		data.comments.length,
-		data.communities.length,
-		data.posts.length,
-		data.users.length,
+	const length = $derived(
+		Math.max(data.comments.length, data.communities.length, data.posts.length, data.users.length),
 	)
 
 	let paginationBarTop: HTMLElement
@@ -34,28 +35,28 @@
 		paginationBarBot.scrollIntoView({ block: 'start', behavior: 'smooth' })
 	}
 
-	function onBlock(event: CustomEvent<BlockCommunityResponse>) {
+	function onBlock(event: BlockCommunityResponse) {
 		const index = data.communities.findIndex(
-			view => view.community.id === event.detail.community_view.community.id,
+			view => view.community.id === event.community_view.community.id,
 		)
 		if (index === -1) return
 
-		data.communities[index] = event.detail.community_view
+		data.communities[index] = event.community_view
 		data = data
 	}
 
-	function onFollow(event: CustomEvent<CommunityResponse>) {
+	function onFollow(event: CommunityResponse) {
 		const index = data.communities.findIndex(
-			view => view.community.id === event.detail.community_view.community.id,
+			view => view.community.id === event.community_view.community.id,
 		)
 		if (index === -1) return
 
-		data.communities[index] = event.detail.community_view
+		data.communities[index] = event.community_view
 		data = data
 	}
 
-	function onComment(e: CustomEvent<CommentResponse>) {
-		data.comments.unshift(e.detail.comment_view)
+	function onComment(e: CommentResponse) {
+		data.comments.unshift(e.comment_view)
 		data = data
 	}
 </script>
@@ -82,9 +83,9 @@
 				{length}
 				bind:nav={paginationBarTop}
 				limit={data.limit ?? 10}
-				on:first={onNext}
-				on:next={onNext}
-				on:previous={onPrevious}
+				onFirst={onNext}
+				{onNext}
+				{onPrevious}
 			/>
 		{/if}
 
@@ -129,7 +130,7 @@
 				jwt={data.jwt}
 				moderators={[]}
 				myUser={data.my_user}
-				on:comment={onComment}
+				{onComment}
 				site={data.site_view.site}
 			/>
 		{/if}
@@ -150,9 +151,9 @@
 				{length}
 				bind:nav={paginationBarBot}
 				limit={data.limit ?? 10}
-				on:first={onNext}
-				on:next={onNext}
-				on:previous={onPrevious}
+				onFirst={onNext}
+				{onNext}
+				{onPrevious}
 			/>
 		{/if}
 	</div>
diff --git a/src/routes/debug/theme/+page.svelte b/src/routes/debug/theme/+page.svelte
index 8b2466f..d126c2a 100644
--- a/src/routes/debug/theme/+page.svelte
+++ b/src/routes/debug/theme/+page.svelte
@@ -3,7 +3,6 @@
 	import Post from '$lib/posts/Post.svelte'
 	import type { PageData } from './$types.js'
 	import BgColourTest from './BgColourTest.svelte'
-	import TextColourTests from './TextColourTests.svelte'
 
 	export let data: PageData
 </script>
@@ -103,9 +102,7 @@
 		class="bg-success text-on-success"
 		title="Success"
 		message="This is the colour of success."
-	>
-		<TextColourTests />
-	</BgColourTest>
+	></BgColourTest>
 
 	<BgColourTest
 		class="bg-success-container text-on-success-container"

From 0809415f383ddd497c8e944d16c6cf179dfd6382 Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Mon, 21 Oct 2024 01:29:46 -0400
Subject: [PATCH 06/13] =?UTF-8?q?=F0=9F=94=A7=20Move=20some=20scripts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index e78052d..e101699 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
 	"repository": "github:NatoBoram/Leanish",
 	"scripts": {
 		"act": "act --secret-file .env.local --var-file .env.vars.local",
+		"clean": "rm -rf .svelte-kit build dist node_modules playwright-report test-results",
 		"dev": "vite dev",
 		"dev:android": "pnpm run build:csr && cap run android",
 		"build": "vite build",
@@ -61,20 +62,21 @@
 		"package:watch": "svelte-kit sync && svelte-package -w",
 		"prepublishOnly": "BUILD_ADAPTER=node pnpm run build && pnpm run package",
 		"test": "pnpm run test:integration && pnpm run test:unit",
+		"test:integration": "playwright test",
+		"test:unit": "vitest --sequence.concurrent",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"lint:fix": "eslint --fix .; pnpm run format --list-different",
 		"format": "prettier --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest --sequence.concurrent",
 		"generate:android": "capacitor-assets generate --android --iconBackgroundColor '#171717' --iconBackgroundColorDark '#171717' --logoSplashScale 0.5 --splashBackgroundColor '#0A0A0A' --splashBackgroundColorDark '#0A0A0A'",
 		"generate:pwa": "capacitor-assets generate --pwa --pwaManifestPath static/manifest.webmanifest",
 		"ionic:build": "pnpm run build:csr",
 		"ionic:serve": "vite dev --host=0.0.0.0 --port=8100",
 		"docker:build": "docker build --secret id=BUILD_BASE --tag leanish .",
 		"docker:run": "docker run --publish 127.0.0.1:3000:3000 leanish",
-		"docker:kill": "docker ps --format '{{.Image}} {{.ID}}' | grep leanish | awk '{print $2}' | xargs docker kill"
+		"docker:kill": "docker ps --format '{{.Image}} {{.ID}}' | grep leanish | awk '{print $2}' | xargs docker kill",
+		"sync": "svelte-kit sync"
 	},
 	"dependencies": {
 		"@capacitor/android": "^6.1.2",

From a33d685ee09d5857caef8c36ec84953255618c5b Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Mon, 21 Oct 2024 01:49:12 -0400
Subject: [PATCH 07/13] =?UTF-8?q?=F0=9F=92=A9=20$props()=20as=20Props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 eslint.config.js                             |  6 +++++-
 src/lib/ClickOutside.svelte                  |  2 +-
 src/lib/Dismissable.svelte                   |  2 +-
 src/lib/LimitSelector.svelte                 |  2 +-
 src/lib/PaginationBar.svelte                 |  2 +-
 src/lib/QSelector.svelte                     |  2 +-
 src/lib/SearchTypeSelector.svelte            |  2 +-
 src/lib/ShowNsfwSelector.svelte              |  2 +-
 src/lib/SortSelector.svelte                  |  2 +-
 src/lib/Taglines.svelte                      |  2 +-
 src/lib/buttons/BlockCommunityButton.svelte  |  2 +-
 src/lib/buttons/BlockPersonButton.svelte     |  2 +-
 src/lib/buttons/DeleteCommentButton.svelte   |  2 +-
 src/lib/buttons/DeletePostButton.svelte      |  2 +-
 src/lib/buttons/DistinguishButton.svelte     |  2 +-
 src/lib/buttons/FeatureButton.svelte         |  2 +-
 src/lib/buttons/FlatButton.svelte            |  7 +++++--
 src/lib/buttons/FollowCommunityButton.svelte |  2 +-
 src/lib/buttons/LockPostButton.svelte        |  2 +-
 src/lib/buttons/MarkPostAsReadButton.svelte  |  4 ++--
 src/lib/buttons/MeatballButton.svelte        | 15 +++++++++++----
 src/lib/buttons/RemoveCommentButton.svelte   |  2 +-
 src/lib/buttons/RemovePostButton.svelte      |  2 +-
 src/lib/buttons/SaveCommentButton.svelte     |  2 +-
 src/lib/buttons/SavePostButton.svelte        |  2 +-
 src/lib/comments/CommentBottomBar.svelte     |  2 +-
 src/lib/comments/CommentForm.svelte          |  4 ++--
 src/lib/comments/CommentMeatballs.svelte     |  2 +-
 src/lib/comments/CommentNode.svelte          |  2 +-
 src/lib/comments/CommentSortSelector.svelte  |  2 +-
 src/lib/comments/CommentTopBar.svelte        |  2 +-
 src/lib/comments/Comments.svelte             |  2 +-
 src/lib/comments/PurgeCommentForm.svelte     |  2 +-
 src/lib/comments/RemoveCommentForm.svelte    |  4 ++--
 src/lib/comments/ReportCommentForm.svelte    |  4 ++--
 src/lib/community/CommunityMeatballs.svelte  |  2 +-
 src/lib/person/PersonMeatballs.svelte        |  2 +-
 src/lib/posts/Post.svelte                    |  2 +-
 src/lib/posts/PostBottomBar.svelte           |  2 +-
 src/lib/posts/PostMeatballs.svelte           |  2 +-
 src/lib/posts/PostTopBar.svelte              |  2 +-
 src/lib/posts/PostUrl.svelte                 |  2 +-
 src/lib/posts/PurgePostForm.svelte           |  2 +-
 src/lib/posts/ReportPostForm.svelte          |  2 +-
 src/routes/HomeSiteCard.svelte               |  2 +-
 src/routes/SiteInfobanner.svelte             |  2 +-
 src/routes/[site]/post/[post]/+page.svelte   |  2 +-
 src/routes/[site]/search/+page.svelte        |  2 +-
 src/routes/debug/theme/BgColourTest.svelte   |  2 +-
 49 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 1dccb4d..c878e82 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -67,7 +67,11 @@ export default tseslint.config(
 			parser: svelteParser,
 			parserOptions: { project: './tsconfig.eslint.json', parser: tseslint.parser },
 		},
-		rules: { 'svelte/no-at-html-tags': 'off' },
+		rules: {
+			'@typescript-eslint/no-empty-function': 'off', // This is how you do optional events in SvelteKit
+			'prefer-const': 'off', // This rule is broken when using `$props()`.
+			'svelte/no-at-html-tags': 'off',
+		},
 	},
 
 	{
diff --git a/src/lib/ClickOutside.svelte b/src/lib/ClickOutside.svelte
index 61abc8c..eb5c935 100644
--- a/src/lib/ClickOutside.svelte
+++ b/src/lib/ClickOutside.svelte
@@ -9,7 +9,7 @@
 		readonly onClickoutside: (event: MouseEvent) => void
 	}
 
-	const { class: className = '', children, onClickoutside }: Props = $props()
+	const { class: className = '', children, onClickoutside }: Props = $props() as Props
 
 	function handleClick(event: MouseEvent) {
 		if (!node.contains(event.target as Node)) onClickoutside(event)
diff --git a/src/lib/Dismissable.svelte b/src/lib/Dismissable.svelte
index 8f12e22..ed4c3ec 100644
--- a/src/lib/Dismissable.svelte
+++ b/src/lib/Dismissable.svelte
@@ -8,7 +8,7 @@
 		readonly onDismiss: () => void
 	}
 
-	const { class: className = undefined, children, onDismiss }: Props = $props()
+	const { class: className = undefined, children, onDismiss }: Props = $props() as Props
 </script>
 
 <div class="relative rounded-md p-4 pr-12 {className}">
diff --git a/src/lib/LimitSelector.svelte b/src/lib/LimitSelector.svelte
index 76ba83e..5ea97eb 100644
--- a/src/lib/LimitSelector.svelte
+++ b/src/lib/LimitSelector.svelte
@@ -7,7 +7,7 @@
 		readonly onLimit?: (limit: number) => void
 	}
 
-	const { limit, onLimit = () => {} }: Props = $props()
+	const { limit, onLimit = () => {} }: Props = $props() as Props
 
 	let input: HTMLInputElement
 
diff --git a/src/lib/PaginationBar.svelte b/src/lib/PaginationBar.svelte
index 140a4cd..ad4d219 100644
--- a/src/lib/PaginationBar.svelte
+++ b/src/lib/PaginationBar.svelte
@@ -26,7 +26,7 @@
 		onFirst,
 		onNext,
 		onPrevious,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	let input: HTMLInputElement
 
diff --git a/src/lib/QSelector.svelte b/src/lib/QSelector.svelte
index 656d209..34a7c72 100644
--- a/src/lib/QSelector.svelte
+++ b/src/lib/QSelector.svelte
@@ -7,7 +7,7 @@
 		readonly onQ?: (q: string) => void
 	}
 
-	let { q = $bindable(), onQ = () => {} }: Props = $props()
+	let { q = $bindable(), onQ = () => {} }: Props = $props() as Props
 
 	let input: HTMLInputElement
 	let timeout: NodeJS.Timeout
diff --git a/src/lib/SearchTypeSelector.svelte b/src/lib/SearchTypeSelector.svelte
index 1782f20..72a0dc8 100644
--- a/src/lib/SearchTypeSelector.svelte
+++ b/src/lib/SearchTypeSelector.svelte
@@ -10,7 +10,7 @@
 		readonly onSearch?: (search: SearchType) => void
 	}
 
-	const { name = 'type_', type_, onSearch = () => {} }: Props = $props()
+	const { name = 'type_', type_, onSearch = () => {} }: Props = $props() as Props
 
 	let select: HTMLSelectElement
 
diff --git a/src/lib/ShowNsfwSelector.svelte b/src/lib/ShowNsfwSelector.svelte
index 228be71..90a6a80 100644
--- a/src/lib/ShowNsfwSelector.svelte
+++ b/src/lib/ShowNsfwSelector.svelte
@@ -8,7 +8,7 @@
 		readonly onShowNsfw: (showNsfw: boolean) => void
 	}
 
-	const { class: className = undefined, showNsfw, onShowNsfw }: Props = $props()
+	const { class: className = undefined, showNsfw, onShowNsfw }: Props = $props() as Props
 	let checkbox: HTMLInputElement
 
 	let timeout: NodeJS.Timeout
diff --git a/src/lib/SortSelector.svelte b/src/lib/SortSelector.svelte
index 34d08db..237c7be 100644
--- a/src/lib/SortSelector.svelte
+++ b/src/lib/SortSelector.svelte
@@ -9,7 +9,7 @@
 		readonly onSort?: (sort: SortType) => void
 	}
 
-	const { sort, onSort = () => {} }: Props = $props()
+	const { sort, onSort = () => {} }: Props = $props() as Props
 
 	let select: HTMLSelectElement
 
diff --git a/src/lib/Taglines.svelte b/src/lib/Taglines.svelte
index aa7a598..2b7f81a 100644
--- a/src/lib/Taglines.svelte
+++ b/src/lib/Taglines.svelte
@@ -9,7 +9,7 @@
 		readonly taglines: Tagline[]
 	}
 
-	const { class: className = undefined, taglines }: Props = $props()
+	const { class: className = undefined, taglines }: Props = $props() as Props
 
 	// Start with a random tagline
 	let index = $state(Math.floor(Math.random() * taglines.length))
diff --git a/src/lib/buttons/BlockCommunityButton.svelte b/src/lib/buttons/BlockCommunityButton.svelte
index c5f840b..4457070 100644
--- a/src/lib/buttons/BlockCommunityButton.svelte
+++ b/src/lib/buttons/BlockCommunityButton.svelte
@@ -22,7 +22,7 @@
 		onBlockCommunity,
 		onError,
 		onResponse,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	async function blockCommunity(block: boolean, community_id: CommunityId) {
 		if (!jwt) {
diff --git a/src/lib/buttons/BlockPersonButton.svelte b/src/lib/buttons/BlockPersonButton.svelte
index 9a84803..15a19f7 100644
--- a/src/lib/buttons/BlockPersonButton.svelte
+++ b/src/lib/buttons/BlockPersonButton.svelte
@@ -24,7 +24,7 @@
 		onBlockPerson,
 		onError,
 		onResponse,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	let request: Promise<BlockPersonResponse> = $state(
 		Promise.resolve({
diff --git a/src/lib/buttons/DeleteCommentButton.svelte b/src/lib/buttons/DeleteCommentButton.svelte
index 5e675d6..a2b3833 100644
--- a/src/lib/buttons/DeleteCommentButton.svelte
+++ b/src/lib/buttons/DeleteCommentButton.svelte
@@ -22,7 +22,7 @@
 		onDelete,
 		onError,
 		onResponse,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/DeletePostButton.svelte b/src/lib/buttons/DeletePostButton.svelte
index 50c2433..932a8a6 100644
--- a/src/lib/buttons/DeletePostButton.svelte
+++ b/src/lib/buttons/DeletePostButton.svelte
@@ -22,7 +22,7 @@
 		onError,
 		onResponse,
 		post = $bindable(),
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/DistinguishButton.svelte b/src/lib/buttons/DistinguishButton.svelte
index 966a558..d79bca1 100644
--- a/src/lib/buttons/DistinguishButton.svelte
+++ b/src/lib/buttons/DistinguishButton.svelte
@@ -22,7 +22,7 @@
 		onDistinguish,
 		onError,
 		onResponse,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/FeatureButton.svelte b/src/lib/buttons/FeatureButton.svelte
index f794340..72b7396 100644
--- a/src/lib/buttons/FeatureButton.svelte
+++ b/src/lib/buttons/FeatureButton.svelte
@@ -23,7 +23,7 @@
 		onResponse,
 		postView = $bindable(),
 		type,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/FlatButton.svelte b/src/lib/buttons/FlatButton.svelte
index 52ff817..21da8be 100644
--- a/src/lib/buttons/FlatButton.svelte
+++ b/src/lib/buttons/FlatButton.svelte
@@ -7,9 +7,12 @@
 		readonly class?: string | undefined
 	}
 
-	const { children, class: className = undefined, ...props }: Props = $props()
+	const { children, class: className = undefined, ...attributes }: Props = $props() as Props
 </script>
 
-<button class="flex flex-row items-center justify-center gap-2 px-4 py-2 {className}" {...props}>
+<button
+	{...attributes}
+	class="flex flex-row items-center justify-center gap-2 px-4 py-2 {className}"
+>
 	{@render children?.()}
 </button>
diff --git a/src/lib/buttons/FollowCommunityButton.svelte b/src/lib/buttons/FollowCommunityButton.svelte
index 5af8588..5dc6de0 100644
--- a/src/lib/buttons/FollowCommunityButton.svelte
+++ b/src/lib/buttons/FollowCommunityButton.svelte
@@ -22,7 +22,7 @@
 		onError,
 		onResponse,
 		onFollowCommunity,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	async function followCommunity(follow: boolean, community_id: CommunityId) {
 		if (!jwt) {
diff --git a/src/lib/buttons/LockPostButton.svelte b/src/lib/buttons/LockPostButton.svelte
index b5e39eb..f85c259 100644
--- a/src/lib/buttons/LockPostButton.svelte
+++ b/src/lib/buttons/LockPostButton.svelte
@@ -22,7 +22,7 @@
 		onLock,
 		onResponse,
 		post = $bindable(),
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/MarkPostAsReadButton.svelte b/src/lib/buttons/MarkPostAsReadButton.svelte
index cc115c6..b560f73 100644
--- a/src/lib/buttons/MarkPostAsReadButton.svelte
+++ b/src/lib/buttons/MarkPostAsReadButton.svelte
@@ -14,14 +14,14 @@
 		readonly postView: PostView
 	}
 
-	let {
+	const {
 		class: className = undefined,
 		jwt,
 		onError,
 		onRead,
 		onResponse,
 		postView = $bindable(),
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/MeatballButton.svelte b/src/lib/buttons/MeatballButton.svelte
index 1e5b4ff..dc2e33f 100644
--- a/src/lib/buttons/MeatballButton.svelte
+++ b/src/lib/buttons/MeatballButton.svelte
@@ -4,15 +4,22 @@
 
 	interface Props extends HTMLButtonAttributes {
 		readonly children?: Snippet
-		readonly class?: string | undefined
-		readonly disabled?: boolean | null | undefined
 	}
 
-	const { children, class: className = undefined, disabled = undefined, ...props }: Props = $props()
+	const {
+		children,
+		class: className = undefined,
+		disabled,
+		onclick,
+		type,
+		...attributes
+	}: Props = $props() as Props
 </script>
 
 <button
-	{...props}
+	{...attributes}
+	{onclick}
+	{type}
 	class:muted={disabled}
 	class="flex flex-row items-center justify-start gap-2 whitespace-nowrap px-4 py-2 {className}"
 >
diff --git a/src/lib/buttons/RemoveCommentButton.svelte b/src/lib/buttons/RemoveCommentButton.svelte
index 7ef315a..4ad1313 100644
--- a/src/lib/buttons/RemoveCommentButton.svelte
+++ b/src/lib/buttons/RemoveCommentButton.svelte
@@ -24,7 +24,7 @@
 		onRemove,
 		onResponse,
 		onRestore,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/RemovePostButton.svelte b/src/lib/buttons/RemovePostButton.svelte
index f1c6797..42dcff7 100644
--- a/src/lib/buttons/RemovePostButton.svelte
+++ b/src/lib/buttons/RemovePostButton.svelte
@@ -22,7 +22,7 @@
 		onRemove,
 		onResponse,
 		post = $bindable(),
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/SaveCommentButton.svelte b/src/lib/buttons/SaveCommentButton.svelte
index a373d35..b3aa05e 100644
--- a/src/lib/buttons/SaveCommentButton.svelte
+++ b/src/lib/buttons/SaveCommentButton.svelte
@@ -22,7 +22,7 @@
 		onError,
 		onResponse,
 		onSave,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/SavePostButton.svelte b/src/lib/buttons/SavePostButton.svelte
index ddca12e..747172e 100644
--- a/src/lib/buttons/SavePostButton.svelte
+++ b/src/lib/buttons/SavePostButton.svelte
@@ -22,7 +22,7 @@
 		onResponse,
 		onSave,
 		postView = $bindable(),
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/comments/CommentBottomBar.svelte b/src/lib/comments/CommentBottomBar.svelte
index 0a2fb32..d862c09 100644
--- a/src/lib/comments/CommentBottomBar.svelte
+++ b/src/lib/comments/CommentBottomBar.svelte
@@ -39,7 +39,7 @@
 		onResponse,
 		onRestore,
 		onSave,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/comments/CommentForm.svelte b/src/lib/comments/CommentForm.svelte
index d7e89b4..d085beb 100644
--- a/src/lib/comments/CommentForm.svelte
+++ b/src/lib/comments/CommentForm.svelte
@@ -8,7 +8,7 @@
 		readonly content: string
 		readonly disabled: boolean
 		readonly myUser: MyUserInfo
-		readonly languageId?: any
+		readonly languageId?: LanguageId
 		readonly onSubmit: (content: string, languageId: LanguageId) => void
 		readonly onCancel: () => void
 	}
@@ -21,7 +21,7 @@
 		languageId = $bindable(myUser.discussion_languages[0] ?? 0),
 		onSubmit,
 		onCancel,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const myLanguages = $derived(
 		myUser.discussion_languages.flatMap(id => allLanguages.find(l => l.id === id) ?? []),
diff --git a/src/lib/comments/CommentMeatballs.svelte b/src/lib/comments/CommentMeatballs.svelte
index bca862b..8c3772e 100644
--- a/src/lib/comments/CommentMeatballs.svelte
+++ b/src/lib/comments/CommentMeatballs.svelte
@@ -44,7 +44,7 @@
 		onRestore,
 		onSave,
 		position = 'left-8 -top-4',
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	let opened = $state(false)
 
diff --git a/src/lib/comments/CommentNode.svelte b/src/lib/comments/CommentNode.svelte
index 6ccb6b4..64fcdfd 100644
--- a/src/lib/comments/CommentNode.svelte
+++ b/src/lib/comments/CommentNode.svelte
@@ -51,7 +51,7 @@
 		onPurge,
 		personView,
 		site,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/comments/CommentSortSelector.svelte b/src/lib/comments/CommentSortSelector.svelte
index 4d342e5..b35ff7e 100644
--- a/src/lib/comments/CommentSortSelector.svelte
+++ b/src/lib/comments/CommentSortSelector.svelte
@@ -9,7 +9,7 @@
 		readonly onSort?: (sort: CommentSortType) => void
 	}
 
-	const { sort, onSort = () => {} }: Props = $props()
+	const { sort, onSort = () => {} }: Props = $props() as Props
 
 	let select: HTMLSelectElement
 
diff --git a/src/lib/comments/CommentTopBar.svelte b/src/lib/comments/CommentTopBar.svelte
index aa4abd1..a15b1c2 100644
--- a/src/lib/comments/CommentTopBar.svelte
+++ b/src/lib/comments/CommentTopBar.svelte
@@ -39,7 +39,7 @@
 		onResponse,
 		personView,
 		site,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	function commentLink(url: URL) {
 		const clone = new URL(url.href)
diff --git a/src/lib/comments/Comments.svelte b/src/lib/comments/Comments.svelte
index ba10187..fc648c6 100644
--- a/src/lib/comments/Comments.svelte
+++ b/src/lib/comments/Comments.svelte
@@ -36,7 +36,7 @@
 		onPurge = () => {},
 		site,
 		tree,
-	}: Props = $props()
+	}: Props = $props() as Props
 </script>
 
 <div class="flex flex-col gap-4 {className}">
diff --git a/src/lib/comments/PurgeCommentForm.svelte b/src/lib/comments/PurgeCommentForm.svelte
index 669b9e5..89f3db4 100644
--- a/src/lib/comments/PurgeCommentForm.svelte
+++ b/src/lib/comments/PurgeCommentForm.svelte
@@ -7,7 +7,7 @@
 		readonly onPurge: (reason: string) => void
 	}
 
-	const { disabled = false, onCancel, onPurge }: Props = $props()
+	const { disabled = false, onCancel, onPurge }: Props = $props() as Props
 
 	const placeholders = ['Reason for purging this comment...', 'Why are you purging this comment?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
diff --git a/src/lib/comments/RemoveCommentForm.svelte b/src/lib/comments/RemoveCommentForm.svelte
index 30cec98..4f567c6 100644
--- a/src/lib/comments/RemoveCommentForm.svelte
+++ b/src/lib/comments/RemoveCommentForm.svelte
@@ -8,7 +8,7 @@
 		readonly onRemove: (reason: string) => void
 	}
 
-	const { disabled = false, onCancel, onRemove, ...props }: Props = $props()
+	const { disabled = false, onCancel, onRemove, ...attributes }: Props = $props() as Props
 
 	const placeholders = ['Reason for removing this comment...', 'Why are you removing this comment?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
@@ -20,7 +20,7 @@
 	}
 </script>
 
-<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit} {...props}>
+<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit} {...attributes}>
 	<!-- Input -->
 	<textarea
 		{disabled}
diff --git a/src/lib/comments/ReportCommentForm.svelte b/src/lib/comments/ReportCommentForm.svelte
index caf51a2..a9745fe 100644
--- a/src/lib/comments/ReportCommentForm.svelte
+++ b/src/lib/comments/ReportCommentForm.svelte
@@ -8,7 +8,7 @@
 		readonly onReport: (reason: string) => void
 	}
 
-	const { disabled = false, onCancel, onReport, ...props }: Props = $props()
+	const { disabled = false, onCancel, onReport, ...attributes }: Props = $props() as Props
 
 	const placeholders = [
 		'Describe the violation',
@@ -40,7 +40,7 @@
 	}
 </script>
 
-<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit} {...props}>
+<form class="flex flex-col justify-start gap-4" onsubmit={onSubmit} {...attributes}>
 	<!-- Input -->
 	<textarea
 		{disabled}
diff --git a/src/lib/community/CommunityMeatballs.svelte b/src/lib/community/CommunityMeatballs.svelte
index 4982a0f..f21eed2 100644
--- a/src/lib/community/CommunityMeatballs.svelte
+++ b/src/lib/community/CommunityMeatballs.svelte
@@ -35,7 +35,7 @@
 		onFollowCommunity,
 		onResponse,
 		position = 'bottom-8',
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	let communityViewPromise: Promise<CommunityView> | undefined = $state(
 		communityView && Promise.resolve(communityView),
diff --git a/src/lib/person/PersonMeatballs.svelte b/src/lib/person/PersonMeatballs.svelte
index 9ac50da..e5e9007 100644
--- a/src/lib/person/PersonMeatballs.svelte
+++ b/src/lib/person/PersonMeatballs.svelte
@@ -29,7 +29,7 @@
 		personId,
 		personView,
 		position = 'bottom-8',
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	let personViewPromise: Promise<PersonView> | undefined = $state(
 		personView && Promise.resolve(personView),
diff --git a/src/lib/posts/Post.svelte b/src/lib/posts/Post.svelte
index 7a6094a..de0690c 100644
--- a/src/lib/posts/Post.svelte
+++ b/src/lib/posts/Post.svelte
@@ -58,7 +58,7 @@
 		personView,
 		postView = $bindable(),
 		site,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/posts/PostBottomBar.svelte b/src/lib/posts/PostBottomBar.svelte
index 615a811..ea66096 100644
--- a/src/lib/posts/PostBottomBar.svelte
+++ b/src/lib/posts/PostBottomBar.svelte
@@ -44,7 +44,7 @@
 		onSave,
 		postView = $bindable(),
 		site,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const client = getClientContext()
 
diff --git a/src/lib/posts/PostMeatballs.svelte b/src/lib/posts/PostMeatballs.svelte
index fb9e85f..36ae872 100644
--- a/src/lib/posts/PostMeatballs.svelte
+++ b/src/lib/posts/PostMeatballs.svelte
@@ -47,7 +47,7 @@
 		onSave,
 		position = 'left-8 -top-4',
 		postView,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	let opened = $state(false)
 
diff --git a/src/lib/posts/PostTopBar.svelte b/src/lib/posts/PostTopBar.svelte
index 06a3978..d812fa3 100644
--- a/src/lib/posts/PostTopBar.svelte
+++ b/src/lib/posts/PostTopBar.svelte
@@ -46,7 +46,7 @@
 		personView,
 		postView,
 		site,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	const dtf = Intl.DateTimeFormat('en-GB', {
 		year: 'numeric',
diff --git a/src/lib/posts/PostUrl.svelte b/src/lib/posts/PostUrl.svelte
index 61e5d52..5bd78e0 100644
--- a/src/lib/posts/PostUrl.svelte
+++ b/src/lib/posts/PostUrl.svelte
@@ -8,7 +8,7 @@
 		readonly postView: PostView
 	}
 
-	const { class: className = undefined, postView }: Props = $props()
+	const { class: className = undefined, postView }: Props = $props() as Props
 
 	function getVideoType(url: URL) {
 		const found = Object.entries(videoTypes).find(([, extensions]) =>
diff --git a/src/lib/posts/PurgePostForm.svelte b/src/lib/posts/PurgePostForm.svelte
index fbb17de..0df29fa 100644
--- a/src/lib/posts/PurgePostForm.svelte
+++ b/src/lib/posts/PurgePostForm.svelte
@@ -7,7 +7,7 @@
 		readonly onPurge: (reason: string) => void
 	}
 
-	const { disabled = false, onPurge, onCancel }: Props = $props()
+	const { disabled = false, onPurge, onCancel }: Props = $props() as Props
 
 	const placeholders = ['Reason for purging this post...', 'Why are you purging this post?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
diff --git a/src/lib/posts/ReportPostForm.svelte b/src/lib/posts/ReportPostForm.svelte
index 07a4e8f..ef3b7ae 100644
--- a/src/lib/posts/ReportPostForm.svelte
+++ b/src/lib/posts/ReportPostForm.svelte
@@ -7,7 +7,7 @@
 		readonly onReport: (reason: string) => void
 	}
 
-	const { disabled = false, onCancel, onReport }: Props = $props()
+	const { disabled = false, onCancel, onReport }: Props = $props() as Props
 
 	const placeholders = [
 		'Describe the violation',
diff --git a/src/routes/HomeSiteCard.svelte b/src/routes/HomeSiteCard.svelte
index 5d01e57..b27ae45 100644
--- a/src/routes/HomeSiteCard.svelte
+++ b/src/routes/HomeSiteCard.svelte
@@ -19,7 +19,7 @@
 		onDefault,
 		onDelete,
 		onHide,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	if (homeSite.hidden) throw new Error('Attempting to render a hidden home site.')
 </script>
diff --git a/src/routes/SiteInfobanner.svelte b/src/routes/SiteInfobanner.svelte
index a9b643f..d48ee57 100644
--- a/src/routes/SiteInfobanner.svelte
+++ b/src/routes/SiteInfobanner.svelte
@@ -19,7 +19,7 @@
 		onDefault,
 		onDelete,
 		onHide,
-	}: Props = $props()
+	}: Props = $props() as Props
 
 	async function handleDefault() {
 		const newHomeSite = { ...homeSite, default: !homeSite.default }
diff --git a/src/routes/[site]/post/[post]/+page.svelte b/src/routes/[site]/post/[post]/+page.svelte
index 9180510..bdd6662 100644
--- a/src/routes/[site]/post/[post]/+page.svelte
+++ b/src/routes/[site]/post/[post]/+page.svelte
@@ -20,7 +20,7 @@
 		readonly data: PageData
 	}
 
-	let { data = $bindable() }: Props = $props()
+	let { data = $bindable() }: Props = $props() as Props
 
 	const tree = $derived(buildCommentTree(data.comments, data.parent_id ?? 0))
 
diff --git a/src/routes/[site]/search/+page.svelte b/src/routes/[site]/search/+page.svelte
index 478b737..6209c50 100644
--- a/src/routes/[site]/search/+page.svelte
+++ b/src/routes/[site]/search/+page.svelte
@@ -16,7 +16,7 @@
 		readonly data: PageData
 	}
 
-	let { data = $bindable() }: Props = $props()
+	let { data = $bindable() }: Props = $props() as Props
 
 	const tree = $derived(buildCommentTree(data.comments, undefined))
 
diff --git a/src/routes/debug/theme/BgColourTest.svelte b/src/routes/debug/theme/BgColourTest.svelte
index c7deab1..6fcbcbf 100644
--- a/src/routes/debug/theme/BgColourTest.svelte
+++ b/src/routes/debug/theme/BgColourTest.svelte
@@ -7,7 +7,7 @@
 		readonly message: string
 	}
 
-	const { class: className = '', title, message }: Props = $props()
+	const { class: className = '', title, message }: Props = $props() as Props
 </script>
 
 <div class="w-full p-4 {className}">

From 532daae765936fce77749cc0a3d67c5fc0d0b19c Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Mon, 21 Oct 2024 02:17:17 -0400
Subject: [PATCH 08/13] =?UTF-8?q?=E2=8F=AA=20$props()?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 eslint.config.js                             |  1 +
 src/lib/ClickOutside.svelte                  |  2 +-
 src/lib/Dismissable.svelte                   |  2 +-
 src/lib/Error.svelte                         |  4 +-
 src/lib/LimitSelector.svelte                 |  2 +-
 src/lib/PaginationBar.svelte                 |  6 ++-
 src/lib/ProfileMenu.svelte                   |  2 +-
 src/lib/QSelector.svelte                     |  2 +-
 src/lib/SearchTypeSelector.svelte            |  2 +-
 src/lib/ShowNsfwSelector.svelte              |  4 +-
 src/lib/SortSelector.svelte                  |  2 +-
 src/lib/Taglines.svelte                      |  2 +-
 src/lib/buttons/BlockCommunityButton.svelte  |  2 +-
 src/lib/buttons/BlockPersonButton.svelte     |  6 +--
 src/lib/buttons/DeleteCommentButton.svelte   |  2 +-
 src/lib/buttons/DeletePostButton.svelte      |  2 +-
 src/lib/buttons/DistinguishButton.svelte     |  2 +-
 src/lib/buttons/FeatureButton.svelte         |  2 +-
 src/lib/buttons/FlatButton.svelte            |  2 +-
 src/lib/buttons/FollowCommunityButton.svelte |  2 +-
 src/lib/buttons/LockPostButton.svelte        |  2 +-
 src/lib/buttons/MarkPostAsReadButton.svelte  |  2 +-
 src/lib/buttons/MeatballButton.svelte        |  2 +-
 src/lib/buttons/RemoveCommentButton.svelte   |  2 +-
 src/lib/buttons/RemovePostButton.svelte      |  2 +-
 src/lib/buttons/SaveCommentButton.svelte     |  2 +-
 src/lib/buttons/SavePostButton.svelte        |  2 +-
 src/lib/comments/CommentBottomBar.svelte     |  2 +-
 src/lib/comments/CommentForm.svelte          |  2 +-
 src/lib/comments/CommentMeatballs.svelte     |  2 +-
 src/lib/comments/CommentNode.svelte          |  2 +-
 src/lib/comments/CommentSortSelector.svelte  |  2 +-
 src/lib/comments/CommentTopBar.svelte        |  2 +-
 src/lib/comments/Comments.svelte             |  2 +-
 src/lib/comments/PurgeCommentForm.svelte     |  2 +-
 src/lib/comments/RemoveCommentForm.svelte    |  2 +-
 src/lib/comments/ReportCommentForm.svelte    |  2 +-
 src/lib/community/CommunityGrid.svelte       | 44 ++++++++++++++------
 src/lib/community/CommunityMeatballs.svelte  |  2 +-
 src/lib/person/PersonCard.svelte             | 41 ++++++++++++------
 src/lib/person/PersonGrid.svelte             | 30 +++++++++----
 src/lib/person/PersonMeatballs.svelte        |  2 +-
 src/lib/person/PersonSidebar.svelte          | 39 +++++++++++++----
 src/lib/posts/Post.svelte                    |  2 +-
 src/lib/posts/PostBottomBar.svelte           |  2 +-
 src/lib/posts/PostMeatballs.svelte           |  2 +-
 src/lib/posts/PostTopBar.svelte              |  2 +-
 src/lib/posts/PostUrl.svelte                 |  2 +-
 src/lib/posts/PurgePostForm.svelte           |  2 +-
 src/lib/posts/ReportPostForm.svelte          |  2 +-
 src/routes/+page.svelte                      | 10 ++---
 src/routes/HomeSiteCard.svelte               |  2 +-
 src/routes/SiteInfobanner.svelte             |  2 +-
 src/routes/[site]/+page.svelte               | 12 +++---
 src/routes/[site]/c/[community]/+page.svelte | 12 +++---
 src/routes/[site]/communities/+page.svelte   | 34 ++++++++-------
 src/routes/[site]/login/+page.svelte         |  2 +-
 src/routes/[site]/post/[post]/+page.svelte   |  2 +-
 src/routes/[site]/search/+page.svelte        |  8 ++--
 src/routes/[site]/u/[user]/+page.svelte      | 18 ++++----
 src/routes/debug/theme/BgColourTest.svelte   |  2 +-
 61 files changed, 224 insertions(+), 137 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index c878e82..86ea288 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -69,6 +69,7 @@ export default tseslint.config(
 		},
 		rules: {
 			'@typescript-eslint/no-empty-function': 'off', // This is how you do optional events in SvelteKit
+			'@typescript-eslint/no-unsafe-assignment': 'off', // This rule is broken when using `$props()`.
 			'prefer-const': 'off', // This rule is broken when using `$props()`.
 			'svelte/no-at-html-tags': 'off',
 		},
diff --git a/src/lib/ClickOutside.svelte b/src/lib/ClickOutside.svelte
index eb5c935..61abc8c 100644
--- a/src/lib/ClickOutside.svelte
+++ b/src/lib/ClickOutside.svelte
@@ -9,7 +9,7 @@
 		readonly onClickoutside: (event: MouseEvent) => void
 	}
 
-	const { class: className = '', children, onClickoutside }: Props = $props() as Props
+	const { class: className = '', children, onClickoutside }: Props = $props()
 
 	function handleClick(event: MouseEvent) {
 		if (!node.contains(event.target as Node)) onClickoutside(event)
diff --git a/src/lib/Dismissable.svelte b/src/lib/Dismissable.svelte
index ed4c3ec..8f12e22 100644
--- a/src/lib/Dismissable.svelte
+++ b/src/lib/Dismissable.svelte
@@ -8,7 +8,7 @@
 		readonly onDismiss: () => void
 	}
 
-	const { class: className = undefined, children, onDismiss }: Props = $props() as Props
+	const { class: className = undefined, children, onDismiss }: Props = $props()
 </script>
 
 <div class="relative rounded-md p-4 pr-12 {className}">
diff --git a/src/lib/Error.svelte b/src/lib/Error.svelte
index f19b514..55f1d95 100644
--- a/src/lib/Error.svelte
+++ b/src/lib/Error.svelte
@@ -42,7 +42,7 @@
 		Loading...
 	{:then [FlatButton, Spinner]}
 		<div class="flex gap-2 sm:flex-row">
-			<FlatButton class="base-container rounded" on:click={back}>
+			<FlatButton class="base-container rounded" onclick={back}>
 				{#if backing}
 					<Spinner />
 				{/if}
@@ -50,7 +50,7 @@
 				Back
 			</FlatButton>
 
-			<FlatButton class="primary rounded" on:click={refresh}>
+			<FlatButton class="primary rounded" onclick={refresh}>
 				{#if refreshing}
 					<Spinner />
 				{/if}
diff --git a/src/lib/LimitSelector.svelte b/src/lib/LimitSelector.svelte
index 5ea97eb..76ba83e 100644
--- a/src/lib/LimitSelector.svelte
+++ b/src/lib/LimitSelector.svelte
@@ -7,7 +7,7 @@
 		readonly onLimit?: (limit: number) => void
 	}
 
-	const { limit, onLimit = () => {} }: Props = $props() as Props
+	const { limit, onLimit = () => {} }: Props = $props()
 
 	let input: HTMLInputElement
 
diff --git a/src/lib/PaginationBar.svelte b/src/lib/PaginationBar.svelte
index ad4d219..723833f 100644
--- a/src/lib/PaginationBar.svelte
+++ b/src/lib/PaginationBar.svelte
@@ -18,15 +18,17 @@
 		readonly onNext: (destination: number) => void
 	}
 
+	$effect(() => void nav)
+
 	let {
 		class: className = undefined,
 		length,
 		limit,
-		nav = $bindable(undefined),
+		nav = $bindable(),
 		onFirst,
 		onNext,
 		onPrevious,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	let input: HTMLInputElement
 
diff --git a/src/lib/ProfileMenu.svelte b/src/lib/ProfileMenu.svelte
index 995c385..6f2f99b 100644
--- a/src/lib/ProfileMenu.svelte
+++ b/src/lib/ProfileMenu.svelte
@@ -43,7 +43,7 @@
 	{#if opened}
 		<ClickOutside
 			class="surface-container absolute left-0 top-[100%] z-10 mt-4 flex flex-col rounded"
-			on:clickoutside={onClick}
+			onClickoutside={onClick}
 		>
 			<a
 				href={personLink(site, myUser.local_user_view.person)}
diff --git a/src/lib/QSelector.svelte b/src/lib/QSelector.svelte
index 34a7c72..656d209 100644
--- a/src/lib/QSelector.svelte
+++ b/src/lib/QSelector.svelte
@@ -7,7 +7,7 @@
 		readonly onQ?: (q: string) => void
 	}
 
-	let { q = $bindable(), onQ = () => {} }: Props = $props() as Props
+	let { q = $bindable(), onQ = () => {} }: Props = $props()
 
 	let input: HTMLInputElement
 	let timeout: NodeJS.Timeout
diff --git a/src/lib/SearchTypeSelector.svelte b/src/lib/SearchTypeSelector.svelte
index 72a0dc8..1782f20 100644
--- a/src/lib/SearchTypeSelector.svelte
+++ b/src/lib/SearchTypeSelector.svelte
@@ -10,7 +10,7 @@
 		readonly onSearch?: (search: SearchType) => void
 	}
 
-	const { name = 'type_', type_, onSearch = () => {} }: Props = $props() as Props
+	const { name = 'type_', type_, onSearch = () => {} }: Props = $props()
 
 	let select: HTMLSelectElement
 
diff --git a/src/lib/ShowNsfwSelector.svelte b/src/lib/ShowNsfwSelector.svelte
index 90a6a80..b5b391b 100644
--- a/src/lib/ShowNsfwSelector.svelte
+++ b/src/lib/ShowNsfwSelector.svelte
@@ -5,10 +5,10 @@
 	interface Props {
 		readonly class?: string | undefined
 		readonly showNsfw: boolean
-		readonly onShowNsfw: (showNsfw: boolean) => void
+		readonly onShowNsfw?: (showNsfw: boolean) => void
 	}
 
-	const { class: className = undefined, showNsfw, onShowNsfw }: Props = $props() as Props
+	const { class: className = undefined, showNsfw, onShowNsfw = () => {} }: Props = $props()
 	let checkbox: HTMLInputElement
 
 	let timeout: NodeJS.Timeout
diff --git a/src/lib/SortSelector.svelte b/src/lib/SortSelector.svelte
index 237c7be..34d08db 100644
--- a/src/lib/SortSelector.svelte
+++ b/src/lib/SortSelector.svelte
@@ -9,7 +9,7 @@
 		readonly onSort?: (sort: SortType) => void
 	}
 
-	const { sort, onSort = () => {} }: Props = $props() as Props
+	const { sort, onSort = () => {} }: Props = $props()
 
 	let select: HTMLSelectElement
 
diff --git a/src/lib/Taglines.svelte b/src/lib/Taglines.svelte
index 2b7f81a..aa7a598 100644
--- a/src/lib/Taglines.svelte
+++ b/src/lib/Taglines.svelte
@@ -9,7 +9,7 @@
 		readonly taglines: Tagline[]
 	}
 
-	const { class: className = undefined, taglines }: Props = $props() as Props
+	const { class: className = undefined, taglines }: Props = $props()
 
 	// Start with a random tagline
 	let index = $state(Math.floor(Math.random() * taglines.length))
diff --git a/src/lib/buttons/BlockCommunityButton.svelte b/src/lib/buttons/BlockCommunityButton.svelte
index 4457070..c5f840b 100644
--- a/src/lib/buttons/BlockCommunityButton.svelte
+++ b/src/lib/buttons/BlockCommunityButton.svelte
@@ -22,7 +22,7 @@
 		onBlockCommunity,
 		onError,
 		onResponse,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	async function blockCommunity(block: boolean, community_id: CommunityId) {
 		if (!jwt) {
diff --git a/src/lib/buttons/BlockPersonButton.svelte b/src/lib/buttons/BlockPersonButton.svelte
index 15a19f7..d7757ca 100644
--- a/src/lib/buttons/BlockPersonButton.svelte
+++ b/src/lib/buttons/BlockPersonButton.svelte
@@ -24,7 +24,7 @@
 		onBlockPerson,
 		onError,
 		onResponse,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	let request: Promise<BlockPersonResponse> = $state(
 		Promise.resolve({
@@ -57,12 +57,12 @@
 	<FlatButton class={className}>Loading...</FlatButton>
 {:then response}
 	{#if response.blocked}
-		<FlatButton class={className} on:click={() => blockPerson(false, personView.person.id)}>
+		<FlatButton class={className} onclick={() => blockPerson(false, personView.person.id)}>
 			Blocked
 			<NoSymbol class="h-5 w-5 text-danger" />
 		</FlatButton>
 	{:else}
-		<FlatButton class={className} on:click={() => blockPerson(true, personView.person.id)}>
+		<FlatButton class={className} onclick={() => blockPerson(true, personView.person.id)}>
 			Block
 		</FlatButton>
 	{/if}
diff --git a/src/lib/buttons/DeleteCommentButton.svelte b/src/lib/buttons/DeleteCommentButton.svelte
index a2b3833..5e675d6 100644
--- a/src/lib/buttons/DeleteCommentButton.svelte
+++ b/src/lib/buttons/DeleteCommentButton.svelte
@@ -22,7 +22,7 @@
 		onDelete,
 		onError,
 		onResponse,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/DeletePostButton.svelte b/src/lib/buttons/DeletePostButton.svelte
index 932a8a6..50c2433 100644
--- a/src/lib/buttons/DeletePostButton.svelte
+++ b/src/lib/buttons/DeletePostButton.svelte
@@ -22,7 +22,7 @@
 		onError,
 		onResponse,
 		post = $bindable(),
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/DistinguishButton.svelte b/src/lib/buttons/DistinguishButton.svelte
index d79bca1..966a558 100644
--- a/src/lib/buttons/DistinguishButton.svelte
+++ b/src/lib/buttons/DistinguishButton.svelte
@@ -22,7 +22,7 @@
 		onDistinguish,
 		onError,
 		onResponse,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/FeatureButton.svelte b/src/lib/buttons/FeatureButton.svelte
index 72b7396..f794340 100644
--- a/src/lib/buttons/FeatureButton.svelte
+++ b/src/lib/buttons/FeatureButton.svelte
@@ -23,7 +23,7 @@
 		onResponse,
 		postView = $bindable(),
 		type,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/FlatButton.svelte b/src/lib/buttons/FlatButton.svelte
index 21da8be..3f29a58 100644
--- a/src/lib/buttons/FlatButton.svelte
+++ b/src/lib/buttons/FlatButton.svelte
@@ -7,7 +7,7 @@
 		readonly class?: string | undefined
 	}
 
-	const { children, class: className = undefined, ...attributes }: Props = $props() as Props
+	const { children, class: className = undefined, ...attributes }: Props = $props()
 </script>
 
 <button
diff --git a/src/lib/buttons/FollowCommunityButton.svelte b/src/lib/buttons/FollowCommunityButton.svelte
index 5dc6de0..5af8588 100644
--- a/src/lib/buttons/FollowCommunityButton.svelte
+++ b/src/lib/buttons/FollowCommunityButton.svelte
@@ -22,7 +22,7 @@
 		onError,
 		onResponse,
 		onFollowCommunity,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	async function followCommunity(follow: boolean, community_id: CommunityId) {
 		if (!jwt) {
diff --git a/src/lib/buttons/LockPostButton.svelte b/src/lib/buttons/LockPostButton.svelte
index f85c259..b5e39eb 100644
--- a/src/lib/buttons/LockPostButton.svelte
+++ b/src/lib/buttons/LockPostButton.svelte
@@ -22,7 +22,7 @@
 		onLock,
 		onResponse,
 		post = $bindable(),
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/MarkPostAsReadButton.svelte b/src/lib/buttons/MarkPostAsReadButton.svelte
index b560f73..fb630e8 100644
--- a/src/lib/buttons/MarkPostAsReadButton.svelte
+++ b/src/lib/buttons/MarkPostAsReadButton.svelte
@@ -21,7 +21,7 @@
 		onRead,
 		onResponse,
 		postView = $bindable(),
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/MeatballButton.svelte b/src/lib/buttons/MeatballButton.svelte
index dc2e33f..66038c2 100644
--- a/src/lib/buttons/MeatballButton.svelte
+++ b/src/lib/buttons/MeatballButton.svelte
@@ -13,7 +13,7 @@
 		onclick,
 		type,
 		...attributes
-	}: Props = $props() as Props
+	}: Props = $props()
 </script>
 
 <button
diff --git a/src/lib/buttons/RemoveCommentButton.svelte b/src/lib/buttons/RemoveCommentButton.svelte
index 4ad1313..7ef315a 100644
--- a/src/lib/buttons/RemoveCommentButton.svelte
+++ b/src/lib/buttons/RemoveCommentButton.svelte
@@ -24,7 +24,7 @@
 		onRemove,
 		onResponse,
 		onRestore,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/RemovePostButton.svelte b/src/lib/buttons/RemovePostButton.svelte
index 42dcff7..f1c6797 100644
--- a/src/lib/buttons/RemovePostButton.svelte
+++ b/src/lib/buttons/RemovePostButton.svelte
@@ -22,7 +22,7 @@
 		onRemove,
 		onResponse,
 		post = $bindable(),
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/SaveCommentButton.svelte b/src/lib/buttons/SaveCommentButton.svelte
index b3aa05e..a373d35 100644
--- a/src/lib/buttons/SaveCommentButton.svelte
+++ b/src/lib/buttons/SaveCommentButton.svelte
@@ -22,7 +22,7 @@
 		onError,
 		onResponse,
 		onSave,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/buttons/SavePostButton.svelte b/src/lib/buttons/SavePostButton.svelte
index 747172e..ddca12e 100644
--- a/src/lib/buttons/SavePostButton.svelte
+++ b/src/lib/buttons/SavePostButton.svelte
@@ -22,7 +22,7 @@
 		onResponse,
 		onSave,
 		postView = $bindable(),
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/comments/CommentBottomBar.svelte b/src/lib/comments/CommentBottomBar.svelte
index d862c09..0a2fb32 100644
--- a/src/lib/comments/CommentBottomBar.svelte
+++ b/src/lib/comments/CommentBottomBar.svelte
@@ -39,7 +39,7 @@
 		onResponse,
 		onRestore,
 		onSave,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/comments/CommentForm.svelte b/src/lib/comments/CommentForm.svelte
index d085beb..461f8e9 100644
--- a/src/lib/comments/CommentForm.svelte
+++ b/src/lib/comments/CommentForm.svelte
@@ -21,7 +21,7 @@
 		languageId = $bindable(myUser.discussion_languages[0] ?? 0),
 		onSubmit,
 		onCancel,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const myLanguages = $derived(
 		myUser.discussion_languages.flatMap(id => allLanguages.find(l => l.id === id) ?? []),
diff --git a/src/lib/comments/CommentMeatballs.svelte b/src/lib/comments/CommentMeatballs.svelte
index 8c3772e..bca862b 100644
--- a/src/lib/comments/CommentMeatballs.svelte
+++ b/src/lib/comments/CommentMeatballs.svelte
@@ -44,7 +44,7 @@
 		onRestore,
 		onSave,
 		position = 'left-8 -top-4',
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	let opened = $state(false)
 
diff --git a/src/lib/comments/CommentNode.svelte b/src/lib/comments/CommentNode.svelte
index 64fcdfd..6ccb6b4 100644
--- a/src/lib/comments/CommentNode.svelte
+++ b/src/lib/comments/CommentNode.svelte
@@ -51,7 +51,7 @@
 		onPurge,
 		personView,
 		site,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/comments/CommentSortSelector.svelte b/src/lib/comments/CommentSortSelector.svelte
index b35ff7e..4d342e5 100644
--- a/src/lib/comments/CommentSortSelector.svelte
+++ b/src/lib/comments/CommentSortSelector.svelte
@@ -9,7 +9,7 @@
 		readonly onSort?: (sort: CommentSortType) => void
 	}
 
-	const { sort, onSort = () => {} }: Props = $props() as Props
+	const { sort, onSort = () => {} }: Props = $props()
 
 	let select: HTMLSelectElement
 
diff --git a/src/lib/comments/CommentTopBar.svelte b/src/lib/comments/CommentTopBar.svelte
index a15b1c2..aa4abd1 100644
--- a/src/lib/comments/CommentTopBar.svelte
+++ b/src/lib/comments/CommentTopBar.svelte
@@ -39,7 +39,7 @@
 		onResponse,
 		personView,
 		site,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	function commentLink(url: URL) {
 		const clone = new URL(url.href)
diff --git a/src/lib/comments/Comments.svelte b/src/lib/comments/Comments.svelte
index fc648c6..ba10187 100644
--- a/src/lib/comments/Comments.svelte
+++ b/src/lib/comments/Comments.svelte
@@ -36,7 +36,7 @@
 		onPurge = () => {},
 		site,
 		tree,
-	}: Props = $props() as Props
+	}: Props = $props()
 </script>
 
 <div class="flex flex-col gap-4 {className}">
diff --git a/src/lib/comments/PurgeCommentForm.svelte b/src/lib/comments/PurgeCommentForm.svelte
index 89f3db4..669b9e5 100644
--- a/src/lib/comments/PurgeCommentForm.svelte
+++ b/src/lib/comments/PurgeCommentForm.svelte
@@ -7,7 +7,7 @@
 		readonly onPurge: (reason: string) => void
 	}
 
-	const { disabled = false, onCancel, onPurge }: Props = $props() as Props
+	const { disabled = false, onCancel, onPurge }: Props = $props()
 
 	const placeholders = ['Reason for purging this comment...', 'Why are you purging this comment?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
diff --git a/src/lib/comments/RemoveCommentForm.svelte b/src/lib/comments/RemoveCommentForm.svelte
index 4f567c6..de6eb63 100644
--- a/src/lib/comments/RemoveCommentForm.svelte
+++ b/src/lib/comments/RemoveCommentForm.svelte
@@ -8,7 +8,7 @@
 		readonly onRemove: (reason: string) => void
 	}
 
-	const { disabled = false, onCancel, onRemove, ...attributes }: Props = $props() as Props
+	const { disabled = false, onCancel, onRemove, ...attributes }: Props = $props()
 
 	const placeholders = ['Reason for removing this comment...', 'Why are you removing this comment?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
diff --git a/src/lib/comments/ReportCommentForm.svelte b/src/lib/comments/ReportCommentForm.svelte
index a9745fe..13c7165 100644
--- a/src/lib/comments/ReportCommentForm.svelte
+++ b/src/lib/comments/ReportCommentForm.svelte
@@ -8,7 +8,7 @@
 		readonly onReport: (reason: string) => void
 	}
 
-	const { disabled = false, onCancel, onReport, ...attributes }: Props = $props() as Props
+	const { disabled = false, onCancel, onReport, ...attributes }: Props = $props()
 
 	const placeholders = [
 		'Describe the violation',
diff --git a/src/lib/community/CommunityGrid.svelte b/src/lib/community/CommunityGrid.svelte
index 5c26b7f..b52c11f 100644
--- a/src/lib/community/CommunityGrid.svelte
+++ b/src/lib/community/CommunityGrid.svelte
@@ -1,16 +1,36 @@
 <script lang="ts">
 	import { communityLink, communityUri } from '$lib/utils/index.js'
 	import { EyeSlash, NoSymbol, ShieldCheck, Trash } from '@natoboram/heroicons.svelte/24/solid'
-	import type { CommunityView, Site } from 'lemmy-js-client'
+	import type {
+		BlockCommunityResponse,
+		CommunityResponse,
+		CommunityView,
+		Site,
+	} from 'lemmy-js-client'
 	import CommunityIcon from './CommunityIcon.svelte'
 	import CommunityMeatballs from './CommunityMeatballs.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
-
-	export let communityViews: CommunityView[]
-	export let jwt: string | undefined
-	export let site: Site
+	interface Props {
+		readonly class?: string | undefined
+		readonly communityViews: CommunityView[]
+		readonly jwt: string | undefined
+		readonly onBlockCommunity: (response: BlockCommunityResponse) => void
+		readonly onError?: (error: Error) => void
+		readonly onFollowCommunity: (response: CommunityResponse) => void
+		readonly onResponse?: (response: Response) => void
+		readonly site: Site
+	}
+
+	let {
+		class: className = undefined,
+		communityViews,
+		jwt,
+		onBlockCommunity,
+		onError = () => {},
+		onFollowCommunity,
+		onResponse = () => {},
+		site,
+	}: Props = $props()
 </script>
 
 <div class="w-full overflow-x-auto">
@@ -102,12 +122,12 @@
 							<CommunityMeatballs
 								{communityView}
 								{jwt}
-								position="right-8 -top-4"
+								{onBlockCommunity}
+								{onError}
+								{onFollowCommunity}
+								{onResponse}
 								communityId={communityView.community.id}
-								on:block_community
-								on:error
-								on:follow_community
-								on:response
+								position="right-8 -top-4"
 							/>
 						{/if}
 					</td>
diff --git a/src/lib/community/CommunityMeatballs.svelte b/src/lib/community/CommunityMeatballs.svelte
index f21eed2..4982a0f 100644
--- a/src/lib/community/CommunityMeatballs.svelte
+++ b/src/lib/community/CommunityMeatballs.svelte
@@ -35,7 +35,7 @@
 		onFollowCommunity,
 		onResponse,
 		position = 'bottom-8',
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	let communityViewPromise: Promise<CommunityView> | undefined = $state(
 		communityView && Promise.resolve(communityView),
diff --git a/src/lib/person/PersonCard.svelte b/src/lib/person/PersonCard.svelte
index 65302ce..7ecd2e0 100644
--- a/src/lib/person/PersonCard.svelte
+++ b/src/lib/person/PersonCard.svelte
@@ -1,21 +1,35 @@
 <script lang="ts">
 	import { toSuffixNumber } from '$lib/utils/index.js'
-	import type { MyUserInfo, PersonView, Site } from 'lemmy-js-client'
+	import type { BlockPersonResponse, MyUserInfo, PersonView, Site } from 'lemmy-js-client'
 	import PersonIcon from './PersonIcon.svelte'
 	import PersonMeatballs from './PersonMeatballs.svelte'
 	import PersonUri from './PersonUri.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly bannerClass?: string | undefined
+		readonly class?: string | undefined
+		readonly jwt: string | undefined
+		readonly myUser: MyUserInfo | undefined
+		readonly onBlockPerson: (response: BlockPersonResponse) => void
+		readonly onError: (error: Error) => void
+		readonly onResponse: (response: Response) => void
+		readonly personView: PersonView
+		readonly site: Site
+	}
 
-	export let bannerClass: string | undefined = undefined
+	let {
+		bannerClass = undefined,
+		class: className = undefined,
+		jwt,
+		myUser,
+		onBlockPerson,
+		onError,
+		onResponse,
+		personView,
+		site,
+	}: Props = $props()
 
-	export let myUser: MyUserInfo | undefined
-	export let personView: PersonView
-	export let site: Site
-	export let jwt: string | undefined
-
-	let imgError: Event & { currentTarget: Element & EventTarget }
+	let imgError: (Event & { currentTarget: Element & EventTarget }) | undefined = $state()
 </script>
 
 <div class="base-container relative p-4 {className}">
@@ -23,7 +37,7 @@
 		<img
 			alt="banner"
 			class="absolute left-0 right-0 top-0 h-32 w-full object-cover {bannerClass}"
-			on:error={e => (imgError = e)}
+			onerror={e => (imgError = e)}
 			src={personView.person.banner}
 		/>
 	{:else}
@@ -57,8 +71,11 @@
 				<PersonMeatballs
 					{jwt}
 					{myUser}
-					personId={personView.person.id}
+					{onBlockPerson}
+					{onError}
+					{onResponse}
 					{personView}
+					personId={personView.person.id}
 					position="-top-4 left-8"
 				/>
 			{/if}
diff --git a/src/lib/person/PersonGrid.svelte b/src/lib/person/PersonGrid.svelte
index 1abd6a3..c86492b 100644
--- a/src/lib/person/PersonGrid.svelte
+++ b/src/lib/person/PersonGrid.svelte
@@ -1,18 +1,32 @@
 <script lang="ts">
-	import type { MyUserInfo, PersonView, Site } from 'lemmy-js-client'
+	import type { BlockPersonResponse, MyUserInfo, PersonView, Site } from 'lemmy-js-client'
 	import PersonCard from './PersonCard.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string | undefined
+		readonly myUser: MyUserInfo | undefined
+		readonly onBlockPerson?: (response: BlockPersonResponse) => void
+		readonly onError?: (error: Error) => void
+		readonly onResponse?: (response: Response) => void
+		readonly personViews: PersonView[]
+		readonly site: Site
+	}
 
-	export let personViews: PersonView[]
-	export let myUser: MyUserInfo | undefined
-	export let site: Site
-	export let jwt: string | undefined
+	let {
+		class: className = undefined,
+		jwt,
+		myUser,
+		onBlockPerson = () => {},
+		onError = () => {},
+		onResponse = () => {},
+		personViews,
+		site,
+	}: Props = $props()
 </script>
 
 <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 {className}">
 	{#each personViews as view (view.person.id)}
-		<PersonCard personView={view} {myUser} {site} {jwt} />
+		<PersonCard personView={view} {myUser} {site} {jwt} {onBlockPerson} {onError} {onResponse} />
 	{/each}
 </div>
diff --git a/src/lib/person/PersonMeatballs.svelte b/src/lib/person/PersonMeatballs.svelte
index e5e9007..9ac50da 100644
--- a/src/lib/person/PersonMeatballs.svelte
+++ b/src/lib/person/PersonMeatballs.svelte
@@ -29,7 +29,7 @@
 		personId,
 		personView,
 		position = 'bottom-8',
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	let personViewPromise: Promise<PersonView> | undefined = $state(
 		personView && Promise.resolve(personView),
diff --git a/src/lib/person/PersonSidebar.svelte b/src/lib/person/PersonSidebar.svelte
index 93fb6b5..b83bc89 100644
--- a/src/lib/person/PersonSidebar.svelte
+++ b/src/lib/person/PersonSidebar.svelte
@@ -1,19 +1,42 @@
 <script lang="ts">
 	import Prose from '$lib/Prose.svelte'
-	import type { MyUserInfo, PersonView, Site } from 'lemmy-js-client'
+	import type { BlockPersonResponse, MyUserInfo, PersonView, Site } from 'lemmy-js-client'
 	import PersonCard from './PersonCard.svelte'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string | undefined
+		readonly myUser: MyUserInfo | undefined
+		readonly personView: PersonView
+		readonly site: Site
+		readonly onBlockPerson?: (response: BlockPersonResponse) => void
+		readonly onError?: (error: Error) => void
+		readonly onResponse?: (response: Response) => void
+	}
 
-	export let jwt: string | undefined
-	export let myUser: MyUserInfo | undefined
-	export let personView: PersonView
-	export let site: Site
+	let {
+		class: className = undefined,
+		jwt,
+		myUser,
+		onBlockPerson = () => {},
+		onError = () => {},
+		onResponse = () => {},
+		personView,
+		site,
+	}: Props = $props()
 </script>
 
 <aside class={className}>
-	<PersonCard {jwt} {myUser} {personView} {site} bannerClass="rounded-lg" />
+	<PersonCard
+		{jwt}
+		{myUser}
+		{onBlockPerson}
+		{onError}
+		{onResponse}
+		{personView}
+		{site}
+		bannerClass="rounded-lg"
+	/>
 
 	<div class="flex flex-col gap-4 p-4">
 		{#if personView.person.bio}
diff --git a/src/lib/posts/Post.svelte b/src/lib/posts/Post.svelte
index de0690c..7a6094a 100644
--- a/src/lib/posts/Post.svelte
+++ b/src/lib/posts/Post.svelte
@@ -58,7 +58,7 @@
 		personView,
 		postView = $bindable(),
 		site,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/posts/PostBottomBar.svelte b/src/lib/posts/PostBottomBar.svelte
index ea66096..615a811 100644
--- a/src/lib/posts/PostBottomBar.svelte
+++ b/src/lib/posts/PostBottomBar.svelte
@@ -44,7 +44,7 @@
 		onSave,
 		postView = $bindable(),
 		site,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/posts/PostMeatballs.svelte b/src/lib/posts/PostMeatballs.svelte
index 36ae872..fb9e85f 100644
--- a/src/lib/posts/PostMeatballs.svelte
+++ b/src/lib/posts/PostMeatballs.svelte
@@ -47,7 +47,7 @@
 		onSave,
 		position = 'left-8 -top-4',
 		postView,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	let opened = $state(false)
 
diff --git a/src/lib/posts/PostTopBar.svelte b/src/lib/posts/PostTopBar.svelte
index d812fa3..06a3978 100644
--- a/src/lib/posts/PostTopBar.svelte
+++ b/src/lib/posts/PostTopBar.svelte
@@ -46,7 +46,7 @@
 		personView,
 		postView,
 		site,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	const dtf = Intl.DateTimeFormat('en-GB', {
 		year: 'numeric',
diff --git a/src/lib/posts/PostUrl.svelte b/src/lib/posts/PostUrl.svelte
index 5bd78e0..61e5d52 100644
--- a/src/lib/posts/PostUrl.svelte
+++ b/src/lib/posts/PostUrl.svelte
@@ -8,7 +8,7 @@
 		readonly postView: PostView
 	}
 
-	const { class: className = undefined, postView }: Props = $props() as Props
+	const { class: className = undefined, postView }: Props = $props()
 
 	function getVideoType(url: URL) {
 		const found = Object.entries(videoTypes).find(([, extensions]) =>
diff --git a/src/lib/posts/PurgePostForm.svelte b/src/lib/posts/PurgePostForm.svelte
index 0df29fa..fbb17de 100644
--- a/src/lib/posts/PurgePostForm.svelte
+++ b/src/lib/posts/PurgePostForm.svelte
@@ -7,7 +7,7 @@
 		readonly onPurge: (reason: string) => void
 	}
 
-	const { disabled = false, onPurge, onCancel }: Props = $props() as Props
+	const { disabled = false, onPurge, onCancel }: Props = $props()
 
 	const placeholders = ['Reason for purging this post...', 'Why are you purging this post?']
 	const placeholder = placeholders[Math.floor(Math.random() * placeholders.length)]
diff --git a/src/lib/posts/ReportPostForm.svelte b/src/lib/posts/ReportPostForm.svelte
index ef3b7ae..07a4e8f 100644
--- a/src/lib/posts/ReportPostForm.svelte
+++ b/src/lib/posts/ReportPostForm.svelte
@@ -7,7 +7,7 @@
 		readonly onReport: (reason: string) => void
 	}
 
-	const { disabled = false, onCancel, onReport }: Props = $props() as Props
+	const { disabled = false, onCancel, onReport }: Props = $props()
 
 	const placeholders = [
 		'Describe the violation',
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 051f0d9..08fee89 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -90,7 +90,7 @@
 
 	{#if message}
 		<Dismissable
-			on:dismiss={() => (message = undefined)}
+			onDismiss={() => (message = undefined)}
 			class="bg-danger-container text-on-danger-container"
 		>
 			{@html message}
@@ -118,10 +118,10 @@
 							<HomeSiteCard
 								{homeSite}
 								class="base-container h-full"
-								on:current={reloadHomeSites}
-								on:default={reloadHomeSites}
-								on:delete={reloadHomeSites}
-								on:hide={reloadHomeSites}
+								onCurrent={reloadHomeSites}
+								onDefault={reloadHomeSites}
+								onDelete={reloadHomeSites}
+								onHide={reloadHomeSites}
 							/>
 						{/if}
 					{/each}
diff --git a/src/routes/HomeSiteCard.svelte b/src/routes/HomeSiteCard.svelte
index b27ae45..5d01e57 100644
--- a/src/routes/HomeSiteCard.svelte
+++ b/src/routes/HomeSiteCard.svelte
@@ -19,7 +19,7 @@
 		onDefault,
 		onDelete,
 		onHide,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	if (homeSite.hidden) throw new Error('Attempting to render a hidden home site.')
 </script>
diff --git a/src/routes/SiteInfobanner.svelte b/src/routes/SiteInfobanner.svelte
index d48ee57..a9b643f 100644
--- a/src/routes/SiteInfobanner.svelte
+++ b/src/routes/SiteInfobanner.svelte
@@ -19,7 +19,7 @@
 		onDefault,
 		onDelete,
 		onHide,
-	}: Props = $props() as Props
+	}: Props = $props()
 
 	async function handleDefault() {
 		const newHomeSite = { ...homeSite, default: !homeSite.default }
diff --git a/src/routes/[site]/+page.svelte b/src/routes/[site]/+page.svelte
index b1ddff1..edd82d7 100644
--- a/src/routes/[site]/+page.svelte
+++ b/src/routes/[site]/+page.svelte
@@ -63,9 +63,9 @@
 			<PaginationBar
 				length={data.posts.length}
 				limit={data.limit ?? 10}
-				on:next={onNext}
-				on:previous={onPrevious}
-				on:first={onNext}
+				{onNext}
+				{onPrevious}
+				onFirst={onNext}
 			/>
 		{/if}
 
@@ -84,9 +84,9 @@
 			<PaginationBar
 				length={data.posts.length}
 				limit={data.limit ?? 10}
-				on:next={onNext}
-				on:previous={onPrevious}
-				on:first={onNext}
+				{onNext}
+				{onPrevious}
+				onFirst={onNext}
 			/>
 		{/if}
 	</main>
diff --git a/src/routes/[site]/c/[community]/+page.svelte b/src/routes/[site]/c/[community]/+page.svelte
index 9f64ef0..65e0c99 100644
--- a/src/routes/[site]/c/[community]/+page.svelte
+++ b/src/routes/[site]/c/[community]/+page.svelte
@@ -80,9 +80,9 @@
 				<PaginationBar
 					length={data.posts.length}
 					limit={data.limit ?? 10}
-					on:next={onNext}
-					on:previous={onPrevious}
-					on:first={onNext}
+					{onNext}
+					{onPrevious}
+					onFirst={onNext}
 				/>
 			{/if}
 
@@ -101,9 +101,9 @@
 				<PaginationBar
 					length={data.posts.length}
 					limit={data.limit ?? 10}
-					on:next={onNext}
-					on:previous={onPrevious}
-					on:first={onNext}
+					{onNext}
+					{onPrevious}
+					onFirst={onNext}
 				/>
 			{/if}
 		</div>
diff --git a/src/routes/[site]/communities/+page.svelte b/src/routes/[site]/communities/+page.svelte
index 816fe90..8ebd237 100644
--- a/src/routes/[site]/communities/+page.svelte
+++ b/src/routes/[site]/communities/+page.svelte
@@ -8,7 +8,11 @@
 	import type { BlockCommunityResponse, CommunityResponse } from 'lemmy-js-client'
 	import type { PageData } from './$types.js'
 
-	export let data: PageData
+	interface Props {
+		readonly data: PageData
+	}
+
+	let { data = $bindable() }: Props = $props()
 
 	function onNext() {
 		const first = data.communities[0]
@@ -28,23 +32,23 @@
 			?.scrollIntoView({ block: 'start', behavior: 'smooth' })
 	}
 
-	function onBlock(event: CustomEvent<BlockCommunityResponse>) {
+	function onBlock(event: BlockCommunityResponse) {
 		const index = data.communities.findIndex(
-			view => view.community.id === event.detail.community_view.community.id,
+			view => view.community.id === event.community_view.community.id,
 		)
 		if (index === -1) return
 
-		data.communities[index] = event.detail.community_view
+		data.communities[index] = event.community_view
 		data = data
 	}
 
-	function onFollow(event: CustomEvent<CommunityResponse>) {
+	function onFollow(event: CommunityResponse) {
 		const index = data.communities.findIndex(
-			view => view.community.id === event.detail.community_view.community.id,
+			view => view.community.id === event.community_view.community.id,
 		)
 		if (index === -1) return
 
-		data.communities[index] = event.detail.community_view
+		data.communities[index] = event.community_view
 		data = data
 	}
 </script>
@@ -68,17 +72,17 @@
 		<PaginationBar
 			length={data.communities.length}
 			limit={data.limit ?? 10}
-			on:next={onNext}
-			on:previous={onPrevious}
-			on:first={onNext}
+			{onNext}
+			{onPrevious}
+			onFirst={onNext}
 		/>
 	{/if}
 
 	<CommunityGrid
 		communityViews={data.communities}
 		jwt={data.jwt}
-		on:block_community={onBlock}
-		on:follow_community={onFollow}
+		onBlockCommunity={onBlock}
+		onFollowCommunity={onFollow}
 		site={data.site_view.site}
 	/>
 
@@ -86,9 +90,9 @@
 		<PaginationBar
 			length={data.communities.length}
 			limit={data.limit ?? 10}
-			on:next={onNext}
-			on:previous={onPrevious}
-			on:first={onNext}
+			{onNext}
+			{onPrevious}
+			onFirst={onNext}
 		/>
 	{/if}
 </div>
diff --git a/src/routes/[site]/login/+page.svelte b/src/routes/[site]/login/+page.svelte
index f5eabc4..c2f82df 100644
--- a/src/routes/[site]/login/+page.svelte
+++ b/src/routes/[site]/login/+page.svelte
@@ -106,7 +106,7 @@
 				<div class="danger-container relative rounded-md p-4">Loading error message...</div>
 			{:then text}
 				{#if text}
-					<Dismissable on:dismiss={() => (request = undefined)} class="danger-container">
+					<Dismissable onDismiss={() => (request = undefined)} class="danger-container">
 						{@html text}
 					</Dismissable>
 				{:else}
diff --git a/src/routes/[site]/post/[post]/+page.svelte b/src/routes/[site]/post/[post]/+page.svelte
index bdd6662..9180510 100644
--- a/src/routes/[site]/post/[post]/+page.svelte
+++ b/src/routes/[site]/post/[post]/+page.svelte
@@ -20,7 +20,7 @@
 		readonly data: PageData
 	}
 
-	let { data = $bindable() }: Props = $props() as Props
+	let { data = $bindable() }: Props = $props()
 
 	const tree = $derived(buildCommentTree(data.comments, data.parent_id ?? 0))
 
diff --git a/src/routes/[site]/search/+page.svelte b/src/routes/[site]/search/+page.svelte
index 6209c50..81fb375 100644
--- a/src/routes/[site]/search/+page.svelte
+++ b/src/routes/[site]/search/+page.svelte
@@ -16,7 +16,7 @@
 		readonly data: PageData
 	}
 
-	let { data = $bindable() }: Props = $props() as Props
+	let { data = $bindable() }: Props = $props()
 
 	const tree = $derived(buildCommentTree(data.comments, undefined))
 
@@ -24,7 +24,9 @@
 		Math.max(data.comments.length, data.communities.length, data.posts.length, data.users.length),
 	)
 
+	// svelte-ignore non_reactive_update
 	let paginationBarTop: HTMLElement
+	// svelte-ignore non_reactive_update
 	let paginationBarBot: HTMLElement
 
 	function onNext() {
@@ -98,8 +100,8 @@
 			<CommunityGrid
 				communityViews={data.communities}
 				jwt={data.jwt}
-				on:block_community={onBlock}
-				on:follow_community={onFollow}
+				onBlockCommunity={onBlock}
+				onFollowCommunity={onFollow}
 				site={data.site_view.site}
 			/>
 		{/if}
diff --git a/src/routes/[site]/u/[user]/+page.svelte b/src/routes/[site]/u/[user]/+page.svelte
index a6ea4c3..f0048fb 100644
--- a/src/routes/[site]/u/[user]/+page.svelte
+++ b/src/routes/[site]/u/[user]/+page.svelte
@@ -7,7 +7,11 @@
 	import { personUri } from '$lib/utils/index.js'
 	import type { PageData } from './$types.js'
 
-	export let data: PageData
+	interface Props {
+		readonly data: PageData
+	}
+
+	let { data }: Props = $props()
 
 	function onNext() {
 		const first = data.posts[0]
@@ -58,9 +62,9 @@
 				<PaginationBar
 					length={data.posts.length}
 					limit={data.limit ?? 10}
-					on:next={onNext}
-					on:previous={onPrevious}
-					on:first={onNext}
+					{onNext}
+					{onPrevious}
+					onFirst={onNext}
 				/>
 			{/if}
 			<Posts
@@ -77,9 +81,9 @@
 				<PaginationBar
 					length={data.posts.length}
 					limit={data.limit ?? 10}
-					on:next={onNext}
-					on:previous={onPrevious}
-					on:first={onNext}
+					{onNext}
+					{onPrevious}
+					onFirst={onNext}
 				/>
 			{/if}
 		</div>
diff --git a/src/routes/debug/theme/BgColourTest.svelte b/src/routes/debug/theme/BgColourTest.svelte
index 6fcbcbf..c7deab1 100644
--- a/src/routes/debug/theme/BgColourTest.svelte
+++ b/src/routes/debug/theme/BgColourTest.svelte
@@ -7,7 +7,7 @@
 		readonly message: string
 	}
 
-	const { class: className = '', title, message }: Props = $props() as Props
+	const { class: className = '', title, message }: Props = $props()
 </script>
 
 <div class="w-full p-4 {className}">

From 073f90bc32b9a37afe1f00192bd01a14bf76fa86 Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Mon, 21 Oct 2024 02:21:16 -0400
Subject: [PATCH 09/13] =?UTF-8?q?=F0=9F=91=BD=EF=B8=8F=20Migrate=20some=20?=
 =?UTF-8?q?components=20to=20Svelte=205?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/ProfileMenu.svelte                | 22 ++++++++++++----------
 src/routes/[site]/settings/Follows.svelte | 14 +++++++++-----
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/lib/ProfileMenu.svelte b/src/lib/ProfileMenu.svelte
index 6f2f99b..9ff6c81 100644
--- a/src/lib/ProfileMenu.svelte
+++ b/src/lib/ProfileMenu.svelte
@@ -10,13 +10,15 @@
 	import { findHomeSite, pushHomeSite, removeHomeSite } from './preferences/index.js'
 	import { personLink, personUri, siteLink, unsetJwt } from './utils/index.js'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly myUser: MyUserInfo
+		readonly site: Site
+	}
 
-	export let myUser: MyUserInfo
-	export let site: Site
+	let { class: className = undefined, myUser, site }: Props = $props()
 
-	let opened = false
+	let opened = $state(false)
 	function onClick() {
 		opened = !opened
 	}
@@ -35,7 +37,7 @@
 </script>
 
 <div class="relative {className}">
-	<button on:click={onClick} class="flex flex-row items-center gap-4">
+	<button onclick={onClick} class="flex flex-row items-center gap-4">
 		<PersonIcon person={myUser.local_user_view.person} class="h-8 w-8" />
 		{personUri(myUser.local_user_view.person)}
 	</button>
@@ -48,7 +50,7 @@
 			<a
 				href={personLink(site, myUser.local_user_view.person)}
 				class="hover:surface rounded-t"
-				on:click={onClick}
+				onclick={onClick}
 			>
 				<FlatButton class="rounded-none p-4">
 					<User />
@@ -56,21 +58,21 @@
 				</FlatButton>
 			</a>
 
-			<a href="{siteLink(site)}/settings" class="hover:surface" on:click={onClick}>
+			<a href="{siteLink(site)}/settings" class="hover:surface" onclick={onClick}>
 				<FlatButton class="p-4">
 					<Cog8Tooth />
 					Settings
 				</FlatButton>
 			</a>
 
-			<button class="hover:surface" on:click={logout}>
+			<button class="hover:surface" onclick={logout}>
 				<FlatButton>
 					<ArrowRightOnRectangle />
 					Logout
 				</FlatButton>
 			</button>
 
-			<button class="hover:surface rounded-b" on:click={resetDefault}>
+			<button class="hover:surface rounded-b" onclick={resetDefault}>
 				<FlatButton>
 					<ArrowRightOnRectangle />
 					Change instance
diff --git a/src/routes/[site]/settings/Follows.svelte b/src/routes/[site]/settings/Follows.svelte
index 1769d76..15c3a6f 100644
--- a/src/routes/[site]/settings/Follows.svelte
+++ b/src/routes/[site]/settings/Follows.svelte
@@ -4,13 +4,17 @@
 	import { communityUri } from '$lib/utils/index.js'
 	import type { CommunityFollowerView, MyUserInfo, Site } from 'lemmy-js-client'
 
-	export let follows: CommunityFollowerView[]
-	export let myUser: MyUserInfo
-	export let site: Site
+	interface Props {
+		readonly follows: CommunityFollowerView[]
+		readonly myUser: MyUserInfo
+		readonly site: Site
+	}
+
+	let { follows, myUser, site }: Props = $props()
 
 	const client = getClientContext()
 
-	let logs: string[] = []
+	let logs: string[] = $state([])
 	let following = false
 
 	async function followAll() {
@@ -73,7 +77,7 @@
 		</div>
 	{/each}
 
-	<button class="surface-container" on:click={followAll}> Follow all </button>
+	<button class="surface-container" onclick={followAll}> Follow all </button>
 
 	<div class="font-mono">
 		{#each logs as log}

From 99f10d2e3bf3958bc7dac790f198edc3774a37ea Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Mon, 21 Oct 2024 02:26:04 -0400
Subject: [PATCH 10/13] =?UTF-8?q?=F0=9F=91=BD=EF=B8=8F=20Migrate=20more=20?=
 =?UTF-8?q?components=20to=20Svelte=205?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/DepthSelector.svelte                  | 10 ++++--
 src/lib/ListingTypeSelector.svelte            | 14 +++++---
 src/lib/community/BlockCommunityLayout.svelte | 16 ++++++----
 src/lib/community/CommunityBlockButton.svelte | 14 ++++----
 .../community/CommunityFollowButton.svelte    | 16 ++++++----
 .../community/FollowCommunityLayout.svelte    | 16 ++++++----
 src/lib/person/PersonBlockButton.svelte       | 32 +++++++++++--------
 src/lib/person/PersonIcon.svelte              | 12 ++++---
 src/routes/[site]/settings/+page.svelte       | 10 ++++--
 9 files changed, 83 insertions(+), 57 deletions(-)

diff --git a/src/lib/DepthSelector.svelte b/src/lib/DepthSelector.svelte
index 3713b3d..44b3e76 100644
--- a/src/lib/DepthSelector.svelte
+++ b/src/lib/DepthSelector.svelte
@@ -2,7 +2,11 @@
 	import { goto, invalidate } from '$app/navigation'
 	import { page } from '$app/stores'
 
-	export let maxDepth: number
+	interface Props {
+		readonly maxDepth: number
+	}
+
+	let { maxDepth }: Props = $props()
 
 	let input: HTMLInputElement
 
@@ -31,10 +35,10 @@
 		id="max_depth"
 		max={50}
 		min={1}
-		on:change={() => {
+		onchange={() => {
 			debounceChangeDepth($page.url)
 		}}
-		on:keypress={e => {
+		onkeypress={e => {
 			if (e.key === 'Enter') debounceChangeDepth($page.url)
 		}}
 		type="number"
diff --git a/src/lib/ListingTypeSelector.svelte b/src/lib/ListingTypeSelector.svelte
index a545ed6..0343bd3 100644
--- a/src/lib/ListingTypeSelector.svelte
+++ b/src/lib/ListingTypeSelector.svelte
@@ -9,8 +9,12 @@
 		await invalidate('app:paginate')
 	}
 
-	export let type_: ListingType = 'Local'
-	export let name = 'type_'
+	interface Props {
+		readonly type_?: ListingType
+		readonly name?: string
+	}
+
+	const { type_ = 'Local', name = 'type_' }: Props = $props()
 </script>
 
 <div class="flex flex-row">
@@ -22,7 +26,7 @@
 		class="rounded-l-lg px-4 py-2 {type_ === 'Subscribed'
 			? 'hover:bg-primary/80'
 			: 'hover:bg-muted/20'}"
-		on:click={() => clickListingType($page.url, 'Subscribed')}
+		onclick={() => clickListingType($page.url, 'Subscribed')}
 	>
 		Subscribed
 	</button>
@@ -33,7 +37,7 @@
 		class:text-on-base-container={type_ !== 'Local'}
 		class:text-on-primary={type_ === 'Local'}
 		class="px-4 py-2 {type_ === 'Local' ? 'hover:bg-primary/80' : 'hover:bg-muted/20'}"
-		on:click={() => clickListingType($page.url, 'Local')}
+		onclick={() => clickListingType($page.url, 'Local')}
 	>
 		Local
 	</button>
@@ -44,7 +48,7 @@
 		class:text-on-base-container={type_ !== 'All'}
 		class:text-on-primary={type_ === 'All'}
 		class="rounded-r-lg px-4 py-2 {type_ === 'All' ? 'hover:bg-primary/80' : 'hover:bg-muted/20'}"
-		on:click={() => clickListingType($page.url, 'All')}
+		onclick={() => clickListingType($page.url, 'All')}
 	>
 		All
 	</button>
diff --git a/src/lib/community/BlockCommunityLayout.svelte b/src/lib/community/BlockCommunityLayout.svelte
index a191362..fdade3f 100644
--- a/src/lib/community/BlockCommunityLayout.svelte
+++ b/src/lib/community/BlockCommunityLayout.svelte
@@ -3,16 +3,18 @@
 	import { getClientContext } from '$lib/contexts/index.js'
 	import type { CommunityView } from 'lemmy-js-client'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly community: CommunityView
+		readonly jwt: string | undefined
+	}
 
-	export let community: CommunityView
-	export let jwt: string | undefined
+	let { class: className = undefined, community = $bindable(), jwt }: Props = $props()
 
 	const client = getClientContext()
 
 	let response: Promise<CommunityView> | undefined
-	let blockError = ''
+	let blockError = $state('')
 
 	async function blockCommunity(block: boolean) {
 		blockError = ''
@@ -43,8 +45,8 @@
 	{#if blockError}
 		<p
 			class="rounded-lg bg-danger-container p-4 text-on-danger-container"
-			on:click={() => (blockError = '')}
-			on:keypress={e => {
+			onclick={() => (blockError = '')}
+			onkeypress={e => {
 				if (e.key === 'Escale') blockError = ''
 			}}
 			role="presentation"
diff --git a/src/lib/community/CommunityBlockButton.svelte b/src/lib/community/CommunityBlockButton.svelte
index 396216c..35a1875 100644
--- a/src/lib/community/CommunityBlockButton.svelte
+++ b/src/lib/community/CommunityBlockButton.svelte
@@ -2,11 +2,13 @@
 	import { NoSymbol } from '@natoboram/heroicons.svelte/20/solid'
 	import type { CommunityView } from 'lemmy-js-client'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly community: Promise<CommunityView>
+		readonly blockCommunity: (block: boolean) => Promise<void>
+	}
 
-	export let community: Promise<CommunityView>
-	export let blockCommunity: (block: boolean) => Promise<void>
+	let { class: className = undefined, community, blockCommunity }: Props = $props()
 </script>
 
 {#await community}
@@ -16,7 +18,7 @@
 		<button
 			class="flex flex-row items-center justify-center gap-2 rounded-full bg-danger-container px-4
 				py-2 text-on-danger-container hover:bg-danger hover:text-on-danger {className}"
-			on:click={() => blockCommunity(false)}
+			onclick={() => blockCommunity(false)}
 		>
 			Blocked
 			<NoSymbol class="h-5 w-5 text-danger" />
@@ -25,7 +27,7 @@
 		<button
 			class="rounded-full bg-surface-container px-4 py-2 text-on-surface-container
 			hover:bg-surface hover:text-on-surface {className}"
-			on:click={() => blockCommunity(true)}
+			onclick={() => blockCommunity(true)}
 		>
 			Block
 		</button>
diff --git a/src/lib/community/CommunityFollowButton.svelte b/src/lib/community/CommunityFollowButton.svelte
index e75e27f..07e6c08 100644
--- a/src/lib/community/CommunityFollowButton.svelte
+++ b/src/lib/community/CommunityFollowButton.svelte
@@ -2,11 +2,13 @@
 	import { Check } from '@natoboram/heroicons.svelte/20/solid'
 	import type { CommunityView } from 'lemmy-js-client'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly communityView: Promise<CommunityView>
+		readonly followCommunity: (follow: boolean) => Promise<void>
+	}
 
-	export let communityView: Promise<CommunityView>
-	export let followCommunity: (follow: boolean) => Promise<void>
+	let { class: className = undefined, communityView, followCommunity }: Props = $props()
 </script>
 
 {#await communityView}
@@ -16,7 +18,7 @@
 		<button
 			class="rounded-full border-surface-container bg-surface-container px-4 py-2
 			text-on-surface-container hover:bg-surface hover:text-on-surface {className}"
-			on:click={() => followCommunity(true)}
+			onclick={() => followCommunity(true)}
 		>
 			Join
 		</button>
@@ -24,7 +26,7 @@
 		<button
 			class="rounded-full border-surface-container bg-surface-container px-4 py-2
 			text-on-surface-container hover:bg-surface hover:text-on-surface {className}"
-			on:click={() => followCommunity(false)}
+			onclick={() => followCommunity(false)}
 		>
 			Pending
 		</button>
@@ -33,7 +35,7 @@
 			class="flex flex-row items-center justify-center gap-2 rounded-full border-surface-container
 			bg-surface-container px-4 py-2 text-on-surface-container hover:bg-surface
 			hover:text-on-surface {className}"
-			on:click={() => followCommunity(false)}
+			onclick={() => followCommunity(false)}
 		>
 			Subscribed
 			<Check class="h-5 w-5 text-success" />
diff --git a/src/lib/community/FollowCommunityLayout.svelte b/src/lib/community/FollowCommunityLayout.svelte
index e9b8aa4..ff05157 100644
--- a/src/lib/community/FollowCommunityLayout.svelte
+++ b/src/lib/community/FollowCommunityLayout.svelte
@@ -3,16 +3,18 @@
 	import { getClientContext } from '$lib/contexts/index.js'
 	import type { CommunityView } from 'lemmy-js-client'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly community: CommunityView
+		readonly jwt: string | undefined
+	}
 
-	export let community: CommunityView
-	export let jwt: string | undefined
+	let { class: className = undefined, community = $bindable(), jwt }: Props = $props()
 
 	const client = getClientContext()
 
 	let response: Promise<CommunityView> | undefined
-	let subscribeError = ''
+	let subscribeError = $state('')
 
 	async function followCommunity(follow: boolean) {
 		subscribeError = ''
@@ -43,8 +45,8 @@
 	{#if subscribeError}
 		<p
 			class="rounded-lg bg-danger-container p-4 text-on-danger-container"
-			on:click={() => (subscribeError = '')}
-			on:keypress={e => {
+			onclick={() => (subscribeError = '')}
+			onkeypress={e => {
 				if (e.key === 'Escale') subscribeError = ''
 			}}
 			role="presentation"
diff --git a/src/lib/person/PersonBlockButton.svelte b/src/lib/person/PersonBlockButton.svelte
index 5317463..d6afd79 100644
--- a/src/lib/person/PersonBlockButton.svelte
+++ b/src/lib/person/PersonBlockButton.svelte
@@ -2,21 +2,25 @@
 	import { getClientContext } from '$lib/contexts/index.js'
 	import type { BlockPersonResponse, MyUserInfo, PersonView } from 'lemmy-js-client'
 
-	let className: string | undefined = undefined
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly jwt: string | undefined
+		readonly myUser: MyUserInfo
+		readonly personView: PersonView
+	}
 
-	export let jwt: string | undefined
-	export let myUser: MyUserInfo
-	export let personView: PersonView
+	let { class: className = undefined, jwt, myUser, personView }: Props = $props()
 
 	const client = getClientContext()
 
-	let request: Promise<BlockPersonResponse> = Promise.resolve({
-		blocked: myUser.person_blocks.some(block => block.target.id === personView.person.id),
-		person_view: personView,
-	})
+	let request: Promise<BlockPersonResponse> = $state(
+		Promise.resolve({
+			blocked: myUser.person_blocks.some(block => block.target.id === personView.person.id),
+			person_view: personView,
+		}),
+	)
 
-	let blockError = ''
+	let blockError = $state('')
 
 	async function blockPerson(block: boolean) {
 		blockError = ''
@@ -55,14 +59,14 @@
 		{#if response.blocked}
 			<button
 				class="rounded-full bg-danger-container px-4 py-2 text-on-danger-container hover:bg-danger hover:text-on-danger {className}"
-				on:click={() => blockPerson(false)}
+				onclick={() => blockPerson(false)}
 			>
 				Blocked
 			</button>
 		{:else}
 			<button
 				class="rounded-full bg-surface-container px-4 py-2 text-on-surface-container hover:bg-surface hover:text-on-surface {className}"
-				on:click={() => blockPerson(true)}
+				onclick={() => blockPerson(true)}
 			>
 				Block
 			</button>
@@ -72,8 +76,8 @@
 	{#if blockError}
 		<p
 			class="rounded-lg bg-danger-container p-4 text-on-danger-container"
-			on:click={() => (blockError = '')}
-			on:keypress={e => {
+			onclick={() => (blockError = '')}
+			onkeypress={e => {
 				if (e.key === 'Escale') blockError = ''
 			}}
 			role="presentation"
diff --git a/src/lib/person/PersonIcon.svelte b/src/lib/person/PersonIcon.svelte
index 5321993..102d30c 100644
--- a/src/lib/person/PersonIcon.svelte
+++ b/src/lib/person/PersonIcon.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type { Person } from 'lemmy-js-client'
 
-	let className: string | undefined = 'w-6 h-6'
-	export { className as class }
+	interface Props {
+		readonly class?: string | undefined
+		readonly person: Person
+	}
 
-	export let person: Person
+	let { class: className = 'w-6 h-6', person }: Props = $props()
 
-	let error: (Event & { currentTarget: Element & EventTarget }) | undefined
+	let error: (Event & { currentTarget: Element & EventTarget }) | undefined = $state()
 </script>
 
 {#if person.avatar && !error}
@@ -14,7 +16,7 @@
 		src={person.avatar}
 		alt="avatar"
 		class="object-cover {className}"
-		on:error={e => (error = e)}
+		onerror={e => (error = e)}
 	/>
 {:else}
 	<div class="bg-muted {className}"></div>
diff --git a/src/routes/[site]/settings/+page.svelte b/src/routes/[site]/settings/+page.svelte
index f7c0c95..5e3c644 100644
--- a/src/routes/[site]/settings/+page.svelte
+++ b/src/routes/[site]/settings/+page.svelte
@@ -4,7 +4,11 @@
 	import type { PageData } from './$types.js'
 	import Follows from './Follows.svelte'
 
-	export let data: PageData
+	interface Props {
+		readonly data: PageData
+	}
+
+	let { data }: Props = $props()
 
 	function exportUser() {
 		if (!data.my_user) return
@@ -23,7 +27,7 @@
 		return JSON.parse(text) as MyUserInfo
 	}
 
-	let importUserFiles: FileList | undefined
+	let importUserFiles: FileList | undefined = $state()
 </script>
 
 <svelte:head>
@@ -43,7 +47,7 @@
 				<button
 					id="export-user"
 					class="surface-container justify-self-start rounded px-2 py-1 sm:col-start-2"
-					on:click={exportUser}
+					onclick={exportUser}
 				>
 					Export user
 				</button>

From 2f6c2c98c99264ca0ef767d508c1267471de8c0f Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Mon, 21 Oct 2024 02:27:44 -0400
Subject: [PATCH 11/13] =?UTF-8?q?=E2=9C=85=20GitHub=20Actions=20are=20too?=
 =?UTF-8?q?=20slow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/utils/dates.test.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/utils/dates.test.ts b/src/lib/utils/dates.test.ts
index 483fbca..bd885da 100644
--- a/src/lib/utils/dates.test.ts
+++ b/src/lib/utils/dates.test.ts
@@ -9,12 +9,12 @@ describe.concurrent('timeAgo', () => {
 	})
 
 	test('in the future', ({ expect }) => {
-		const maxDate = new Date(8640000000000000)
+		const maxDate = new Date(8_640_000_000_000_000)
 		expect(timeAgo(maxDate)).toBe('in the future')
 	})
 
 	test('2 subepochs ago', ({ expect }) => {
-		const minDate = new Date(-8640000000000000)
+		const minDate = new Date(-8_640_000_000_000_000)
 		expect(timeAgo(minDate)).toBe('2 subepochs ago')
 	})
 })
@@ -36,9 +36,9 @@ describe.concurrent('durationAgo', () => {
 	})
 })
 
-describe.concurrent('fullTime', () => {
+describe('fullTime', () => {
 	test('in the future', ({ expect }) => {
-		const date = new Date(8640000000000000)
+		const date = new Date(8_640_000_000_000_000)
 		expect(fullTimeAgo(date)).toBe('in the future')
 	})
 

From a9bd6b140309480c7f9a5c21d91772ce774e427e Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Mon, 21 Oct 2024 02:36:40 -0400
Subject: [PATCH 12/13] =?UTF-8?q?=F0=9F=92=9A=20skipIf(process.env['CI'])?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/utils/dates.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/utils/dates.test.ts b/src/lib/utils/dates.test.ts
index bd885da..35764d3 100644
--- a/src/lib/utils/dates.test.ts
+++ b/src/lib/utils/dates.test.ts
@@ -42,7 +42,7 @@ describe('fullTime', () => {
 		expect(fullTimeAgo(date)).toBe('in the future')
 	})
 
-	test('1h 2m 3s ago', ({ expect }) => {
+	test.skipIf(process.env['CI'])('1h 2m 3s ago', ({ expect }) => {
 		const date = new Date()
 		date.setHours(date.getHours() - 1)
 		date.setMinutes(date.getMinutes() - 2)

From e3395346b0d5e5e3d919b939caf9d94df8f23fdc Mon Sep 17 00:00:00 2001
From: Nato Boram <nato.boram@gmail.com>
Date: Mon, 21 Oct 2024 02:41:59 -0400
Subject: [PATCH 13/13] =?UTF-8?q?=F0=9F=9A=A8=20A=20run=20of=20prefer-cons?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/DepthSelector.svelte                   | 2 +-
 src/lib/ProfileMenu.svelte                     | 2 +-
 src/lib/community/CommunityBlockButton.svelte  | 2 +-
 src/lib/community/CommunityFollowButton.svelte | 2 +-
 src/lib/community/CommunityGrid.svelte         | 2 +-
 src/lib/person/PersonBlockButton.svelte        | 2 +-
 src/lib/person/PersonCard.svelte               | 2 +-
 src/lib/person/PersonGrid.svelte               | 2 +-
 src/lib/person/PersonIcon.svelte               | 2 +-
 src/lib/person/PersonSidebar.svelte            | 2 +-
 src/routes/[site]/settings/+page.svelte        | 2 +-
 src/routes/[site]/settings/Follows.svelte      | 2 +-
 src/routes/[site]/u/[user]/+page.svelte        | 2 +-
 13 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/lib/DepthSelector.svelte b/src/lib/DepthSelector.svelte
index 44b3e76..ef30233 100644
--- a/src/lib/DepthSelector.svelte
+++ b/src/lib/DepthSelector.svelte
@@ -6,7 +6,7 @@
 		readonly maxDepth: number
 	}
 
-	let { maxDepth }: Props = $props()
+	const { maxDepth }: Props = $props()
 
 	let input: HTMLInputElement
 
diff --git a/src/lib/ProfileMenu.svelte b/src/lib/ProfileMenu.svelte
index 9ff6c81..4540aaa 100644
--- a/src/lib/ProfileMenu.svelte
+++ b/src/lib/ProfileMenu.svelte
@@ -16,7 +16,7 @@
 		readonly site: Site
 	}
 
-	let { class: className = undefined, myUser, site }: Props = $props()
+	const { class: className = undefined, myUser, site }: Props = $props()
 
 	let opened = $state(false)
 	function onClick() {
diff --git a/src/lib/community/CommunityBlockButton.svelte b/src/lib/community/CommunityBlockButton.svelte
index 35a1875..5da2627 100644
--- a/src/lib/community/CommunityBlockButton.svelte
+++ b/src/lib/community/CommunityBlockButton.svelte
@@ -8,7 +8,7 @@
 		readonly blockCommunity: (block: boolean) => Promise<void>
 	}
 
-	let { class: className = undefined, community, blockCommunity }: Props = $props()
+	const { class: className = undefined, community, blockCommunity }: Props = $props()
 </script>
 
 {#await community}
diff --git a/src/lib/community/CommunityFollowButton.svelte b/src/lib/community/CommunityFollowButton.svelte
index 07e6c08..f2c4a81 100644
--- a/src/lib/community/CommunityFollowButton.svelte
+++ b/src/lib/community/CommunityFollowButton.svelte
@@ -8,7 +8,7 @@
 		readonly followCommunity: (follow: boolean) => Promise<void>
 	}
 
-	let { class: className = undefined, communityView, followCommunity }: Props = $props()
+	const { class: className = undefined, communityView, followCommunity }: Props = $props()
 </script>
 
 {#await communityView}
diff --git a/src/lib/community/CommunityGrid.svelte b/src/lib/community/CommunityGrid.svelte
index b52c11f..64943d8 100644
--- a/src/lib/community/CommunityGrid.svelte
+++ b/src/lib/community/CommunityGrid.svelte
@@ -21,7 +21,7 @@
 		readonly site: Site
 	}
 
-	let {
+	const {
 		class: className = undefined,
 		communityViews,
 		jwt,
diff --git a/src/lib/person/PersonBlockButton.svelte b/src/lib/person/PersonBlockButton.svelte
index d6afd79..edcef0d 100644
--- a/src/lib/person/PersonBlockButton.svelte
+++ b/src/lib/person/PersonBlockButton.svelte
@@ -9,7 +9,7 @@
 		readonly personView: PersonView
 	}
 
-	let { class: className = undefined, jwt, myUser, personView }: Props = $props()
+	const { class: className = undefined, jwt, myUser, personView }: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/lib/person/PersonCard.svelte b/src/lib/person/PersonCard.svelte
index 7ecd2e0..dfe72d0 100644
--- a/src/lib/person/PersonCard.svelte
+++ b/src/lib/person/PersonCard.svelte
@@ -17,7 +17,7 @@
 		readonly site: Site
 	}
 
-	let {
+	const {
 		bannerClass = undefined,
 		class: className = undefined,
 		jwt,
diff --git a/src/lib/person/PersonGrid.svelte b/src/lib/person/PersonGrid.svelte
index c86492b..43a586c 100644
--- a/src/lib/person/PersonGrid.svelte
+++ b/src/lib/person/PersonGrid.svelte
@@ -13,7 +13,7 @@
 		readonly site: Site
 	}
 
-	let {
+	const {
 		class: className = undefined,
 		jwt,
 		myUser,
diff --git a/src/lib/person/PersonIcon.svelte b/src/lib/person/PersonIcon.svelte
index 102d30c..97911ef 100644
--- a/src/lib/person/PersonIcon.svelte
+++ b/src/lib/person/PersonIcon.svelte
@@ -6,7 +6,7 @@
 		readonly person: Person
 	}
 
-	let { class: className = 'w-6 h-6', person }: Props = $props()
+	const { class: className = 'w-6 h-6', person }: Props = $props()
 
 	let error: (Event & { currentTarget: Element & EventTarget }) | undefined = $state()
 </script>
diff --git a/src/lib/person/PersonSidebar.svelte b/src/lib/person/PersonSidebar.svelte
index b83bc89..99dcfb1 100644
--- a/src/lib/person/PersonSidebar.svelte
+++ b/src/lib/person/PersonSidebar.svelte
@@ -14,7 +14,7 @@
 		readonly onResponse?: (response: Response) => void
 	}
 
-	let {
+	const {
 		class: className = undefined,
 		jwt,
 		myUser,
diff --git a/src/routes/[site]/settings/+page.svelte b/src/routes/[site]/settings/+page.svelte
index 5e3c644..a3e4531 100644
--- a/src/routes/[site]/settings/+page.svelte
+++ b/src/routes/[site]/settings/+page.svelte
@@ -8,7 +8,7 @@
 		readonly data: PageData
 	}
 
-	let { data }: Props = $props()
+	const { data }: Props = $props()
 
 	function exportUser() {
 		if (!data.my_user) return
diff --git a/src/routes/[site]/settings/Follows.svelte b/src/routes/[site]/settings/Follows.svelte
index 15c3a6f..0a1ab16 100644
--- a/src/routes/[site]/settings/Follows.svelte
+++ b/src/routes/[site]/settings/Follows.svelte
@@ -10,7 +10,7 @@
 		readonly site: Site
 	}
 
-	let { follows, myUser, site }: Props = $props()
+	const { follows, myUser, site }: Props = $props()
 
 	const client = getClientContext()
 
diff --git a/src/routes/[site]/u/[user]/+page.svelte b/src/routes/[site]/u/[user]/+page.svelte
index f0048fb..57da02b 100644
--- a/src/routes/[site]/u/[user]/+page.svelte
+++ b/src/routes/[site]/u/[user]/+page.svelte
@@ -11,7 +11,7 @@
 		readonly data: PageData
 	}
 
-	let { data }: Props = $props()
+	const { data }: Props = $props()
 
 	function onNext() {
 		const first = data.posts[0]