feat: locations tree viewer (#248)

* location tree API

* test fixes

* initial tree location elements

* locations tree page

* update meta-data

* code-gen

* store item display preferences

* introduce basic table/card view elements

* codegen

* set parent location during location creation

* add item support for tree query

* refactor tree view

* wip: location selector improvements

* type gen

* rename items -> search

* remove various log statements

* fix markdown rendering for description

* update location selectors

* fix tests

* fix currency tests

* formatting

frontend/components/Item/View/Selectable.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+  import { ViewType } from "~~/composables/use-preferences";
+  import { ItemSummary } from "~~/lib/api/types/data-contracts";
+
+  type Props = {
+    view?: ViewType;
+    items: ItemSummary[];
+  };
+
+  const preferences = useViewPreferences();
+
+  const props = defineProps<Props>();
+  const viewSet = computed(() => {
+    return !!props.view;
+  });
+
+  const itemView = computed(() => {
+    return props.view ?? preferences.value.itemDisplayView;
+  });
+
+  function setViewPreference(view: ViewType) {
+    preferences.value.itemDisplayView = view;
+  }
+</script>
+
+<template>
+  <section>
+    <BaseSectionHeader class="mb-5 flex justify-between items-center">
+      Items
+
+      <template #description>
+        <div v-if="!viewSet" class="dropdown dropdown-hover dropdown-left">
+          <label tabindex="0" class="btn btn-ghost m-1">
+            <Icon name="mdi-dots-vertical" class="h-7 w-7" />
+          </label>
+          <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-32">
+            <li>
+              <button @click="setViewPreference('card')">
+                <Icon name="mdi-card-text-outline" class="h-5 w-5" />
+                Card
+              </button>
+            </li>
+            <li>
+              <button @click="setViewPreference('table')">
+                <Icon name="mdi-table" class="h-5 w-5" />
+                Table
+              </button>
+            </li>
+          </ul>
+        </div>
+      </template>
+    </BaseSectionHeader>
+
+    <template v-if="itemView === 'table'">
+      <ItemViewTable :items="items" />
+    </template>
+    <template v-else>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+        <ItemCard v-for="item in items" :key="item.id" :item="item" />
+      </div>
+    </template>
+  </section>
+</template>
+
+<style scoped></style>