workspace/code/fms/fms-vue/src/layouts/components/AppTabs.vue

<script setup lang="ts">
import { ChevronLeft, ChevronRight, X } from "@lucide/vue"
import { useRoute, useRouter } from "vue-router"
import { computed, nextTick, onMounted, onBeforeUnmount, ref, watch } from "vue"
import { useAppStore } from "@/stores/app"

const route = useRoute()
const router = useRouter()
const appStore = useAppStore()

const trackRef = ref<HTMLElement | null>(null)
const overflowed = ref(false)
const canScrollLeft = ref(false)
const canScrollRight = ref(false)
const activeKey = computed(() => route.fullPath)
const tabs = computed(() => appStore.visitedTabs)

let resizeObserver: ResizeObserver | null = null

// Watch route changes to add tabs
watch(
  () => route.fullPath,
  () => {
    const meta = route.meta as { title?: string }
    if (meta.title) {
      appStore.addVisitedTab({
        key: route.fullPath,
        label: meta.title,
        closable: route.fullPath !== "/dashboard",
      })
    }
  },
  { immediate: true },
)

// Update scroll state when tabs change
watch(() => appStore.visitedTabs.length, async () => {
  await nextTick()
  updateScrollState()
})

onMounted(() => {
  resizeObserver = new ResizeObserver(updateScrollState)
  if (trackRef.value) resizeObserver.observe(trackRef.value)
  updateScrollState()
})

onBeforeUnmount(() => resizeObserver?.disconnect())

function changeTab(key: string) {
  if (key !== route.fullPath) router.push(key)
}

function closeTab(key: string, e: MouseEvent) {
  e.stopPropagation()
  if (key === "/dashboard") return
  const currentIndex = tabs.value.findIndex(t => t.key === key)
  const fallback =
    tabs.value[currentIndex - 1] ??
    tabs.value[currentIndex + 1] ??
    tabs.value[0]
  appStore.removeVisitedTab(key)
  if (route.fullPath === key && fallback) router.push(fallback.key)
}

function updateScrollState() {
  const track = trackRef.value
  if (!track) return
  const shouldOverflow = track.scrollWidth > track.clientWidth + 1
  overflowed.value = shouldOverflow
  if (!shouldOverflow) {
    track.scrollLeft = 0
    canScrollLeft.value = false
    canScrollRight.value = false
    return
  }
  canScrollLeft.value = track.scrollLeft > 1
  canScrollRight.value = track.scrollLeft + track.clientWidth < track.scrollWidth - 1
}

function scrollTabs(direction: number) {
  const track = trackRef.value
  if (!track) return
  track.scrollBy({
    left: direction * Math.max(track.clientWidth * 0.6, 120),
    behavior: "smooth",
  })
}

function handleWheel(e: WheelEvent) {
  const track = trackRef.value
  if (!track || track.scrollWidth <= track.clientWidth) return
  const delta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX
  if (!delta) return
  e.preventDefault()
  track.scrollLeft += delta
}

function refreshTab(key: string) {
  appStore.refreshRoute(key)
}
</script>

<template>
  <div v-if="tabs.length" class="flex shrink-0 items-center h-9 gap-0.5 px-2 border-b border-border/40">
    <!-- Left scroll button -->
    <button
      v-if="overflowed"
      type="button"
      class="grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-30 disabled:cursor-default transition-colors"
      :disabled="!canScrollLeft"
      @click="scrollTabs(-1)"
    >
      <ChevronLeft class="size-3.5" />
    </button>

    <!-- Tab track -->
    <div
      ref="trackRef"
      class="flex flex-1 min-w-0 gap-1.5 overflow-x-auto overflow-y-visible scrollbar-none overscroll-contain"
      @scroll.passive="updateScrollState"
      @wheel="handleWheel"
    >
      <button
        v-for="tab in tabs"
        :key="tab.key"
        type="button"
        class="group/tab relative flex shrink-0 items-center gap-1 h-7 rounded-md px-2.5 text-xs font-medium transition-colors cursor-pointer border"
        :class="tab.key === activeKey
          ? 'bg-muted text-foreground border-border'
          : 'bg-background text-muted-foreground border-border/70 hover:border-border hover:text-foreground'"
        @click="changeTab(tab.key)"
        @dblclick.prevent="refreshTab(tab.key)"
      >
        <span class="truncate max-w-36">{{ tab.label }}</span>
        <!-- Close button -->
        <span
          v-if="tab.closable"
          class="grid size-4 shrink-0 place-items-center rounded-sm text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/20 transition-colors"
          @click="closeTab(tab.key, $event)"
        >
          <X class="size-3" />
        </span>
      </button>
    </div>

    <!-- Right scroll button -->
    <button
      v-if="overflowed"
      type="button"
      class="grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-30 disabled:cursor-default transition-colors"
      :disabled="!canScrollRight"
      @click="scrollTabs(1)"
    >
      <ChevronRight class="size-3.5" />
    </button>
  </div>
</template>