thoughtsync/frontend/src/components/NoteCard.vue

<script setup lang="ts">
import { useNotesStore } from "../stores/notes";
import { NOTE_CARD_CLASSES, type NoteColor } from "../notes/colors";
import type { Note } from "../stores/notes";
import Icon from "./Icon.vue";
import LinkedText from "./LinkedText.vue";
import NoteChecklist from "./NoteChecklist.vue";
import { formatReminder, isOverdue } from "../notes/datetime";

defineProps<{ note: Note; reorderable?: boolean }>();
const emit = defineEmits<{
  (e: "open", note: Note): void;
  (e: "dragstart", note: Note): void;
  (e: "drop", note: Note): void;
}>();
const notes = useNotesStore();

function cardClass(color: NoteColor): string {
  return NOTE_CARD_CLASSES[color] ?? NOTE_CARD_CLASSES.default;
}
</script>

<template>
  <div
    class="group relative mb-4 break-inside-avoid rounded-xl border p-3 shadow-sm transition hover:shadow-md"
    :class="cardClass(note.color)"
    :draggable="reorderable && !note.trashed"
    @dragstart="emit('dragstart', note)"
    @dragover.prevent
    @drop="emit('drop', note)"
  >
    <img
      v-if="note.attachments.length"
      :src="note.attachments[0].url"
      alt=""
      class="mb-2 max-h-48 w-full cursor-pointer rounded-lg object-cover"
      @click="emit('open', note)"
    />

    <!-- Checklist notes can't nest interactive controls in a <button>, so use a
         focusable div; text notes keep a semantic button. -->
    <template v-if="note.kind === 'list'">
      <div
        role="button"
        tabindex="0"
        class="rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
        @click="emit('open', note)"
        @keydown.enter="emit('open', note)"
      >
        <h3 v-if="note.title" class="mb-1 break-words text-sm font-semibold text-neutral-900 dark:text-neutral-100">
          {{ note.title }}
        </h3>
      </div>
      <NoteChecklist class="mt-1" :note-id="note.id" :items="note.items" @click="emit('open', note)" />
    </template>

    <button
      v-else
      type="button"
      class="block w-full cursor-text rounded text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
      @click="emit('open', note)"
    >
      <h3 v-if="note.title" class="mb-1 break-words text-sm font-semibold text-neutral-900 dark:text-neutral-100">
        {{ note.title }}
      </h3>
      <div v-if="note.body" class="text-sm text-neutral-700 dark:text-neutral-300">
        <LinkedText :text="note.body" />
      </div>
      <p v-if="!note.title && !note.body && !note.attachments.length" class="text-sm italic text-neutral-400">
        Empty note
      </p>
    </button>

    <div v-if="note.labels.length" class="mt-2 flex flex-wrap gap-1">
      <span
        v-for="lb in note.labels"
        :key="lb.id"
        class="rounded-full bg-black/5 px-2 py-0.5 text-xs text-neutral-600 dark:bg-white/10 dark:text-neutral-300"
        >{{ lb.name }}</span
      >
    </div>

    <div v-if="note.remind_at" class="mt-2">
      <span
        class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs"
        :class="
          isOverdue(note.remind_at)
            ? 'bg-red-100 text-red-700 dark:bg-red-950/50 dark:text-red-300'
            : 'bg-black/5 text-neutral-600 dark:bg-white/10 dark:text-neutral-300'
        "
      >
        <svg
          class="h-3 w-3"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <circle cx="12" cy="12" r="10" />
          <polyline points="12 6 12 12 16 14" />
        </svg>
        {{ formatReminder(note.remind_at) }}
      </span>
    </div>

    <div
      class="mt-2 flex items-center justify-end gap-0.5 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100"
    >
      <template v-if="note.trashed">
        <button type="button" class="icon-btn" title="Restore" aria-label="Restore" @click="notes.restore(note.id)">
          <Icon name="restore" />
        </button>
        <button
          type="button"
          class="icon-btn"
          title="Delete forever"
          aria-label="Delete forever"
          @click="notes.deleteForever(note.id)"
        >
          <Icon name="trash" />
        </button>
      </template>
      <template v-else>
        <button
          type="button"
          class="icon-btn"
          :class="note.pinned ? 'text-brand-700 dark:text-brand' : ''"
          :title="note.pinned ? 'Unpin' : 'Pin'"
          :aria-label="note.pinned ? 'Unpin' : 'Pin'"
          :aria-pressed="note.pinned"
          @click="notes.setPinned(note.id, !note.pinned)"
        >
          <Icon name="pin" />
        </button>
        <button
          type="button"
          class="icon-btn"
          :title="note.archived ? 'Unarchive' : 'Archive'"
          :aria-label="note.archived ? 'Unarchive' : 'Archive'"
          @click="notes.setArchived(note.id, !note.archived)"
        >
          <Icon name="archive" />
        </button>
        <button
          type="button"
          class="icon-btn"
          title="Move to trash"
          aria-label="Move to trash"
          @click="notes.trash(note.id)"
        >
          <Icon name="trash" />
        </button>
      </template>
    </div>
  </div>
</template>