refactor admin crud popups

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} />