tmc-test-task/frontend/app/app.vue

<template>
  <div class="layout">
    <header class="app-header">
      <div class="header-ambient" aria-hidden="true" />
      <div class="header-inner">
        <div class="header-brand">
          <svg class="brand-icon" width="22" height="16" viewBox="0 0 22 16" fill="none" aria-hidden="true">
            <rect x="0.75" y="0.75" width="20.5" height="14.5" rx="2" stroke="currentColor" stroke-width="1.4" />
            <line x1="11" y1="0.75" x2="11" y2="15.25" stroke="currentColor" stroke-width="1.4" />
          </svg>
          <span class="brand-tag">TMC</span>
          <span class="brand-sep" aria-hidden="true" />
          <h1 class="brand-title">
            Items <em>Manager</em>
          </h1>
        </div>
        <div class="header-right">
          <span class="header-meta-label">Item collection</span>
          <!--          <span class="header-vsep" aria-hidden="true" /> -->
          <!--          <time class="header-date">{{ formattedDate }}</time> -->
        </div>
      </div>
    </header>
    <main class="panels">
      <LeftPanel
        :items="leftItems"
        :loading="leftLoading"
        :has-more="leftHasMore"
        :total="leftItemsTotal"
        :search="leftSearch"
        @update:search="leftSearch = $event"
        @load-more="fetchLeft()"
        @select="handleSelect"
        @add="handleAdd"
      />
      <RightPanel
        :items="rightItems"
        :loading="rightLoading"
        :has-more="rightHasMore"
        :total="rightItemsTotal"
        :search="rightSearch"
        @update:search="rightSearch = $event"
        @load-more="fetchRight()"
        @deselect="handleDeselect"
        @reorder="handleReorder"
      />
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, watch } from 'vue'

const formattedDate = computed(() =>
  new Date().toLocaleDateString('en-US', { month: 'short', year: 'numeric' }),
)

const {
  leftItems,
  leftItemsTotal,
  rightItems,
  rightItemsTotal,
  leftSearch,
  rightSearch,
  leftLoading,
  rightLoading,
  leftHasMore,
  rightHasMore,
  fetchLeft,
  fetchRight,
  selectItem,
  deselectItem,
  reorderItem,
  addItem,
  addItemByValue,
} = 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(id: number, afterId: number | null): Promise<void> {
  await reorderItem(id, afterId)
}

async function handleAdd(value: string) {
  const item = await addItemByValue(value)
  leftSearch.value = item.value
  await fetchLeft(true)
}
</script>

<style lang="scss">
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--canvas);
}

.app-header {
  flex-shrink: 0;
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.header-ambient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 180% at 0% 50%, rgba(252, 246, 228, 0.26) 0%, transparent 100%);
  pointer-events: none;
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 64px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  color: var(--text-primary);
  flex-shrink: 0;
  opacity: 0.8;
}

.brand-tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.brand-sep {
  width: 1px;
  height: 15px;
  background: var(--border);
  flex-shrink: 0;
}

.brand-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1;

  em {
    font-style: italic;
    font-weight: 300;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-meta-label {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.header-vsep {
  width: 1px;
  height: 12px;
  background: var(--border);
  flex-shrink: 0;
}

.header-date {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.panels {
  display: flex;
  flex: 1;
  overflow: hidden;

  > * {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
}
</style>