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

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

@@ -28,6 +28,11 @@
     let value = $state(perms);
     let prevValue = $state(perms);
 
+    $effect(() => {
+        value = perms;
+        prevValue = perms;
+    });
+
     function onChange(change: string[]) {
         $permissions.perms.forEach((perm) => {
             if (prevValue.includes(perm) && !change.includes(perm)) {

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

@@ -47,7 +47,7 @@
     let rows = $state(0);
 
     $effect(() => {
-        $dataRepo.queryPlayers(search || undefined, undefined, undefined, pagination.pageSize, pagination.pageIndex, true, true).then((res) => {
+        $dataRepo.queryPlayers(search || undefined, undefined, undefined, pagination.pageSize, pagination.pageIndex, true, false).then((res) => {
             data = res.entries;
             rows = res.rows;
         });

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

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

src/components/moderator/pages/players/columns.ts

@@ -17,8 +17,8 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type {ColumnDef} from "@tanstack/table-core";
+import type { ColumnDef } from "@tanstack/table-core";
-import type {Player} from "@type/data.ts";
+import type { Player } from "@type/data.ts";
 import { renderComponent } from "@components/ui/data-table";
 import PermissionsDropdown from "@components/moderator/pages/players/PermissionsDropdown.svelte";
 import PrefixDropdown from "@components/moderator/pages/players/PrefixDropdown.svelte";
@@ -36,25 +36,20 @@ export const columns: ColumnDef<Player[]> = [
         accessorKey: "prefix",
         header: "Prefix",
         cell: ({ row }) => {
-            return renderComponent(
+            return renderComponent(PrefixDropdown, {
-                PrefixDropdown, {
+                prefix: row.getValue("prefix"),
-                    prefix: row.getValue("prefix"),
+                uuid: row.getValue("uuid"),
-                    uuid: row.getValue("uuid"),
+            });
-                },
-            );
         },
     },
     {
         accessorKey: "perms",
         header: "Permissions",
         cell: ({ row }) => {
-            return renderComponent(
+            return renderComponent(PermissionsDropdown, {
-                PermissionsDropdown,
+                perms: row.getValue("perms"),
-                {
+                uuid: row.getValue("uuid"),
-                    perms: row.getValue("perms"),
+            });
-                    uuid: row.getValue("uuid"),
-                },
-            );
         },
     },
 ];