init

frontend/app/app.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="layout">
+    <header class="app-header">
+      <h1>TMC Items Manager</h1>
+    </header>
+    <main class="panels">
+      <LeftPanel
+        :items="leftItems"
+        :loading="leftLoading"
+        :has-more="leftHasMore"
+        :search="leftSearch"
+        @update:search="leftSearch = $event"
+        @load-more="fetchLeft()"
+        @select="handleSelect"
+        @add="handleAdd"
+      />
+      <RightPanel
+        :items="rightItems"
+        :loading="rightLoading"
+        :has-more="rightHasMore"
+        :search="rightSearch"
+        @update:search="rightSearch = $event"
+        @load-more="fetchRight()"
+        @deselect="handleDeselect"
+        @reorder="handleReorder"
+      />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, watch } from 'vue'
+
+const {
+  leftItems,
+  rightItems,
+  leftSearch,
+  rightSearch,
+  leftLoading,
+  rightLoading,
+  leftHasMore,
+  rightHasMore,
+  fetchLeft,
+  fetchRight,
+  selectItem,
+  deselectItem,
+  reorderSelected,
+  addItem,
+} = useItems()
+
+onMounted(() => {
+  fetchLeft()
+  fetchRight()
+})
+
+watch(leftSearch, () => fetchLeft(true))
+watch(rightSearch, () => fetchRight(true))
+
+async function handleSelect(id: number) {
+  await selectItem(id)
+}
+
+async function handleDeselect(id: number) {
+  await deselectItem(id)
+}
+
+async function handleReorder(ids: number[]) {
+  await reorderSelected(ids)
+}
+
+async function handleAdd(id: number) {
+  await addItem(id)
+}
+</script>
+
+<style lang="scss">
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.app-header {
+  padding: 12px 24px;
+  border-bottom: 1px solid #e5e7eb;
+  background: #fff;
+  flex-shrink: 0;
+
+  h1 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: #1f2937;
+  }
+}
+
+.panels {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+
+  > * {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+}
+</style>