notely/frontend/src/components/NoteEditor.vue

<template>
    <div class="note-editor">
        <div class="editor-toolbar mb-3">
            <button class="btn btn-sm btn-primary" @click="saveNote">Save</button>
            <button class="btn btn-sm btn-outline-secondary ms-2" @click="emit('cancel')">Cancel</button>
            <button
                v-if="fileExplorerEnabled"
                class="btn btn-sm ms-2"
                :class="showFileExplorer ? 'btn-secondary' : 'btn-outline-secondary'"
                :title="showFileExplorer ? 'Hide file explorer' : 'Browse & insert files'"
                @click="showFileExplorer = !showFileExplorer"
            >
                <i class="mdi mdi-folder-open-outline me-1" aria-hidden="true"></i>
                Files
            </button>
            <button
                v-if="spaceId"
                class="btn btn-sm"
                :class="showTaskPicker ? 'btn-secondary' : 'btn-outline-secondary'"
                :title="showTaskPicker ? 'Hide task picker' : 'Browse & insert task mentions'"
                @click="toggleTaskPicker"
            >
                <i class="mdi mdi-checkbox-marked-circle-outline me-1" aria-hidden="true"></i>
                Tasks
            </button>
            <span class="save-status ms-auto" :class="saveState">{{ saveStatusLabel }}</span>
        </div>

        <div class="editor-container">
            <input v-model="editingNote.title" type="text" class="form-control form-control-lg mb-3" placeholder="Note title..." @input="autoSave" />

            <div class="mb-3">
                <label class="form-label">Description</label>
                <textarea v-model="editingNote.description" class="form-control" rows="2" maxlength="500" placeholder="Short summary shown in note lists..." @input="autoSave"></textarea>
            </div>

            <div class="row">
                <div :class="editorColumnClass">
                    <textarea ref="contentTextareaRef" v-model="editingNote.content" class="form-control editor-textarea" placeholder="Write your note in markdown..." @input="autoSave"></textarea>
                    <div v-if="showTaskMention" class="task-mention-panel">
                        <div class="small text-muted mb-1">Link task for "{{ taskMentionQuery }}"</div>
                        <button v-for="task in taskMentionResults" :key="task.id" class="task-mention-option" @click="selectMentionTask(task)">
                            <span>{{ task.title }}</span>
                            <small>Depth {{ task.depth + 1 }}</small>
                        </button>
                    </div>
                </div>

                <div :class="previewColumnClass">
                    <div class="preview-pane border rounded p-3" @click="onPreviewClick">
                        <div class="markdown-body" v-html="renderedMarkdown"></div>
                    </div>
                </div>

                <div v-if="showFileExplorer" :class="fileExplorerColumnClass">
                    <FileExplorer v-model="fileExplorerPrefix" :space-id="spaceId" @insert="insertAtCursor" />
                </div>

                <div v-if="showTaskPicker" :class="taskPickerColumnClass">
                    <div class="task-picker border rounded">
                        <div class="task-picker-header px-2 py-1 border-bottom d-flex align-items-center gap-2">
                            <i class="mdi mdi-checkbox-marked-circle-outline text-muted" aria-hidden="true"></i>
                            <span class="small fw-semibold">Space Tasks</span>
                            <button class="btn btn-link btn-sm p-0 text-muted ms-auto" title="Refresh" @click="refreshTaskPicker">
                                <i class="mdi mdi-refresh" aria-hidden="true"></i>
                            </button>
                        </div>
                        <div class="task-picker-search p-2 border-bottom">
                            <input v-model="taskPickerQuery" type="text" class="form-control form-control-sm" placeholder="Search tasks by title..." />
                        </div>
                        <div v-if="taskPickerLoading" class="task-picker-empty text-muted small">
                            <i class="mdi mdi-loading mdi-spin me-1" aria-hidden="true"></i>
                            Loading tasks...
                        </div>
                        <div v-else-if="!taskPickerItems.length" class="task-picker-empty text-muted small">No tasks found.</div>
                        <div v-else class="task-picker-list">
                            <button v-for="task in taskPickerItems" :key="task.id" class="task-picker-item" @click="insertTaskMention(task)">
                                <span class="task-picker-title">{{ task.title }}</span>
                                <small>{{ task.picker_status_name }}</small>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <label class="form-label">Tags</label>
                <input v-model="tagsInput" type="text" class="form-control" placeholder="Add tags separated by commas" />
            </div>

            <div class="mt-3">
                <label class="form-label">Category</label>
                <select v-model="editingNote.category_id" class="form-select" @change="autoSave">
                    <option :value="null">Uncategorized</option>
                    <option v-for="category in categoryOptions" :key="category.id" :value="category.id">
                        {{ category.label }}
                    </option>
                </select>
            </div>

            <div class="note-flags mt-3">
                <label class="flag-check">
                    <input v-model="editingNote.is_pinned" class="flag-check-input" type="checkbox" @change="autoSave" />
                    <span class="flag-check-label">Pinned</span>
                </label>

                <label class="flag-check">
                    <input v-model="editingNote.is_favorite" class="flag-check-input" type="checkbox" @change="autoSave" />
                    <span class="flag-check-label">Featured</span>
                </label>

                <label v-if="publicSharingEnabled" class="flag-check">
                    <input v-model="editingNote.is_public" class="flag-check-input" type="checkbox" @change="autoSave" />
                    <span class="flag-check-label">Public</span>
                </label>
            </div>

            <div class="mt-3">
                <label class="form-label">Password Protection</label>
                <select v-model="passwordAction" class="form-select">
                    <option value="keep">Keep current setting</option>
                    <option value="set">Set or change password</option>
                    <option value="remove">Remove password protection</option>
                </select>
                <input v-if="passwordAction === 'set'" v-model="notePassword" type="password" class="form-control mt-2" minlength="4" maxlength="128" placeholder="Enter a note password" />
            </div>

            <section v-if="canDelete && editingNote.id" class="danger-zone mt-4" aria-labelledby="danger-zone-title">
                <h3 id="danger-zone-title" class="danger-zone-title mb-2">Danger Zone</h3>
                <p class="danger-zone-copy mb-3">Deleting this note is permanent and cannot be undone.</p>
                <button class="btn btn-danger" type="button" @click="confirmDelete">
                    <i class="mdi mdi-delete-outline me-1" aria-hidden="true"></i>
                    Delete Note
                </button>
            </section>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch, onBeforeUnmount, onMounted, nextTick } from "vue";
import DOMPurify from "dompurify";
import { useSettingsStore } from "../stores/settingsStore";
import { useSpaceStore } from "../stores/spaceStore";
import { renderMarkdown } from "../utils/markdown.js";
import FileExplorer from "./FileExplorer.vue";

const props = defineProps({
    note: {
        type: Object,
        required: true,
    },
    categoryOptions: {
        type: Array,
        default: () => [],
    },
    canDelete: {
        type: Boolean,
        default: true,
    },
    spaceId: {
        type: String,
        default: "",
    },
});

const emit = defineEmits(["save", "delete", "cancel", "open-linked-task"]);
const settingsStore = useSettingsStore();
const spaceStore = useSpaceStore();
const publicSharingEnabled = ref(true);
const fileExplorerEnabled = computed(() => settingsStore.fileExplorerEnabled);

const editingNote = ref({ ...props.note });
const contentTextareaRef = ref(null);
const showFileExplorer = ref(false);
const fileExplorerPrefix = ref("");
const tagsInput = ref(props.note.tags?.join(", ") || "");
const passwordAction = ref("keep");
const notePassword = ref("");
const saveTimeout = ref(null);
const saveState = ref("saved");
const saveStateTimeout = ref(null);
const taskMentionQuery = ref("");
const taskMentionResults = ref([]);
const showTaskMention = ref(false);
const linkedTasks = ref([]);
const showTaskPicker = ref(false);
const taskPickerQuery = ref("");
const taskPickerLoading = ref(false);

const hasAuxPanels = computed(() => showFileExplorer.value || showTaskPicker.value);
const hasTwoAuxPanels = computed(() => showFileExplorer.value && showTaskPicker.value);

const editorColumnClass = computed(() => {
    if (hasTwoAuxPanels.value) {
        return "col-12 col-xl-4";
    }
    return hasAuxPanels.value ? "col-12 col-md-5" : "col-12 col-md-6";
});

const previewColumnClass = computed(() => {
    if (hasTwoAuxPanels.value) {
        return "col-12 col-xl-4 mt-3 mt-xl-0";
    }
    return hasAuxPanels.value ? "col-12 col-md-4 mt-3 mt-md-0" : "col-12 col-md-6 mt-3 mt-md-0";
});

const fileExplorerColumnClass = computed(() => {
    return hasTwoAuxPanels.value ? "col-12 col-md-6 col-xl-2 mt-3 mt-xl-0" : "col-12 col-md-3 mt-3 mt-md-0";
});

const taskPickerColumnClass = computed(() => {
    return hasTwoAuxPanels.value ? "col-12 col-md-6 col-xl-2 mt-3 mt-xl-0" : "col-12 col-md-3 mt-3 mt-md-0";
});

const taskStatusNameById = computed(() => {
    const map = new Map();
    for (const status of spaceStore.taskStatuses || []) {
        if (status?.id) {
            map.set(status.id, status.name || "");
        }
    }
    return map;
});

const taskPickerItems = computed(() => {
    const query = taskPickerQuery.value.trim().toLowerCase();
    const allTasks = [...(spaceStore.tasks || [])]
        .map((task) => ({
            ...task,
            picker_status_name: task.status_name || task.status?.name || taskStatusNameById.value.get(task.status_id) || "Unknown",
        }))
        .sort((a, b) => (a.title || "").localeCompare(b.title || ""));
    if (!query) {
        return allTasks;
    }
    return allTasks.filter((task) => (task.title || "").toLowerCase().includes(query));
});

const renderedMarkdown = computed(() => {
    const html = renderMarkdown(enrichTaskMentions(editingNote.value.content || ""));
    return DOMPurify.sanitize(html);
});

const normalizeTaskTitle = (value) => (value || "").trim().toLowerCase();

const taskByTitle = computed(() => {
    const map = new Map();
    for (const task of linkedTasks.value || []) {
        const key = normalizeTaskTitle(task.title);
        if (!key || map.has(key)) {
            continue;
        }
        map.set(key, task);
    }
    return map;
});

const enrichTaskMentions = (content) => {
    if (!content) {
        return "";
    }

    return content.replace(/@task\(([^)]+)\)/gi, (full, rawTitle) => {
        const title = (rawTitle || "").trim();
        if (!title) {
            return full;
        }

        const linkedTask = taskByTitle.value.get(normalizeTaskTitle(title));
        if (!linkedTask?.id) {
            return full;
        }

        const statusName = (linkedTask.status_name || "Unknown").trim();
        const safeTitle = title.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
        const safeStatusName = statusName.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");

        const statusColor = (linkedTask.status_color || "").trim();
        const safeStatusColor = statusColor.replace(/"/g, "").replace(/</g, "").replace(/>/g, "");
        const styleAttr = safeStatusColor ? ` style="--task-status-color:${safeStatusColor}"` : "";

        return `<a href="#task:${linkedTask.id}" class="task-inline-link"${styleAttr}><i class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></i><span class="task-inline-title">${safeTitle}</span><span class="task-inline-status">${safeStatusName}</span></a>`;
    });
};

const saveStatusLabel = computed(() => {
    switch (saveState.value) {
        case "dirty":
            return "Unsaved changes";
        case "saving":
            return "Saving...";
        case "saved":
        default:
            return "Saved";
    }
});

watch(
    () => props.note,
    async (newNote) => {
        editingNote.value = { ...newNote };
        tagsInput.value = newNote.tags?.join(", ") || "";
        passwordAction.value = "keep";
        notePassword.value = "";
        saveState.value = "saved";
        if (props.spaceId && newNote?.id) {
            try {
                linkedTasks.value = await spaceStore.fetchTasksForNote(props.spaceId, newNote.id);
            } catch {
                linkedTasks.value = [];
            }
        } else {
            linkedTasks.value = [];
        }
    },
);

watch(tagsInput, () => {
    if (editingNote.value.id) {
        autoSave();
    }
});

const markSavedSoon = () => {
    clearTimeout(saveStateTimeout.value);
    saveStateTimeout.value = setTimeout(() => {
        saveState.value = "saved";
    }, 250);
};

const saveNote = () => {
    if (passwordAction.value === "set") {
        if (!notePassword.value.trim()) {
            alert("Please enter a note password.");
            return;
        }
        if (notePassword.value.trim().length < 4) {
            alert("Note password must be at least 4 characters.");
            return;
        }
    }

    saveState.value = "saving";
    const note = {
        ...editingNote.value,
        category_id: editingNote.value.category_id || null,
        tags: tagsInput.value
            .split(",")
            .map((t) => t.trim())
            .filter((t) => t),
    };

    if (passwordAction.value === "set") {
        note.note_password = notePassword.value;
    } else if (passwordAction.value === "remove") {
        note.note_password = "";
    }

    emit("save", note);
    if (passwordAction.value !== "keep") {
        passwordAction.value = "keep";
        notePassword.value = "";
    }
    markSavedSoon();
    // Auto-link any @task(Title) mentions present in the saved content
    syncTaskMentionLinks(note.content || "");
};

const autoSave = () => {
    saveState.value = "dirty";
    clearTimeout(saveTimeout.value);
    saveTimeout.value = setTimeout(saveNote, 3000);
    detectTaskMention();
};

const confirmDelete = () => {
    if (!props.canDelete) {
        return;
    }
    if (confirm("Are you sure you want to delete this note?")) {
        emit("delete", editingNote.value.id);
    }
};

/** Insert markdown snippet at the textarea cursor position. */
const insertAtCursor = (snippet) => {
    const textarea = contentTextareaRef.value;
    if (!textarea) {
        editingNote.value.content = (editingNote.value.content || "") + snippet;
        autoSave();
        return;
    }
    const start = textarea.selectionStart ?? editingNote.value.content?.length ?? 0;
    const end = textarea.selectionEnd ?? start;
    const before = (editingNote.value.content || "").substring(0, start);
    const after = (editingNote.value.content || "").substring(end);
    editingNote.value.content = before + snippet + after;
    autoSave();
    nextTick(() => {
        const newPos = start + snippet.length;
        textarea.setSelectionRange(newPos, newPos);
        textarea.focus();
    });
};

const detectTaskMention = async () => {
    const content = editingNote.value.content || "";
    const match = content.match(/@task\s+([^\n]{1,40})$/i);
    if (!match || !props.spaceId) {
        showTaskMention.value = false;
        taskMentionResults.value = [];
        taskMentionQuery.value = "";
        return;
    }
    const query = match[1].trim();
    taskMentionQuery.value = query;
    if (!query) {
        showTaskMention.value = false;
        taskMentionResults.value = [];
        return;
    }
    try {
        taskMentionResults.value = await spaceStore.searchTasks(props.spaceId, query);
        showTaskMention.value = taskMentionResults.value.length > 0;
    } catch {
        taskMentionResults.value = [];
        showTaskMention.value = false;
    }
};

const replaceTaskMentionText = (title) => {
    editingNote.value.content = (editingNote.value.content || "").replace(/@task\s+([^\n]{1,40})$/i, `@task(${title})`);
};

const selectMentionTask = async (task) => {
    replaceTaskMentionText(task.title);
    showTaskMention.value = false;
    taskMentionResults.value = [];
    if (!props.spaceId || !editingNote.value.id) {
        return;
    }
    try {
        await spaceStore.linkTaskToNote(props.spaceId, task.id, editingNote.value.id);
        linkedTasks.value = await spaceStore.fetchTasksForNote(props.spaceId, editingNote.value.id);
    } catch {
        alert("Unable to link task to this note.");
    }
    autoSave();
};

const insertTaskMention = (task) => {
    if (!task?.title) {
        return;
    }
    insertAtCursor(`@task(${task.title})`);
};

const refreshTaskPicker = async () => {
    if (!props.spaceId) {
        return;
    }
    taskPickerLoading.value = true;
    try {
        await Promise.all([spaceStore.fetchTasks(props.spaceId), spaceStore.fetchTaskStatuses(props.spaceId)]);
    } finally {
        taskPickerLoading.value = false;
    }
};

const toggleTaskPicker = async () => {
    showTaskPicker.value = !showTaskPicker.value;
    if (showTaskPicker.value && !spaceStore.tasks.length) {
        await refreshTaskPicker();
    }
};

/**
 * Parse all @task(Title) mentions in content and ensure each is linked.
 * Called after every real save so new mentions are linked automatically.
 */
const syncTaskMentionLinks = async (content) => {
    if (!props.spaceId || !editingNote.value.id) {
        return;
    }
    const mentionTitles = new Set();
    const rx = /@task\(([^)]+)\)/gi;
    let m;
    while ((m = rx.exec(content)) !== null) {
        const title = (m[1] || "").trim();
        if (title) {
            mentionTitles.add(title.toLowerCase());
        }
    }
    if (!mentionTitles.size) {
        return;
    }
    let current;
    try {
        current = await spaceStore.fetchTasksForNote(props.spaceId, editingNote.value.id);
    } catch {
        return;
    }
    const linkedTitles = new Set((current || []).map((t) => (t.title || "").toLowerCase()));
    const toLink = [...mentionTitles].filter((title) => !linkedTitles.has(title));
    if (!toLink.length) {
        linkedTasks.value = current;
        return;
    }
    await Promise.all(
        toLink.map(async (title) => {
            try {
                const results = await spaceStore.searchTasks(props.spaceId, title);
                const exact = results.find((t) => (t.title || "").toLowerCase() === title);
                if (exact) {
                    await spaceStore.linkTaskToNote(props.spaceId, exact.id, editingNote.value.id);
                }
            } catch {
                // best-effort — skip silently
            }
        }),
    );
    try {
        linkedTasks.value = await spaceStore.fetchTasksForNote(props.spaceId, editingNote.value.id);
    } catch {
        // ignore
    }
};

const onPreviewClick = (event) => {
    const anchor = event.target?.closest?.("a");
    if (!anchor) {
        return;
    }

    const href = anchor.getAttribute("href") || "";
    if (!href.startsWith("#task:")) {
        return;
    }

    event.preventDefault();
    const taskId = href.slice("#task:".length);
    if (!taskId) {
        return;
    }

    const matchedTask = (linkedTasks.value || []).find((task) => task.id === taskId);
    if (matchedTask) {
        emit("open-linked-task", matchedTask);
    }
};

onBeforeUnmount(() => {
    clearTimeout(saveTimeout.value);
    clearTimeout(saveStateTimeout.value);
});

onMounted(async () => {
    await settingsStore.loadFeatureFlags();
    publicSharingEnabled.value = settingsStore.publicSharingEnabled;
    if (props.spaceId && editingNote.value?.id) {
        try {
            linkedTasks.value = await spaceStore.fetchTasksForNote(props.spaceId, editingNote.value.id);
        } catch {
            linkedTasks.value = [];
        }
    }
    if (props.spaceId && !spaceStore.tasks.length) {
        await refreshTaskPicker();
    }
});
</script>

<style scoped>
.editor-toolbar {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.save-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    color: #6c757d;
}

.save-status.dirty {
    color: #b26a00;
}

.save-status.saving {
    color: #0d6efd;
}

.save-status.saved {
    color: #2b8a3e;
}

.editor-textarea {
    font-family: "Courier New", monospace;
    min-height: 600px;
    resize: vertical;
}

.note-flags {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.flag-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #f8f9fa;
    margin: 0;
    cursor: pointer;
}

.flag-check-input {
    margin: 0;
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.flag-check-label {
    line-height: 1;
    user-select: none;
}

.preview-pane {
    background-color: #f8f9fa;
    overflow-y: auto;
    max-height: 600px;
}

.danger-zone {
    padding: 1rem;
    border: 1px solid #f3b5b5;
    border-radius: 0.75rem;
    background: #fff5f5;
}

.danger-zone-title {
    color: #9f1c1c;
    font-size: 1rem;
    font-weight: 700;
}

.danger-zone-copy {
    color: #7a2727;
    font-size: 0.9rem;
}

.task-mention-panel {
    margin-top: 0.45rem;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #fbfdff;
    padding: 0.5rem;
    max-height: 220px;
    overflow-y: auto;
}

.task-mention-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
    padding: 0.35rem 0.45rem;
    border-radius: 6px;
    text-align: left;
}

.task-mention-option:hover {
    background: #eef3ff;
}

.task-picker {
    background: #fff;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.task-picker-header {
    background: #f8f9fa;
    min-height: 34px;
}

.task-picker-search {
    background: #fff;
}

.task-picker-list {
    overflow-y: auto;
    max-height: 520px;
    padding: 0.25rem;
}

.task-picker-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 0.35rem 0.45rem;
    text-align: left;
    gap: 0.4rem;
    color: #333;
}

.task-picker-item:hover {
    background: #eef3ff;
}

.task-picker-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-picker-empty {
    padding: 0.7rem;
}

.task-picker-item small {
    font-size: 0.7rem;
    color: #6b7280;
}

.task-picker .btn-link {
    text-decoration: none;
}

.task-picker-item {
    flex-wrap: wrap;
}

.markdown-body :deep(.task-inline-link) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #c7d8ff;
    background: #eef4ff;
    color: #2c4ea3;
    font-weight: 600;
    text-decoration: none;
}

.markdown-body :deep(.task-inline-title) {
    line-height: 1;
}

.markdown-body :deep(.task-inline-status) {
    line-height: 1;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.16rem 0.42rem;
    border: 1px solid color-mix(in srgb, var(--task-status-color, #5c7bd9) 60%, #ffffff 40%);
    background: color-mix(in srgb, var(--task-status-color, #5c7bd9) 18%, #ffffff 82%);
    color: color-mix(in srgb, var(--task-status-color, #5c7bd9) 72%, #0f172a 28%);
}

.markdown-body :deep(.task-inline-link:hover) {
    background: #dfeaff;
    border-color: #aac4ff;
}

.markdown-body :deep(.task-inline-link i) {
    font-size: 0.9rem;
}

/* Dark mode overrides */
:root[data-bs-theme="dark"] .editor-toolbar {
    border-bottom-color: #3a3f4b;
}

:root[data-bs-theme="dark"] .flag-check {
    background: #2d3748;
    border-color: #4a5568;
}

:root[data-bs-theme="dark"] .preview-pane {
    background-color: #21252e;
}

:root[data-bs-theme="dark"] .danger-zone {
    background: #2d1a1a;
    border-color: #7a3030;
}

:root[data-bs-theme="dark"] .danger-zone-title {
    color: #fc8181;
}

:root[data-bs-theme="dark"] .danger-zone-copy {
    color: #fca5a5;
}

:root[data-bs-theme="dark"] .task-mention-panel {
    border-color: #3a4558;
    background: #1f2733;
}

:root[data-bs-theme="dark"] .task-mention-option:hover {
    background: #2b3646;
}

:root[data-bs-theme="dark"] .task-picker {
    border-color: #3a3f4b !important;
    background: #21252e;
}

:root[data-bs-theme="dark"] .task-picker-header {
    background: #21252e;
    border-bottom-color: #3a3f4b !important;
}

:root[data-bs-theme="dark"] .task-picker-search {
    background: #21252e;
    border-bottom-color: #3a3f4b !important;
}

:root[data-bs-theme="dark"] .task-picker-search .form-control {
    background: #1f2430;
    border-color: #3a3f4b;
    color: #e2e8f0;
}

:root[data-bs-theme="dark"] .task-picker-item {
    color: #e2e8f0;
}

:root[data-bs-theme="dark"] .task-picker-item:hover {
    background: #2d3748;
}

:root[data-bs-theme="dark"] .task-picker-item small {
    color: #a8b4c7;
}

:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link) {
    border-color: #35508b;
    background: #1b2a4a;
    color: #9ec0ff;
}

:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link:hover) {
    background: #22345c;
    border-color: #4566ad;
}

:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-status) {
    border-color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 65%, #1e293b 35%);
    background: color-mix(in srgb, var(--task-status-color, #7aa2f7) 26%, #111827 74%);
    color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 70%, #dbeafe 30%);
}
</style>