Initial Mento CRM: portal OTP, reports, SMS, and deploy for crm.montzar.ir.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,889 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import type {
|
||||
DealDto,
|
||||
NoteAttachmentDto,
|
||||
NoteDto,
|
||||
NoteType,
|
||||
PaginatedResponse,
|
||||
PersonDto,
|
||||
PipelineBoardDto,
|
||||
} from '@mento/shared';
|
||||
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const error = ref('');
|
||||
const q = ref('');
|
||||
const typeFilter = ref<NoteType | 'all'>('all');
|
||||
const notes = ref<NoteDto[]>([]);
|
||||
const people = ref<PersonDto[]>([]);
|
||||
const deals = ref<DealDto[]>([]);
|
||||
|
||||
const draftBody = ref('');
|
||||
const draftTitle = ref('');
|
||||
const draftType = ref<NoteType>('general');
|
||||
const draftTags = ref('');
|
||||
const draftPersonId = ref('');
|
||||
const draftDealId = ref('');
|
||||
const draftReminder = ref('');
|
||||
const draftFiles = ref<File[]>([]);
|
||||
const showExtras = ref(false);
|
||||
const editingId = ref<string | null>(null);
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const noteTypeOptions: Array<{ value: NoteType; label: string }> = [
|
||||
{ value: 'general', label: 'معمولی' },
|
||||
{ value: 'call_result', label: 'نتیجه تماس' },
|
||||
{ value: 'meeting', label: 'جلسه' },
|
||||
{ value: 'important', label: 'نکته مهم' },
|
||||
{ value: 'warning', label: 'هشدار' },
|
||||
{ value: 'next_action', label: 'کار بعدی' },
|
||||
];
|
||||
|
||||
const typeLabel = Object.fromEntries(
|
||||
noteTypeOptions.map((o) => [o.value, o.label]),
|
||||
) as Record<string, string>;
|
||||
|
||||
const pinnedNotes = computed(() => notes.value.filter((n) => n.pinned));
|
||||
const otherNotes = computed(() => notes.value.filter((n) => !n.pinned));
|
||||
|
||||
const colors = ['default', 'mint', 'sand', 'sky', 'rose'] as const;
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const [notesRes, peopleRes, boardRes] = await Promise.all([
|
||||
api.get<PaginatedResponse<NoteDto>>('/notes', {
|
||||
params: {
|
||||
q: q.value || undefined,
|
||||
noteType: typeFilter.value === 'all' ? undefined : typeFilter.value,
|
||||
limit: 100,
|
||||
},
|
||||
}),
|
||||
api.get<PaginatedResponse<PersonDto>>('/people', { params: { limit: 100 } }),
|
||||
api.get<PipelineBoardDto>('/pipelines/board'),
|
||||
]);
|
||||
notes.value = notesRes.data.items;
|
||||
people.value = peopleRes.data.items;
|
||||
deals.value = boardRes.data.stages.flatMap((s) => s.deals);
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e) && !e.response) {
|
||||
error.value = 'اتصال به API برقرار نشد.';
|
||||
} else {
|
||||
error.value = 'بارگذاری یادداشتها ناموفق بود.';
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function parseTags(raw: string) {
|
||||
return raw
|
||||
.split(/[,\s#]+/)
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
function resetDraft() {
|
||||
draftBody.value = '';
|
||||
draftTitle.value = '';
|
||||
draftType.value = 'general';
|
||||
draftTags.value = '';
|
||||
draftPersonId.value = '';
|
||||
draftDealId.value = '';
|
||||
draftReminder.value = '';
|
||||
draftFiles.value = [];
|
||||
showExtras.value = false;
|
||||
editingId.value = null;
|
||||
if (fileInput.value) fileInput.value.value = '';
|
||||
}
|
||||
|
||||
function onDraftFilesSelected(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const picked = Array.from(input.files ?? []);
|
||||
if (!picked.length) return;
|
||||
draftFiles.value = [...draftFiles.value, ...picked].slice(0, 8);
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
function removeDraftFile(index: number) {
|
||||
draftFiles.value = draftFiles.value.filter((_, i) => i !== index);
|
||||
}
|
||||
|
||||
function formatSize(bytes: number) {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
async function uploadFiles(noteId: string, files: File[]) {
|
||||
for (const file of files) {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
await api.post(`/notes/${noteId}/attachments`, form);
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadAttachment(noteId: string, att: NoteAttachmentDto) {
|
||||
const { data } = await api.get<Blob>(
|
||||
`/notes/${noteId}/attachments/${att.id}/download`,
|
||||
{ responseType: 'blob' },
|
||||
);
|
||||
const url = URL.createObjectURL(data);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = att.fileName;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
async function removeAttachment(noteId: string, attachmentId: string) {
|
||||
if (!confirm('این پیوست حذف شود؟')) return;
|
||||
await api.delete(`/notes/${noteId}/attachments/${attachmentId}`);
|
||||
await load();
|
||||
}
|
||||
|
||||
async function onCardFilesSelected(noteId: string, event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const files = Array.from(input.files ?? []);
|
||||
input.value = '';
|
||||
if (!files.length) return;
|
||||
try {
|
||||
await uploadFiles(noteId, files);
|
||||
await load();
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'آپلود پیوست ناموفق بود');
|
||||
} else {
|
||||
error.value = 'آپلود پیوست ناموفق بود';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit(note: NoteDto) {
|
||||
editingId.value = note.id;
|
||||
draftTitle.value = note.title ?? '';
|
||||
draftBody.value = note.body;
|
||||
draftType.value = (note.noteType as NoteType) || 'general';
|
||||
draftTags.value = note.tags.join(' ');
|
||||
draftPersonId.value = note.person?.id ?? '';
|
||||
draftDealId.value = note.deal?.id ?? '';
|
||||
draftReminder.value = note.reminderAt
|
||||
? note.reminderAt.slice(0, 16)
|
||||
: '';
|
||||
showExtras.value = true;
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
async function saveNote() {
|
||||
if (!draftBody.value.trim()) return;
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const payload = {
|
||||
title: draftTitle.value || undefined,
|
||||
body: draftBody.value,
|
||||
noteType: draftType.value,
|
||||
tags: parseTags(draftTags.value),
|
||||
personId: draftPersonId.value || null,
|
||||
dealId: draftDealId.value || null,
|
||||
reminderAt: draftReminder.value
|
||||
? new Date(draftReminder.value).toISOString()
|
||||
: null,
|
||||
};
|
||||
const pending = [...draftFiles.value];
|
||||
let noteId = editingId.value;
|
||||
if (editingId.value) {
|
||||
await api.patch(`/notes/${editingId.value}`, payload);
|
||||
} else {
|
||||
const { data } = await api.post<NoteDto>('/notes', payload);
|
||||
noteId = data.id;
|
||||
}
|
||||
if (noteId && pending.length) {
|
||||
await uploadFiles(noteId, pending);
|
||||
}
|
||||
resetDraft();
|
||||
await load();
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ذخیره یادداشت ناموفق بود');
|
||||
} else {
|
||||
error.value = 'ذخیره یادداشت ناموفق بود';
|
||||
}
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function togglePin(id: string) {
|
||||
await api.patch(`/notes/${id}/pin`);
|
||||
await load();
|
||||
}
|
||||
|
||||
async function removeNote(id: string) {
|
||||
if (!confirm('این یادداشت حذف شود؟')) return;
|
||||
await api.delete(`/notes/${id}`);
|
||||
if (editingId.value === id) resetDraft();
|
||||
await load();
|
||||
}
|
||||
|
||||
async function convertToTask(id: string) {
|
||||
const { data } = await api.post<{ activityId: string }>(`/notes/${id}/convert-to-task`);
|
||||
await router.push({ name: 'activity-detail', params: { id: data.activityId } });
|
||||
}
|
||||
|
||||
async function setColor(id: string, color: string) {
|
||||
await api.patch(`/notes/${id}`, { color });
|
||||
await load();
|
||||
}
|
||||
|
||||
function formatWhen(value: string) {
|
||||
try {
|
||||
return new Intl.DateTimeFormat('fa-IR', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(value));
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<div>
|
||||
<p class="eyebrow">Smart Notes</p>
|
||||
<h1>یادداشتها</h1>
|
||||
<p class="lead">مثل Keep بنویسید؛ به شخص یا معامله وصل کنید. AI و حافظه مشتری در گامهای بعد میآید.</p>
|
||||
</div>
|
||||
<form class="search" @submit.prevent="load">
|
||||
<input v-model="q" type="search" placeholder="جستجو در متن و برچسب…" />
|
||||
<button class="btn btn-ghost" type="submit">جستجو</button>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<div class="type-tabs">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: typeFilter === 'all' }"
|
||||
@click="typeFilter = 'all'; load()"
|
||||
>
|
||||
همه
|
||||
</button>
|
||||
<button
|
||||
v-for="opt in noteTypeOptions"
|
||||
:key="opt.value"
|
||||
type="button"
|
||||
:class="{ active: typeFilter === opt.value }"
|
||||
@click="typeFilter = opt.value; load()"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form class="composer" @submit.prevent="saveNote">
|
||||
<div class="type-row">
|
||||
<label for="note-type">نوع</label>
|
||||
<select id="note-type" v-model="draftType">
|
||||
<option v-for="opt in noteTypeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<input
|
||||
v-model="draftTitle"
|
||||
class="title-input"
|
||||
type="text"
|
||||
placeholder="عنوان (اختیاری)"
|
||||
/>
|
||||
<textarea
|
||||
v-model="draftBody"
|
||||
rows="3"
|
||||
required
|
||||
placeholder="هر چیزی که الان به ذهنتان رسید بنویسید…"
|
||||
/>
|
||||
<div class="composer-actions">
|
||||
<div class="left-actions">
|
||||
<button class="linkish" type="button" @click="showExtras = !showExtras">
|
||||
{{ showExtras ? 'بستن جزئیات' : 'شخص / معامله / یادآوری / برچسب' }}
|
||||
</button>
|
||||
<button class="linkish" type="button" @click="fileInput?.click()">
|
||||
پیوست فایل
|
||||
</button>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
class="sr-only"
|
||||
multiple
|
||||
accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.zip"
|
||||
@change="onDraftFilesSelected"
|
||||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button v-if="editingId" class="btn btn-ghost" type="button" @click="resetDraft">انصراف</button>
|
||||
<button class="btn" type="submit" :disabled="saving || !draftBody.trim()">
|
||||
{{ saving ? 'در حال ثبت…' : editingId ? 'ذخیره تغییرات' : 'ثبت یادداشت' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-if="draftFiles.length" class="pending-files">
|
||||
<li v-for="(file, idx) in draftFiles" :key="`${file.name}-${idx}`">
|
||||
<span>{{ file.name }} · {{ formatSize(file.size) }}</span>
|
||||
<button type="button" @click="removeDraftFile(idx)">حذف</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="showExtras" class="extras">
|
||||
<div class="field">
|
||||
<label>برچسبها</label>
|
||||
<input v-model="draftTags" placeholder="مثلاً مهم پیگیری قیمت" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>شخص</label>
|
||||
<select v-model="draftPersonId">
|
||||
<option value="">بدون شخص</option>
|
||||
<option v-for="p in people" :key="p.id" :value="p.id">{{ p.fullName }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>معامله</label>
|
||||
<select v-model="draftDealId">
|
||||
<option value="">بدون معامله</option>
|
||||
<option v-for="d in deals" :key="d.id" :value="d.id">{{ d.title }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>یادآوری</label>
|
||||
<input v-model="draftReminder" type="datetime-local" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
|
||||
<template v-else>
|
||||
<section v-if="pinnedNotes.length" class="block">
|
||||
<h2>سنجاقشده</h2>
|
||||
<div class="cards">
|
||||
<article
|
||||
v-for="note in pinnedNotes"
|
||||
:key="note.id"
|
||||
class="card"
|
||||
:class="`tone-${note.color || 'default'}`"
|
||||
>
|
||||
<header>
|
||||
<div class="card-head">
|
||||
<span class="type-badge" :class="`type-${note.noteType || 'general'}`">
|
||||
{{ typeLabel[note.noteType || 'general'] || 'معمولی' }}
|
||||
</span>
|
||||
<strong v-if="note.title">{{ note.title }}</strong>
|
||||
</div>
|
||||
<button type="button" title="برداشتن سنجاق" @click="togglePin(note.id)">📌</button>
|
||||
</header>
|
||||
<p class="body">{{ note.body }}</p>
|
||||
<ul v-if="note.attachments?.length" class="attachments">
|
||||
<li v-for="att in note.attachments" :key="att.id">
|
||||
<button type="button" class="att-name" @click="downloadAttachment(note.id, att)">
|
||||
{{ att.fileName }}
|
||||
</button>
|
||||
<span class="att-size">{{ formatSize(att.sizeBytes) }}</span>
|
||||
<button type="button" class="att-remove" @click="removeAttachment(note.id, att.id)">حذف</button>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="note.tags.length" class="tags">
|
||||
<span v-for="tag in note.tags" :key="tag">#{{ tag }}</span>
|
||||
</p>
|
||||
<p class="meta">
|
||||
<span v-if="note.person">{{ note.person.fullName }}</span>
|
||||
<span v-if="note.deal"> · {{ note.deal.title }}</span>
|
||||
<span v-if="note.reminderAt"> · یادآوری {{ formatWhen(note.reminderAt) }}</span>
|
||||
</p>
|
||||
<footer>
|
||||
<button type="button" @click="startEdit(note)">ویرایش</button>
|
||||
<label class="attach-label">
|
||||
پیوست
|
||||
<input
|
||||
type="file"
|
||||
class="sr-only"
|
||||
multiple
|
||||
accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.zip"
|
||||
@change="onCardFilesSelected(note.id, $event)"
|
||||
/>
|
||||
</label>
|
||||
<button type="button" @click="convertToTask(note.id)">تبدیل به وظیفه</button>
|
||||
<button type="button" @click="removeNote(note.id)">حذف</button>
|
||||
<span class="swatches">
|
||||
<button
|
||||
v-for="c in colors"
|
||||
:key="c"
|
||||
type="button"
|
||||
class="swatch"
|
||||
:class="`tone-${c}`"
|
||||
@click="setColor(note.id, c)"
|
||||
/>
|
||||
</span>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="block">
|
||||
<h2>همه یادداشتها</h2>
|
||||
<div v-if="otherNotes.length" class="cards">
|
||||
<article
|
||||
v-for="note in otherNotes"
|
||||
:key="note.id"
|
||||
class="card"
|
||||
:class="`tone-${note.color || 'default'}`"
|
||||
>
|
||||
<header>
|
||||
<div class="card-head">
|
||||
<span class="type-badge" :class="`type-${note.noteType || 'general'}`">
|
||||
{{ typeLabel[note.noteType || 'general'] || 'معمولی' }}
|
||||
</span>
|
||||
<strong v-if="note.title">{{ note.title }}</strong>
|
||||
<strong v-else class="muted-title">بدون عنوان</strong>
|
||||
</div>
|
||||
<button type="button" title="سنجاق" @click="togglePin(note.id)">📍</button>
|
||||
</header>
|
||||
<p class="body">{{ note.body }}</p>
|
||||
<ul v-if="note.attachments?.length" class="attachments">
|
||||
<li v-for="att in note.attachments" :key="att.id">
|
||||
<button type="button" class="att-name" @click="downloadAttachment(note.id, att)">
|
||||
{{ att.fileName }}
|
||||
</button>
|
||||
<span class="att-size">{{ formatSize(att.sizeBytes) }}</span>
|
||||
<button type="button" class="att-remove" @click="removeAttachment(note.id, att.id)">حذف</button>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="note.tags.length" class="tags">
|
||||
<span v-for="tag in note.tags" :key="tag">#{{ tag }}</span>
|
||||
</p>
|
||||
<p class="meta">
|
||||
<span v-if="note.person">{{ note.person.fullName }}</span>
|
||||
<span v-if="note.deal"> · {{ note.deal.title }}</span>
|
||||
<span v-if="note.reminderAt"> · یادآوری {{ formatWhen(note.reminderAt) }}</span>
|
||||
</p>
|
||||
<footer>
|
||||
<button type="button" @click="startEdit(note)">ویرایش</button>
|
||||
<label class="attach-label">
|
||||
پیوست
|
||||
<input
|
||||
type="file"
|
||||
class="sr-only"
|
||||
multiple
|
||||
accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.zip"
|
||||
@change="onCardFilesSelected(note.id, $event)"
|
||||
/>
|
||||
</label>
|
||||
<button type="button" @click="convertToTask(note.id)">تبدیل به وظیفه</button>
|
||||
<button type="button" @click="removeNote(note.id)">حذف</button>
|
||||
<span class="swatches">
|
||||
<button
|
||||
v-for="c in colors"
|
||||
:key="c"
|
||||
type="button"
|
||||
class="swatch"
|
||||
:class="`tone-${c}`"
|
||||
@click="setColor(note.id, c)"
|
||||
/>
|
||||
</span>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
<p v-else class="empty">هنوز یادداشتی نیست. از کادر بالا شروع کنید.</p>
|
||||
</section>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.2rem 0;
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.muted,
|
||||
.meta,
|
||||
.empty {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex: 1 1 220px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search input {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.type-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.type-tabs button {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
border-radius: 999px;
|
||||
padding: 0.4rem 0.75rem;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.type-tabs button.active {
|
||||
background: var(--accent-soft);
|
||||
border-color: transparent;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.type-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.type-row label {
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.type-row select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
background: #fff;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
justify-self: start;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
border-radius: 999px;
|
||||
padding: 0.12rem 0.5rem;
|
||||
}
|
||||
|
||||
.type-general { background: #eef2f0; color: #4b5c54; }
|
||||
.type-call_result { background: #e8f2fb; color: #1d4f91; }
|
||||
.type-meeting { background: #efe9fb; color: #5b3d9a; }
|
||||
.type-important { background: #e7f6ef; color: #0f6b5c; }
|
||||
.type-warning { background: #fff4e5; color: #9a6700; }
|
||||
.type-next_action { background: #fde8e8; color: #b42318; }
|
||||
|
||||
.search input,
|
||||
.composer input,
|
||||
.composer textarea,
|
||||
.extras input,
|
||||
.extras select {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 0.9rem;
|
||||
background: #fff;
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.composer {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: calc(var(--radius) + 2px);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.title-input {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.composer-actions,
|
||||
.right,
|
||||
.left-actions {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.composer-actions {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.pending-files,
|
||||
.attachments {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.pending-files li,
|
||||
.attachments li {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
font-size: 0.85rem;
|
||||
background: rgba(15, 107, 92, 0.06);
|
||||
border-radius: 10px;
|
||||
padding: 0.35rem 0.55rem;
|
||||
}
|
||||
|
||||
.pending-files button,
|
||||
.att-remove {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #b42318;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.att-name {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
text-align: start;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.att-size {
|
||||
color: var(--muted);
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.attach-label {
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.linkish {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.extras {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.block h2 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 0.9rem;
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.card header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.card header button,
|
||||
.card footer button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.65rem;
|
||||
align-items: center;
|
||||
border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
|
||||
padding-top: 0.55rem;
|
||||
}
|
||||
|
||||
.body {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tags {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.tags span {
|
||||
background: rgba(15, 107, 92, 0.08);
|
||||
color: var(--accent);
|
||||
border-radius: 999px;
|
||||
padding: 0.15rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.muted-title {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.swatches {
|
||||
margin-inline-start: auto;
|
||||
display: inline-flex;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--line) !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.tone-default { background: #fff; }
|
||||
.tone-mint { background: #e7f6ef; }
|
||||
.tone-sand { background: #f7f1e4; }
|
||||
.tone-sky { background: #e8f2fb; }
|
||||
.tone-rose { background: #f9ecec; }
|
||||
|
||||
.empty {
|
||||
margin: 0;
|
||||
padding: 1.2rem;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
h1 {
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.search input {
|
||||
height: 2.75rem;
|
||||
max-height: 2.75rem;
|
||||
padding: 0 0.9rem;
|
||||
}
|
||||
|
||||
.type-tabs {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.extras {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.composer {
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user