From 50c0c7d8650c228d7c07c97dfed223a262ab8c0f Mon Sep 17 00:00:00 2001
From: Yusur Princeps <sakuragasaki46@gmail.com>
Date: Sat, 21 Mar 2026 13:13:21 +0100
Subject: [PATCH 1/2] add ColorThemeSelect

---
 src/lib/ColorThemeSelect.svelte             | 59 +++++++++++++++++++++
 src/lib/globals.svelte.ts                   |  4 ++
 src/routes/settings/+layout.svelte          |  2 +-
 src/routes/settings/appearance/+page.svelte | 11 +++-
 4 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/ColorThemeSelect.svelte

diff --git a/src/lib/ColorThemeSelect.svelte b/src/lib/ColorThemeSelect.svelte
new file mode 100644
index 0000000..c8cb588
--- /dev/null
+++ b/src/lib/ColorThemeSelect.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { getColorThemeCode, setColorThemeCode } from "./globals.svelte";
+
+
+  let color_values = [
+    {name: "Default"},
+    {name: "Rei"},
+    {name: "Ai"},
+    {name: "Aqua"},
+    {name: "Neru"},
+    {name: "Gumi"},
+    {name: "Emu"},
+    {name: "Spacegray"},
+    {name: "Haku"},
+    {name: "Miku"},
+    {name: "Defoko"},
+    {name: "Kaito"},
+    {name: "Meiko"},
+    {name: "WhatsApp"},
+    {name: "Teto"},
+    {name: "Ruby"}
+  ];
+
+  // NOT AFFILIATED with the following:
+  // Oshi No Ko right holders, TwinDrill, Crypton Future Media or Meta Platforms!!
+
+  let { value = $bindable(0) } = $props();
+
+  $effect(() => {
+    if (+value !== getColorThemeCode()) {
+      setColorThemeCode(value);
+    }
+  })
+</script>
+
+<ul class="grid">
+  {#each color_values as {name: cname}, cval}
+  <li>
+    <label>
+      <input type="radio" name="color_theme" value={cval} checked={value == cval} onclick={() => {
+        value = cval;
+      }} />
+      <span class="color-nugget" style:--color={`var(--c${+cval}-accent)`}></span>
+      <span>{cname}</span>
+    </label>
+  </li>
+  {/each}
+</ul>
+
+<style>
+  .color-nugget {
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    border-radius: 1em;
+    background-color: var(--color);
+    border: 1px solid var(--color, var(--border));
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/globals.svelte.ts b/src/lib/globals.svelte.ts
index 1af19c9..411d9e6 100644
--- a/src/lib/globals.svelte.ts
+++ b/src/lib/globals.svelte.ts
@@ -65,6 +65,10 @@ export function getColorThemeCode (): number {
     return health.color_theme;
 }
 
+export function setColorThemeCode(value: number) {
+    health.color_theme = value;
+}
+
 export function isLoaded(): boolean {
     return health.loaded;
 }
\ No newline at end of file
diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
index e785cb1..3c3414c 100644
--- a/src/routes/settings/+layout.svelte
+++ b/src/routes/settings/+layout.svelte
@@ -16,6 +16,6 @@ let { children } = $props();
         </ul>
     {/snippet}
     {#snippet right()}
-        <button class="primary card">Save</button>
+        <button class="primary card" disabled>Save</button>
     {/snippet}
 </SLayout>
\ No newline at end of file
diff --git a/src/routes/settings/appearance/+page.svelte b/src/routes/settings/appearance/+page.svelte
index 265b473..44b2861 100644
--- a/src/routes/settings/appearance/+page.svelte
+++ b/src/routes/settings/appearance/+page.svelte
@@ -1,2 +1,11 @@
+<script lang="ts">
+    import ColorThemeSelect from "$lib/ColorThemeSelect.svelte";
+    import { getColorThemeCode } from "$lib/globals.svelte";
 
-TODO
\ No newline at end of file
+    let color_theme = $state(getColorThemeCode());
+</script>
+
+<section>
+    <h2>Color theme</h2>
+    <ColorThemeSelect bind:value={color_theme} />
+</section>
\ No newline at end of file

From 047fc545ae416f64d8a19dcbbcd8f126115e7f14 Mon Sep 17 00:00:00 2001
From: Yusur Princeps <sakuragasaki46@gmail.com>
Date: Thu, 4 Jun 2026 11:16:55 +0200
Subject: [PATCH 2/2] add moderator list, create guild link

---
 package.json                         |  2 +-
 src/lib/Centered.svelte              |  2 +-
 src/lib/HomeMenu.svelte              |  5 ++++-
 src/lib/ModeratorList.svelte         | 33 ++++++++++++++++++++++++++++
 src/routes/[x+2b][name]/+page.svelte | 11 ++++++++--
 src/routes/[x+2b][name]/+page.ts     | 11 ++++++++--
 6 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/ModeratorList.svelte

diff --git a/package.json b/package.json
index fccf4cb..a7e2a09 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@yusurko/vigil",
 	"private": true,
-	"version": "0.1.0-dev62",
+	"version": "0.1.0-dev74",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
diff --git a/src/lib/Centered.svelte b/src/lib/Centered.svelte
index ab3b8c4..332f6b1 100644
--- a/src/lib/Centered.svelte
+++ b/src/lib/Centered.svelte
@@ -4,7 +4,7 @@ let { narrow = false, small = false, children } : { narrow?: boolean, small ?: b
 </script>
 
 <div class="centered" class:narrow={narrow} class:small={small}>
-  {@render children () }
+  {@render children() }
 </div>
 
 <style>
diff --git a/src/lib/HomeMenu.svelte b/src/lib/HomeMenu.svelte
index 727c272..cefd14d 100644
--- a/src/lib/HomeMenu.svelte
+++ b/src/lib/HomeMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { RiCompassLine, RiHome2Line, RiSettings2Line, RiShieldStarLine, RiUserLine } from 'svelte-remixicon';
+  import { RiCompassLine, RiHome2Line, RiSettings2Line, RiShieldStarLine, RiAddBoxLine, RiUserLine } from 'svelte-remixicon';
     import MenuLink from './MenuLink.svelte';
 
   let { user = null } = $props();
@@ -11,6 +11,9 @@
   <MenuLink href="/settings" icon={RiSettings2Line} label="Settings" />
   {#if user}
   <MenuLink href="/@{user.username}" icon={RiUserLine} label="My profile" />
+  {#if true}
+  <MenuLink href="/createguild" icon={RiAddBoxLine} label="Create guild" />
+  {/if}
   {#if user.badges && user.badges.indexOf('administrator') >= 0}
   <MenuLink href="/admin/" icon={RiShieldStarLine} label="Administration" />
   {/if}
diff --git a/src/lib/ModeratorList.svelte b/src/lib/ModeratorList.svelte
new file mode 100644
index 0000000..6098526
--- /dev/null
+++ b/src/lib/ModeratorList.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { RiShieldStarLine } from "svelte-remixicon";
+    import AsideCard from "./AsideCard.svelte";
+    import Centered from "./Centered.svelte";
+    import { getMe } from "./globals.svelte";
+    import Wip from "./Wip.svelte";
+
+    let { guildName, mods } = $props();
+    let me = getMe();
+</script>
+
+{#if me && mods}
+
+{#if mods.banned}
+<Centered>Moderator list is hidden because you are banned.</Centered>
+{:else if mods.unmoderated}
+<Centered>+{guildName} is currently unmoderated</Centered>
+{:else}
+<AsideCard title={`Moderators of +${guildName}`}>
+  <ul>
+  {#each mods.has as mod}
+    <li>
+      @{mod.username}
+      {#if mod.is_owner}
+      <span><RiShieldStarLine/> <small>Owner</small></span>
+      {/if}
+    </li>
+  {/each}
+  </ul>
+</AsideCard>
+{/if}
+
+{/if}
\ No newline at end of file
diff --git a/src/routes/[x+2b][name]/+page.svelte b/src/routes/[x+2b][name]/+page.svelte
index 74dd6f4..f6fd1f4 100644
--- a/src/routes/[x+2b][name]/+page.svelte
+++ b/src/routes/[x+2b][name]/+page.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
     import type { GuildEntry, PostEntry } from "$lib/backend";
     import Feed from "$lib/Feed.svelte";
+    import { getMe } from "$lib/globals.svelte";
     import GuildAbout from "$lib/GuildAbout.svelte";
     import GuildMenu from "$lib/GuildMenu.svelte";
+    import ModeratorList from "$lib/ModeratorList.svelte";
     import SLayout from "$lib/SLayout.svelte";
 
-    let { data } : { data: { guild: GuildEntry , feed: PostEntry[] } } = $props();
-    let { guild, feed = [] } = $derived(data);
+    let { data } : { data: { guild: GuildEntry , feed: PostEntry[], mods: any } } = $props();
+    let { guild, feed = [], mods = null } = $derived(data);
+    let me = getMe();
 
 </script>
 
@@ -19,5 +22,9 @@
 
   {#snippet right()}
     <GuildAbout {guild} />
+
+    {#if me}
+    <ModeratorList guildName={guild.name} {mods} />
+    {/if}
   {/snippet}
 </SLayout>
\ No newline at end of file
diff --git a/src/routes/[x+2b][name]/+page.ts b/src/routes/[x+2b][name]/+page.ts
index bbd36ee..47ecfb3 100644
--- a/src/routes/[x+2b][name]/+page.ts
+++ b/src/routes/[x+2b][name]/+page.ts
@@ -21,11 +21,18 @@ export async function load(event) {
             if (guilds[g].name === name) {
                 guild = guilds[g];
             }
-        } 
+        }
 
         if (!guild) error(404);
 
-        return { guild, feed };
+        let mods = null;
+        const respMods = await backend.withEvent(event).fetch('guild/@' + encodeURIComponent(name) + '/mods');
+
+        if (respMods.status === 200) {
+          const respModsJ = await respMods.json();
+          mods = respModsJ;
+        }
+        return { guild, feed, mods };
     }
     catch (e) {
         console.error(e);