FabledGrimoire/frontend/src/components/TaskCard.vue

<script setup lang="ts">
import type { Task, TaskStatus } from "@/types/task";
import StatusBadge from "@/components/StatusBadge.vue";
import PriorityBadge from "@/components/PriorityBadge.vue";
import TagPill from "@/components/TagPill.vue";
import { relativeTime } from "@/composables/useRelativeTime";
import { renderPreview } from "@/utils/markdown";

const props = defineProps<{
  task: Task;
  compact?: boolean;
  projectTitle?: string;
}>();
const emit = defineEmits<{
  "tag-click": [tag: string];
  "status-toggle": [id: number, status: TaskStatus];
}>();

const statusCycle: Record<TaskStatus, TaskStatus> = {
  todo: "in_progress",
  in_progress: "done",
  done: "todo",
};

const statusDotClass: Record<TaskStatus, string> = {
  todo: "dot-todo",
  in_progress: "dot-in-progress",
  done: "dot-done",
};

const statusTitle: Record<TaskStatus, string> = {
  todo: "Todo — click to mark In Progress",
  in_progress: "In Progress — click to mark Done",
  done: "Done — click to mark Todo",
};

function cycleStatus() {
  emit("status-toggle", props.task.id, statusCycle[props.task.status!]);
}


function isOverdue(): boolean {
  if (!props.task.due_date || props.task.status === "done") return false;
  const today = new Date().toISOString().slice(0, 10);
  return props.task.due_date < today;
}
</script>

<template>
  <router-link :to="`/tasks/${task.id}`" :class="['task-card', { compact }]">

    <!-- Compact: single row -->
    <template v-if="compact">
      <button
        :class="['status-dot', statusDotClass[task.status!]]"
        :title="statusTitle[task.status!]"
        @click.prevent.stop="cycleStatus"
      ></button>
      <PriorityBadge :priority="task.priority!" />
      <span class="task-title-compact">{{ task.title || "Untitled" }}</span>
      <span v-if="projectTitle" class="project-crumb">{{ projectTitle }}</span>
      <span v-if="task.due_date" :class="['due-compact', { overdue: isOverdue() }]">
        {{ task.due_date }}
      </span>
    </template>

    <!-- Full: original layout -->
    <template v-else>
      <div class="task-top">
        <StatusBadge
          :status="task.status!"
          clickable
          @click.prevent.stop="cycleStatus"
        />
        <PriorityBadge :priority="task.priority!" />
        <h3 class="task-title">{{ task.title || "Untitled" }}</h3>
      </div>
      <div v-if="task.body" class="task-preview prose" v-html="renderPreview(task.body)"></div>
      <div class="task-meta">
        <span v-if="task.due_date" :class="['due-date', { overdue: isOverdue() }]">
          Due: {{ task.due_date }}
        </span>
        <TagPill
          v-for="tag in task.tags"
          :key="tag"
          :tag="tag"
          @click.stop="emit('tag-click', tag)"
        />
        <span class="timestamp">{{ relativeTime(task.updated_at) }}</span>
      </div>
    </template>

  </router-link>
</template>

<style scoped>
.task-card {
  display: block;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  background: var(--color-bg-card);
  transition: box-shadow 0.15s;
}
.task-card:hover {
  box-shadow: 0 2px 8px var(--color-shadow);
}

/* Compact single-row layout */
.task-card.compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
}

/* Status dot */
.status-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, opacity 0.1s;
}
.status-dot:hover {
  transform: scale(1.25);
  opacity: 0.8;
}
.dot-todo {
  background: var(--color-status-todo, #94a3b8);
  border: 2px solid var(--color-status-todo, #94a3b8);
  background: transparent;
  border: 2px solid var(--color-text-muted);
}
.dot-in-progress {
  background: var(--color-status-in-progress, #3b82f6);
}
.dot-done {
  background: var(--color-status-done, #22c55e);
}

.task-title-compact {
  font-size: 0.9rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-crumb {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.due-compact {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.due-compact.overdue {
  color: var(--color-danger, #e74c3c);
  font-weight: 600;
}
/* Full layout */
.task-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.task-title {
  margin: 0;
  font-size: 1.1rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-preview {
  margin: 0 0 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  max-height: 7.5em;
  overflow: hidden;
}
.task-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.due-date {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}
.due-date.overdue {
  color: var(--color-overdue);
  font-weight: 600;
}
.timestamp {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
</style>