nexus/frontend/src/components/dashboard/FeedDetailModal.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ChevronLeft, ChevronRight, X } from '@lucide/vue'
import type { FeedEntry } from '../../composables/useDashboardData'

const props = defineProps<{
  entries: FeedEntry[]
  modelValue: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const selectedDayOffset = ref(0) // 0 = today, -1 = yesterday, etc.

function close() {
  emit('update:modelValue', false)
}

function dayLabel(offset: number): string {
  if (offset === 0) return 'Heute'
  if (offset === -1) return 'Gestern'
  if (offset === -2) return 'Vorgestern'
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return d.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' })
}

function navigateDay(dir: -1 | 1) {
  const next = selectedDayOffset.value + dir
  if (next >= -6 && next <= 0) {
    selectedDayOffset.value = next
  }
}

const filteredEntries = computed(() => {
  const targetDate = new Date()
  targetDate.setDate(targetDate.getDate() + selectedDayOffset.value)
  const targetStr = targetDate.toISOString().slice(0, 10)
  return props.entries.filter(e => e.timestamp.slice(0, 10) === targetStr)
})
</script>

<template>
  <Teleport to="body">
    <div class="feed-modal-overlay" @click.self="close">
      <div class="feed-modal-card">
        <div class="feed-modal-header">
          <h2 class="feed-modal-title">Operations Log</h2>
          <button class="feed-modal-close-btn" @click="close" aria-label="Close">
            <X :size="16" />
          </button>
        </div>

        <div class="feed-modal-nav">
          <button
            class="feed-nav-btn"
            :disabled="selectedDayOffset <= -6"
            @click="navigateDay(-1)"
            aria-label="Previous day"
          >
            <ChevronLeft :size="14" />
          </button>
          <span class="feed-nav-label">{{ dayLabel(selectedDayOffset) }}</span>
          <button
            class="feed-nav-btn"
            :disabled="selectedDayOffset >= 0"
            @click="navigateDay(1)"
            aria-label="Next day"
          >
            <ChevronRight :size="14" />
          </button>
        </div>

        <div class="feed-modal-entries">
          <div v-if="filteredEntries.length === 0" class="feed-modal-empty">
            Keine Einträge für diesen Tag.
          </div>
          <div
            v-for="(entry, idx) in filteredEntries"
            :key="entry.timestamp + '-' + idx"
            class="feed-modal-entry"
          >
            <span class="feed-time">{{ entry.time }}</span>
            <span class="feed-bullet">&middot;</span>
            <span class="feed-agent" :class="'agent-' + entry.agent.toLowerCase()">
              {{ entry.agent }}
            </span>
            <span class="feed-action">{{ entry.action }}</span>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.feed-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 20px;
  animation: feed-overlay-in 0.2s ease;
}
@keyframes feed-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.feed-modal-card {
  background: #161b22;
  border: 1px solid rgba(139, 124, 246, 0.15);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  animation: feed-card-in 0.25s ease;
}
@keyframes feed-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.feed-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.feed-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #e8eaf0;
}
.feed-modal-close-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  color: #7e8799;
  cursor: pointer;
  transition: all 0.15s;
}
.feed-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e8eaf0;
}

.feed-modal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.feed-nav-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(139, 124, 246, 0.15);
  background: rgba(139, 124, 246, 0.08);
  border-radius: 8px;
  color: #a78bfa;
  cursor: pointer;
  transition: all 0.15s;
}
.feed-nav-btn:hover:not(:disabled) {
  background: rgba(139, 124, 246, 0.16);
  border-color: rgba(139, 124, 246, 0.3);
}
.feed-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.feed-nav-label {
  font-size: 12px;
  font-weight: 600;
  color: #d1d5db;
  min-width: 100px;
  text-align: center;
}

.feed-modal-entries {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 50vh;
  padding-right: 4px;
}
.feed-modal-empty {
  text-align: center;
  padding: 24px 0;
  font-size: 11px;
  color: #6b7385;
}

.feed-modal-entry {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 9.5px;
  line-height: 1.3;
  transition: background 0.15s;
}
.feed-modal-entry:hover {
  background: rgba(255, 255, 255, 0.03);
}

.feed-time {
  color: #6b7385;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  width: 32px;
}
.feed-bullet {
  color: #6b7385;
  flex-shrink: 0;
}
.feed-agent {
  font-weight: 600;
  flex-shrink: 0;
}
.agent-iris {
  color: #a78bfa;
}
.agent-developer {
  color: #3b82f6;
}
.agent-devops {
  color: #eab308;
}
.agent-researcher {
  color: #22c55e;
}
.agent-reviewer {
  color: #a855f7;
}
.feed-action {
  color: #7e8799;
  white-space: normal;
  word-break: break-word;
}
</style>