feat: add some pk;cfg settings

src/components/SettingsSideBar.svelte

@@ -6,6 +6,7 @@
     IconEyeHeart,
     IconAmbulance,
     IconSettings,
+    IconTool,
   } from "@tabler/icons-svelte"
 
   let { hide = false } = $props()
@@ -20,6 +21,7 @@
   <!-- Sidebar content here -->
   <li><h1 class="text-3xl font-bold mb-4 pointer-events-none">Settings</h1></li>
   <li><a href="/settings/general"><IconSettings /> General</a></li>
+  <li><a href="/settings/config"><IconTool /> Config</a></li>
   <li><a href="/settings/theme"><IconPaint /> Theme</a></li>
   <li><a href="/settings/layout"><IconLayout /> Layout</a></li>
   <li><a href="/settings/accessibility"><IconEyeHeart /> Accessibility</a></li>

src/routes/settings/config/+page.server.ts

@@ -0,0 +1,19 @@
+import type { Actions } from "@sveltejs/kit"
+
+export async function load({ cookies, params, url, locals }) {
+  const token = cookies.get("pk-token")
+
+  const api = locals.api
+
+  let configData: any
+
+  try {
+    configData = await api(`systems/@me/settings`, { token })
+  } catch (err) {
+    console.error(err)
+  }
+
+  return {
+    configData,
+  }
+}

src/routes/settings/config/+page.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import type { ActionData } from "./$types"
+  import { enhance } from "$app/forms"
+  import { PUBLIC_BASE_API_URL } from "$env/static/public"
+  import { IconAlertTriangle } from "@tabler/icons-svelte"
+  import SubmitEditButton from "$components/dash/edit/SubmitEditButton.svelte"
+
+  import ConfigOption from "./option.svelte"
+  import { IconDeviceFloppy } from "@tabler/icons-svelte"
+  import { IconPencil, IconTool } from "@tabler/icons-svelte"
+
+  export let form: ActionData
+
+  import type { PageData } from "./$types"
+
+  export let data: PageData
+  let editedData = { ...data.configData }
+
+  async function submitEdit() {
+    const token = localStorage.getItem("pk-token") || ""
+    let response = await window.api(`systems/@me/settings`, {
+      token,
+      method: "PATCH",
+      body: editedData,
+    })
+  }
+</script>
+
+<h2 class="text-3xl mb-4 font-bold" id="api-url">Config settings</h2>
+<div class="flex flex-col gap-5">
+  <ConfigOption
+    original={data.configData.pings_enabled}
+    value={editedData.pings_enabled}
+    field="ping"
+    description="Whether other users are able to mention you via a 🔔 reaction"
+  >
+    <input type="checkbox" bind:checked={editedData.pings_enabled} class="toggle" />
+  </ConfigOption>
+
+  <ConfigOption
+    original={data.configData.member_default_private}
+    value={editedData.member_default_private}
+    field="private member"
+    description="Whether member privacy is automatically set to private for new members"
+  >
+    <input type="checkbox" bind:checked={editedData.member_default_private} class="toggle" />
+  </ConfigOption>
+
+  <ConfigOption
+    original={data.configData.group_default_private}
+    value={editedData.group_default_private}
+    field="private group"
+    description="Whether group privacy is automatically set to private for new groups"
+  >
+    <input type="checkbox" bind:checked={editedData.group_default_private} class="toggle" />
+  </ConfigOption>
+
+  <ConfigOption
+    original={data.configData.show_private_info}
+    value={editedData.show_private_info}
+    field="show private"
+    description="Whether private information is shown to linked accounts by default"
+  >
+    <input type="checkbox" bind:checked={editedData.show_private_info} class="toggle" />
+  </ConfigOption>
+
+  <ConfigOption
+    original={data.configData.member_limit}
+    value={data.configData.member_limit}
+    field="member limit"
+    description="The maximum number of registered members for your system"
+  >
+    <span>{data.configData.member_limit}</span>
+  </ConfigOption>
+
+  <ConfigOption
+    original={data.configData.group_limit}
+    value={data.configData.group_limit}
+    field="group limit"
+    description="The maximum number of registered groups for your system"
+  >
+    <span>{data.configData.group_limit}</span>
+  </ConfigOption>
+
+  <button onclick={() => submitEdit()} class="btn btn-sm btn-success join-item">
+    <IconDeviceFloppy /> Save
+  </button>
+</div>

src/routes/settings/config/option.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Group, Member, System } from "$api/types"
+  import { IconPencil } from "@tabler/icons-svelte"
+
+  let {
+    original,
+    value = $bindable(),
+    description,
+    field,
+    htmlContent,
+  }: {
+    original: string | undefined | null
+    value: string | undefined
+    description: string
+    field: string
+    htmlContent: string
+  } = $props()
+</script>
+
+<div class="flex flex-col">
+  <span class="flex flex-row gap-2 justify-between items-center mb-1">
+    <span class="flex-1 flex flex-row gap-2 justify-between items-center">
+      <label for={`${field}`}><code>{field}</code>: <b>{description}</b></label>
+      {#if original !== value && original !== null}
+        <span title="edited">
+          <IconPencil size={26} class="text-info" />
+        </span>
+      {/if}
+    </span>
+  </span>
+  <slot></slot>
+</div>