From 8d5df7e888cac68f5b063d758df8e51a5636ba99 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 10 Apr 2026 20:42:33 +0300 Subject: [PATCH] chore(ai): update system prompt for reusing components and using translations --- CLAUDE.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/CLAUDE.md b/CLAUDE.md index 56073acda4..39b52cdae4 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -66,6 +66,15 @@ Frontend uses a widget system (`apps/client/src/widgets/`): - `RightPanelWidget` - Widgets displayed in the right panel - Type-specific widgets in `type_widgets/` directory +#### Reusable Preact Components +Common UI components are available in `apps/client/src/widgets/react/` — prefer reusing these over creating custom implementations: +- `NoItems` - Empty state placeholder with icon and message (use for "no results", "too many items", error states) +- `ActionButton` - Consistent button styling with icon support +- `FormTextBox` - Text input with validation and controlled input handling +- `Slider` - Range slider with label +- `Checkbox`, `RadioButton` - Form controls +- `CollapsibleSection` - Expandable content sections + #### API Architecture - **Internal API**: REST endpoints in `apps/server/src/routes/api/` - **ETAPI**: External API for third-party integrations (`apps/server/src/etapi/`) @@ -124,6 +133,11 @@ Trilium provides powerful user scripting capabilities: - When adding a new locale, follow the step-by-step guide in `docs/Developer Guide/Developer Guide/Concepts/Internationalisation Translations/Adding a new locale.md` - **Server-side translations** (e.g. hidden subtree titles) go in `apps/server/src/assets/translations/en/server.json`, not in the client `translation.json` +#### Client vs Server Translation Usage +- **Client-side**: `import { t } from "../services/i18n"` with keys in `apps/client/src/translations/en/translation.json` +- **Server-side**: `import { t } from "i18next"` with keys in `apps/server/src/assets/translations/en/server.json` +- **Interpolation**: Use `{{variable}}` for normal interpolation; use `{{- variable}}` (with hyphen) for **unescaped** interpolation when the value contains special characters like quotes that shouldn't be HTML-escaped + ### Electron Desktop App - Desktop entry point: `apps/desktop/src/main.ts`, window management: `apps/server/src/services/window.ts` - IPC communication: use `electron.ipcMain.on(channel, handler)` on server side, `electron.ipcRenderer.send(channel, data)` on client side