FabledGrimoire/frontend/src/views/HomeView.vue

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

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 otherTasks = ref<Task[]>([]);
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;
    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;
  });
}

function sortOtherTasks(tasks: Task[]): Task[] {
  const withDate = tasks
    .filter((t) => t.due_date)
    .sort((a, b) => a.due_date!.localeCompare(b.due_date!));
  const withoutDate = tasks
    .filter((t) => !t.due_date)
    .sort((a, b) => {
      const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 0;
      const pb = PRIORITY_ORDER[b.priority ?? "none"] ?? 0;
      return pb - pa;
    });
  return [...withDate, ...withoutDate].slice(0, 10);
}

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

  const [notesRes, overdueRes, dueSoonRes, highPriRes, inProgressRes, otherRes] =
    await Promise.allSettled([
      apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=8"),
      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<TaskListResponse>(
        `/api/tasks?sort=updated_at&order=desc&limit=50`
      ),
    ]);

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

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

  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);
  }

  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);
  }

  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);
  }

  if (inProgressRes.status === "fulfilled") {
    inProgressTasks.value = inProgressRes.value.tasks.filter(
      (t) => !seen.has(t.id)
    );
    for (const t of inProgressTasks.value) seen.add(t.id);
  }

  if (otherRes.status === "fulfilled") {
    const remaining = otherRes.value.tasks.filter(
      (t) => t.status !== "done" && !seen.has(t.id)
    );
    otherTasks.value = sortOtherTasks(remaining);
  }

  loading.value = false;
  nextTick(() => chatInputRef.value?.focus());
});

const noTasks = computed(
  () =>
    overdueTasks.value.length === 0 &&
    dueTodayTasks.value.length === 0 &&
    dueThisWeekTasks.value.length === 0 &&
    highPriorityTasks.value.length === 0 &&
    inProgressTasks.value.length === 0 &&
    otherTasks.value.length === 0
);

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

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 chatInputRef = ref<{ focus: () => void } | null>(null);
const chatStore = useChatStore();

chatStore.fetchStatus().then(() => {
  if (chatStore.defaultModel) {
    chatStore.warmModel(chatStore.defaultModel);
  }
});

const dashboardConvId = ref<number | null>(null);
const dashboardDone = ref(false);
const dashboardQuery = ref("");
const dashboardFinalContent = ref("");
const dashboardFinalToolCalls = ref<ToolCallRecord[]>([]);

const isConversational = computed(
  () => dashboardDone.value && dashboardFinalToolCalls.value.length === 0
);

const QUICK_ACTIONS = [
  "What's due today?",
  "Events this week?",
  "Any overdue tasks?",
  "My high priority tasks?",
];

async function onChatSubmit(payload: { content: string; contextNoteId?: number }) {
  dashboardConvId.value = null;
  dashboardDone.value = false;
  dashboardFinalContent.value = "";
  dashboardFinalToolCalls.value = [];
  dashboardQuery.value = payload.content;

  const conv = await chatStore.createConversation();
  await chatStore.fetchConversation(conv.id);
  dashboardConvId.value = conv.id;

  await chatStore.sendMessage(payload.content, payload.contextNoteId);

  const msgs = chatStore.currentConversation?.messages ?? [];
  const lastAssistant = [...msgs].reverse().find((m: Message) => m.role === "assistant");
  dashboardFinalContent.value = lastAssistant?.content ?? "";
  dashboardFinalToolCalls.value = (lastAssistant?.tool_calls ?? []) as ToolCallRecord[];
  dashboardDone.value = true;
}

async function onQuickAction(query: string) {
  await onChatSubmit({ content: query });
}

function clearDashboardResponse() {
  dashboardConvId.value = null;
  dashboardDone.value = false;
  dashboardQuery.value = "";
  dashboardFinalContent.value = "";
  dashboardFinalToolCalls.value = [];
}
</script>

<template>
  <main class="home">

    <!-- Chat widget — full width at top -->
    <section class="chat-section">
      <div class="quick-actions">
        <button
          v-for="q in QUICK_ACTIONS"
          :key="q"
          class="quick-action-chip"
          :disabled="chatStore.streaming || !chatStore.chatReady"
          @click="onQuickAction(q)"
        >
          {{ q }}
        </button>
      </div>
      <DashboardChatInput ref="chatInputRef" @submit="onChatSubmit" />
    </section>

    <!-- Inline response — full width -->
    <div v-if="dashboardConvId" class="dashboard-response">
      <div class="dashboard-response-query">{{ dashboardQuery }}</div>

      <div
        v-if="chatStore.streaming && chatStore.streamingToolCalls.length"
        class="dashboard-tool-calls"
      >
        <ToolCallCard
          v-for="(tc, i) in chatStore.streamingToolCalls"
          :key="i"
          :tool-call="tc"
        />
      </div>
      <div v-else-if="dashboardDone && dashboardFinalToolCalls.length" class="dashboard-tool-calls">
        <ToolCallCard
          v-for="(tc, i) in dashboardFinalToolCalls"
          :key="i"
          :tool-call="tc"
        />
      </div>

      <div v-if="chatStore.streaming" class="dashboard-response-text streaming">
        <div v-if="chatStore.streamingStatus && !chatStore.streamingContent" class="dashboard-status-line">
          <span class="dashboard-status-dot"></span>
          {{ chatStore.streamingStatus }}
        </div>
        <span v-else-if="chatStore.streamingContent">{{ chatStore.streamingContent }}</span>
        <span v-else class="thinking-dots">...</span>
      </div>
      <div v-else-if="dashboardDone && dashboardFinalContent" class="dashboard-response-text">
        {{ dashboardFinalContent }}
      </div>

      <div class="dashboard-response-actions" :class="{ conversational: isConversational }">
        <router-link
          :to="`/chat/${dashboardConvId}`"
          class="btn-open-chat"
          :class="{ prominent: isConversational }"
        >
          {{ isConversational ? 'Continue the conversation →' : 'Think it through in Chat →' }}
        </router-link>
        <button class="btn-clear-response" @click="clearDashboardResponse">Clear</button>
      </div>
    </div>

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

    <!-- Two-column grid -->
    <div v-else class="dashboard-grid">

      <!-- Left: Tasks -->
      <div class="col-tasks">
        <div class="col-header">
          <h2>Tasks</h2>
          <router-link to="/tasks" class="see-all">See all</router-link>
        </div>

        <div v-if="noTasks" class="empty-state">
          <p class="empty-text">No active tasks.</p>
          <router-link to="/tasks/new" class="btn-cta">+ New Task</router-link>
        </div>

        <template v-else>
          <section v-if="overdueTasks.length" class="section section-overdue">
            <h3 class="section-title">Overdue</h3>
            <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">
            <h3 class="section-title">Due Today</h3>
            <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">
            <h3 class="section-title">Due This Week</h3>
            <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">
            <h3 class="section-title">High Priority</h3>
            <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">
            <h3 class="section-title">In Progress</h3>
            <div class="cards">
              <TaskCard
                v-for="task in inProgressTasks"
                :key="task.id"
                :task="task"
                @status-toggle="onStatusToggle"
              />
            </div>
          </section>

          <section v-if="otherTasks.length" class="section">
            <h3 class="section-title">Other</h3>
            <div class="cards">
              <TaskCard
                v-for="task in otherTasks"
                :key="task.id"
                :task="task"
                @status-toggle="onStatusToggle"
              />
            </div>
          </section>
        </template>
      </div>

      <!-- Right: Notes -->
      <div class="col-notes">
        <div class="col-header">
          <h2>Recent Notes</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>
      </div>

    </div>
  </main>
</template>

<style scoped>
.home {
  max-width: 1400px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Chat section */
.chat-section {
  margin-bottom: 1rem;
}
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.quick-action-chip {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-secondary);
  color: var(--color-text);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.quick-action-chip:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.quick-action-chip:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Inline response */
.dashboard-response {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.dashboard-response-query {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.dashboard-tool-calls {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.dashboard-response-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.dashboard-response-text.streaming {
  color: var(--color-text-muted);
}
.thinking-dots {
  display: inline-block;
  animation: blink 1.2s infinite;
}
.dashboard-status-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-style: italic;
}
.dashboard-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: blink 1.2s infinite;
  flex-shrink: 0;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.dashboard-response-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}
.btn-open-chat {
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.btn-open-chat:hover {
  text-decoration: underline;
}
.btn-open-chat.prominent {
  background: var(--color-primary);
  color: #fff;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.btn-open-chat.prominent:hover {
  text-decoration: none;
  opacity: 0.9;
}
.btn-clear-response {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.btn-clear-response:hover {
  color: var(--color-text);
}

/* Two-column grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  align-items: start;
}

/* Column headers */
.col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.col-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.see-all {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.85rem;
}
.see-all:hover {
  text-decoration: underline;
}

/* Task sections */
.section {
  margin-bottom: 1.5rem;
}
.section-title {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}
.section-overdue {
  border-left: 3px solid var(--color-danger, #e74c3c);
  padding-left: 0.75rem;
}
.section-overdue .section-title {
  color: var(--color-danger, #e74c3c);
}
.section-high-priority {
  border-left: 3px solid var(--color-warning, #f59e0b);
  padding-left: 0.75rem;
}
.cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.loading {
  color: var(--color-text-secondary);
}

/* Empty states */
.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;
}

/* Mobile */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}
</style>