Refactor player components: streamline state management and improve code readability in PermissionsDropdown, Players, and PrefixDropdown

src/components/moderator/pages/players/PrefixDropdown.svelte

@@ -18,16 +18,18 @@
   -->
 
 <script lang="ts">
-    import {Select, SelectContent, SelectItem, SelectTrigger} from "@components/ui/select";
-    import {permissions} from "@stores/stores.ts";
-    import {permsRepo} from "@repo/perms.ts";
+    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
+    import { permissions } from "@stores/stores.ts";
+    import { permsRepo } from "@repo/perms.ts";
 
-    const {
-        prefix, uuid
-    }: { prefix: string, uuid: string } = $props();
+    const { prefix, uuid }: { prefix: string; uuid: string } = $props();
 
     let value = $state(prefix);
 
+    $effect(() => {
+        value = prefix;
+    });
+
     function onChange(change: string) {
         $permsRepo.setPrefix(uuid, change);
 
@@ -44,4 +46,4 @@
             <SelectItem value={prefix[0]}>{prefix[1].chatPrefix === "" ? "None" : prefix[1].chatPrefix}</SelectItem>
         {/each}
     </SelectContent>
-</Select>
+</Select>