intent-engine 0.11.1

A command-line database service for tracking strategic intent, tasks, and events
Documentation
<script setup lang="ts">
import { useAppStore } from '../stores/appStore'
import { Folder, X } from 'lucide-vue-next'

const store = useAppStore()

function handleRemoveProject(e: Event, path: string) {
  e.stopPropagation()
  if (confirm('Remove this project from Dashboard? (Data will not be deleted)')) {
    store.removeProjectFromRegistry(path)
  }
}
</script>

<template>
  <div class="h-10 flex items-center gap-2 overflow-x-auto px-4 border-b border-sci-border bg-sci-panel flex-shrink-0">
    <button
      v-for="proj in store.projects"
      :key="proj.path"
      @click="store.switchProject(proj.path)"
      class="group flex-shrink-0 flex items-center gap-2 px-3 py-1.5 text-xs font-mono border-t border-x rounded-t-md transition-all whitespace-nowrap relative top-[1px]"
      :class="[
        store.currentProject?.path === proj.path
          ? 'bg-sci-base border-sci-border border-b-sci-base text-sci-cyan font-medium z-10'
          : 'bg-slate-50 border-transparent hover:bg-slate-100 text-slate-500'
      ]"
    >
      <Folder class="w-3.5 h-3.5" :class="store.currentProject?.path === proj.path ? 'text-sci-cyan' : 'text-slate-400'" />
      <span>{{ proj.name }}</span>

      <!-- Status Indicator -->
      <div class="relative flex h-1.5 w-1.5 ml-1">
        <span v-if="proj.is_online" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-1.5 w-1.5" :class="proj.is_online ? 'bg-green-500' : 'bg-slate-300'"></span>
      </div>

      <!-- Remove Button -->
      <button
        @click="handleRemoveProject($event, proj.path)"
        class="ml-1 p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-red-100 hover:text-red-500 transition-opacity"
        title="Remove from Dashboard"
      >
        <X class="w-3 h-3" />
      </button>
    </button>
  </div>
</template>