refactor admin crud popups

src/app/admin/feedback/BottomBar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { Feedback } from './types.ts';
   import Input from '@components/input/Input.svelte';
   import Textarea from '@components/input/Textarea.svelte';
+  import type { Feedback } from '@app/admin/feedback/feedback.ts';
 
   // types
   interface Props {
@@ -20,7 +20,7 @@
   <div class="w-96">
     <Input value={feedback?.event} label="Event" readonly />
     <Input value={feedback?.title} label="Titel" readonly />
-    <Input value={feedback?.user?.username} label="Nutzer" readonly />
+    <Input value={feedback?.username} label="Nutzer" readonly />
   </div>
   <div class="divider divider-horizontal"></div>
   <div class="w-full">

src/app/admin/feedback/Feedback.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import BottomBar from './BottomBar.svelte';
-  import SortableTr from '@components/admin/table/SortableTr.svelte';
-  import SortableTh from '@components/admin/table/SortableTh.svelte';
-  import { feedbacks } from './state.ts';
-  import { fetchFeedbacks } from './actions.ts';
+  import { feedbacks, fetchFeedbacks, type Feedback } from '@app/admin/feedback/feedback.ts';
   import { onMount } from 'svelte';
-  import type { Feedback } from './types.ts';
+  import DataTable from '@components/admin/table/DataTable.svelte';
 
+  // consts
   // consts
   const dateFormat = new Intl.DateTimeFormat('de-DE', {
     year: 'numeric',
@@ -25,29 +23,20 @@
   });
 </script>
 
-<div class="min-h-[70vh] max-h-screen overflow-x-auto">
-  <table class="table table-pin-rows">
-    <thead>
-      <SortableTr data={feedbacks}>
-        <SortableTh style="width: 5%">#</SortableTh>
-        <SortableTh style="width: 10%">Event</SortableTh>
-        <SortableTh style="width: 20%" key="user.username">Nutzer</SortableTh>
-        <SortableTh style="width: 20%" key="lastChanged">Datum</SortableTh>
-        <SortableTh style="width: 45%">Inhalt</SortableTh>
-      </SortableTr>
-    </thead>
-    <tbody>
-      {#each $feedbacks as feedback, i (feedback.id)}
-        <tr class="hover:bg-base-200" onclick={() => (activeFeedback = feedback)}>
-          <td>{i + 1}</td>
-          <td>{feedback.event}</td>
-          <td>{feedback.user?.username}</td>
-          <td>{dateFormat.format(new Date(feedback.lastChanged))}</td>
-          <td>{feedback.content}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+{#snippet date(value: string)}
+  {dateFormat.format(new Date(value))}
+{/snippet}
+
+<DataTable
+  data={feedbacks}
+  count={true}
+  keys={[
+    { key: 'event', label: 'Event', width: 10, sortable: true },
+    { key: 'username', label: 'Nutzer', width: 10, sortable: true },
+    { key: 'lastChanged', label: 'Datum', width: 10, sortable: true, transform: date },
+    { key: 'content', label: 'Inhalt', width: 10 }
+  ]}
+  onClick={(feedback) => (activeFeedback = feedback)}
+/>
 
 <BottomBar feedback={activeFeedback} />

src/app/admin/feedback/feedback.ts

@@ -1,7 +1,15 @@
-import { actions } from 'astro:actions';
-import { feedbacks } from './state.ts';
+import { type ActionReturnType, actions } from 'astro:actions';
+import { writable } from 'svelte/store';
 import { actionErrorPopup } from '@util/action.ts';
 
+// types
+export type Feedbacks = Exclude<ActionReturnType<typeof actions.feedback.feedbacks>['data'], undefined>['feedbacks'];
+export type Feedback = Feedbacks[0];
+
+// state
+export const feedbacks = writable<Feedbacks>([]);
+
+// actions
 export async function fetchFeedbacks(reporter?: string | null, reported?: string | null) {
   const { data, error } = await actions.feedback.feedbacks({ reporter: reporter, reported: reported });
   if (error) {

src/app/admin/feedback/state.ts

@@ -1,4 +0,0 @@
-import { writable } from 'svelte/store';
-import type { Feedbacks } from './types.ts';
-
-export const feedbacks = writable<Feedbacks>([]);

src/app/admin/feedback/types.ts

@@ -1,4 +0,0 @@
-import type { ActionReturnType, actions } from 'astro:actions';
-
-export type Feedbacks = Exclude<ActionReturnType<typeof actions.feedback.feedbacks>['data'], undefined>['feedbacks'];
-export type Feedback = Feedbacks[0];