initial commit

src/app/admin/teams/SidebarActions.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import Input from '@components/input/Input.svelte';
+  import Icon from '@iconify/svelte';
+  import { addTeam, fetchTeams } from './actions.ts';
+  import CreateOrEditPopup from '@app/admin/teams/CreateOrEditPopup.svelte';
+
+  // states
+  let teamNameFilter = $state<string | null>(null);
+  let memberUsernameFilter = $state<string | null>(null);
+
+  let newTeamPopupOpen = $state(false);
+
+  // lifecycle
+  $effect(() => {
+    fetchTeams(teamNameFilter, memberUsernameFilter);
+  });
+</script>
+
+<div>
+  <fieldset class="fieldset border border-base-content/50 rounded-box p-2">
+    <legend class="fieldset-legend">Filter</legend>
+    <Input bind:value={teamNameFilter} label="Team Name" />
+    <Input bind:value={memberUsernameFilter} label="Spieler Username" />
+  </fieldset>
+  <div class="divider my-1"></div>
+  <button class="btn btn-soft w-full" onclick={() => (newTeamPopupOpen = true)}>
+    <Icon icon="heroicons:plus-16-solid" />
+    <span>Neues Team</span>
+  </button>
+</div>
+
+{#key newTeamPopupOpen}
+  <CreateOrEditPopup
+    popupTitle="Neues Team"
+    submitButtonTitle="Team erstellen"
+    confirmPopupTitle="Team erstellen"
+    confirmPopupMessage="Bist du sicher, dass du das Team erstellen möchtest?"
+    team={null}
+    open={newTeamPopupOpen}
+    onSubmit={addTeam}
+    onClose={() => (newTeamPopupOpen = false)}
+  />
+{/key}