Added fun preference section, added avali font toggle

manifest.json

@@ -30,7 +30,8 @@
             ],
             "js": [
                 "src/content/deps/amd.ts",
-                "src/content/user-details.ts"
+                "src/content/user-details.ts",
+                "src/content/fun.ts"
             ]
         },
         {

src/content/fun.ts

@@ -0,0 +1,34 @@
+import roundFeatherFontUrl from "../assets/icon/fonts/roundfeather-regular-1.001.ttf?url";
+import FunPreferences from "$lib/extension/preferences/FunPreferences";
+
+const preferences = new FunPreferences();
+const url = (browser ?? chrome).runtime.getURL(roundFeatherFontUrl);
+const avaliFontDefinitionStyleTag = document.createElement('style');
+
+// language=CSS
+avaliFontDefinitionStyleTag.textContent = `
+    @font-face {
+      font-family: Roundfeather;
+      url('${url}') format('truetype');
+    }
+    
+    :root {
+      --font-family-base: Roundfeather, verdana, arial, helvetica, sans-serif !important;
+      --font-family-monospace: Roundfeather, "Droid Sans Mono", monospace !important;
+    }
+  `;
+
+function refreshAvaliFont(isFontEnabled: boolean) {
+  if (!isFontEnabled) {
+    avaliFontDefinitionStyleTag.remove();
+    return;
+  }
+
+  document.head.append(avaliFontDefinitionStyleTag);
+}
+
+preferences.subscribe(settings => {
+  refreshAvaliFont(settings.useAvaliFont ?? false);
+});
+
+preferences.useAvaliFont.get().then(refreshAvaliFont);

src/lib/extension/preferences/FunPreferences.ts

@@ -0,0 +1,16 @@
+import CacheablePreferences, { PreferenceField, type WithFields } from "$lib/extension/base/CacheablePreferences";
+
+interface FunPreferencesFields {
+  useAvaliFont: boolean;
+}
+
+export default class FunPreferences extends CacheablePreferences<FunPreferencesFields> implements WithFields<FunPreferencesFields> {
+  constructor() {
+    super('fun');
+  }
+
+  readonly useAvaliFont = new PreferenceField(this, {
+    field: "useAvaliFont",
+    defaultValue: false,
+  });
+}

src/routes/preferences/+page.svelte

@@ -11,6 +11,7 @@
   <hr>
   <MenuItem href="/preferences/tags">Tagging</MenuItem>
   <MenuItem href="/preferences/misc">Misc & Tools</MenuItem>
+  <MenuItem href="/preferences/fun">Fun</MenuItem>
   <hr>
   <MenuItem href="/preferences/debug">Debug</MenuItem>
 </Menu>

src/routes/preferences/fun/+page.svelte

@@ -0,0 +1,31 @@
+<script>
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import FormContainer from "$components/ui/forms/FormContainer.svelte";
+  import FormControl from "$components/ui/forms/FormControl.svelte";
+  import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
+  import { useAvaliFont } from "$stores/preferences/fun";
+  import Notice from "$components/ui/Notice.svelte";
+</script>
+
+<Menu>
+  <MenuItem href="/preferences" icon="arrow-left">Back</MenuItem>
+  <hr>
+</Menu>
+<Notice level="warning">
+  These features are not to mean be really useful. Just a little bit of fun.
+</Notice>
+<Menu>
+  <hr>
+</Menu>
+<FormContainer>
+  <FormControl>
+    <CheckboxField bind:checked={$useAvaliFont}>
+      <strong>Display everything in Avali Scratch</strong><br>
+      <small>
+        This will apply the special font across the whole website, making it unusable unless you can read Avali Scratch
+        alphabet. Unfortunately, text will flicker on every page load.
+      </small>
+    </CheckboxField>
+  </FormControl>
+</FormContainer>

src/stores/preferences/fun.ts

@@ -0,0 +1,11 @@
+import FunPreferences from "$lib/extension/preferences/FunPreferences";
+import { PreferenceSync } from "$lib/store-sync";
+import { writable } from "svelte/store";
+
+export const useAvaliFont = writable<boolean>(false);
+
+const preferences = new FunPreferences();
+
+void PreferenceSync.for(preferences)
+  .connect(preferences.useAvaliFont, useAvaliFont, {updateToStore: Boolean})
+  .startSync()