+ {/* Top Header Bar */}
+
+
+
+ {isCreate
+ ? t("newTodoDrawerTitle")
+ : mode === "view"
+ ? t("todoDetailsDrawerTitle")
+ : t("editTodoDrawerTitle")}
+
+
+ {/* View / Edit Mode Switcher (only for existing todos) */}
+ {!isCreate && (
+
+
setMode("view")}
+ className={`px-2 py-0.5 rounded-md font-medium transition-all flex items-center space-x-1 cursor-pointer tactile-btn ${
+ mode === "view"
+ ? "bg-[var(--color-bg-panel)] text-[var(--color-teal-primary)] shadow-xs font-semibold"
+ : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
+ }`}
+ >
+ {t("viewMode")}
+
+
setMode("edit")}
+ className={`px-2 py-0.5 rounded-md font-medium transition-all flex items-center space-x-1 cursor-pointer tactile-btn ${
+ mode === "edit"
+ ? "bg-[var(--color-bg-panel)] text-[var(--color-teal-primary)] shadow-xs font-semibold"
+ : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
+ }`}
+ >
+ {t("editMode")}
+
+
+ )}
+
+
+
+
+
+
+ {/* Main Content Area */}
+ {mode === "view" ? (
+ /* ==================== VIEW MODE ==================== */
+
+ {/* Title as Crisp Typography Heading */}
+
setMode("edit")}
+ className="px-5 pt-4 pb-2 shrink-0 select-text cursor-text"
+ title={t("doubleClickToEdit")}
+ >
+
+ {title || t("untitledTodo")}
+
+
+
+ {/* Properties: Deadline + Tags */}
+ {(deadlineInfo || selectedTagIds.length > 0) && (
+
+ {/* Deadline Badge */}
+ {deadlineInfo && (
+
+ {deadlineInfo.label}
+
+ )}
+
+ {/* Tag Badges */}
+ {selectedTagIds.map((tagId) => {
+ const tag = tagsWorkspace.tags.find((t) => t.id === tagId);
+ if (!tag) return null;
+ return (
+
+ {tag.name}
+
+ );
+ })}
+
+ )}
+
+ {/* Clean Hairline Divider */}
+
+
+ {/* View Mode Markdown Content */}
+
setMode("edit")}
+ className="flex-1 flex flex-col min-h-0 px-5 pt-3 pb-2 overflow-y-auto smooth-scroll select-text"
+ >
+ {content.trim() ? (
+
+ ) : (
+
setMode("edit")}
+ className="h-full min-h-[140px] flex flex-col items-center justify-center text-[var(--color-text-subtle)] text-xs cursor-pointer hover:text-[var(--color-teal-primary)] transition-colors select-none"
+ >
+ {t("clickToAddContent")}
+
+ )}
+
+
+ {/* View Mode Footer */}
+
+
+ {t("viewModeHint")}
+
+
+
+
+ {t("close")}
+
+
setMode("edit")}
+ className="px-3.5 py-1 text-[12px] font-medium bg-[var(--color-teal-primary)] hover:bg-[var(--color-teal-primary)]/90 text-white rounded-md transition-colors cursor-pointer tactile-btn shadow-xs flex items-center space-x-1.5"
+ >
+ {t("edit")}
+
+
+
+
+ ) : (
+ /* ==================== EDIT MODE ==================== */
+
+ {/* Title Input (No blue text selection!) */}
+
+
+
+ {/* Metadata Properties Row: Tags + Deadline directly beneath Title */}
+
+ {/* Tag Selector Trigger Button */}
+
+
setShowTagMenu(!showTagMenu)}
+ title={t("tags")}
+ className={`h-[26px] px-2.5 rounded-md flex items-center space-x-1.5 text-[11.5px] font-medium transition-colors tactile-btn cursor-pointer ${
+ selectedTagIds.length > 0
+ ? "text-[var(--color-teal-primary)] bg-[var(--color-teal-tint-active)]"
+ : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] bg-[var(--color-hover-overlay)] hover:bg-[var(--color-hover-overlay)]/80"
+ }`}
+ >
+ 0 ? "fill" : "regular"} />
+ {t("tags")}
+
+
+ {/* Tag Dropdown Popover */}
+ {showTagMenu && (
+ <>
+
setShowTagMenu(false)}
+ />
+
+
+ {t("tags")}
+
+ {tagsWorkspace.tags.length === 0 ? (
+
+ {t("noTagsYetMessage")}
+
+ ) : (
+ tagsWorkspace.tags.map((tag) => {
+ const isSelected = selectedTagIds.includes(tag.id);
+ return (
+
toggleTag(tag.id)}
+ className="w-full px-3 py-1.5 flex items-center justify-between hover:bg-[var(--color-hover-overlay)] text-left cursor-pointer"
+ >
+
+
+ {tag.name}
+
+
+ {isSelected && (
+
+ );
+ })
+ )}
+
+
+ )}
+
+
+ {/* Selected Tag Pills */}
+ {selectedTagIds.map((tagId) => {
+ const tag = tagsWorkspace.tags.find((t) => t.id === tagId);
+ if (!tag) return null;
+ return (
+
toggleTag(tag.id)}
+ title={tag.name}
+ className="inline-flex items-center space-x-1.5 h-[26px] px-2 rounded-md text-[11px] font-medium shrink-0 transition-opacity hover:opacity-80 tactile-btn cursor-pointer"
+ style={{
+ backgroundColor: `${tag.colorHex}18`,
+ border: `1px solid ${tag.colorHex}35`,
+ color: tag.colorHex,
+ }}
+ >
+ {tag.name}
+
+ );
+ })}
+
+ {/* Deadline Trigger Button */}
+
+ setShowDeadlinePicker(!showDeadlinePicker)}
+ title={dueAt ? t("editDeadline") : t("setDeadline")}
+ className={`h-[26px] px-2.5 rounded-md flex items-center space-x-1.5 text-[11.5px] font-medium transition-colors tactile-btn cursor-pointer ${
+ dueAt
+ ? deadlineInfo?.isOverdue
+ ? "text-[#F18A45] bg-[#F18A45]/15 border border-[#F18A45]/30 font-medium"
+ : "text-[var(--color-teal-primary)] bg-[var(--color-teal-tint-active)]"
+ : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] bg-[var(--color-hover-overlay)] hover:bg-[var(--color-hover-overlay)]/80"
+ }`}
+ >
+
+ {dueAt ? deadlineInfo?.label : t("deadline")}
+
+ {dueAt && (
+ {
+ e.stopPropagation();
+ setDueAt(null);
+ setReminderAt(null);
+ }}
+ className="ml-1 opacity-60 hover:opacity-100 cursor-pointer"
+ title={t("clearDeadline")}
+ >
+
+ )}
+
+
+
+
+ {/* Clean Hairline Divider */}
+
+
+ {/* Tiptap Editor Canvas */}
+
+ setContent(md)}
+ onCmdEnter={handleSave}
+ />
+
+
+ {/* Deadline Picker Popover Dialog */}
+ {showDeadlinePicker && (
+
{
+ setDueAt(d);
+ setReminderAt(r);
+ setShowDeadlinePicker(false);
+ }}
+ onClose={() => setShowDeadlinePicker(false)}
+ />
+ )}
+
+ {/* Edit Mode Footer Bar */}
+
+
+ {t("shortcutHint")}
+
+
+
+ {
+ if (!isCreate) {
+ setMode("view");
+ } else {
+ onClose();
+ }
+ }}
+ className="px-3 py-1 text-[12px] font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-hover-overlay)] rounded-md transition-colors cursor-pointer tactile-btn"
+ >
+ {t("cancel")}
+
+
+ {t("save")}
+
+
+
+ )}
+
+ );
+};
diff --git a/src/components/todos/TodoItemRow.tsx b/src/components/todos/TodoItemRow.tsx
new file mode 100644
index 0000000..aae8dc5
--- /dev/null
+++ b/src/components/todos/TodoItemRow.tsx
@@ -0,0 +1,321 @@
+import React, { useState, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import {
+ Check,
+ Clock,
+ Copy,
+ DotsThree,
+ PencilSimple,
+ Archive,
+ ArrowUUpLeft,
+ Trash,
+ Tag,
+} from "@phosphor-icons/react";
+import type { TodoItem } from "@/types";
+import { useTodoStore } from "@/stores/useTodoStore";
+import { useTagStore } from "@/stores/useTagStore";
+import { formatDeadline, formatTime } from "@/lib/dateUtils";
+
+interface TodoItemRowProps {
+ todo: TodoItem;
+ onView: (todo: TodoItem) => void;
+ onEdit: (todo: TodoItem) => void;
+ onOpenDeadlinePicker: (todo: TodoItem) => void;
+ onOpenTagAssignment: (todo: TodoItem) => void;
+}
+
+export const TodoItemRow: React.FC
= ({
+ todo,
+ onView,
+ onEdit,
+ onOpenDeadlinePicker,
+ onOpenTagAssignment,
+}) => {
+ const { t, i18n } = useTranslation();
+
+ const toggleComplete = useTodoStore((s) => s.toggleComplete);
+ const archiveTodo = useTodoStore((s) => s.archiveTodo);
+ const restoreTodo = useTodoStore((s) => s.restoreTodo);
+ const deleteTodo = useTodoStore((s) => s.deleteTodo);
+
+ const tagsWorkspace = useTagStore((s) => s.workspace);
+ const [showMenu, setShowMenu] = useState(false);
+ const [copied, setCopied] = useState(false);
+ const [menuPlacement, setMenuPlacement] = useState<"top" | "bottom">("bottom");
+ const moreButtonRef = useRef(null);
+
+ const isCompleted = !!todo.completedAt;
+ const isArchived = !!todo.archivedAt;
+
+ const assignedTagIds = tagsWorkspace.assignments[todo.id] || [];
+ const assignedTags = tagsWorkspace.tags.filter((t) => assignedTagIds.includes(t.id));
+
+ const deadlineInfo = todo.dueAt ? formatDeadline(todo.dueAt, i18n.language) : null;
+
+ const handleCopyMarkdown = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ const statusMark = isCompleted ? "[x]" : "[ ]";
+ const text = `- ${statusMark} ${todo.title}${todo.content ? `\n ${todo.content}` : ""}`;
+ navigator.clipboard.writeText(text);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 1200);
+ };
+
+ const handleToggleMenu = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ if (!showMenu && moreButtonRef.current) {
+ const rect = moreButtonRef.current.getBoundingClientRect();
+ const spaceBelow = window.innerHeight - rect.bottom;
+ if (spaceBelow < 140) {
+ setMenuPlacement("top");
+ } else {
+ setMenuPlacement("bottom");
+ }
+ }
+ setShowMenu((prev) => !prev);
+ };
+
+ const isMockHover =
+ typeof window !== "undefined" &&
+ window.location.search.includes("mock") &&
+ window.location.search.includes("hover") &&
+ todo.id === "mock-todo-2";
+
+ return (
+ onView(todo)}
+ className="group relative pl-[7px] pr-[5px] py-2 my-[2px] rounded-[8px] transition-colors duration-150 select-none hover:bg-[var(--color-row-hover)] cursor-pointer"
+ >
+ {/* Main Row: Checkbox + Full-width Title (Completely unobstructed on hover!) */}
+
+ {/* 16x16 Checkbox with r=4px, border=1.3px, optically centered with text */}
+
+ {
+ e.stopPropagation();
+ toggleComplete(todo.id);
+ }}
+ className={`w-[16px] h-[16px] translate-y-[1px] rounded-[4px] flex items-center justify-center border-[1.3px] transition-all tactile-btn cursor-pointer ${
+ isCompleted
+ ? "bg-[var(--color-teal-primary)] border-[var(--color-teal-primary)] text-white"
+ : "border-[var(--color-text-subtle)] hover:border-[var(--color-teal-primary)] bg-transparent"
+ }`}
+ >
+ {isCompleted &&
+
+
+ {/* SizedBox(width: 6) */}
+
+
+ {/* Title (fontSize: 13.5) - 100% full row width */}
+
+
+ {todo.title}
+
+
+
+
+ {/* Sub-row: Indented 30px (Metadata Line + Floating Hover Action Capsule) */}
+
+ {/* Left: Deadline status + Tags + Tag shortcut button */}
+
+ {/* Deadline */}
+ {deadlineInfo && (
+ onOpenDeadlinePicker(todo)}
+ className={`inline-flex items-center space-x-1 text-[11px] font-medium px-2 py-0.5 rounded-md transition-opacity hover:opacity-80 tactile-btn cursor-pointer shrink-0 ${
+ deadlineInfo.isOverdue && !isCompleted
+ ? "text-[#F18A45] bg-[#F18A45]/10 border border-[#F18A45]/30 font-medium"
+ : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] bg-[var(--color-hover-overlay)] border border-[var(--color-border-panel)]"
+ }`}
+ >
+ {deadlineInfo.label}
+ {deadlineInfo.isOverdue && !isCompleted && · {t("overdue")} }
+
+ )}
+
+ {/* FloatickTagChip without background and border */}
+ {assignedTags.map((tag) => (
+ onOpenTagAssignment(todo)}
+ title={tag.name}
+ className="inline-flex items-center space-x-1 px-1.5 py-0.5 rounded text-[11px] font-medium shrink-0 transition-all hover:bg-[var(--color-hover-overlay)] tactile-btn cursor-pointer"
+ style={{
+ color: tag.colorHex,
+ }}
+ >
+ {tag.name}
+
+ ))}
+
+ {/* Tag Quick Selection Icon Button (Flutter: assign-tags-$todoId) */}
+ {!isArchived && (
+ onOpenTagAssignment(todo)}
+ title={t("assignTagsTooltip") || "分配标签"}
+ className={`w-5 h-5 rounded flex items-center justify-center shrink-0 tactile-btn cursor-pointer ${
+ assignedTags.length > 0
+ ? "text-[var(--color-teal-primary)] hover:bg-[var(--color-teal-tint)]"
+ : "text-[var(--color-text-subtle)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-hover-overlay)]"
+ }`}
+ >
+ 0 ? "fill" : "regular"} />
+
+ )}
+
+
+ {/* Right: Created / Archived timestamp (Fades out when hovered or menu opened) */}
+
+ {formatTime(isArchived && todo.archivedAt ? todo.archivedAt : todo.createdAt)}
+
+
+ {/* Floating Hover Actions with Frosted Blur Backdrop on the Next Line */}
+
+ {/* Frosted Glass Floating Action Pill */}
+
+ {/* Edit button */}
+
{
+ e.stopPropagation();
+ onEdit(todo);
+ }}
+ title={t("edit")}
+ className="w-6 h-6 rounded flex items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-hover-overlay)] tactile-btn cursor-pointer"
+ >
+
+
+ {/* Deadline */}
+ {!isArchived && (
+
onOpenDeadlinePicker(todo)}
+ title={todo.dueAt ? t("editDeadline") : t("setDeadline")}
+ className={`w-6 h-6 rounded flex items-center justify-center tactile-btn cursor-pointer ${
+ todo.dueAt
+ ? "text-[var(--color-teal-primary)]"
+ : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-hover-overlay)]"
+ }`}
+ >
+
+ )}
+
+ {/* Copy */}
+
+ {copied ? (
+
+
+ {/* More actions */}
+
+
+
+
+ {showMenu && (
+ <>
+
{
+ e.stopPropagation();
+ setShowMenu(false);
+ }}
+ />
+
+ {isArchived ? (
+
{
+ e.stopPropagation();
+ setShowMenu(false);
+ restoreTodo(todo.id);
+ }}
+ className="w-full px-3 py-1.5 flex items-center space-x-2 text-[var(--color-text-primary)] hover:bg-[var(--color-teal-tint)] hover:text-[var(--color-teal-primary)]"
+ >
+ {t("restore")}
+
+ ) : (
+
{
+ e.stopPropagation();
+ setShowMenu(false);
+ archiveTodo(todo.id);
+ }}
+ className="w-full px-3 py-1.5 flex items-center space-x-2 text-[var(--color-text-primary)] hover:bg-amber-500/15 hover:text-amber-500"
+ >
+ {t("archive")}
+
+ )}
+
+
{
+ e.stopPropagation();
+ setShowMenu(false);
+ deleteTodo(todo.id);
+ }}
+ className="w-full px-3 py-1.5 flex items-center space-x-2 text-red-400 hover:bg-red-500/15 hover:text-red-300"
+ >
+ {t("delete")}
+
+
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/src/components/todos/TodoPanel.tsx b/src/components/todos/TodoPanel.tsx
new file mode 100644
index 0000000..7ac1b60
--- /dev/null
+++ b/src/components/todos/TodoPanel.tsx
@@ -0,0 +1,178 @@
+import React, { useState, useMemo, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { CheckCircle } from "@phosphor-icons/react";
+import type { TodoItem } from "@/types";
+import { useTodoStore } from "@/stores/useTodoStore";
+import { useTagStore } from "@/stores/useTagStore";
+import { ActionBar } from "@/components/common/ActionBar";
+import { TodoItemRow } from "./TodoItemRow";
+import { TodoDeadlinePicker } from "./TodoDeadlinePicker";
+import { getGroupLabel } from "@/lib/dateUtils";
+
+interface TodoPanelProps {
+ onOpenTagFilter: () => void;
+ onOpenTagAssignment: (todoId: string) => void;
+}
+
+export const TodoPanel: React.FC
= ({
+ onOpenTagFilter,
+ onOpenTagAssignment,
+}) => {
+ const { t, i18n } = useTranslation();
+
+ const todos = useTodoStore((s) => s.todos);
+ const updateTodo = useTodoStore((s) => s.updateTodo);
+ const searchQuery = useTodoStore((s) => s.searchQuery);
+ const setSearchQuery = useTodoStore((s) => s.setSearchQuery);
+ const activeScope = useTodoStore((s) => s.activeScope);
+
+ const tagsWorkspace = useTagStore((s) => s.workspace);
+ const selectedTagIds = useTagStore((s) => s.selectedTagIds);
+
+ const setIsEditorOpen = useTodoStore((s) => s.setIsEditorOpen);
+ const setEditingTodoId = useTodoStore((s) => s.setEditingTodoId);
+
+ // Standalone Deadline Picker on row
+ const [deadliningTodo, setDeadliningTodo] = useState(null);
+
+ // Filter todos
+ const filteredTodos = useMemo(() => {
+ return todos.filter((item) => {
+ // Scope filter
+ const isArchived = !!item.archivedAt;
+ if (activeScope === "active" && isArchived) return false;
+ if (activeScope === "archived" && !isArchived) return false;
+
+ // Multi-Tag filter (OR match, exact same as Flutter)
+ if (selectedTagIds.length > 0) {
+ const assigned = tagsWorkspace.assignments[item.id] || [];
+ const matchesTag = selectedTagIds.some((id) => assigned.includes(id));
+ if (!matchesTag) return false;
+ }
+
+ // Search query filter
+ if (searchQuery.trim()) {
+ const q = searchQuery.toLowerCase();
+ const matchTitle = item.title.toLowerCase().includes(q);
+ const matchContent = (item.content || "").toLowerCase().includes(q);
+ if (!matchTitle && !matchContent) return false;
+ }
+
+ return true;
+ });
+ }, [todos, activeScope, selectedTagIds, searchQuery, tagsWorkspace]);
+
+ // Grouping by Date
+ const groupedTodos = useMemo(() => {
+ const groups: { label: string; items: TodoItem[] }[] = [];
+ const map = new Map();
+
+ for (const item of filteredTodos) {
+ const label = getGroupLabel(item.createdAt, i18n.language);
+ if (!map.has(label)) {
+ map.set(label, []);
+ }
+ map.get(label)!.push(item);
+ }
+
+ for (const [label, items] of map.entries()) {
+ groups.push({ label, items });
+ }
+
+ return groups;
+ }, [filteredTodos, i18n.language]);
+
+ const setEditorMode = useTodoStore((s) => s.setEditorMode);
+
+ const handleOpenCreate = () => {
+ setEditingTodoId(null);
+ setEditorMode("edit");
+ setIsEditorOpen(true);
+ };
+
+ useEffect(() => {
+ const handler = () => handleOpenCreate();
+ window.addEventListener("floatick:new-item", handler);
+ return () => window.removeEventListener("floatick:new-item", handler);
+ }, []);
+
+ const handleOpenView = (todo: TodoItem) => {
+ setEditingTodoId(todo.id);
+ setEditorMode("view");
+ setIsEditorOpen(true);
+ };
+
+ const handleOpenEdit = (todo: TodoItem) => {
+ setEditingTodoId(todo.id);
+ setEditorMode("edit");
+ setIsEditorOpen(true);
+ };
+
+ const handleSaveDeadline = async (dueAt: string | null, reminderAt: string | null) => {
+ if (deadliningTodo) {
+ await updateTodo(deadliningTodo.id, { dueAt, reminderAt });
+ setDeadliningTodo(null);
+ }
+ };
+
+ return (
+
+ {/* Action Bar */}
+
+
+ {/* Todo List Area */}
+
+ {groupedTodos.length === 0 ? (
+
+
+
+ {t("allClear")}
+
+
+ {t("allClearSub")}
+
+
+ ) : (
+ groupedTodos.map((group) => (
+
+ {/* Clean category header */}
+
+ {group.label}
+
+
+ {/* Items */}
+
+ {group.items.map((todo) => (
+ setDeadliningTodo(t)}
+ onOpenTagAssignment={() => onOpenTagAssignment(todo.id)}
+ />
+ ))}
+
+
+ ))
+ )}
+
+
+ {/* Deadline Picker Modal */}
+ {deadliningTodo && (
+
setDeadliningTodo(null)}
+ />
+ )}
+ => {
+ if (isMock) return MOCK_TODOS;
+ return await invoke("get_todos");
+ },
+ saveTodos: async (todos: TodoItem[]): Promise => {
+ if (isMock) return;
+ await invoke("save_todos", { todos });
+ },
+
+ // Tags
+ getTags: async (): Promise => {
+ if (isMock) return MOCK_TAGS;
+ return await invoke("get_tags");
+ },
+ saveTags: async (workspace: TagWorkspace): Promise => {
+ if (isMock) return;
+ await invoke("save_tags", { workspace });
+ },
+
+ // Notes
+ getNotes: async (): Promise => {
+ if (isMock) return MOCK_NOTES;
+ return await invoke("get_notes");
+ },
+ saveNotes: async (notes: NoteItem[]): Promise => {
+ if (isMock) return;
+ await invoke("save_notes", { notes });
+ },
+
+ // Settings
+ getSettings: async (): Promise => {
+ if (isMock) return MOCK_SETTINGS;
+ return await invoke("get_settings");
+ },
+ saveSettings: async (settings: AppSettings): Promise => {
+ if (isMock) return;
+ await invoke("save_settings", { settings });
+ },
+
+ // Window actions
+ hideWindow: async (): Promise => {
+ if (isMock) return;
+ await invoke("hide_window");
+ },
+ toggleWindow: async (): Promise => {
+ if (isMock) return;
+ await invoke("toggle_window");
+ },
+ setAlwaysOnTop: async (alwaysOnTop: boolean): Promise => {
+ if (isMock) return;
+ await invoke("set_always_on_top", { alwaysOnTop });
+ },
+ updateTrayCount: async (count: number): Promise => {
+ if (isMock) return;
+ await invoke("update_tray_count", { count });
+ },
+
+ // Autostart
+ isAutostartEnabled: async (): Promise => {
+ if (isMock) return false;
+ return await invoke("is_autostart_enabled");
+ },
+ setAutostartEnabled: async (enabled: boolean): Promise => {
+ if (isMock) return;
+ await invoke("set_autostart_enabled", { enabled });
+ },
+ quitApp: async (): Promise => {
+ if (isMock) return;
+ await invoke("quit_app");
+ },
+};
diff --git a/src/lib/dateUtils.ts b/src/lib/dateUtils.ts
new file mode 100644
index 0000000..fe7b6a9
--- /dev/null
+++ b/src/lib/dateUtils.ts
@@ -0,0 +1,54 @@
+import { isToday, isYesterday, format, parseISO, isPast } from "date-fns";
+import { zhCN, enUS } from "date-fns/locale";
+import i18n from "@/i18n";
+
+export function getGroupLabel(dateString: string, currentLang?: string): string {
+ try {
+ const date = parseISO(dateString);
+ const isZh = (currentLang || i18n.language).startsWith("zh");
+ const locale = isZh ? zhCN : enUS;
+
+ if (isToday(date)) {
+ return i18n.t("today");
+ }
+ if (isYesterday(date)) {
+ return i18n.t("yesterday");
+ }
+ return format(date, isZh ? "yyyy年M月d日" : "MMM d, yyyy", { locale });
+ } catch {
+ return i18n.t("earlier");
+ }
+}
+
+export function formatTime(dateString: string): string {
+ try {
+ const date = parseISO(dateString);
+ return format(date, "HH:mm");
+ } catch {
+ return "";
+ }
+}
+
+export function formatDeadline(
+ dueAt: string,
+ currentLang?: string
+): { label: string; isOverdue: boolean } {
+ try {
+ const date = parseISO(dueAt);
+ const overdue = isPast(date) && !isToday(date);
+ const isZh = (currentLang || i18n.language).startsWith("zh");
+ const locale = isZh ? zhCN : enUS;
+
+ let label = "";
+ if (isToday(date)) {
+ label = `${i18n.t("today")} ${format(date, "HH:mm")}`;
+ } else if (isYesterday(date)) {
+ label = `${i18n.t("yesterday")} ${format(date, "HH:mm")}`;
+ } else {
+ label = format(date, isZh ? "M月d日 HH:mm" : "MMM d, HH:mm", { locale });
+ }
+ return { label, isOverdue: overdue };
+ } catch {
+ return { label: dueAt, isOverdue: false };
+ }
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..75c7cf1
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+import "./i18n";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+
+
+);
diff --git a/src/stores/useNoteStore.ts b/src/stores/useNoteStore.ts
new file mode 100644
index 0000000..5c3c4e8
--- /dev/null
+++ b/src/stores/useNoteStore.ts
@@ -0,0 +1,125 @@
+import { create } from "zustand";
+import type { NoteItem } from "@/types";
+import { api } from "@/lib/api";
+
+interface NoteState {
+ notes: NoteItem[];
+ isLoaded: boolean;
+ searchQuery: string;
+ editingNoteId: string | null;
+ isEditorOpen: boolean;
+ editorMode: "view" | "edit";
+
+ setSearchQuery: (query: string) => void;
+ setEditingNoteId: (id: string | null) => void;
+ setIsEditorOpen: (val: boolean) => void;
+ setEditorMode: (mode: "view" | "edit") => void;
+
+ loadNotes: () => Promise;
+ addNote: (title?: string, content?: string, tagIds?: string[]) => Promise;
+ updateNote: (id: string, updates: Partial) => Promise;
+ deleteNote: (id: string) => Promise;
+ togglePin: (id: string) => Promise;
+ toggleArchive: (id: string) => Promise;
+ removeTagFromNotes: (tagId: string) => Promise;
+}
+
+export const useNoteStore = create((set, get) => ({
+ notes: [],
+ isLoaded: false,
+ searchQuery: "",
+ editingNoteId: null,
+ isEditorOpen: false,
+ editorMode: "view",
+
+ setSearchQuery: (query) => set({ searchQuery: query }),
+ setEditingNoteId: (id) => set({ editingNoteId: id }),
+ setIsEditorOpen: (val) => set({ isEditorOpen: val }),
+ setEditorMode: (mode) => set({ editorMode: mode }),
+
+ loadNotes: async () => {
+ try {
+ const data = await api.getNotes();
+ set({ notes: data, isLoaded: true });
+ } catch {
+ set({ isLoaded: true });
+ }
+ },
+
+ addNote: async (title = "", content = "", tagIds = []) => {
+ const now = new Date().toISOString();
+ const newNote: NoteItem = {
+ id: crypto.randomUUID(),
+ title: title.trim(),
+ content: content.trim(),
+ createdAt: now,
+ updatedAt: now,
+ tagIds,
+ pinnedAt: null,
+ archivedAt: null,
+ };
+
+ const nextNotes = [newNote, ...get().notes];
+ set({ notes: nextNotes, editingNoteId: newNote.id });
+ await api.saveNotes(nextNotes);
+ return newNote;
+ },
+
+ updateNote: async (id: string, updates: Partial) => {
+ const now = new Date().toISOString();
+ const nextNotes = get().notes.map((item) =>
+ item.id === id ? { ...item, ...updates, updatedAt: now } : item
+ );
+ set({ notes: nextNotes });
+ await api.saveNotes(nextNotes);
+ },
+
+ deleteNote: async (id: string) => {
+ const nextNotes = get().notes.filter((item) => item.id !== id);
+ set({
+ notes: nextNotes,
+ editingNoteId: get().editingNoteId === id ? null : get().editingNoteId,
+ });
+ await api.saveNotes(nextNotes);
+ },
+
+ togglePin: async (id: string) => {
+ const now = new Date().toISOString();
+ const nextNotes = get().notes.map((item) => {
+ if (item.id !== id) return item;
+ return {
+ ...item,
+ pinnedAt: item.pinnedAt ? null : now,
+ updatedAt: now,
+ };
+ });
+ set({ notes: nextNotes });
+ await api.saveNotes(nextNotes);
+ },
+
+ toggleArchive: async (id: string) => {
+ const now = new Date().toISOString();
+ const nextNotes = get().notes.map((item) => {
+ if (item.id !== id) return item;
+ return {
+ ...item,
+ archivedAt: item.archivedAt ? null : now,
+ pinnedAt: item.archivedAt ? item.pinnedAt : null, // unpin when archiving
+ updatedAt: now,
+ };
+ });
+ set({ notes: nextNotes });
+ await api.saveNotes(nextNotes);
+ },
+
+ removeTagFromNotes: async (tagId: string) => {
+ const hasTag = get().notes.some((n) => n.tagIds.includes(tagId));
+ if (!hasTag) return;
+ const nextNotes = get().notes.map((n) => ({
+ ...n,
+ tagIds: n.tagIds.filter((tId) => tId !== tagId),
+ }));
+ set({ notes: nextNotes });
+ await api.saveNotes(nextNotes);
+ },
+}));
diff --git a/src/stores/useSettingsStore.ts b/src/stores/useSettingsStore.ts
new file mode 100644
index 0000000..89f5183
--- /dev/null
+++ b/src/stores/useSettingsStore.ts
@@ -0,0 +1,123 @@
+import { create } from "zustand";
+import type { AppSettings, ThemePreference, LanguagePreference } from "@/types";
+import { api } from "@/lib/api";
+import i18n from "@/i18n";
+
+interface SettingsState {
+ settings: AppSettings;
+ isLoaded: boolean;
+ loadSettings: () => Promise;
+ updateTheme: (theme: ThemePreference) => Promise;
+ updateLanguage: (language: LanguagePreference) => Promise;
+ updateAlwaysOnTop: (alwaysOnTop: boolean) => Promise;
+ updateCollapseOnBlur: (collapse: boolean) => Promise;
+}
+
+const defaultSettings: AppSettings = {
+ theme: "system",
+ language: "system",
+ alwaysOnTop: true,
+ collapseWhenClickingOutside: true,
+};
+
+function applyTheme(theme: ThemePreference) {
+ const root = document.documentElement;
+ const isDark =
+ theme === "dark" ||
+ (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+ // Disable all CSS transitions during theme switch so all elements (header, search bar, buttons, list)
+ // switch 100% synchronously in a single atomic frame without any staggered delay or lag.
+ root.classList.add("disable-transitions");
+
+ if (isDark) {
+ root.classList.add("dark");
+ root.classList.remove("light");
+ } else {
+ root.classList.remove("dark");
+ root.classList.add("light");
+ }
+
+ // Force reflow to immediately apply theme tokens while transitions are disabled
+ void root.offsetHeight;
+
+ // Restore micro-interactions on the next frame for hover/focus states
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ root.classList.remove("disable-transitions");
+ });
+ });
+}
+
+// Reactively respond to OS light/dark changes when following system theme
+if (typeof window !== "undefined" && window.matchMedia) {
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ const handleSystemThemeChange = () => {
+ const currentTheme = useSettingsStore.getState().settings.theme;
+ if (currentTheme === "system") {
+ applyTheme("system");
+ }
+ };
+ if (mediaQuery.addEventListener) {
+ mediaQuery.addEventListener("change", handleSystemThemeChange);
+ } else {
+ // Legacy Safari/WebKit fallback
+ mediaQuery.addListener(handleSystemThemeChange);
+ }
+}
+
+function applyLanguage(lang: LanguagePreference) {
+ if (lang === "system") {
+ const sysLang = navigator.language.toLowerCase().startsWith("zh") ? "zh" : "en";
+ i18n.changeLanguage(sysLang);
+ } else {
+ i18n.changeLanguage(lang);
+ }
+}
+
+export const useSettingsStore = create((set, get) => ({
+ settings: defaultSettings,
+ isLoaded: false,
+
+ loadSettings: async () => {
+ try {
+ const data = await api.getSettings();
+ const current = { ...defaultSettings, ...data };
+ set({ settings: current, isLoaded: true });
+ applyTheme(current.theme);
+ applyLanguage(current.language);
+ await api.setAlwaysOnTop(current.alwaysOnTop);
+ } catch {
+ set({ isLoaded: true });
+ applyTheme(defaultSettings.theme);
+ applyLanguage(defaultSettings.language);
+ }
+ },
+
+ updateTheme: async (theme: ThemePreference) => {
+ const next = { ...get().settings, theme };
+ set({ settings: next });
+ applyTheme(theme);
+ await api.saveSettings(next);
+ },
+
+ updateLanguage: async (language: LanguagePreference) => {
+ const next = { ...get().settings, language };
+ set({ settings: next });
+ applyLanguage(language);
+ await api.saveSettings(next);
+ },
+
+ updateAlwaysOnTop: async (alwaysOnTop: boolean) => {
+ const next = { ...get().settings, alwaysOnTop };
+ set({ settings: next });
+ await api.setAlwaysOnTop(alwaysOnTop);
+ await api.saveSettings(next);
+ },
+
+ updateCollapseOnBlur: async (collapseWhenClickingOutside: boolean) => {
+ const next = { ...get().settings, collapseWhenClickingOutside };
+ set({ settings: next });
+ await api.saveSettings(next);
+ },
+}));
diff --git a/src/stores/useTagStore.ts b/src/stores/useTagStore.ts
new file mode 100644
index 0000000..93cda75
--- /dev/null
+++ b/src/stores/useTagStore.ts
@@ -0,0 +1,173 @@
+import { create } from "zustand";
+import type { TagWorkspace, TodoTag } from "@/types";
+import { api } from "@/lib/api";
+import { useNoteStore } from "./useNoteStore";
+
+interface TagState {
+ workspace: TagWorkspace;
+ isLoaded: boolean;
+ selectedTagIds: string[];
+
+ toggleTagFilter: (tagId: string) => void;
+ clearTagFilter: () => void;
+ setSelectedTagIds: (tagIds: string[]) => void;
+
+ loadTags: () => Promise;
+ createTag: (name: string, colorHex: string) => Promise;
+ updateTag: (id: string, name: string, colorHex: string) => Promise;
+ deleteTag: (id: string) => Promise;
+ setTodoTags: (todoId: string, tagIds: string[]) => Promise;
+ toggleTodoTag: (todoId: string, tagId: string) => Promise;
+ removeAssignmentForTodo: (todoId: string) => Promise;
+}
+
+const defaultWorkspace: TagWorkspace = {
+ version: 1,
+ tags: [],
+ assignments: {},
+};
+
+export const useTagStore = create((set, get) => ({
+ workspace: defaultWorkspace,
+ isLoaded: false,
+ selectedTagIds: [],
+
+ toggleTagFilter: (tagId: string) => {
+ const current = get().selectedTagIds;
+ if (current.includes(tagId)) {
+ set({ selectedTagIds: current.filter((id) => id !== tagId) });
+ } else {
+ set({ selectedTagIds: [...current, tagId] });
+ }
+ },
+
+ clearTagFilter: () => {
+ set({ selectedTagIds: [] });
+ },
+
+ setSelectedTagIds: (tagIds: string[]) => {
+ set({ selectedTagIds: tagIds });
+ },
+
+ loadTags: async () => {
+ try {
+ const data = await api.getTags();
+ set({ workspace: data, isLoaded: true });
+ } catch {
+ set({ isLoaded: true });
+ }
+ },
+
+ createTag: async (name: string, colorHex: string) => {
+ const trimmed = name.trim();
+ if (!trimmed) {
+ throw new Error("Tag name cannot be empty");
+ }
+ if (trimmed.length > 30) {
+ throw new Error("Tag name exceeds 30 characters");
+ }
+ const lower = trimmed.toLowerCase();
+ if (get().workspace.tags.some((t) => t.name.toLowerCase() === lower)) {
+ throw new Error("Tag name already exists");
+ }
+
+ const newTag: TodoTag = {
+ id: crypto.randomUUID(),
+ name: trimmed,
+ colorHex,
+ };
+ const nextWorkspace: TagWorkspace = {
+ ...get().workspace,
+ tags: [...get().workspace.tags, newTag],
+ };
+ set({ workspace: nextWorkspace });
+ await api.saveTags(nextWorkspace);
+ return newTag;
+ },
+
+ updateTag: async (id: string, name: string, colorHex: string) => {
+ const trimmed = name.trim();
+ if (!trimmed) {
+ throw new Error("Tag name cannot be empty");
+ }
+ if (trimmed.length > 30) {
+ throw new Error("Tag name exceeds 30 characters");
+ }
+ const lower = trimmed.toLowerCase();
+ if (
+ get().workspace.tags.some(
+ (t) => t.id !== id && t.name.toLowerCase() === lower
+ )
+ ) {
+ throw new Error("Tag name already exists");
+ }
+
+ const nextWorkspace: TagWorkspace = {
+ ...get().workspace,
+ tags: get().workspace.tags.map((t) =>
+ t.id === id ? { ...t, name: trimmed, colorHex } : t
+ ),
+ };
+ set({ workspace: nextWorkspace });
+ await api.saveTags(nextWorkspace);
+ },
+
+ deleteTag: async (id: string) => {
+ // 1. Clean up assignments for todos
+ const nextAssignments = { ...get().workspace.assignments };
+ for (const key of Object.keys(nextAssignments)) {
+ nextAssignments[key] = nextAssignments[key].filter((tId) => tId !== id);
+ }
+ const nextWorkspace: TagWorkspace = {
+ version: 1,
+ tags: get().workspace.tags.filter((t) => t.id !== id),
+ assignments: nextAssignments,
+ };
+
+ // 2. Remove from active filter
+ set({
+ workspace: nextWorkspace,
+ selectedTagIds: get().selectedTagIds.filter((tId) => tId !== id),
+ });
+
+ // 3. Save tags workspace
+ await api.saveTags(nextWorkspace);
+
+ // 4. Clean up tag from all notes
+ await useNoteStore.getState().removeTagFromNotes(id);
+ },
+
+ setTodoTags: async (todoId: string, tagIds: string[]) => {
+ const nextAssignments = {
+ ...get().workspace.assignments,
+ [todoId]: Array.from(new Set(tagIds)),
+ };
+ const nextWorkspace: TagWorkspace = {
+ ...get().workspace,
+ assignments: nextAssignments,
+ };
+ set({ workspace: nextWorkspace });
+ await api.saveTags(nextWorkspace);
+ },
+
+ toggleTodoTag: async (todoId: string, tagId: string) => {
+ const current = get().workspace.assignments[todoId] || [];
+ const nextTagIds = current.includes(tagId)
+ ? current.filter((id) => id !== tagId)
+ : [...current, tagId];
+
+ await get().setTodoTags(todoId, nextTagIds);
+ },
+
+ removeAssignmentForTodo: async (todoId: string) => {
+ if (!get().workspace.assignments[todoId]) return;
+ const nextAssignments = { ...get().workspace.assignments };
+ delete nextAssignments[todoId];
+ const nextWorkspace: TagWorkspace = {
+ ...get().workspace,
+ assignments: nextAssignments,
+ };
+ set({ workspace: nextWorkspace });
+ await api.saveTags(nextWorkspace);
+ },
+}));
diff --git a/src/stores/useTodoStore.ts b/src/stores/useTodoStore.ts
new file mode 100644
index 0000000..a07668d
--- /dev/null
+++ b/src/stores/useTodoStore.ts
@@ -0,0 +1,123 @@
+import { create } from "zustand";
+import type { TodoItem } from "@/types";
+import { api } from "@/lib/api";
+import { useTagStore } from "./useTagStore";
+
+interface TodoState {
+ todos: TodoItem[];
+ isLoaded: boolean;
+ searchQuery: string;
+ activeScope: "active" | "archived";
+ editingTodoId: string | null;
+ isEditorOpen: boolean;
+ editorMode: "view" | "edit";
+
+ setSearchQuery: (query: string) => void;
+ setActiveScope: (scope: "active" | "archived") => void;
+ setEditingTodoId: (id: string | null) => void;
+ setIsEditorOpen: (val: boolean) => void;
+ setEditorMode: (mode: "view" | "edit") => void;
+
+ loadTodos: () => Promise;
+ addTodo: (title: string, content?: string, tagId?: string) => Promise;
+ toggleComplete: (id: string) => Promise;
+ updateTodo: (id: string, updates: Partial) => Promise;
+ deleteTodo: (id: string) => Promise;
+ archiveTodo: (id: string) => Promise;
+ restoreTodo: (id: string) => Promise;
+}
+
+export const useTodoStore = create((set, get) => ({
+ todos: [],
+ isLoaded: false,
+ searchQuery: "",
+ activeScope: "active",
+ editingTodoId: null,
+ isEditorOpen: false,
+ editorMode: "view",
+
+ setSearchQuery: (query) => set({ searchQuery: query }),
+ setActiveScope: (scope) => set({ activeScope: scope }),
+ setEditingTodoId: (id) => set({ editingTodoId: id }),
+ setIsEditorOpen: (val) => set({ isEditorOpen: val }),
+ setEditorMode: (mode) => set({ editorMode: mode }),
+
+ loadTodos: async () => {
+ try {
+ const data = await api.getTodos();
+ set({ todos: data, isLoaded: true });
+ } catch {
+ set({ isLoaded: true });
+ }
+ },
+
+ addTodo: async (title: string, content: string = "") => {
+ const trimmed = title.trim();
+ if (!trimmed) throw new Error("Title cannot be empty");
+
+ const newTodo: TodoItem = {
+ id: crypto.randomUUID(),
+ title: trimmed,
+ content: content.trim(),
+ createdAt: new Date().toISOString(),
+ startedAt: null,
+ completedAt: null,
+ archivedAt: null,
+ dueAt: null,
+ reminderAt: null,
+ notifyAtDeadline: true,
+ };
+
+ const nextTodos = [newTodo, ...get().todos];
+ set({ todos: nextTodos });
+ await api.saveTodos(nextTodos);
+ return newTodo;
+ },
+
+ toggleComplete: async (id: string) => {
+ const now = new Date().toISOString();
+ const nextTodos = get().todos.map((item) => {
+ if (item.id !== id) return item;
+ const isCompleted = !!item.completedAt;
+ return {
+ ...item,
+ completedAt: isCompleted ? null : now,
+ };
+ });
+ set({ todos: nextTodos });
+ await api.saveTodos(nextTodos);
+ },
+
+ updateTodo: async (id: string, updates: Partial) => {
+ const nextTodos = get().todos.map((item) =>
+ item.id === id ? { ...item, ...updates } : item
+ );
+ set({ todos: nextTodos });
+ await api.saveTodos(nextTodos);
+ },
+
+ deleteTodo: async (id: string) => {
+ const nextTodos = get().todos.filter((item) => item.id !== id);
+ set({ todos: nextTodos });
+ await api.saveTodos(nextTodos);
+ // Clean up tag assignments for this deleted todo
+ await useTagStore.getState().removeAssignmentForTodo(id);
+ },
+
+ archiveTodo: async (id: string) => {
+ const now = new Date().toISOString();
+ const nextTodos = get().todos.map((item) =>
+ item.id === id ? { ...item, archivedAt: now, startedAt: null } : item
+ );
+ set({ todos: nextTodos });
+ await api.saveTodos(nextTodos);
+ },
+
+ restoreTodo: async (id: string) => {
+ const nextTodos = get().todos.map((item) =>
+ item.id === id ? { ...item, archivedAt: null } : item
+ );
+ set({ todos: nextTodos });
+ await api.saveTodos(nextTodos);
+ },
+}));
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..af892dd
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,50 @@
+export interface TodoItem {
+ id: string;
+ title: string;
+ content?: string;
+ createdAt: string; // ISO-8601
+ startedAt?: string | null;
+ completedAt?: string | null;
+ archivedAt?: string | null;
+ dueAt?: string | null;
+ reminderAt?: string | null;
+ notifyAtDeadline?: boolean;
+ deadlineNotifiedAt?: string | null;
+ reminderNotifiedAt?: string | null;
+ snoozedUntil?: string | null;
+}
+
+export interface TodoTag {
+ id: string;
+ name: string;
+ colorHex: string;
+ colorValue?: number;
+ createdAt?: string;
+}
+
+export interface TagWorkspace {
+ version: number;
+ tags: TodoTag[];
+ assignments: Record; // todoId -> tagIds
+}
+
+export interface NoteItem {
+ id: string;
+ title: string;
+ content: string;
+ createdAt: string; // ISO-8601
+ updatedAt: string; // ISO-8601
+ tagIds: string[];
+ pinnedAt?: string | null;
+ archivedAt?: string | null;
+}
+
+export type ThemePreference = 'system' | 'light' | 'dark';
+export type LanguagePreference = 'system' | 'zh' | 'en';
+
+export interface AppSettings {
+ theme: ThemePreference;
+ language: LanguagePreference;
+ alwaysOnTop: boolean;
+ collapseWhenClickingOutside: boolean;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// ")
+ exit(1)
+}
+let output = URL(fileURLWithPath: CommandLine.arguments[1], isDirectory: true)
+try FileManager.default.createDirectory(at: output, withIntermediateDirectories: true)
+let symbols = [("wifi", "wifi"), ("battery.100percent", "battery"), ("magnifyingglass", "spotlight"), ("switch.2", "control-center")]
+for (symbol, filename) in symbols {
+ guard let source = NSImage(systemSymbolName: symbol, accessibilityDescription: nil),
+ let configured = source.withSymbolConfiguration(NSImage.SymbolConfiguration(pointSize: 13, weight: .medium)) else {
+ fatalError("Missing symbol: \(symbol)")
+ }
+ let canvas = NSSize(width: 26, height: 20)
+ let bitmap = NSBitmapImageRep(bitmapDataPlanes: nil, pixelsWide: 78, pixelsHigh: 60, bitsPerSample: 8, samplesPerPixel: 4, hasAlpha: true, isPlanar: false, colorSpaceName: .deviceRGB, bytesPerRow: 0, bitsPerPixel: 0)!
+ bitmap.size = canvas
+ NSGraphicsContext.saveGraphicsState()
+ NSGraphicsContext.current = NSGraphicsContext(bitmapImageRep: bitmap)
+ NSColor.clear.setFill()
+ NSRect(origin: .zero, size: canvas).fill()
+ let natural = configured.size
+ let scale = min(23 / natural.width, 16 / natural.height)
+ let size = NSSize(width: natural.width * scale, height: natural.height * scale)
+ configured.draw(in: NSRect(x: (canvas.width-size.width)/2, y: (canvas.height-size.height)/2, width:size.width, height:size.height), from:.zero, operation:.sourceOver, fraction:1)
+ NSGraphicsContext.restoreGraphicsState()
+ try bitmap.representation(using: .png, properties: [:])!.write(to: output.appendingPathComponent(filename + ".png"))
+}
diff --git a/website/src/components/ChangelogPage.astro b/website/src/components/ChangelogPage.astro
index 2990f22..5b46293 100644
--- a/website/src/components/ChangelogPage.astro
+++ b/website/src/components/ChangelogPage.astro
@@ -6,6 +6,7 @@ import {
import {
latestDownloadUrl,
repositoryUrl,
+ stableRelease,
} from '../config/site-links';
import type { Locale } from '../content/site-copy';
import SiteLayout from '../layouts/SiteLayout.astro';
@@ -90,7 +91,7 @@ const languageHref = isEnglish ? '/zh/changelog/' : '/changelog/';
aria-label={isEnglish ? 'Floatick releases' : 'Floatick 版本'}
>
{
- entries.map((entry, index) => (
+ entries.map((entry) => (
@@ -98,8 +99,11 @@ const languageHref = isEnglish ? '/zh/changelog/' : '/changelog/';
{entry.version}
- {index === 0 && (
- {isEnglish ? 'Latest' : '最新'}
+ {entry.status === 'preview' && (
+ {isEnglish ? 'In development' : '开发中'}
+ )}
+ {entry.version === `v${stableRelease.version}` && (
+ {isEnglish ? 'Current release' : '当前正式版'}
)}
{entry.date}
@@ -111,10 +115,14 @@ const languageHref = isEnglish ? '/zh/changelog/' : '/changelog/';
{entry.highlights.map((highlight) =>
{highlight} )}
- 
+ Floatick
+ 
+ 
- 
+ 
+ 
+ 
+ 
+ 
+