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/pages/locations.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+  import { useTreeState } from "~~/components/Location/Tree/tree-state";
+
+  definePageMeta({
+    middleware: ["auth"],
+  });
+
+  useHead({
+    title: "Homebox | Items",
+  });
+
+  const api = useUserApi();
+
+  const { data: tree } = useAsyncData(async () => {
+    const { data, error } = await api.locations.getTree({
+      withItems: true,
+    });
+
+    if (error) {
+      return [];
+    }
+
+    return data.items;
+  });
+
+  const locationTreeId = "locationTree";
+
+  const treeState = useTreeState(locationTreeId);
+
+  const route = useRouter();
+
+  onMounted(() => {
+    // set tree state from query params
+    const query = route.currentRoute.value.query;
+
+    if (query && query[locationTreeId]) {
+      console.debug("setting tree state from query params");
+      const data = JSON.parse(query[locationTreeId] as string);
+
+      for (const key in data) {
+        treeState.value[key] = data[key];
+      }
+    }
+  });
+
+  watch(
+    treeState,
+    () => {
+      // Push the current state to the URL
+      route.replace({ query: { [locationTreeId]: JSON.stringify(treeState.value) } });
+    },
+    { deep: true }
+  );
+
+  function closeAll() {
+    for (const key in treeState.value) {
+      treeState.value[key] = false;
+    }
+  }
+</script>
+
+<template>
+  <BaseContainer class="mb-16">
+    <BaseSectionHeader> Locations </BaseSectionHeader>
+    <BaseCard>
+      <div class="p-4">
+        <div class="flex justify-end mb-2">
+          <div class="btn-group">
+            <button class="btn btn-sm tooltip tooltip-top" data-tip="Collapse Tree" @click="closeAll">
+              <Icon name="mdi-collapse-all-outline" />
+            </button>
+          </div>
+        </div>
+        <LocationTreeRoot v-if="tree" :locs="tree" :tree-id="locationTreeId" />
+      </div>
+    </BaseCard>
+  </BaseContainer>
+</template>