labels create and get

frontend/components/Label/Chip.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { Label } from '~~/lib/api/classes/labels';
+  defineProps({
+    label: {
+      type: Object as () => Label,
+      required: true,
+    },
+  });
+
+  const badge = ref(null);
+  const isHover = useElementHover(badge);
+  const { focused } = useFocus(badge);
+
+  const isActive = computed(() => isHover.value || focused.value);
+</script>
+
+<template>
+  <NuxtLink ref="badge" :to="`/label/${label.id}`">
+    <span class="badge badge-lg p-4">
+      <label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">
+        <Icon name="heroicons-arrow-right" class="mr-2 swap-on"></Icon>
+        <Icon name="heroicons-tag" class="mr-2 swap-off"></Icon>
+      </label>
+      {{ label.name }}
+    </span>
+  </NuxtLink>
+</template>

frontend/components/Label/CreateModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <BaseModal v-model="modal">
+    <template #title> Create Label </template>
+    <form @submit.prevent="create">
+      <FormTextField
+        :trigger-focus="focused"
+        ref="locationNameRef"
+        :autofocus="true"
+        label="Label Name"
+        v-model="form.name"
+      />
+      <FormTextField label="Label Description" v-model="form.description" />
+      <div class="modal-action">
+        <BaseButton type="submit" :loading="loading"> Create </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+  });
+
+  const modal = useVModel(props, 'modelValue');
+  const loading = ref(false);
+  const focused = ref(false);
+  const form = reactive({
+    name: '',
+    description: '',
+    color: '', // Future!
+  });
+
+  function reset() {
+    form.name = '';
+    form.description = '';
+    form.color = '';
+    focused.value = false;
+    modal.value = false;
+    loading.value = false;
+  }
+
+  whenever(
+    () => modal.value,
+    () => {
+      focused.value = true;
+    }
+  );
+
+  const api = useUserApi();
+  const toast = useNotifier();
+
+  async function create() {
+    const { data, error } = await api.labels.create(form);
+    if (error) {
+      toast.error("Couldn't create label");
+      return;
+    }
+
+    toast.success('Label created');
+    reset();
+  }
+</script>