FabledGrimoire/frontend/src/views/HomeView.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { apiGet } from "@/api/client";
import type { Note, NoteListResponse } from "@/types/note";
import type { Task, TaskListResponse } from "@/types/task";
import type { Conversation } from "@/types/chat";
import NoteCard from "@/components/NoteCard.vue";
import TaskCard from "@/components/TaskCard.vue";
import DashboardChatInput from "@/components/DashboardChatInput.vue";
import type { TaskStatus } from "@/types/task";
import { useTasksStore } from "@/stores/tasks";
import { useChatStore } from "@/stores/chat";

const router = useRouter();
const recentNotes = ref<Note[]>([]);
const overdueTasks = ref<Task[]>([]);
const dueTodayTasks = ref<Task[]>([]);
const dueThisWeekTasks = ref<Task[]>([]);
const highPriorityTasks = ref<Task[]>([]);
const inProgressTasks = ref<Task[]>([]);
const recentChats = ref<Conversation[]>([]);
const loading = ref(true);
const tasksStore = useTasksStore();

const PRIORITY_ORDER: Record<string, number> = {
  high: 3,
  medium: 2,
  low: 1,
  none: 0,
};

function dateStr(offsetDays: number = 0): string {
  const d = new Date();
  d.setDate(d.getDate() + offsetDays);
  return (
    d.getFullYear() +
    "-" +
    String(d.getMonth() + 1).padStart(2, "0") +
    "-" +
    String(d.getDate()).padStart(2, "0")
  );
}

function sortByPriorityThenDate(tasks: Task[]): Task[] {
  return tasks.slice().sort((a, b) => {
    const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 0;
    const pb = PRIORITY_ORDER[b.priority ?? "none"] ?? 0;
    if (pb !== pa) return pb - pa;
    // Earlier due dates first; null due dates last
    if (a.due_date && b.due_date) return a.due_date.localeCompare(b.due_date);
    if (a.due_date) return -1;
    if (b.due_date) return 1;
    return 0;
  });
}

onMounted(async () => {
  const today = dateStr(0);
  const nextWeek = dateStr(7);

  const [notesRes, overdueRes, dueSoonRes, highPriRes, inProgressRes, chatsRes] =
    await Promise.allSettled([
      apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=5"),
      apiGet<TaskListResponse>(
        `/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=20`
      ),
      apiGet<TaskListResponse>(
        `/api/tasks?due_after=${today}&due_before=${nextWeek}&sort=due_date&order=asc&limit=20`
      ),
      apiGet<TaskListResponse>(
        `/api/tasks?priority=high&sort=updated_at&order=desc&limit=10`
      ),
      apiGet<TaskListResponse>(
        `/api/tasks?status=in_progress&sort=updated_at&order=desc&limit=10`
      ),
      apiGet<{ conversations: Conversation[]; total: number }>(
        "/api/chat/conversations?limit=3&offset=0"
      ),
    ]);

  if (notesRes.status === "fulfilled") {
    recentNotes.value = notesRes.value.notes;
  }
  if (chatsRes.status === "fulfilled") {
    recentChats.value = chatsRes.value.conversations;
  }

  // Build seen-set incrementally so each section deduplicates against all above it
  const seen = new Set<number>();

  // Overdue: past due, not done
  if (overdueRes.status === "fulfilled") {
    overdueTasks.value = sortByPriorityThenDate(
      overdueRes.value.tasks.filter((t) => t.status !== "done")
    );
    for (const t of overdueTasks.value) seen.add(t.id);
  }

  // Due soon: split into "today" and "this week", exclude done
  if (dueSoonRes.status === "fulfilled") {
    const notDone = dueSoonRes.value.tasks.filter(
      (t) => t.status !== "done" && !seen.has(t.id)
    );
    const todayList: Task[] = [];
    const weekList: Task[] = [];
    for (const t of notDone) {
      if (t.due_date === today) {
        todayList.push(t);
      } else {
        weekList.push(t);
      }
    }
    dueTodayTasks.value = sortByPriorityThenDate(todayList);
    dueThisWeekTasks.value = sortByPriorityThenDate(weekList);
    for (const t of dueTodayTasks.value) seen.add(t.id);
    for (const t of dueThisWeekTasks.value) seen.add(t.id);
  }

  // High priority: not done, deduplicated
  if (highPriRes.status === "fulfilled") {
    highPriorityTasks.value = highPriRes.value.tasks.filter(
      (t) => t.status !== "done" && !seen.has(t.id)
    );
    for (const t of highPriorityTasks.value) seen.add(t.id);
  }

  // In progress: deduplicated against all above
  if (inProgressRes.status === "fulfilled") {
    inProgressTasks.value = inProgressRes.value.tasks.filter(
      (t) => !seen.has(t.id)
    );
  }

  loading.value = false;
});

const allTaskLists = [
  () => overdueTasks,
  () => dueTodayTasks,
  () => dueThisWeekTasks,
  () => highPriorityTasks,
  () => inProgressTasks,
];

function removeFromAllLists(id: number) {
  for (const getList of allTaskLists) {
    const list = getList();
    list.value = list.value.filter((t) => t.id !== id);
  }
}

function onStatusToggle(id: number, status: TaskStatus) {
  tasksStore.patchStatus(id, status).then((updated) => {
    if (updated.status === "done") {
      removeFromAllLists(updated.id);
    } else {
      for (const getList of allTaskLists) {
        const list = getList();
        const idx = list.value.findIndex((t) => t.id === updated.id);
        if (idx !== -1) {
          list.value[idx] = updated;
          break;
        }
      }
    }
  });
}

const chatStore = useChatStore();

// Warm default model after status fetch
chatStore.fetchStatus().then(() => {
  if (chatStore.defaultModel) {
    chatStore.warmModel(chatStore.defaultModel);
  }
});

async function onChatSubmit(payload: {
  content: string;
  contextNoteId?: number;
}) {
  const conv = await chatStore.createConversation();
  await chatStore.fetchConversation(conv.id);
  router.push(`/chat/${conv.id}`);
  await chatStore.sendMessage(payload.content, payload.contextNoteId);
}
</script>

<template>
  <main class="home">
    <h1>Fabled Assistant</h1>

    <p v-if="loading" class="loading">Loading...</p>

    <template v-else>
      <section v-if="overdueTasks.length" class="section section-overdue">
        <div class="section-header">
          <h2>Overdue</h2>
          <router-link to="/tasks" class="see-all">See all</router-link>
        </div>
        <div class="cards">
          <TaskCard
            v-for="task in overdueTasks"
            :key="task.id"
            :task="task"
            @status-toggle="onStatusToggle"
          />
        </div>
      </section>

      <section v-if="dueTodayTasks.length" class="section">
        <div class="section-header">
          <h2>Due Today</h2>
          <router-link to="/tasks" class="see-all">See all</router-link>
        </div>
        <div class="cards">
          <TaskCard
            v-for="task in dueTodayTasks"
            :key="task.id"
            :task="task"
            @status-toggle="onStatusToggle"
          />
        </div>
      </section>

      <section v-if="dueThisWeekTasks.length" class="section">
        <div class="section-header">
          <h2>Due This Week</h2>
          <router-link to="/tasks" class="see-all">See all</router-link>
        </div>
        <div class="cards">
          <TaskCard
            v-for="task in dueThisWeekTasks"
            :key="task.id"
            :task="task"
            @status-toggle="onStatusToggle"
          />
        </div>
      </section>

      <section v-if="highPriorityTasks.length" class="section section-high-priority">
        <div class="section-header">
          <h2>High Priority</h2>
          <router-link to="/tasks" class="see-all">See all</router-link>
        </div>
        <div class="cards">
          <TaskCard
            v-for="task in highPriorityTasks"
            :key="task.id"
            :task="task"
            @status-toggle="onStatusToggle"
          />
        </div>
      </section>

      <section v-if="inProgressTasks.length" class="section">
        <div class="section-header">
          <h2>In Progress</h2>
          <router-link to="/tasks" class="see-all">See all</router-link>
        </div>
        <div class="cards">
          <TaskCard
            v-for="task in inProgressTasks"
            :key="task.id"
            :task="task"
            @status-toggle="onStatusToggle"
          />
        </div>
      </section>

      <section class="section">
        <div class="section-header">
          <h2>Recent Chats</h2>
          <router-link to="/chat" class="see-all">See all</router-link>
        </div>
        <div v-if="recentChats.length" class="cards">
          <router-link
            v-for="chat in recentChats"
            :key="chat.id"
            :to="`/chat/${chat.id}`"
            class="chat-card"
          >
            <span class="chat-card-title">{{ chat.title || "Untitled" }}</span>
            <span class="chat-card-meta">{{ chat.message_count }} messages</span>
          </router-link>
        </div>
        <div v-else class="empty-state">
          <p class="empty-text">No chats yet.</p>
        </div>
        <DashboardChatInput @submit="onChatSubmit" />
      </section>

      <section class="section">
        <div class="section-header">
          <h2>Recently Edited</h2>
          <router-link to="/notes" class="see-all">See all</router-link>
        </div>
        <div v-if="recentNotes.length" class="cards">
          <NoteCard
            v-for="note in recentNotes"
            :key="note.id"
            :note="note"
          />
        </div>
        <div v-else class="empty-state">
          <p class="empty-text">No notes yet.</p>
          <router-link to="/notes/new" class="btn-cta">+ New Note</router-link>
        </div>
      </section>
    </template>
  </main>
</template>

<style scoped>
.home {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.home h1 {
  margin: 0 0 1.5rem;
}
.loading {
  color: var(--color-text-secondary);
}
.section {
  margin-bottom: 2rem;
}
.section-overdue {
  border-left: 3px solid var(--color-overdue, #e74c3c);
  padding-left: 0.75rem;
}
.section-high-priority {
  border-left: 3px solid var(--color-warning, #f59e0b);
  padding-left: 0.75rem;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.section-header h2 {
  margin: 0;
  font-size: 1.15rem;
}
.see-all {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.9rem;
}
.see-all:hover {
  text-decoration: underline;
}
.cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.chat-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s;
}
.chat-card:hover {
  border-color: var(--color-primary);
}
.chat-card-title {
  font-size: 0.95rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 1rem;
}
.chat-card-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.empty-state {
  text-align: center;
  padding: 1.5rem 0;
}
.empty-text {
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}
.btn-cta {
  display: inline-block;
  padding: 0.45rem 1rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.9rem;
  cursor: pointer;
}
</style>