FabledScribe/frontend/src/components/NoteCard.vue

<script setup lang="ts">
import { useRouter } from "vue-router";
import type { Note } from "@/types/note";
import TagPill from "@/components/TagPill.vue";
import { relativeTime } from "@/composables/useRelativeTime";
import { renderPreview } from "@/utils/markdown";

const props = defineProps<{ note: Note; compact?: boolean }>();
const emit = defineEmits<{ "tag-click": [tag: string] }>();
const router = useRouter();

function onTagClick(tag: string) {
  emit("tag-click", tag);
}

function goEdit() {
  router.push(`/notes/${props.note.id}/edit`);
}
</script>

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

    <!-- Compact: single row -->
    <template v-if="compact">
      <span class="note-title-compact">{{ note.title || "Untitled" }}</span>
      <div class="note-tags-compact">
        <TagPill
          v-for="tag in note.tags.slice(0, 3)"
          :key="tag"
          :tag="tag"
          @click.stop="onTagClick(tag)"
        />
      </div>
      <span class="timestamp-compact">{{ relativeTime(note.updated_at) }}</span>
    </template>

    <!-- Full: original layout -->
    <template v-else>
      <div class="note-top">
        <h3 class="note-title">{{ note.title || "Untitled" }}</h3>
        <button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
      </div>
      <div v-if="note.body" class="note-preview prose" v-html="renderPreview(note.body)"></div>
      <div class="note-meta">
        <TagPill
          v-for="tag in note.tags"
          :key="tag"
          :tag="tag"
          @click.stop="onTagClick(tag)"
        />
        <span class="timestamp">{{ relativeTime(note.updated_at) }}</span>
      </div>
    </template>

  </router-link>
</template>

<style scoped>
.note-card {
  display: block;
  padding: 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  background: var(--color-bg-card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent);
  transition: box-shadow 0.2s, transform 0.18s ease;
}
.note-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--color-primary) 14.0%, transparent);
  transform: translateY(-2px);
}

/* Compact single-row layout */
.note-card.compact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  background: var(--color-bg-card);
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  transform: none !important;
}
.note-card.compact:first-child {
  border-top: 1px solid var(--color-border);
}
.note-card.compact:hover {
  box-shadow: none;
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  transform: none;
}
.note-title-compact {
  font-size: 0.9rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-tags-compact {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}
.timestamp-compact {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Full layout */
.note-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.note-title {
  margin: 0;
  font-size: 1.1rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-edit {
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-edit:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.note-preview {
  margin: 0 0 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  max-height: 7.5em;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.note-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.timestamp {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
</style>