From 3bde299ea5878af2adef6a30a3410aaeadc1f3f2 Mon Sep 17 00:00:00 2001
From: Chaoscaot <max@maxsp.de>
Date: Tue, 2 Dec 2025 22:24:09 +0100
Subject: [PATCH] Refactor code for consistency: standardize formatting and
 improve readability across multiple Svelte components

---
 .../admin/components/FightEditPart.svelte     | 163 ++++++++++--------
 src/components/admin/pages/Perms.svelte       |  82 ++++-----
 .../admin/pages/event/RefereesList.svelte     |  84 ++++-----
 .../pages/players/PermissionsDropdown.svelte  |  20 +--
 4 files changed, 177 insertions(+), 172 deletions(-)

diff --git a/src/components/admin/components/FightEditPart.svelte b/src/components/admin/components/FightEditPart.svelte
index 04c77b9..4d9d529 100644
--- a/src/components/admin/components/FightEditPart.svelte
+++ b/src/components/admin/components/FightEditPart.svelte
@@ -18,83 +18,103 @@
   -->
 
 <script lang="ts">
-    import {Input, Label, Select} from "flowbite-svelte";
+    import { Input, Label, Select } from "flowbite-svelte";
     import TypeAheadSearch from "./TypeAheadSearch.svelte";
-    import {gamemodes, groups, maps} from "@stores/stores.ts";
-    import type {Team} from "@type/team.ts";
+    import { gamemodes, groups, maps } from "@stores/stores.ts";
+    import type { Team } from "@type/team.ts";
 
-  interface Props {
-    teams?: Team[];
-    blueTeam: string;
-    redTeam: string;
-    start?: string;
-    gamemode?: string;
-    map?: string;
-    spectatePort?: string | null;
-    group?: string | null;
-    groupSearch?: string;
-  }
+    interface Props {
+        teams?: Team[];
+        blueTeam: string;
+        redTeam: string;
+        start?: string;
+        gamemode?: string;
+        map?: string;
+        spectatePort?: string | null;
+        group?: string | null;
+        groupSearch?: string;
+    }
 
-  let {
-    teams = [],
-    blueTeam = $bindable(),
-    redTeam = $bindable(),
-    start = $bindable(""),
-    gamemode = $bindable(""),
-    map = $bindable(""),
-    spectatePort = $bindable(null),
-    group = $bindable(""),
-    groupSearch = $bindable("")
-  }: Props = $props();
+    let {
+        teams = [],
+        blueTeam = $bindable(),
+        redTeam = $bindable(),
+        start = $bindable(""),
+        gamemode = $bindable(""),
+        map = $bindable(""),
+        spectatePort = $bindable(null),
+        group = $bindable(""),
+        groupSearch = $bindable(""),
+    }: Props = $props();
 
-    let selectableTeams = $derived(teams.map(team => {
-        return {
-            name: team.name,
-            value: team.id.toString()
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name)));
+    let selectableTeams = $derived(
+        teams
+            .map((team) => {
+                return {
+                    name: team.name,
+                    value: team.id.toString(),
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
 
-    let selectableGamemodes = $derived($gamemodes.map(gamemode => {
-        return {
-            name: gamemode,
-            value: gamemode
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name)));
+    let selectableGamemodes = $derived(
+        $gamemodes
+            .map((gamemode) => {
+                return {
+                    name: gamemode,
+                    value: gamemode,
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
     let customGamemode = $derived(!selectableGamemodes.some((e) => e.name === gamemode) && gamemode !== "");
     let selectableCustomGamemode = $derived([
-        ...selectableGamemodes, {
+        ...selectableGamemodes,
+        {
             name: gamemode + " (custom)",
-            value: gamemode
-        }
+            value: gamemode,
+        },
     ]);
 
     let mapsStore = $derived(maps(gamemode));
-    let selectableMaps = $derived($mapsStore.map(map => {
-        return {
-            name: map,
-            value: map
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name)));
+    let selectableMaps = $derived(
+        $mapsStore
+            .map((map) => {
+                return {
+                    name: map,
+                    value: map,
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
     let customMap = $derived(!selectableMaps.some((e) => e.name === map) && map !== "");
     let selectableCustomMaps = $derived([
-        ...selectableMaps, {
+        ...selectableMaps,
+        {
             name: map + " (custom)",
-            value: map
-        }
+            value: map,
+        },
     ]);
 
-    let selectableGroups = $derived([{
-        name: "None",
-        value: ""
-    }, {
-        value: groupSearch,
-        name: `Create: '${groupSearch}'`
-    }, ...$groups.map(group => {
-        return {
-            name: group,
-            value: group
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name))]);
+    let selectableGroups = $derived([
+        {
+            name: "None",
+            value: "",
+        },
+        {
+            value: groupSearch,
+            name: `Create: '${groupSearch}'`,
+        },
+        ...$groups
+            .map((group) => {
+                return {
+                    name: group,
+                    value: group,
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name)),
+    ]);
 </script>
 
 <div class="m-2">
@@ -107,32 +127,29 @@
 </div>
 <div class="mt-4">
     <Label for="fight-start">Start</Label>
-    <Input id="fight-start" bind:value={start} >
+    <Input id="fight-start" bind:value={start}>
         {#snippet children({ props })}
-        <input type="datetime-local" {...props} bind:value={start}/>
-            {/snippet}
+            <input type="datetime-local" {...props} bind:value={start} />
+        {/snippet}
     </Input>
 </div>
 <div class="m-2">
     <Label for="fight-gamemode">Gamemode</Label>
-    <Select items={customGamemode ? selectableCustomGamemode : selectableGamemodes} bind:value={gamemode}
-            id="fight-gamemode"></Select>
+    <Select items={customGamemode ? selectableCustomGamemode : selectableGamemodes} bind:value={gamemode} id="fight-gamemode"></Select>
 </div>
 <div class="m-2">
     <Label for="fight-maps">Map</Label>
-    <Select items={customMap ? selectableCustomMaps : selectableMaps} bind:value={map} id="fight-maps"
-            disabled={customGamemode} class={customGamemode ? "cursor-not-allowed" : ""}></Select>
+    <Select items={customMap ? selectableCustomMaps : selectableMaps} bind:value={map} id="fight-maps" disabled={customGamemode} class={customGamemode ? "cursor-not-allowed" : ""}></Select>
 </div>
 <div class="m-2">
     <Label for="fight-port">Spectate Port</Label>
-    <Input id="fight-port" bind:value={spectatePort} >
+    <Input id="fight-port" bind:value={spectatePort}>
         {#snippet children({ props })}
-        <input type="number" inputmode="numeric" {...props} bind:value={spectatePort}/>
-            {/snippet}
+            <input type="number" inputmode="numeric" {...props} bind:value={spectatePort} />
+        {/snippet}
     </Input>
 </div>
 <div class="m-2">
     <Label for="fight-kampf">Group</Label>
-    <TypeAheadSearch items={selectableGroups} bind:selected={group} bind:searchValue={groupSearch}
-                     all></TypeAheadSearch>
+    <TypeAheadSearch items={selectableGroups} bind:selected={group} bind:searchValue={groupSearch} all></TypeAheadSearch>
 </div>
diff --git a/src/components/admin/pages/Perms.svelte b/src/components/admin/pages/Perms.svelte
index f195df4..6ff4812 100644
--- a/src/components/admin/pages/Perms.svelte
+++ b/src/components/admin/pages/Perms.svelte
@@ -18,18 +18,18 @@
   -->
 
 <script lang="ts">
-  import { run, preventDefault } from 'svelte/legacy';
+    import { run, preventDefault } from "svelte/legacy";
 
-    import {Button, Card, Checkbox, Input, Label, Navbar, NavBrand, Radio, Spinner} from "flowbite-svelte";
-    import {ArrowLeftOutline} from "flowbite-svelte-icons";
-    import {capitalize} from "../util.ts";
-    import {permsRepo} from "@repo/perms.ts";
-    import {me} from "@stores/me.ts";
+    import { Button, Card, Checkbox, Input, Label, Navbar, NavBrand, Radio, Spinner } from "flowbite-svelte";
+    import { ArrowLeftOutline } from "flowbite-svelte-icons";
+    import { capitalize } from "../util.ts";
+    import { permsRepo } from "@repo/perms.ts";
+    import { me } from "@stores/me.ts";
     import SWButton from "@components/styled/SWButton.svelte";
     import SWModal from "@components/styled/SWModal.svelte";
-    import {userRepo} from "@repo/user.ts";
-    import {dataRepo} from "@repo/data.ts";
-    import type {Player} from "@type/data";
+    import { userRepo } from "@repo/user.ts";
+    import { dataRepo } from "@repo/data.ts";
+    import type { Player } from "@type/data";
 
     let search = $state("");
     let playersList: Player[] = $state([]);
@@ -62,7 +62,7 @@
         if (!id) {
             return;
         }
-        return $permsRepo.getPerms(id).then(value => {
+        return $permsRepo.getPerms(id).then((value) => {
             activePerms = value.perms;
             prefixEdit = value.prefix.name;
             return value;
@@ -72,7 +72,7 @@
     function togglePerm(perm: string) {
         return () => {
             if (activePerms.includes(perm)) {
-                activePerms = activePerms.filter(value => value !== perm);
+                activePerms = activePerms.filter((value) => value !== perm);
             } else {
                 activePerms = [...activePerms, perm];
             }
@@ -80,7 +80,7 @@
     }
 
     function save() {
-        playerPerms!.then(async perms => {
+        playerPerms!.then(async (perms) => {
             if (perms.prefix.name != prefixEdit) {
                 await $permsRepo.setPrefix(selectedPlayer!, prefixEdit);
             }
@@ -115,22 +115,20 @@
         resetPasswordRepeat = "";
         resetPasswordModal = false;
     }
-    
+
     run(() => {
-    playerPerms = loadPlayer(selectedPlayer);
-  });
+        playerPerms = loadPlayer(selectedPlayer);
+    });
 </script>
 
 <div class="flex flex-col h-screen overflow-hidden">
-    <Navbar  >
+    <Navbar>
         {#snippet children({ hidden, toggle })}
-        <NavBrand href="#">
-              <ArrowLeftOutline></ArrowLeftOutline>
-              <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white">
-                  Permissions
-              </span>
-          </NavBrand>
-            {/snippet}
+            <NavBrand href="#">
+                <ArrowLeftOutline></ArrowLeftOutline>
+                <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Permissions </span>
+            </NavBrand>
+        {/snippet}
     </Navbar>
 
     <div class="p-4 flex-1 overflow-hidden">
@@ -138,17 +136,19 @@
             <Card class="h-full flex flex-col overflow-hidden !max-w-full">
                 <div class="border-b border-b-gray-600 pb-2">
                     <Label for="user_search" class="mb-2">Search Users...</Label>
-                    <Input type="text" id="user_search" placeholder="Name..." bind:value={search}/>
+                    <Input type="text" id="user_search" placeholder="Name..." bind:value={search} />
                 </div>
                 {#if playersList.length < 100}
                     <ul class="flex-1 overflow-scroll">
                         {#each playersList as player (player.uuid)}
-                            <li class="p-4 transition-colors hover:bg-gray-700 cursor-pointer"
+                            <li
+                                class="p-4 transition-colors hover:bg-gray-700 cursor-pointer"
                                 class:text-orange-500={player.uuid === selectedPlayer}
                                 onclick={preventDefault(() => {
                                     selectedPlayer = player.uuid;
                                     selectedPlayerName = player.name;
-                                })}>
+                                })}
+                            >
                                 {player.name}
                             </li>
                         {/each}
@@ -166,39 +166,27 @@
                         {:then player}
                             <h1>Prefix</h1>
                             {#each Object.entries(perms.prefixes) as [key, prefix]}
-                                <Radio name="prefix" bind:group={prefixEdit}
-                                       value={prefix.name}>{capitalize(prefix.name.substring(7).toLowerCase())}</Radio>
+                                <Radio name="prefix" bind:group={prefixEdit} value={prefix.name}>{capitalize(prefix.name.substring(7).toLowerCase())}</Radio>
                             {/each}
                             <h1>Permissions</h1>
                             {#each perms.perms as perm}
-                                <Checkbox checked={activePerms.includes(perm)}
-                                          onclick={togglePerm(perm)}>{capitalize(perm.toLowerCase())}</Checkbox>
+                                <Checkbox checked={activePerms.includes(perm)} onclick={togglePerm(perm)}>{capitalize(perm.toLowerCase())}</Checkbox>
                             {/each}
                             <div class="mt-4">
-                                <Button disabled={prefixEdit === (player?.prefix.name ?? "") && activePerms === (player?.perms ?? [])}
-                                        onclick={save}>Save
-                                </Button>
+                                <Button disabled={prefixEdit === (player?.prefix.name ?? "") && activePerms === (player?.perms ?? [])} onclick={save}>Save</Button>
                                 {#if $me != null && $me.perms.includes("ADMINISTRATION")}
-                                    <Button onclick={() => resetPasswordModal = true}>
-                                        Reset Password
-                                    </Button>
+                                    <Button onclick={() => (resetPasswordModal = true)}>Reset Password</Button>
 
                                     <SWModal bind:open={resetPasswordModal} title="Reset Password">
                                         <Label for="new_password">New Password</Label>
-                                        <Input type="password" id="new_password" placeholder="New Password" bind:value={resetPassword}/>
+                                        <Input type="password" id="new_password" placeholder="New Password" bind:value={resetPassword} />
                                         <Label for="repeat_password">Repeat Password</Label>
-                                        <Input type="password" id="repeat_password" placeholder="Repeat Password" bind:value={resetPasswordRepeat}/>
+                                        <Input type="password" id="repeat_password" placeholder="Repeat Password" bind:value={resetPasswordRepeat} />
 
                                         {#snippet footer()}
-                                      
-                                              <Button class="ml-auto mr-4" onclick={resetResetPassword}>
-                                                  Cancel
-                                              </Button>
-                                              <Button disabled={resetPassword === "" || resetPassword !== resetPasswordRepeat} onclick={resetPW}>
-                                                  Reset Password
-                                              </Button>
-                                          
-                                      {/snippet}
+                                            <Button class="ml-auto mr-4" onclick={resetResetPassword}>Cancel</Button>
+                                            <Button disabled={resetPassword === "" || resetPassword !== resetPasswordRepeat} onclick={resetPW}>Reset Password</Button>
+                                        {/snippet}
                                     </SWModal>
                                 {/if}
                             </div>
diff --git a/src/components/admin/pages/event/RefereesList.svelte b/src/components/admin/pages/event/RefereesList.svelte
index 35c4cc1..0efa88a 100644
--- a/src/components/admin/pages/event/RefereesList.svelte
+++ b/src/components/admin/pages/event/RefereesList.svelte
@@ -18,19 +18,19 @@
   -->
 
 <script lang="ts">
-    import type {ExtendedEvent} from "@type/event.ts";
-    import {Button} from "flowbite-svelte";
-    import {PlusOutline} from "flowbite-svelte-icons";
+    import type { ExtendedEvent } from "@type/event.ts";
+    import { Button } from "flowbite-svelte";
+    import { PlusOutline } from "flowbite-svelte-icons";
     import SWModal from "@components/styled/SWModal.svelte";
     import SWButton from "@components/styled/SWButton.svelte";
     import PlayerSelector from "@components/ui/PlayerSelector.svelte";
-    import {eventRepo} from "@repo/event.ts";
+    import { eventRepo } from "@repo/event.ts";
 
-  interface Props {
-    data: ExtendedEvent;
-  }
+    interface Props {
+        data: ExtendedEvent;
+    }
 
-  let { data }: Props = $props();
+    let { data }: Props = $props();
 
     let searchValue = $state("");
     let selectedPlayer: string | null = $state(null);
@@ -41,17 +41,19 @@
 
     async function addReferee() {
         if (selectedPlayer) {
-            referees = (await $eventRepo.updateEvent(data.event.id.toString(), {
-                deadline: null,
-                end: null,
-                maxTeamMembers: null,
-                name: null,
-                publicSchemsOnly: null,
-                removeReferee: null,
-                schemType: null,
-                start: null,
-                addReferee: [selectedPlayer]
-            })).referees;
+            referees = (
+                await $eventRepo.updateEvent(data.event.id.toString(), {
+                    deadline: null,
+                    end: null,
+                    maxTeamMembers: null,
+                    name: null,
+                    publicSchemsOnly: null,
+                    removeReferee: null,
+                    schemType: null,
+                    start: null,
+                    addReferee: [selectedPlayer],
+                })
+            ).referees;
         }
 
         reset();
@@ -59,18 +61,20 @@
 
     function removeReferee(id: string) {
         return async () => {
-            referees = (await $eventRepo.updateEvent(data.event.id.toString(), {
-                deadline: null,
-                end: null,
-                maxTeamMembers: null,
-                name: null,
-                publicSchemsOnly: null,
-                addReferee: null,
-                schemType: null,
-                start: null,
-                removeReferee: [id],
-            })).referees;
-        }
+            referees = (
+                await $eventRepo.updateEvent(data.event.id.toString(), {
+                    deadline: null,
+                    end: null,
+                    maxTeamMembers: null,
+                    name: null,
+                    publicSchemsOnly: null,
+                    addReferee: null,
+                    schemType: null,
+                    start: null,
+                    removeReferee: [id],
+                })
+            ).referees;
+        };
     }
 
     function reset() {
@@ -83,9 +87,7 @@
     {#each referees as referee}
         <li class="flex flex-grow justify-between">
             {referee.name}
-            <SWButton onclick={removeReferee(referee.uuid)}>
-                Entfernen
-            </SWButton>
+            <SWButton onclick={removeReferee(referee.uuid)}>Entfernen</SWButton>
         </li>
     {/each}
 
@@ -94,8 +96,8 @@
     {/if}
 </ul>
 
-<Button class="fixed bottom-6 right-6 !p-4 z-10 shadow-lg" onclick={() => showAdd = true}>
-    <PlusOutline/>
+<Button class="fixed bottom-6 right-6 !p-4 z-10 shadow-lg" onclick={() => (showAdd = true)}>
+    <PlusOutline />
 </Button>
 
 <SWModal title="Schiedsrichter hinzufügen" bind:open={showAdd}>
@@ -105,11 +107,11 @@
         </div>
     </div>
     {#snippet footer()}
-    <div  class="flex flex-grow justify-end">
-          <SWButton onclick={reset} type="gray">Abbrechen</SWButton>
-          <SWButton onclick={addReferee}>Hinzufügen</SWButton>
-      </div>
-  {/snippet}
+        <div class="flex flex-grow justify-end">
+            <SWButton onclick={reset} type="gray">Abbrechen</SWButton>
+            <SWButton onclick={addReferee}>Hinzufügen</SWButton>
+        </div>
+    {/snippet}
 </SWModal>
 
 <style>
diff --git a/src/components/moderator/pages/players/PermissionsDropdown.svelte b/src/components/moderator/pages/players/PermissionsDropdown.svelte
index 9e6ff20..53eb83a 100644
--- a/src/components/moderator/pages/players/PermissionsDropdown.svelte
+++ b/src/components/moderator/pages/players/PermissionsDropdown.svelte
@@ -18,24 +18,22 @@
   -->
 
 <script lang="ts">
-    import {permissions} from "@stores/stores.ts";
-    import {Select, SelectContent, SelectItem} from "@components/ui/select";
-    import {SelectTrigger} from "@components/ui/select/index.js";
-    import {permsRepo} from "@repo/perms.ts";
+    import { permissions } from "@stores/stores.ts";
+    import { Select, SelectContent, SelectItem } from "@components/ui/select";
+    import { SelectTrigger } from "@components/ui/select/index.js";
+    import { permsRepo } from "@repo/perms.ts";
 
-    const {
-        perms, uuid
-    }: { perms: string[], uuid: string } = $props();
+    const { perms, uuid }: { perms: string[]; uuid: string } = $props();
 
     let value = $state(perms);
     let prevValue = $state(perms);
 
     function onChange(change: string[]) {
-        $permissions.perms.forEach(perm => {
+        $permissions.perms.forEach((perm) => {
             if (prevValue.includes(perm) && !change.includes(perm)) {
-                $permsRepo.removePerm(uuid, perm)
+                $permsRepo.removePerm(uuid, perm);
             } else if (!prevValue.includes(perm) && change.includes(perm)) {
-                $permsRepo.addPerm(uuid, perm)
+                $permsRepo.addPerm(uuid, perm);
             }
         });
 
@@ -53,4 +51,4 @@
             <SelectItem value={permission}>{permission}</SelectItem>
         {/each}
     </SelectContent>
-</Select>
\ No newline at end of file
+</Select>