feat(docs): try to also sync docs like this

asdf

asdf

.editorconfig

@@ -1,6 +1,6 @@
 root = true
 
-[*.{js,ts,tsx}]
+[*.{js,ts,.tsx}]
 charset = utf-8
 end_of_line = lf
 indent_size = 4

.env

@@ -0,0 +1 @@
+NODE_OPTIONS=--max_old_space_size=4096

.github/actions/build-electron/action.yml

@@ -74,7 +74,7 @@ runs:
 
   - name: Update build info
     shell: ${{ inputs.shell }}
-    run: pnpm run chore:update-build-info
+    run: npm run chore:update-build-info
 
   # Critical debugging configuration
   - name: Run electron-forge build with enhanced logging
@@ -86,8 +86,7 @@ runs:
       APPLE_ID_PASSWORD: ${{ env.APPLE_ID_PASSWORD }}
       WINDOWS_SIGN_EXECUTABLE: ${{ env.WINDOWS_SIGN_EXECUTABLE }}
       TRILIUM_ARTIFACT_NAME_HINT: TriliumNotes-${{ github.ref_name }}-${{ inputs.os }}-${{ inputs.arch }}
-      TARGET_ARCH: ${{ inputs.arch }}
-    run: pnpm run --filter desktop electron-forge:make --arch=${{ inputs.arch }} --platform=${{ inputs.forge_platform }}
+    run: pnpm nx --project=desktop electron-forge:make -- --arch=${{ inputs.arch }} --platform=${{ inputs.forge_platform }}
 
   # Add DMG signing step
   - name: Sign DMG

.github/actions/build-server/action.yml

@@ -10,7 +10,7 @@ runs:
   steps:
   - uses: pnpm/action-setup@v4
   - name: Set up node & dependencies
-    uses: actions/setup-node@v6
+    uses: actions/setup-node@v4
     with:
       node-version: 22
       cache: "pnpm"
@@ -23,7 +23,7 @@ runs:
     shell: bash
     run: |
       pnpm run chore:update-build-info
-      pnpm run --filter server package
+      pnpm nx --project=server package
   - name: Prepare artifacts
     shell: bash
     run: |

.github/actions/deploy-to-cloudflare-pages/action.yml

@@ -1,103 +0,0 @@
-name: "Deploy to Cloudflare Pages"
-description: "Deploys to Cloudflare Pages on either a temporary branch with preview comment, or on the production version if on the main branch."
-inputs:
-  project_name:
-    description: "CloudFlare Pages project name"
-  comment_body:
-    description: "The message to display when deployment is ready"
-    default: "Deployment is ready."
-    required: false
-  production_url:
-    description: "The URL to mention as the production URL."
-    required: true
-  deploy_dir:
-    description: "The directory from which to deploy."
-    required: true
-  cloudflare_api_token:
-    description: "The Cloudflare API token to use for deployment."
-    required: true
-  cloudflare_account_id:
-    description: "The Cloudflare account ID to use for deployment."
-    required: true
-  github_token:
-    description: "The GitHub token to use for posting PR comments."
-    required: true
-runs:
-  using: composite
-  steps:
-    # Install wrangler globally to avoid workspace issues
-    - name: Install Wrangler
-      shell: bash
-      run: npm install -g wrangler
-
-    # Deploy using Wrangler (use pre-installed wrangler)
-    - name: Deploy to Cloudflare Pages
-      id: deploy
-      if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
-      uses: cloudflare/wrangler-action@v3
-      with:
-        apiToken: ${{ inputs.cloudflare_api_token }}
-        accountId: ${{ inputs.cloudflare_account_id }}
-        command: pages deploy ${{ inputs.deploy_dir }} --project-name=${{ inputs.project_name}} --branch=${{ github.ref_name }}
-        wranglerVersion: ''  # Use pre-installed version
-
-    # Deploy preview for PRs
-    - name: Deploy Preview to Cloudflare Pages
-      id: preview-deployment
-      if: github.event_name == 'pull_request'
-      uses: cloudflare/wrangler-action@v3
-      with:
-        apiToken: ${{ inputs.cloudflare_api_token }}
-        accountId: ${{ inputs.cloudflare_account_id }}
-        command: pages deploy ${{ inputs.deploy_dir }} --project-name=${{ inputs.project_name}} --branch=pr-${{ github.event.pull_request.number }}
-        wranglerVersion: ''  # Use pre-installed version
-
-    # Post deployment URL as PR comment
-    - name: Comment PR with Preview URL
-      if: github.event_name == 'pull_request'
-      uses: actions/github-script@v8
-      env:
-        COMMENT_BODY: ${{ inputs.comment_body }}
-        PRODUCTION_URL: ${{ inputs.production_url }}
-        PROJECT_NAME: ${{ inputs.project_name }}
-      with:
-        github-token: ${{ inputs.github_token }}
-        script: |
-          const prNumber = context.issue.number;
-          // Construct preview URL based on Cloudflare Pages pattern
-          const projectName = process.env.PROJECT_NAME;
-          const previewUrl = `https://pr-${prNumber}.${projectName}.pages.dev`;
-
-          // Check if we already commented
-          const comments = await github.rest.issues.listComments({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            issue_number: prNumber
-          });
-
-          const customMessage = process.env.COMMENT_BODY;
-          const botComment = comments.data.find(comment =>
-            comment.user.type === 'Bot' &&
-            comment.body.includes(customMessage)
-          );
-
-          const mainUrl = process.env.PRODUCTION_URL;
-          const commentBody = `${customMessage}!\n\n🔗 Preview URL: ${previewUrl}\n📖 Production URL: ${mainUrl}\n\n✅ All checks passed\n\n_This preview will be updated automatically with new commits._`;
-
-          if (botComment) {
-            // Update existing comment
-            await github.rest.issues.updateComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              comment_id: botComment.id,
-              body: commentBody
-            });
-          } else {
-            // Create new comment
-            await github.rest.issues.createComment({
-              issue_number: prNumber,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: commentBody
-            });
-          }

.github/instructions/nx.instructions.md

@@ -0,0 +1,40 @@
+---
+applyTo: '**'
+---
+
+// This file is automatically generated by Nx Console
+
+You are in an nx workspace using Nx 21.3.9 and pnpm as the package manager.
+
+You have access to the Nx MCP server and the tools it provides. Use them. Follow these guidelines in order to best help the user:
+
+# General Guidelines
+- When answering questions, use the nx_workspace tool first to gain an understanding of the workspace architecture
+- For questions around nx configuration, best practices or if you're unsure, use the nx_docs tool to get relevant, up-to-date docs!! Always use this instead of assuming things about nx configuration
+- If the user needs help with an Nx configuration or project graph error, use the 'nx_workspace' tool to get any errors
+- To help answer questions about the workspace structure or simply help with demonstrating how tasks depend on each other, use the 'nx_visualize_graph' tool
+
+# Generation Guidelines
+If the user wants to generate something, use the following flow:
+
+- learn about the nx workspace and any specifics the user needs by using the 'nx_workspace' tool and the 'nx_project_details' tool if applicable
+- get the available generators using the 'nx_generators' tool
+- decide which generator to use. If no generators seem relevant, check the 'nx_available_plugins' tool to see if the user could install a plugin to help them
+- get generator details using the 'nx_generator_schema' tool
+- you may use the 'nx_docs' tool to learn more about a specific generator or technology if you're unsure
+- decide which options to provide in order to best complete the user's request. Don't make any assumptions and keep the options minimalistic
+- open the generator UI using the 'nx_open_generate_ui' tool
+- wait for the user to finish the generator
+- read the generator log file using the 'nx_read_generator_log' tool
+- use the information provided in the log file to answer the user's question or continue with what they were doing
+
+# Running Tasks Guidelines
+If the user wants help with tasks or commands (which include keywords like "test", "build", "lint", or other similar actions), use the following flow:
+- Use the 'nx_current_running_tasks_details' tool to get the list of tasks (this can include tasks that were completed, stopped or failed).
+- If there are any tasks, ask the user if they would like help with a specific task then use the 'nx_current_running_task_output' tool to get the terminal output for that task/command
+- Use the terminal output from 'nx_current_running_task_output' to see what's wrong and help the user fix their problem. Use the appropriate tools if necessary
+- If the user would like to rerun the task or command, always use `nx run <taskId>` to rerun in the terminal. This will ensure that the task will run in the nx context and will be run the same way it originally executed
+- If the task was marked as "continuous" do not offer to rerun the task. This task is already running and the user can see the output in the terminal. You can use 'nx_current_running_task_output' to get the output of the task to verify the output. 
+
+
+

.github/scripts/sync-docs-to-wiki-with-wiki-syntax.ts

@@ -0,0 +1,453 @@
+#!/usr/bin/env tsx
+
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { Dirent } from 'fs';
+
+const execAsync = promisify(exec);
+
+// Configuration
+const FILE_EXTENSIONS = ['.md', '.png', '.jpg', '.jpeg', '.gif', '.svg'] as const;
+const README_PATTERN = /^README(?:[-.](.+))?\.md$/;
+
+interface SyncConfig {
+  mainRepoPath: string;
+  wikiPath: string;
+  docsPath: string;
+}
+
+/**
+ * Convert markdown to GitHub Wiki format
+ * - Images: ![](image.png) → [[image.png]]
+ * - Links: [text](page.md) → [[text|page]]
+ */
+async function convertToWikiFormat(wikiDir: string): Promise<void> {
+  console.log('Converting to GitHub Wiki format...');
+  const mdFiles = await findFiles(wikiDir, ['.md']);
+  let convertedCount = 0;
+  
+  for (const file of mdFiles) {
+    let content = await fs.readFile(file, 'utf-8');
+    const originalContent = content;
+    
+    // Convert image references to wiki format
+    // ![alt](image.png) → [[image.png]]
+    content = content.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => {
+      // Skip external URLs
+      if (src.startsWith('http://') || src.startsWith('https://')) {
+        return match;
+      }
+      
+      // Decode URL encoding
+      let imagePath = src;
+      if (src.includes('%')) {
+        try {
+          imagePath = decodeURIComponent(src);
+        } catch {
+          imagePath = src;
+        }
+      }
+      
+      // Extract just the filename for wiki syntax
+      const filename = path.basename(imagePath);
+      
+      // Use wiki syntax for images
+      // If alt text exists, add it after pipe
+      if (alt && alt.trim()) {
+        return `[[${filename}|alt=${alt}]]`;
+      } else {
+        return `[[${filename}]]`;
+      }
+    });
+    
+    // Convert internal markdown links to wiki format
+    // [text](../path/to/Page.md) → [[text|Page]]
+    content = content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, href) => {
+      // Skip external URLs, anchors, and images
+      if (href.startsWith('http://') || 
+          href.startsWith('https://') || 
+          href.startsWith('#') ||
+          href.match(/\.(png|jpg|jpeg|gif|svg)$/i)) {
+        return match;
+      }
+      
+      // Check if it's a markdown file link
+      if (href.endsWith('.md') || href.includes('.md#')) {
+        // Decode URL encoding
+        let decodedHref = href;
+        if (href.includes('%')) {
+          try {
+            decodedHref = decodeURIComponent(href);
+          } catch {
+            decodedHref = href;
+          }
+        }
+        
+        // Extract page name without extension and path
+        let pageName = decodedHref
+          .replace(/\.md(#.*)?$/, '') // Remove .md and anchor
+          .split('/')                 // Split by path
+          .pop() || '';               // Get last part (filename)
+        
+        // Convert spaces to hyphens (GitHub wiki convention)
+        pageName = pageName.replace(/ /g, '-');
+        
+        // Use wiki link syntax
+        if (text === pageName || text === pageName.replace(/-/g, ' ')) {
+          return `[[${pageName}]]`;
+        } else {
+          return `[[${text}|${pageName}]]`;
+        }
+      }
+      
+      // For other internal links, just decode URL encoding
+      if (href.includes('%') && !href.startsWith('http')) {
+        try {
+          const decodedHref = decodeURIComponent(href);
+          return `[${text}](${decodedHref})`;
+        } catch {
+          return match;
+        }
+      }
+      
+      return match;
+    });
+    
+    // Save if modified
+    if (content !== originalContent) {
+      await fs.writeFile(file, content, 'utf-8');
+      const relativePath = path.relative(wikiDir, file);
+      console.log(`  Converted: ${relativePath}`);
+      convertedCount++;
+    }
+  }
+  
+  if (convertedCount > 0) {
+    console.log(`Converted ${convertedCount} files to wiki format`);
+  } else {
+    console.log('No files needed conversion');
+  }
+}
+
+/**
+ * Recursively find all files matching the given extensions
+ */
+async function findFiles(dir: string, extensions: readonly string[]): Promise<string[]> {
+  const files: string[] = [];
+  
+  async function walk(currentDir: string): Promise<void> {
+    const entries: Dirent[] = await fs.readdir(currentDir, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const fullPath = path.join(currentDir, entry.name);
+      
+      if (entry.isDirectory()) {
+        await walk(fullPath);
+      } else if (entry.isFile()) {
+        const ext = path.extname(entry.name).toLowerCase();
+        if (extensions.includes(ext)) {
+          files.push(fullPath);
+        }
+      }
+    }
+  }
+  
+  await walk(dir);
+  return files;
+}
+
+/**
+ * Get all files in a directory recursively
+ */
+async function getAllFiles(dir: string): Promise<Set<string>> {
+  const files = new Set<string>();
+  
+  async function walk(currentDir: string): Promise<void> {
+    try {
+      const entries = await fs.readdir(currentDir, { withFileTypes: true });
+      
+      for (const entry of entries) {
+        const fullPath = path.join(currentDir, entry.name);
+        const relativePath = path.relative(dir, fullPath);
+        
+        // Skip .git directory
+        if (entry.name === '.git' || relativePath.startsWith('.git')) continue;
+        
+        if (entry.isDirectory()) {
+          await walk(fullPath);
+        } else if (entry.isFile()) {
+          files.add(relativePath);
+        }
+      }
+    } catch (error) {
+      // Directory might not exist yet
+      if ((error as any).code !== 'ENOENT') {
+        throw error;
+      }
+    }
+  }
+  
+  await walk(dir);
+  return files;
+}
+
+/**
+ * Flatten directory structure - move all files to root
+ * GitHub Wiki prefers flat structure
+ */
+async function flattenStructure(wikiDir: string): Promise<void> {
+  console.log('Flattening directory structure for wiki...');
+  const allFiles = await getAllFiles(wikiDir);
+  let movedCount = 0;
+  
+  for (const file of allFiles) {
+    // Skip if already at root
+    if (!file.includes('/')) continue;
+    
+    const oldPath = path.join(wikiDir, file);
+    const basename = path.basename(file);
+    
+    // Create unique name if file already exists at root
+    let newName = basename;
+    let counter = 1;
+    while (await fileExists(path.join(wikiDir, newName))) {
+      const ext = path.extname(basename);
+      const nameWithoutExt = basename.slice(0, -ext.length);
+      newName = `${nameWithoutExt}-${counter}${ext}`;
+      counter++;
+    }
+    
+    const newPath = path.join(wikiDir, newName);
+    
+    // Move file to root
+    await fs.rename(oldPath, newPath);
+    console.log(`  Moved: ${file} → ${newName}`);
+    movedCount++;
+  }
+  
+  if (movedCount > 0) {
+    console.log(`Moved ${movedCount} files to root`);
+    
+    // Clean up empty directories
+    await cleanEmptyDirectories(wikiDir);
+  }
+}
+
+async function fileExists(path: string): Promise<boolean> {
+  try {
+    await fs.access(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Remove empty directories recursively
+ */
+async function cleanEmptyDirectories(dir: string): Promise<void> {
+  const allDirs = await getAllDirectories(dir);
+  
+  for (const subDir of allDirs) {
+    try {
+      const entries = await fs.readdir(subDir);
+      if (entries.length === 0 || (entries.length === 1 && entries[0] === '.git')) {
+        await fs.rmdir(subDir);
+      }
+    } catch {
+      // Ignore errors
+    }
+  }
+}
+
+/**
+ * Get all directories recursively
+ */
+async function getAllDirectories(dir: string): Promise<string[]> {
+  const dirs: string[] = [];
+  
+  async function walk(currentDir: string): Promise<void> {
+    try {
+      const entries = await fs.readdir(currentDir, { withFileTypes: true });
+      
+      for (const entry of entries) {
+        if (entry.isDirectory() && entry.name !== '.git') {
+          const fullPath = path.join(currentDir, entry.name);
+          dirs.push(fullPath);
+          await walk(fullPath);
+        }
+      }
+    } catch {
+      // Ignore errors
+    }
+  }
+  
+  await walk(dir);
+  return dirs.sort((a, b) => b.length - a.length); // Sort longest first for cleanup
+}
+
+/**
+ * Sync files from source to wiki
+ */
+async function syncFiles(sourceDir: string, wikiDir: string): Promise<void> {
+  console.log('Syncing files to wiki...');
+  
+  // Get all valid source files
+  const sourceFiles = await findFiles(sourceDir, FILE_EXTENSIONS);
+  const sourceRelativePaths = new Set<string>();
+  
+  // Copy all source files
+  console.log(`Found ${sourceFiles.length} files to sync`);
+  
+  for (const file of sourceFiles) {
+    const relativePath = path.relative(sourceDir, file);
+    sourceRelativePaths.add(relativePath);
+    
+    const targetPath = path.join(wikiDir, relativePath);
+    const targetDir = path.dirname(targetPath);
+    
+    // Create directory structure
+    await fs.mkdir(targetDir, { recursive: true });
+    
+    // Copy file
+    await fs.copyFile(file, targetPath);
+  }
+  
+  // Remove orphaned files
+  const wikiFiles = await getAllFiles(wikiDir);
+  for (const wikiFile of wikiFiles) {
+    if (!sourceRelativePaths.has(wikiFile) && !wikiFile.startsWith('Home')) {
+      const fullPath = path.join(wikiDir, wikiFile);
+      await fs.unlink(fullPath);
+    }
+  }
+}
+
+/**
+ * Copy root README.md to wiki as Home.md if it exists
+ */
+async function copyRootReadme(mainRepoPath: string, wikiPath: string): Promise<void> {
+  const rootReadmePath = path.join(mainRepoPath, 'README.md');
+  const wikiHomePath = path.join(wikiPath, 'Home.md');
+  
+  try {
+    await fs.access(rootReadmePath);
+    await fs.copyFile(rootReadmePath, wikiHomePath);
+    console.log('  Copied root README.md as Home.md');
+  } catch (error) {
+    console.log('  No root README.md found to use as Home page');
+  }
+}
+
+/**
+ * Rename README files to wiki-compatible names
+ */
+async function renameReadmeFiles(wikiDir: string): Promise<void> {
+  console.log('Converting README files for wiki compatibility...');
+  const files = await fs.readdir(wikiDir);
+  
+  for (const file of files) {
+    const match = file.match(README_PATTERN);
+    if (match) {
+      const oldPath = path.join(wikiDir, file);
+      let newName: string;
+      
+      if (match[1]) {
+        // Language-specific README
+        newName = `Home-${match[1]}.md`;
+      } else {
+        // Main README
+        newName = 'Home.md';
+      }
+      
+      const newPath = path.join(wikiDir, newName);
+      await fs.rename(oldPath, newPath);
+      console.log(`  Renamed: ${file} → ${newName}`);
+    }
+  }
+}
+
+/**
+ * Check if there are any changes in the wiki
+ */
+async function hasChanges(wikiDir: string): Promise<boolean> {
+  try {
+    const { stdout } = await execAsync('git status --porcelain', { cwd: wikiDir });
+    return stdout.trim().length > 0;
+  } catch (error) {
+    console.error('Error checking git status:', error);
+    return false;
+  }
+}
+
+/**
+ * Get configuration from environment variables
+ */
+function getConfig(): SyncConfig {
+  const mainRepoPath = process.env.MAIN_REPO_PATH || 'main-repo';
+  const wikiPath = process.env.WIKI_PATH || 'wiki';
+  const docsPath = path.join(mainRepoPath, 'docs');
+  
+  return { mainRepoPath, wikiPath, docsPath };
+}
+
+/**
+ * Main sync function
+ */
+async function syncDocsToWiki(): Promise<void> {
+  const config = getConfig();
+  const flattenWiki = process.env.FLATTEN_WIKI === 'true';
+  
+  console.log('Starting documentation sync to wiki...');
+  console.log(`Source: ${config.docsPath}`);
+  console.log(`Target: ${config.wikiPath}`);
+  console.log(`Flatten structure: ${flattenWiki}`);
+  
+  try {
+    // Verify paths exist
+    await fs.access(config.docsPath);
+    await fs.access(config.wikiPath);
+    
+    // Sync files
+    await syncFiles(config.docsPath, config.wikiPath);
+    
+    // Copy root README.md as Home.md
+    await copyRootReadme(config.mainRepoPath, config.wikiPath);
+    
+    // Convert to wiki format
+    await convertToWikiFormat(config.wikiPath);
+    
+    // Optionally flatten directory structure
+    if (flattenWiki) {
+      await flattenStructure(config.wikiPath);
+    }
+    
+    // Rename README files to wiki-compatible names
+    await renameReadmeFiles(config.wikiPath);
+    
+    // Check for changes
+    const changed = await hasChanges(config.wikiPath);
+    
+    if (changed) {
+      console.log('\nChanges detected in wiki');
+      process.stdout.write('::set-output name=changes::true\n');
+    } else {
+      console.log('\nNo changes detected in wiki');
+      process.stdout.write('::set-output name=changes::false\n');
+    }
+    
+    console.log('Sync completed successfully!');
+  } catch (error) {
+    console.error('Error during sync:', error);
+    process.exit(1);
+  }
+}
+
+// Run if called directly
+if (require.main === module) {
+  syncDocsToWiki();
+}
+
+export { syncDocsToWiki };

.github/scripts/sync-docs-to-wiki.ts

@@ -0,0 +1,437 @@
+#!/usr/bin/env tsx
+
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { Dirent } from 'fs';
+
+const execAsync = promisify(exec);
+
+// Configuration
+const FILE_EXTENSIONS = ['.md', '.png', '.jpg', '.jpeg', '.gif', '.svg'] as const;
+const README_PATTERN = /^README(?:[-.](.+))?\.md$/;
+
+interface SyncConfig {
+  mainRepoPath: string;
+  wikiPath: string;
+  docsPath: string;
+}
+
+/**
+ * Recursively find all files matching the given extensions
+ */
+async function findFiles(dir: string, extensions: readonly string[]): Promise<string[]> {
+  const files: string[] = [];
+  
+  async function walk(currentDir: string): Promise<void> {
+    const entries: Dirent[] = await fs.readdir(currentDir, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const fullPath = path.join(currentDir, entry.name);
+      
+      if (entry.isDirectory()) {
+        await walk(fullPath);
+      } else if (entry.isFile()) {
+        const ext = path.extname(entry.name).toLowerCase();
+        if (extensions.includes(ext)) {
+          files.push(fullPath);
+        }
+      }
+    }
+  }
+  
+  await walk(dir);
+  return files;
+}
+
+/**
+ * Get all files in a directory recursively
+ */
+async function getAllFiles(dir: string): Promise<Set<string>> {
+  const files = new Set<string>();
+  
+  async function walk(currentDir: string): Promise<void> {
+    try {
+      const entries = await fs.readdir(currentDir, { withFileTypes: true });
+      
+      for (const entry of entries) {
+        const fullPath = path.join(currentDir, entry.name);
+        const relativePath = path.relative(dir, fullPath);
+        
+        // Skip .git directory
+        if (entry.name === '.git' || relativePath.startsWith('.git')) continue;
+        
+        if (entry.isDirectory()) {
+          await walk(fullPath);
+        } else if (entry.isFile()) {
+          files.add(relativePath);
+        }
+      }
+    } catch (error) {
+      // Directory might not exist yet
+      if ((error as any).code !== 'ENOENT') {
+        throw error;
+      }
+    }
+  }
+  
+  await walk(dir);
+  return files;
+}
+
+/**
+ * Sync files from source to wiki, preserving directory structure and removing orphaned files
+ */
+async function syncFiles(sourceDir: string, wikiDir: string): Promise<void> {
+  console.log('Analyzing files to sync...');
+  
+  // Get all valid source files
+  const sourceFiles = await findFiles(sourceDir, FILE_EXTENSIONS);
+  const sourceRelativePaths = new Set<string>();
+  
+  // Copy all source files and track their paths
+  console.log(`Found ${sourceFiles.length} files to sync`);
+  let copiedCount = 0;
+  let skippedCount = 0;
+  
+  for (const file of sourceFiles) {
+    const relativePath = path.relative(sourceDir, file);
+    sourceRelativePaths.add(relativePath);
+    
+    const targetPath = path.join(wikiDir, relativePath);
+    const targetDir = path.dirname(targetPath);
+    
+    // Create directory structure
+    await fs.mkdir(targetDir, { recursive: true });
+    
+    // Check if file needs updating (compare modification times)
+    let needsCopy = true;
+    try {
+      const sourceStat = await fs.stat(file);
+      const targetStat = await fs.stat(targetPath);
+      // Only copy if source is newer or sizes differ
+      needsCopy = sourceStat.mtime > targetStat.mtime || sourceStat.size !== targetStat.size;
+    } catch {
+      // Target doesn't exist, needs copy
+      needsCopy = true;
+    }
+    
+    if (needsCopy) {
+      await fs.copyFile(file, targetPath);
+      console.log(`  Updated: ${relativePath}`);
+      copiedCount++;
+    } else {
+      skippedCount++;
+    }
+  }
+  
+  console.log(`Updated ${copiedCount} files, ${skippedCount} unchanged`);
+  
+  // Find and remove files that don't exist in source
+  console.log('Checking for orphaned files in wiki...');
+  const wikiFiles = await getAllFiles(wikiDir);
+  let removedCount = 0;
+  
+  for (const wikiFile of wikiFiles) {
+    // Check if this file should exist (either as-is or will be renamed)
+    let shouldExist = sourceRelativePaths.has(wikiFile);
+    
+    // Special handling for Home files that will be created from READMEs
+    if (wikiFile.startsWith('Home')) {
+      const readmeVariant1 = wikiFile.replace(/^Home(-.*)?\.md$/, 'README$1.md');
+      const readmeVariant2 = wikiFile.replace(/^Home-(.+)\.md$/, 'README.$1.md');
+      shouldExist = sourceRelativePaths.has(readmeVariant1) || sourceRelativePaths.has(readmeVariant2) || sourceRelativePaths.has('README.md');
+    }
+    
+    if (!shouldExist) {
+      const fullPath = path.join(wikiDir, wikiFile);
+      await fs.unlink(fullPath);
+      console.log(`  Removed: ${wikiFile}`);
+      removedCount++;
+    }
+  }
+  
+  if (removedCount > 0) {
+    console.log(`Removed ${removedCount} orphaned files`);
+    
+    // Clean up empty directories
+    await cleanEmptyDirectories(wikiDir);
+  }
+}
+
+/**
+ * Remove empty directories recursively
+ */
+async function cleanEmptyDirectories(dir: string): Promise<void> {
+  async function removeEmptyDirs(currentDir: string): Promise<boolean> {
+    if (currentDir === dir) return false; // Don't remove root
+    
+    try {
+      const entries = await fs.readdir(currentDir, { withFileTypes: true });
+      
+      // Skip .git directory
+      const filteredEntries = entries.filter(e => e.name !== '.git');
+      
+      if (filteredEntries.length === 0) {
+        await fs.rmdir(currentDir);
+        return true;
+      }
+      
+      // Check subdirectories
+      for (const entry of filteredEntries) {
+        if (entry.isDirectory()) {
+          const subDir = path.join(currentDir, entry.name);
+          await removeEmptyDirs(subDir);
+        }
+      }
+      
+      // Check again after cleaning subdirectories
+      const remainingEntries = await fs.readdir(currentDir);
+      const filteredRemaining = remainingEntries.filter(e => e !== '.git');
+      
+      if (filteredRemaining.length === 0 && currentDir !== dir) {
+        await fs.rmdir(currentDir);
+        return true;
+      }
+      
+      return false;
+    } catch (error) {
+      return false;
+    }
+  }
+  
+  // Get all directories and process them
+  const allDirs = await getAllDirectories(dir);
+  for (const subDir of allDirs) {
+    await removeEmptyDirs(subDir);
+  }
+}
+
+/**
+ * Get all directories recursively
+ */
+async function getAllDirectories(dir: string): Promise<string[]> {
+  const dirs: string[] = [];
+  
+  async function walk(currentDir: string): Promise<void> {
+    try {
+      const entries = await fs.readdir(currentDir, { withFileTypes: true });
+      
+      for (const entry of entries) {
+        if (entry.isDirectory() && entry.name !== '.git') {
+          const fullPath = path.join(currentDir, entry.name);
+          dirs.push(fullPath);
+          await walk(fullPath);
+        }
+      }
+    } catch {
+      // Ignore errors
+    }
+  }
+  
+  await walk(dir);
+  return dirs.sort((a, b) => b.length - a.length); // Sort longest first for cleanup
+}
+
+/**
+ * Fix references in markdown files for wiki compatibility
+ * 
+ * Issues fixed:
+ * 1. URL-encoded image references (spaces as %20) need to match actual filenames
+ * 2. Internal markdown links need to be converted to wiki syntax
+ * 3. Images can optionally use wiki syntax [[image.png]] for better compatibility
+ */
+async function fixImageReferences(wikiDir: string): Promise<void> {
+  console.log('Fixing references for GitHub Wiki compatibility...');
+  const mdFiles = await findFiles(wikiDir, ['.md']);
+  let fixedCount = 0;
+  
+  for (const file of mdFiles) {
+    let content = await fs.readFile(file, 'utf-8');
+    let modified = false;
+    const originalContent = content;
+    
+    // Step 1: Fix URL-encoded image references
+    // Convert ![](Name%20With%20Spaces.png) to ![](Name With Spaces.png)
+    content = content.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => {
+      // Skip external URLs
+      if (src.startsWith('http://') || src.startsWith('https://')) {
+        return match;
+      }
+      
+      // Decode URL encoding if present
+      if (src.includes('%')) {
+        try {
+          const decodedSrc = decodeURIComponent(src);
+          return `![${alt}](${decodedSrc})`;
+        } catch {
+          return match;
+        }
+      }
+      
+      return match;
+    });
+    
+    // Step 2: Fix internal links - decode URL encoding but keep standard markdown format
+    // GitHub Wiki actually supports standard markdown links with relative paths
+    content = content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, href) => {
+      // Skip external URLs, anchors, and images
+      if (href.startsWith('http://') || 
+          href.startsWith('https://') || 
+          href.startsWith('#') ||
+          href.match(/\.(png|jpg|jpeg|gif|svg)$/i)) {
+        return match;
+      }
+      
+      // Decode URL encoding for all internal links
+      if (href.includes('%')) {
+        try {
+          const decodedHref = decodeURIComponent(href);
+          return `[${text}](${decodedHref})`;
+        } catch {
+          return match;
+        }
+      }
+      
+      return match;
+    });
+    
+    // Check if content was modified
+    if (content !== originalContent) {
+      modified = true;
+      await fs.writeFile(file, content, 'utf-8');
+      const relativePath = path.relative(wikiDir, file);
+      console.log(`  Fixed references in: ${relativePath}`);
+      fixedCount++;
+    }
+  }
+  
+  if (fixedCount > 0) {
+    console.log(`Fixed references in ${fixedCount} files`);
+  } else {
+    console.log('No references needed fixing');
+  }
+}
+
+/**
+ * Rename README files to wiki-compatible names
+ */
+async function renameReadmeFiles(wikiDir: string): Promise<void> {
+  console.log('Converting README files for wiki compatibility...');
+  const files = await fs.readdir(wikiDir);
+  
+  for (const file of files) {
+    const match = file.match(README_PATTERN);
+    if (match) {
+      const oldPath = path.join(wikiDir, file);
+      let newName: string;
+      
+      if (match[1]) {
+        // Language-specific README (e.g., README-ZH_CN.md or README.es.md)
+        newName = `Home-${match[1]}.md`;
+      } else {
+        // Main README
+        newName = 'Home.md';
+      }
+      
+      const newPath = path.join(wikiDir, newName);
+      await fs.rename(oldPath, newPath);
+      console.log(`  Renamed: ${file} → ${newName}`);
+    }
+  }
+}
+
+/**
+ * Check if there are any changes in the wiki
+ */
+async function hasChanges(wikiDir: string): Promise<boolean> {
+  try {
+    const { stdout } = await execAsync('git status --porcelain', { cwd: wikiDir });
+    return stdout.trim().length > 0;
+  } catch (error) {
+    console.error('Error checking git status:', error);
+    return false;
+  }
+}
+
+/**
+ * Copy root README.md to wiki as Home.md if it exists
+ */
+async function copyRootReadme(mainRepoPath: string, wikiPath: string): Promise<void> {
+  const rootReadmePath = path.join(mainRepoPath, 'README.md');
+  const wikiHomePath = path.join(wikiPath, 'Home.md');
+  
+  try {
+    await fs.access(rootReadmePath);
+    await fs.copyFile(rootReadmePath, wikiHomePath);
+    console.log('  Copied root README.md as Home.md');
+  } catch (error) {
+    // Root README doesn't exist or can't be accessed
+    console.log('  No root README.md found to use as Home page');
+  }
+}
+
+/**
+ * Get configuration from environment variables
+ */
+function getConfig(): SyncConfig {
+  const mainRepoPath = process.env.MAIN_REPO_PATH || 'main-repo';
+  const wikiPath = process.env.WIKI_PATH || 'wiki';
+  const docsPath = path.join(mainRepoPath, 'docs');
+  
+  return { mainRepoPath, wikiPath, docsPath };
+}
+
+/**
+ * Main sync function
+ */
+async function syncDocsToWiki(): Promise<void> {
+  const config = getConfig();
+  
+  console.log('Starting documentation sync to wiki...');
+  console.log(`Source: ${config.docsPath}`);
+  console.log(`Target: ${config.wikiPath}`);
+  
+  try {
+    // Verify paths exist
+    await fs.access(config.docsPath);
+    await fs.access(config.wikiPath);
+    
+    // Sync files (copy new/updated, remove orphaned)
+    await syncFiles(config.docsPath, config.wikiPath);
+    
+    // Copy root README.md as Home.md
+    await copyRootReadme(config.mainRepoPath, config.wikiPath);
+    
+    // Fix image and link references for wiki compatibility
+    await fixImageReferences(config.wikiPath);
+    
+    // Rename README files to wiki-compatible names
+    await renameReadmeFiles(config.wikiPath);
+    
+    // Check for changes
+    const changed = await hasChanges(config.wikiPath);
+    
+    if (changed) {
+      console.log('\nChanges detected in wiki');
+      // GitHub Actions output format
+      process.stdout.write('::set-output name=changes::true\n');
+    } else {
+      console.log('\nNo changes detected in wiki');
+      process.stdout.write('::set-output name=changes::false\n');
+    }
+    
+    console.log('Sync completed successfully!');
+  } catch (error) {
+    console.error('Error during sync:', error);
+    process.exit(1);
+  }
+}
+
+// Run if called directly
+if (require.main === module) {
+  syncDocsToWiki();
+}
+
+export { syncDocsToWiki };

.github/workflows/codeql.yml

@@ -67,7 +67,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v4
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         build-mode: ${{ matrix.build-mode }}
@@ -95,6 +95,6 @@ jobs:
         exit 1
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v4
+      uses: github/codeql-action/analyze@v3
       with:
         category: "/language:${{matrix.language}}"

.github/workflows/deploy-docs.yml

@@ -1,129 +0,0 @@
-# GitHub Actions workflow for deploying MkDocs documentation to Cloudflare Pages
-# This workflow builds and deploys your MkDocs site when changes are pushed to main
-name: Deploy MkDocs Documentation
-
-on:
-  # Trigger on push to main branch
-  push:
-    branches:
-      - main
-      - master  # Also support master branch
-    # Only run when docs files change
-    paths:
-      - 'docs/**'
-      - 'README.md'  # README is synced to docs/index.md
-      - 'mkdocs.yml'
-      - 'requirements-docs.txt'
-      - '.github/workflows/deploy-docs.yml'
-      - 'scripts/fix-mkdocs-structure.ts'
-
-  # Allow manual triggering from Actions tab
-  workflow_dispatch:
-
-  # Run on pull requests for preview deployments
-  pull_request:
-    branches:
-      - main
-      - master
-    paths:
-      - 'docs/**'
-      - 'README.md'  # README is synced to docs/index.md
-      - 'mkdocs.yml'
-      - 'requirements-docs.txt'
-      - '.github/workflows/deploy-docs.yml'
-      - 'scripts/fix-mkdocs-structure.ts'
-
-jobs:
-  build-and-deploy:
-    name: Build and Deploy MkDocs
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-
-    # Required permissions for deployment
-    permissions:
-      contents: read
-      deployments: write
-      pull-requests: write # For PR preview comments
-      id-token: write # For OIDC authentication (if needed)
-
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v5
-        with:
-          fetch-depth: 0 # Fetch all history for git info and mkdocs-git-revision-date plugin
-
-      - name: Setup Python
-        uses: actions/setup-python@v6
-        with:
-          python-version: '3.14'
-          cache: 'pip'
-          cache-dependency-path: 'requirements-docs.txt'
-
-      - name: Install MkDocs and Dependencies
-        run: |
-          pip install --upgrade pip
-          pip install -r requirements-docs.txt
-        env:
-          PIP_DISABLE_PIP_VERSION_CHECK: 1
-
-      # Setup pnpm before fixing docs structure
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
-      # Setup Node.js with pnpm
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: '22'
-          cache: 'pnpm'
-
-      # Install Node.js dependencies for the TypeScript script
-      - name: Install Dependencies
-        run: |
-          pnpm install --frozen-lockfile
-
-      - name: Fix Documentation Structure
-        run: |
-          # Fix duplicate navigation entries by moving overview pages to index.md
-          pnpm run chore:fix-mkdocs-structure
-
-      - name: Build MkDocs Site
-        run: |
-          # Build with strict mode but allow expected warnings
-          mkdocs build --verbose || {
-            EXIT_CODE=$?
-            # Check if the only issue is expected warnings
-            if mkdocs build 2>&1 | grep -E "WARNING.*(README|not found)" && \
-               [ $(mkdocs build 2>&1 | grep -c "ERROR") -eq 0 ]; then
-              echo "✅ Build succeeded with expected warnings"
-              mkdocs build --verbose
-            else
-              echo "❌ Build failed with unexpected errors"
-              exit $EXIT_CODE
-            fi
-          }
-
-      - name: Fix HTML Links
-        run: |
-          # Remove .md extensions from links in generated HTML
-          pnpm tsx ./scripts/fix-html-links.ts site
-
-      - name: Validate Built Site
-        run: |
-          # Basic validation that important files exist
-          test -f site/index.html || (echo "ERROR: site/index.html not found" && exit 1)
-          test -f site/sitemap.xml || (echo "ERROR: site/sitemap.xml not found" && exit 1)
-          test -d site/assets || (echo "ERROR: site/assets directory not found" && exit 1)
-          echo "✅ Site validation passed"
-
-      - name: Deploy
-        uses: ./.github/actions/deploy-to-cloudflare-pages
-        if: github.repository == ${{ vars.REPO_MAIN }}
-        with:
-          project_name: "trilium-docs"
-          comment_body: "📚 Documentation preview is ready"
-          production_url: "https://docs.triliumnotes.org"
-          deploy_dir: "site"
-          cloudflare_api_token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          cloudflare_account_id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/dev.yml

@@ -19,24 +19,45 @@ permissions:
   pull-requests: write  # for PR comments
 
 jobs:
+  check-affected:
+    name: Check affected jobs (NX)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0  # needed for https://github.com/marketplace/actions/nx-set-shas
+
+      - uses: pnpm/action-setup@v4
+      - name: Set up node & dependencies
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - uses: nrwl/nx-set-shas@v4
+      - name: Check affected
+        run: pnpm nx affected --verbose -t typecheck build rebuild-deps test-build
+
   test_dev:
     name: Test development
     runs-on: ubuntu-latest
+    needs:
+      - check-affected
     steps:
       - name: Checkout the repository
         uses: actions/checkout@v5
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
 
-      - name: Typecheck
-        run: pnpm typecheck
-
       - name: Run the unit tests
         run: pnpm run test:all
 
@@ -45,6 +66,7 @@ jobs:
     runs-on: ubuntu-latest
     needs:
       - test_dev
+      - check-affected
     steps:
       - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
@@ -53,7 +75,7 @@ jobs:
       - name: Update build info
         run: pnpm run chore:update-build-info
       - name: Trigger client build
-        run: pnpm client:build
+        run: pnpm nx run client:build
       - name: Send client bundle stats to RelativeCI
         if: false
         uses: relative-ci/agent-action@v3
@@ -61,7 +83,7 @@ jobs:
           webpackStatsFile: ./apps/client/dist/webpack-stats.json
           key: ${{ secrets.RELATIVE_CI_CLIENT_KEY }}
       - name: Trigger server build
-        run: pnpm run server:build
+        run: pnpm nx run server:build
       - uses: docker/setup-buildx-action@v3
       - uses: docker/build-push-action@v6
         with:
@@ -73,6 +95,7 @@ jobs:
     runs-on: ubuntu-latest
     needs:
       - build_docker
+      - check-affected
     strategy:
       matrix:
         include:
@@ -89,7 +112,7 @@ jobs:
       - name: Update build info
         run: pnpm run chore:update-build-info
       - name: Trigger build
-        run: pnpm server:build
+        run: pnpm nx run server:build
 
       - name: Set IMAGE_NAME to lowercase
         run: echo "IMAGE_NAME=${IMAGE_NAME,,}" >> $GITHUB_ENV

.github/workflows/main-docker.yml

@@ -44,7 +44,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: "pnpm"
@@ -82,7 +82,7 @@ jobs:
           require-healthy: true
 
       - name: Run Playwright tests
-        run: TRILIUM_DOCKER=1 TRILIUM_PORT=8082 pnpm --filter=server-e2e e2e
+        run: TRILIUM_DOCKER=1 TRILIUM_PORT=8082 pnpm exec nx run server-e2e:e2e
 
       - name: Upload Playwright trace
         if: failure()
@@ -144,7 +144,7 @@ jobs:
         uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: 'pnpm'
@@ -152,12 +152,12 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Update build info
-        run: pnpm run chore:update-build-info
-
       - name: Run the TypeScript build
         run: pnpm run server:build
 
+      - name: Update build info
+        run: pnpm run chore:update-build-info
+
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v5
@@ -211,7 +211,7 @@ jobs:
       - name: Upload digest
         uses: actions/upload-artifact@v4
         with:
-          name: digests-${{ env.PLATFORM_PAIR }}-${{ matrix.dockerfile }}
+          name: digests-${{ env.PLATFORM_PAIR }}
           path: /tmp/digests/*
           if-no-files-found: error
           retention-days: 1

.github/workflows/nightly.yml

@@ -19,6 +19,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
+  GITHUB_UPLOAD_URL: https://uploads.github.com/repos/TriliumNext/Notes/releases/179589950/assets{?name,label}
   GITHUB_RELEASE_ID: 179589950
 
 permissions:
@@ -50,12 +51,13 @@ jobs:
       - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+      - uses: nrwl/nx-set-shas@v4
       - name: Update nightly version
         run: npm run chore:ci-update-nightly-version
       - name: Run the build
@@ -77,7 +79,7 @@ jobs:
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.4.1
+        uses: softprops/action-gh-release@v2.3.2
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false
@@ -118,7 +120,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.4.1
+        uses: softprops/action-gh-release@v2.3.2
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false

.github/workflows/playwright.yml

@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - main
-    paths-ignore:
-      - "apps/website/**"
   pull_request:
 
 permissions:
@@ -21,8 +19,14 @@ jobs:
           filter: tree:0
           fetch-depth: 0
 
+      # This enables task distribution via Nx Cloud
+      # Run this command as early as possible, before dependencies are installed
+      # Learn more at https://nx.dev/ci/reference/nx-cloud-cli#npx-nxcloud-startcirun
+      # Connect your workspace by running "nx connect" and uncomment this line to enable task distribution
+      # - run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="e2e-ci"
+
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: 'pnpm'
@@ -30,12 +34,10 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - run: pnpm exec playwright install --with-deps
+      - uses: nrwl/nx-set-shas@v4
 
-      - run: pnpm --filter server-e2e e2e
-
-      - name: Upload test report
-        if: failure()
-        uses: actions/upload-artifact@v4
-        with:
-          name: e2e report
-          path: apps/server-e2e/test-output
+      # Prepend any command with "nx-cloud record --" to record its logs to Nx Cloud
+      # - run: npx nx-cloud record -- echo Hello World
+      # Nx Affected runs only tasks affected by the changes in this PR/commit. Learn more: https://nx.dev/ci/features/affected
+      # When you enable task distribution, run the e2e-ci task instead of e2e
+      - run: pnpm exec nx affected -t e2e --exclude desktop-e2e

.github/workflows/release.yml

@@ -30,30 +30,18 @@ jobs:
             image: win-signing
             shell: cmd
             forge_platform: win32
-        # Exclude ARM64 Linux from default matrix to use native runner
-        exclude:
-          - arch: arm64
-            os:
-              name: linux
-        # Add ARM64 Linux with native ubuntu-24.04-arm runner for better-sqlite3 compatibility
-        include:
-          - arch: arm64
-            os:
-              name: linux
-              image: ubuntu-24.04-arm
-              shell: bash
-              forge_platform: linux
     runs-on: ${{ matrix.os.image }}
     steps:
       - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+      - uses: nrwl/nx-set-shas@v4
       - name: Run the build
         uses: ./.github/actions/build-electron
         with:
@@ -127,7 +115,7 @@ jobs:
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.4.1
+        uses: softprops/action-gh-release@v2.3.2
         with:
           draft: false
           body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md

.github/workflows/sync-docs-to-wiki.yml

@@ -0,0 +1,67 @@
+name: Sync Docs to Wiki
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'docs/**'
+  workflow_dispatch: # Allow manual triggering
+
+permissions:
+  contents: read  # Read access to repository contents
+  # Note: Writing to wiki requires a PAT or GITHUB_TOKEN with additional permissions
+  # The default GITHUB_TOKEN cannot write to wikis, so we need to:
+  # 1. Create a Personal Access Token (PAT) with 'repo' scope
+  # 2. Add it as a repository secret named WIKI_TOKEN
+
+jobs:
+  sync-wiki:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout main repository
+        uses: actions/checkout@v4
+        with:
+          path: main-repo
+          
+      - name: Checkout wiki repository
+        uses: actions/checkout@v4
+        with:
+          repository: TriliumNext/Trilium.wiki
+          path: wiki
+          token: ${{ secrets.WIKI_TOKEN }}
+          
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          
+      - name: Install tsx for TypeScript execution
+        run: npm install -g tsx
+          
+      - name: Setup Git
+        run: |
+          git config --global user.email "action@github.com"
+          git config --global user.name "GitHub Action"
+          
+      - name: Sync documentation to wiki
+        id: sync
+        run: |
+          tsx main-repo/.github/scripts/sync-docs-to-wiki.ts
+        env:
+          MAIN_REPO_PATH: main-repo
+          WIKI_PATH: wiki
+          
+      - name: Commit and push changes
+        if: contains(steps.sync.outputs.changes, 'true')
+        run: |
+          cd wiki
+          git add .
+          git commit -m "Sync documentation from main repository
+          
+          Source commit: ${{ github.sha }}
+          Triggered by: ${{ github.event.head_commit.message }}"
+          git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.WIKI_TOKEN }}

.github/workflows/website.yml

@@ -1,51 +0,0 @@
-name: Deploy website
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - "apps/website/**"
-
-  pull_request:
-    paths:
-      - "apps/website/**"
-
-  release:
-    types: [ released ]
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    name: Build & deploy website
-
-    permissions:
-      contents: read
-      deployments: write
-      pull-requests: write # For PR preview comments
-
-    steps:
-      - uses: actions/checkout@v5
-      - uses: pnpm/action-setup@v4
-      - name: Set up node & dependencies
-        uses: actions/setup-node@v6
-        with:
-          node-version: 22
-          cache: "pnpm"
-
-      - name: Install dependencies
-        run: pnpm install --filter website --frozen-lockfile
-
-      - name: Build the website
-        run: pnpm website:build
-
-      - name: Deploy
-        uses: ./.github/actions/deploy-to-cloudflare-pages
-        with:
-          project_name: "trilium-homepage"
-          comment_body: "📚 Website preview is ready"
-          production_url: "https://triliumnotes.org"
-          deploy_dir: "apps/website/dist"
-          cloudflare_api_token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          cloudflare_account_id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,5 +1,4 @@
 # See https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
-/.cache
 
 # compiled output
 dist
@@ -33,11 +32,14 @@ testem.log
 .DS_Store
 Thumbs.db
 
+.nx/cache
+.nx/workspace-data
+
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 test-output
 
-apps/*/data*
+apps/*/data
 apps/*/out
 upload
 
@@ -45,7 +47,4 @@ upload
 *.tsbuildinfo
 
 /result
-.svelte-kit
-
-# docs
-site/
+.svelte-kit

.nvmrc

@@ -1 +1 @@
-22.20.0
+22.19.0

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "lokalise.i18n-ally",
     "ms-azuretools.vscode-docker",
     "ms-playwright.playwright",
+    "nrwl.angular-console",
     "redhat.vscode-yaml",
     "tobermory.es6-string-html",
     "vitest.explorer",

.vscode/i18n-ally-custom-framework.yml

@@ -14,7 +14,6 @@ usageMatchRegex:
   # the `{key}` will be placed by a proper keypath matching regex,
   # you can ignore it and use your own matching rules as well
   - "[^\\w\\d]t\\(['\"`]({key})['\"`]"
-  - <Trans\s*i18nKey="({key})"[^>]*>
 
 # A RegEx to set a custom scope range. This scope will be used as a prefix when detecting keys
 # and works like how the i18next framework identifies the namespace scope from the

.vscode/mcp.json

@@ -0,0 +1,8 @@
+{
+  "servers": {
+    "nx-mcp": {
+      "type": "http",
+      "url": "http://localhost:9461/mcp"
+    }
+  }
+}

.vscode/settings.json

@@ -5,8 +5,7 @@
     "i18n-ally.keystyle": "nested",
     "i18n-ally.localesPaths": [
         "apps/server/src/assets/translations",
-        "apps/client/src/translations",
-        "apps/website/public/translations"
+        "apps/client/src/translations"
     ],
     "npm.exclude": [
         "**/dist",
@@ -36,5 +35,6 @@
         "docs/**/*.png": true,
         "apps/server/src/assets/doc_notes/**": true,
         "apps/edit-docs/demo/**": true
-    }
+    },
+    "nxConsole.generateAiAgentRules": true
 }

CLAUDE.md

@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Overview
 
-Trilium Notes is a hierarchical note-taking application with advanced features like synchronization, scripting, and rich text editing. It's built as a TypeScript monorepo using pnpm, with multiple applications and shared packages.
+Trilium Notes is a hierarchical note-taking application with advanced features like synchronization, scripting, and rich text editing. It's built as a TypeScript monorepo using NX, with multiple applications and shared packages.
 
 ## Development Commands
 
@@ -14,9 +14,12 @@ Trilium Notes is a hierarchical note-taking application with advanced features l
 
 ### Running Applications
 - `pnpm run server:start` - Start development server (http://localhost:8080)
+- `pnpm nx run server:serve` - Alternative server start command
+- `pnpm nx run desktop:serve` - Run desktop Electron app
 - `pnpm run server:start-prod` - Run server in production mode
 
 ### Building
+- `pnpm nx build <project>` - Build specific project (server, client, desktop, etc.)
 - `pnpm run client:build` - Build client application
 - `pnpm run server:build` - Build server application
 - `pnpm run electron:build` - Build desktop application
@@ -25,8 +28,13 @@ Trilium Notes is a hierarchical note-taking application with advanced features l
 - `pnpm test:all` - Run all tests (parallel + sequential)
 - `pnpm test:parallel` - Run tests that can run in parallel
 - `pnpm test:sequential` - Run tests that must run sequentially (server, ckeditor5-mermaid, ckeditor5-math)
+- `pnpm nx test <project>` - Run tests for specific project
 - `pnpm coverage` - Generate coverage reports
 
+### Linting & Type Checking
+- `pnpm nx run <project>:lint` - Lint specific project
+- `pnpm nx run <project>:typecheck` - Type check specific project
+
 ## Architecture Overview
 
 ### Monorepo Structure
@@ -86,6 +94,7 @@ Frontend uses a widget system (`apps/client/src/widgets/`):
    - `apps/server/src/assets/db/schema.sql` - Core database structure
 
 4. **Configuration**:
+   - `nx.json` - NX workspace configuration
    - `package.json` - Project dependencies and scripts
 
 ## Note Types and Features
@@ -145,7 +154,7 @@ Trilium provides powerful user scripting capabilities:
 - Update schema in `apps/server/src/assets/db/schema.sql`
 
 ## Build System Notes
-- Uses pnpm for monorepo management
+- Uses NX for monorepo management with build caching
 - Vite for fast development builds
 - ESBuild for production optimization
 - pnpm workspaces for dependency management

README.md

@@ -1,14 +1,3 @@
-<div align="center">
-	<sup>Special thanks to:</sup><br />
-	<a href="https://go.warp.dev/Trilium" target="_blank">		
-		<img alt="Warp sponsorship" width="400" src="https://github.com/warpdotdev/brand-assets/blob/main/Github/Sponsor/Warp-Github-LG-03.png"><br />
-		Warp, built for coding with multiple AI agents<br />
-	</a>
-  <sup>Available for macOS, Linux and Windows</sup>
-</div>
-
-<hr />
-
 # Trilium Notes
 
 ![GitHub Sponsors](https://img.shields.io/github/sponsors/eliandoran) ![LiberaPay patrons](https://img.shields.io/liberapay/patrons/ElianDoran)  
@@ -16,7 +5,7 @@
 ![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/triliumnext/trilium/total)  
 [![RelativeCI](https://badges.relative-ci.com/badges/Di5q7dz9daNDZ9UXi0Bp?branch=develop)](https://app.relative-ci.com/projects/Di5q7dz9daNDZ9UXi0Bp) [![Translation status](https://hosted.weblate.org/widget/trilium/svg-badge.svg)](https://hosted.weblate.org/engage/trilium/)
 
-[English](./README.md) | [Chinese (Simplified)](./docs/README-ZH_CN.md) | [Chinese (Traditional)](./docs/README-ZH_TW.md) | [Russian](./docs/README-ru.md) | [Japanese](./docs/README-ja.md) | [Italian](./docs/README-it.md) | [Spanish](./docs/README-es.md)
+[English](./README.md) | [Chinese (Simplified)](./docs/README-ZH_CN.md) | [Chinese (Traditional)](./docs/README-ZH_TW.md) | [Russian](./docs/README.ru.md) | [Japanese](./docs/README.ja.md) | [Italian](./docs/README.it.md) | [Spanish](./docs/README.es.md)
 
 Trilium Notes is a free and open-source, cross-platform hierarchical note taking application with focus on building large personal knowledge bases.
 
@@ -24,27 +13,6 @@ See [screenshots](https://triliumnext.github.io/Docs/Wiki/screenshot-tour) for q
 
 <a href="https://triliumnext.github.io/Docs/Wiki/screenshot-tour"><img src="./docs/app.png" alt="Trilium Screenshot" width="1000"></a>
 
-## ⏬ Download
-- [Latest release](https://github.com/TriliumNext/Trilium/releases/latest) – stable version, recommended for most users.
-- [Nightly build](https://github.com/TriliumNext/Trilium/releases/tag/nightly) – unstable development version, updated daily with the latest features and fixes.
-
-## 📚 Documentation
-
-**Visit our comprehensive documentation at [docs.triliumnotes.org](https://docs.triliumnotes.org/)**
-
-Our documentation is available in multiple formats:
-- **Online Documentation**: Browse the full documentation at [docs.triliumnotes.org](https://docs.triliumnotes.org/)
-- **In-App Help**: Press `F1` within Trilium to access the same documentation directly in the application
-- **GitHub**: Navigate through the [User Guide](./docs/User%20Guide/User%20Guide/) in this repository
-
-### Quick Links
-- [Getting Started Guide](https://docs.triliumnotes.org/)
-- [Installation Instructions](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation.md)
-- [Docker Setup](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation/1.%20Installing%20the%20server/Using%20Docker.md)
-- [Upgrading TriliumNext](./docs/User%20Guide/User%20Guide/Installation%20%26%20Setup/Upgrading%20TriliumNext.md)
-- [Basic Concepts and Features](./docs/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Notes.md)
-- [Patterns of Personal Knowledge Base](https://triliumnext.github.io/Docs/Wiki/patterns-of-personal-knowledge)
-
 ## 🎁 Features
 
 * Notes can be arranged into arbitrarily deep tree. Single note can be placed into multiple places in the tree (see [cloning](https://triliumnext.github.io/Docs/Wiki/cloning-notes))
@@ -88,6 +56,19 @@ There are no special migration steps to migrate from a zadam/Trilium instance to
 
 Versions up to and including [v0.90.4](https://github.com/TriliumNext/Trilium/releases/tag/v0.90.4) are compatible with the latest zadam/trilium version of [v0.63.7](https://github.com/zadam/trilium/releases/tag/v0.63.7). Any later versions of TriliumNext/Trilium have their sync versions incremented which prevents direct migration.
 
+## 📖 Documentation
+
+We're currently in the progress of moving the documentation to in-app (hit the `F1` key within Trilium). As a result, there may be some missing parts until we've completed the migration. If you'd prefer to navigate through the documentation within GitHub, you can navigate the [User Guide](./docs/User%20Guide/User%20Guide/) documentation. 
+
+Below are some quick links for your convenience to navigate the documentation:
+- [Server installation](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation.md)
+  - [Docker installation](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation/1.%20Installing%20the%20server/Using%20Docker.md)
+- [Upgrading TriliumNext](./docs/User%20Guide/User%20Guide/Installation%20%26%20Setup/Upgrading%20TriliumNext.md)
+- [Concepts and Features - Note](./docs/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Notes.md)
+- [Patterns of personal knowledge base](https://triliumnext.github.io/Docs/Wiki/patterns-of-personal-knowledge)
+
+Until we finish reorganizing the documentation, you may also want to [browse the old documentation](https://triliumnext.github.io/Docs).
+
 ## 💬 Discuss with us
 
 Feel free to join our official conversations. We would love to hear what features, suggestions, or issues you may have!
@@ -161,7 +142,7 @@ Download the repository, install dependencies using `pnpm` and then run the envi
 git clone https://github.com/TriliumNext/Trilium.git
 cd Trilium
 pnpm install
-pnpm edit-docs:edit-docs
+pnpm nx run edit-docs:edit-docs
 ```
 
 ### Building the Executable
@@ -170,7 +151,7 @@ Download the repository, install dependencies using `pnpm` and then build the de
 git clone https://github.com/TriliumNext/Trilium.git
 cd Trilium
 pnpm install
-pnpm run --filter desktop electron-forge:make --arch=x64 --platform=win32
+pnpm nx --project=desktop electron-forge:make -- --arch=x64 --platform=win32
 ```
 
 For more details, see the [development docs](https://github.com/TriliumNext/Trilium/tree/main/docs/Developer%20Guide/Developer%20Guide).
@@ -181,34 +162,16 @@ Please view the [documentation guide](https://github.com/TriliumNext/Trilium/blo
 
 ## 👏 Shoutouts
 
-* [zadam](https://github.com/zadam) for the original concept and implementation of the application.
-* [Sarah Hussein](https://github.com/Sarah-Hussein) for designing the application icon.
-* [nriver](https://github.com/nriver) for his work on internationalization.
-* [Thomas Frei](https://github.com/thfrei) for his original work on the Canvas.
-* [antoniotejada](https://github.com/nriver) for the original syntax highlight widget.
-* [Dosu](https://dosu.dev/) for providing us with the automated responses to GitHub issues and discussions.
-* [Tabler Icons](https://tabler.io/icons) for the system tray icons.
-
-Trilium would not be possible without the technologies behind it:
-
-* [CKEditor 5](https://github.com/ckeditor/ckeditor5) - the visual editor behind text notes. We are grateful for being offered a set of the premium features.
-* [CodeMirror](https://github.com/codemirror/CodeMirror) - code editor with support for huge amount of languages.
-* [Excalidraw](https://github.com/excalidraw/excalidraw) - the infinite whiteboard used in Canvas notes.
-* [Mind Elixir](https://github.com/SSShooter/mind-elixir-core) - providing the mind map functionality.
-* [Leaflet](https://github.com/Leaflet/Leaflet) - for rendering geographical maps.
-* [Tabulator](https://github.com/olifolkerd/tabulator) - for the interactive table used in collections.
-* [FancyTree](https://github.com/mar10/fancytree) - feature-rich tree library without real competition. 
-* [jsPlumb](https://github.com/jsplumb/jsplumb) - visual connectivity library. Used in [relation maps](https://triliumnext.github.io/Docs/Wiki/relation-map.html) and [link maps](https://triliumnext.github.io/Docs/Wiki/note-map.html#link-map)
+* [CKEditor 5](https://github.com/ckeditor/ckeditor5) - best WYSIWYG editor on the market, very interactive and listening team
+* [FancyTree](https://github.com/mar10/fancytree) - very feature rich tree library without real competition. Trilium Notes would not be the same without it.
+* [CodeMirror](https://github.com/codemirror/CodeMirror) - code editor with support for huge amount of languages
+* [jsPlumb](https://github.com/jsplumb/jsplumb) - visual connectivity library without competition. Used in [relation maps](https://triliumnext.github.io/Docs/Wiki/relation-map.html) and [link maps](https://triliumnext.github.io/Docs/Wiki/note-map.html#link-map)
 
 ## 🤝 Support
 
-Trilium is built and maintained with [hundreds of hours of work](https://github.com/TriliumNext/Trilium/graphs/commit-activity). Your support keeps it open-source, improves features, and covers costs such as hosting.
-
-Consider supporting the main developer ([eliandoran](https://github.com/eliandoran)) of the application via:
-
-- [GitHub Sponsors](https://github.com/sponsors/eliandoran)
-- [PayPal](https://paypal.me/eliandoran)
-- [Buy Me a Coffee](https://buymeacoffee.com/eliandoran)
+Support for the TriliumNext organization will be possible in the near future. For now, you can:
+- Support continued development on TriliumNext by supporting our developers: [eliandoran](https://github.com/sponsors/eliandoran) (See the [repository insights]([developers]([url](https://github.com/TriliumNext/trilium/graphs/contributors))) for a full list)
+- Show a token of gratitude to the original Trilium developer ([zadam](https://github.com/sponsors/zadam)) via [PayPal](https://paypal.me/za4am) or Bitcoin (bitcoin:bc1qv3svjn40v89mnkre5vyvs2xw6y8phaltl385d2).
 
 
 ## 🔑 License

_regroup/package.json

@@ -35,22 +35,22 @@
     "chore:generate-openapi": "tsx bin/generate-openapi.js"
   },
   "devDependencies": {    
-    "@playwright/test": "1.56.1",
-    "@stylistic/eslint-plugin": "5.5.0",        
+    "@playwright/test": "1.55.0",
+    "@stylistic/eslint-plugin": "5.3.1",        
     "@types/express": "5.0.3",    
-    "@types/node": "22.18.11",    
+    "@types/node": "22.18.0",    
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "3.2.4",
-    "eslint": "9.38.0",
+    "eslint": "9.34.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "esm": "3.2.25",
-    "jsdoc": "4.0.5",
+    "jsdoc": "4.0.4",
     "lorem-ipsum": "2.0.8",    
     "rcedit": "4.0.1",
     "rimraf": "6.0.1",    
     "tslib": "2.8.1",    
-    "typedoc": "0.28.14",
-    "typedoc-plugin-missing-exports": "4.1.2"
+    "typedoc": "0.28.12",
+    "typedoc-plugin-missing-exports": "4.1.0"
   },
   "optionalDependencies": {
     "appdmg": "0.6.6"

_regroup/spec/support/etapi.ts

@@ -1,3 +1,4 @@
+import type child_process from "child_process";
 import { describe, beforeAll, afterAll } from "vitest";
 
 let etapiAuthToken: string | undefined;
@@ -11,6 +12,8 @@ type SpecDefinitionsFunc = () => void;
 
 function describeEtapi(description: string, specDefinitions: SpecDefinitionsFunc): void {
     describe(description, () => {
+        let appProcess: ReturnType<typeof child_process.spawn>;
+
         beforeAll(async () => {});
 
         afterAll(() => {});

apps/client/.env

@@ -1,4 +1,5 @@
 # The development license key for premium CKEditor features.
 # Note: This key must only be used for the Trilium Notes project.
-VITE_CKEDITOR_KEY=eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3ODcyNzA0MDAsImp0aSI6IjkyMWE1MWNlLTliNDMtNGRlMC1iOTQwLTc5ZjM2MDBkYjg1NyIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOiJ0cmlsaXVtIiwiZmVhdHVyZXMiOlsiVFJJTElVTSJdLCJ2YyI6ImU4YzRhMjBkIn0.hny77p-U4-jTkoqbwPytrEar5ylGCWBN7Ez3SlB8i6_mJCBIeCSTOlVQk_JMiOEq3AGykUMHzWXzjdMFwgniOw
+# Expires on: 2025-09-13
+VITE_CKEDITOR_KEY=eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3NTc3MjE1OTksImp0aSI6ImFiN2E0NjZmLWJlZGMtNDNiYy1iMzU4LTk0NGQ0YWJhY2I3ZiIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsic2giLCJkcnVwYWwiXSwid2hpdGVMYWJlbCI6dHJ1ZSwiZmVhdHVyZXMiOlsiRFJVUCIsIkNNVCIsIkRPIiwiRlAiLCJTQyIsIlRPQyIsIlRQTCIsIlBPRSIsIkNDIiwiTUYiLCJTRUUiLCJFQ0giLCJFSVMiXSwidmMiOiI1MzlkOWY5YyJ9.2rvKPql4hmukyXhEtWPZ8MLxKvzPIwzCdykO653g7IxRRZy2QJpeRszElZx9DakKYZKXekVRAwQKgHxwkgbE_w
 VITE_CKEDITOR_ENABLE_INSPECTOR=false

apps/client/package.json

@@ -1,21 +1,16 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.99.2",
+  "version": "0.98.1",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
   "author": {
     "name": "Trilium Notes Team",
     "email": "contact@eliandoran.me",
-    "url": "https://github.com/TriliumNext/Trilium"
-  },
-  "scripts": {
-    "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
-    "test": "vitest",
-    "circular-deps": "dpdm -T src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
+    "url": "https://github.com/TriliumNext/Notes"
   },
   "dependencies": {
-    "@eslint/js": "9.38.0",
+    "@eslint/js": "9.34.0",
     "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
@@ -24,7 +19,7 @@
     "@fullcalendar/multimonth": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
-    "@mermaid-js/layout-elk": "0.2.0",
+    "@mermaid-js/layout-elk": "0.1.9",
     "@mind-elixir/node-menu": "5.0.0",
     "@popperjs/core": "2.11.8",
     "@triliumnext/ckeditor5": "workspace:*",
@@ -35,31 +30,29 @@
     "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.8",
     "boxicons": "2.1.4",
-    "color": "5.0.2",
     "dayjs": "1.11.18",
     "dayjs-plugin-utc": "0.1.2",
     "debounce": "2.2.0",
     "draggabilly": "3.0.0",
-    "force-graph": "1.51.0",
-    "globals": "16.4.0",
-    "i18next": "25.6.0",
+    "force-graph": "1.50.1",
+    "globals": "16.3.0",
+    "i18next": "25.4.2",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.25",
+    "katex": "0.16.22",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "16.4.1",
-    "mermaid": "11.12.0",
-    "mind-elixir": "5.3.3",
+    "marked": "16.2.1",
+    "mermaid": "11.10.1",
+    "mind-elixir": "5.0.6",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
-    "preact": "10.27.2",
-    "react-i18next": "16.1.0",
-    "reveal.js": "5.2.1",
+    "preact": "10.27.1",
+    "react-i18next": "15.7.3",
     "split.js": "1.6.5",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
@@ -70,14 +63,26 @@
     "@preact/preset-vite": "2.10.2",
     "@types/bootstrap": "5.2.10",
     "@types/jquery": "3.5.33",
-    "@types/leaflet": "1.9.21",
-    "@types/leaflet-gpx": "1.3.8",
+    "@types/leaflet": "1.9.20",
+    "@types/leaflet-gpx": "1.3.7",
     "@types/mark.js": "8.11.12",
-    "@types/reveal.js": "5.2.1",
-    "@types/tabulator-tables": "6.2.11",
+    "@types/tabulator-tables": "6.2.10",
     "copy-webpack-plugin": "13.0.1",
-    "happy-dom": "20.0.7",
+    "happy-dom": "18.0.1",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.1.4"
+    "vite-plugin-static-copy": "3.1.2"
+  },
+  "nx": {
+    "name": "client",
+    "targets": {
+      "serve": {
+        "dependsOn": [
+          "^build"
+        ]
+      },
+      "circular-deps": {
+        "command": "pnpx dpdm -T {projectRoot}/src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
+      }
+    }
   }
 }

apps/client/src/assets/manifest.webmanifest

@@ -7,9 +7,6 @@
     "display": "standalone",
     "scope": "/",
     "start_url": "/",
-    "display_override": [
-        "window-controls-overlay"
-    ],
     "icons": [
         {
             "src": "icon.png",

apps/client/src/components/app_context.ts

@@ -116,7 +116,7 @@ export type CommandMappings = {
     openedFileUpdated: CommandData & {
         entityType: string;
         entityId: string;
-        lastModifiedMs?: number;
+        lastModifiedMs: number;
         filePath: string;
     };
     focusAndSelectTitle: CommandData & {
@@ -650,7 +650,7 @@ export class AppContext extends Component {
     }
 
     getComponentByEl(el: HTMLElement) {
-        return $(el).closest("[data-component-id]").prop("component");
+        return $(el).closest(".component").prop("component");
     }
 
     addBeforeUnloadListener(obj: BeforeUploadListener | (() => boolean)) {

apps/client/src/components/note_context.ts

@@ -326,11 +326,9 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
         }
 
         // Collections must always display a note list, even if no children.
-        if (note.type === "book") {
-            const viewType = note.getLabelValue("viewType") ?? "grid";
-            if (!["list", "grid"].includes(viewType)) {
-                return true;
-            }
+        const viewType = note.getLabelValue("viewType") ?? "grid";
+        if (!["list", "grid"].includes(viewType)) {
+            return true;
         }
 
         if (!note.hasChildren()) {
@@ -440,22 +438,4 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     }
 }
 
-export function openInCurrentNoteContext(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, notePath: string, viewScope?: ViewScope) {
-    const ntxId = $(evt?.target as Element)
-        .closest("[data-ntx-id]")
-        .attr("data-ntx-id");
-
-    const noteContext = ntxId ? appContext.tabManager.getNoteContextById(ntxId) : appContext.tabManager.getActiveContext();
-
-    if (noteContext) {
-        noteContext.setNote(notePath, { viewScope }).then(() => {
-            if (noteContext !== appContext.tabManager.getActiveContext()) {
-                appContext.tabManager.activateNoteContext(noteContext.ntxId);
-            }
-        });
-    } else {
-        appContext.tabManager.openContextWithNote(notePath, { viewScope, activate: true });
-    }
-}
-
 export default NoteContext;

apps/client/src/components/tab_manager.ts

@@ -433,9 +433,6 @@ export default class TabManager extends Component {
                 $autocompleteEl.autocomplete("close");
             }
 
-            // close dangling tooltips
-            $("body > div.tooltip").remove();
-
             const noteContextsToRemove = noteContextToRemove.getSubContexts();
             const ntxIdsToRemove = noteContextsToRemove.map((nc) => nc.ntxId);
 
@@ -603,18 +600,18 @@ export default class TabManager extends Component {
     }
 
     async moveTabToNewWindowCommand({ ntxId }: { ntxId: string }) {
-        const { notePath, hoistedNoteId, viewScope } = this.getNoteContextById(ntxId);
+        const { notePath, hoistedNoteId } = this.getNoteContextById(ntxId);
 
         const removed = await this.removeNoteContext(ntxId);
 
         if (removed) {
-            this.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
+            this.triggerCommand("openInWindow", { notePath, hoistedNoteId });
         }
     }
 
     async copyTabToNewWindowCommand({ ntxId }: { ntxId: string }) {
-        const { notePath, hoistedNoteId, viewScope } = this.getNoteContextById(ntxId);
-        this.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
+        const { notePath, hoistedNoteId } = this.getNoteContextById(ntxId);
+        this.triggerCommand("openInWindow", { notePath, hoistedNoteId });
     }
 
     async reopenLastTabCommand() {

apps/client/src/components/touch_bar.ts

@@ -23,11 +23,11 @@ export default class TouchBarComponent extends Component {
         this.$widget = $("<div>");
 
         $(window).on("focusin", async (e) => {
-            const focusedEl = e.target as unknown as HTMLElement;
-            const $target = $(focusedEl);
+            const $target = $(e.target);
 
             this.$activeModal = $target.closest(".modal-dialog");
-            this.lastFocusedComponent = appContext.getComponentByEl(focusedEl);
+            const parentComponentEl = $target.closest(".component");
+            this.lastFocusedComponent = appContext.getComponentByEl(parentComponentEl[0]);
             this.#refreshTouchBar();
         });
     }

apps/client/src/desktop.ts

@@ -10,6 +10,7 @@ import { t } from "./services/i18n.js";
 import options from "./services/options.js";
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
+import "./stylesheets/bootstrap.scss";
 import "boxicons/css/boxicons.min.css";
 import "autocomplete.js/index_jquery.js";
 
@@ -44,10 +45,6 @@ if (utils.isElectron()) {
     electronContextMenu.setupContextMenu();
 }
 
-if (utils.isPWA()) {
-    initPWATopbarColor();
-}
-
 function initOnElectron() {
     const electron: typeof Electron = utils.dynamicRequire("electron");
     electron.ipcRenderer.on("globalShortcut", async (event, actionName) => appContext.triggerCommand(actionName));
@@ -116,20 +113,3 @@ function initDarkOrLightMode(style: CSSStyleDeclaration) {
     const { nativeTheme } = utils.dynamicRequire("@electron/remote") as typeof ElectronRemote;
     nativeTheme.themeSource = themeSource;
 }
-
-function initPWATopbarColor() {
-    const tracker = $("#background-color-tracker");
-
-    if (tracker.length) {
-        const applyThemeColor = () => {
-            let meta = $("meta[name='theme-color']");
-            if (!meta.length) {
-                meta = $(`<meta name="theme-color">`).appendTo($("head"));
-            }
-            meta.attr("content", tracker.css("color"));
-        };
-
-        tracker.on("transitionend", applyThemeColor);
-        applyThemeColor();
-    }
-}

apps/client/src/entities/fnote.ts

@@ -1,5 +1,6 @@
 import server from "../services/server.js";
 import noteAttributeCache from "../services/note_attribute_cache.js";
+import ws from "../services/ws.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import cssClassManager from "../services/css_class_manager.js";
 import type { Froca } from "../services/froca-interface.js";
@@ -255,20 +256,18 @@ export default class FNote {
         return this.children;
     }
 
-    async getSubtreeNoteIds(includeArchived = false) {
+    async getSubtreeNoteIds() {
         let noteIds: (string | string[])[] = [];
         for (const child of await this.getChildNotes()) {
-            if (child.isArchived && !includeArchived) continue;
-
             noteIds.push(child.noteId);
-            noteIds.push(await child.getSubtreeNoteIds(includeArchived));
+            noteIds.push(await child.getSubtreeNoteIds());
         }
         return noteIds.flat();
     }
 
     async getSubtreeNotes() {
         const noteIds = await this.getSubtreeNoteIds();
-        return (await this.froca.getNotes(noteIds));
+        return this.froca.getNotes(noteIds);
     }
 
     async getChildNotes() {
@@ -585,7 +584,7 @@ export default class FNote {
         let childBranches = this.getChildBranches();
 
         if (!childBranches) {
-            console.error(`No children for '${this.noteId}'. This shouldn't happen.`);
+            ws.logError(`No children for '${this.noteId}'. This shouldn't happen.`);
             return [];
         }
 
@@ -906,8 +905,8 @@ export default class FNote {
         return this.getBlob();
     }
 
-    getBlob() {
-        return this.froca.getBlob("notes", this.noteId);
+    async getBlob() {
+        return await this.froca.getBlob("notes", this.noteId);
     }
 
     toString() {

apps/client/src/layouts/desktop_layout.tsx

@@ -5,6 +5,7 @@ import NoteTreeWidget from "../widgets/note_tree.js";
 import NoteTitleWidget from "../widgets/note_title.jsx";
 import NoteDetailWidget from "../widgets/note_detail.js";
 import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
+import NoteListWidget from "../widgets/note_list.js";
 import NoteIconWidget from "../widgets/note_icon.jsx";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
@@ -41,7 +42,6 @@ import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
 import ApiLog from "../widgets/api_log.jsx";
 import CloseZenModeButton from "../widgets/close_zen_button.jsx";
 import SharedInfo from "../widgets/shared_info.jsx";
-import NoteList from "../widgets/collections/NoteList.jsx";
 
 export default class DesktopLayout {
 
@@ -123,10 +123,10 @@ export default class DesktopLayout {
                                                                 .child(<NoteIconWidget />)
                                                                 .child(<NoteTitleWidget />)
                                                                 .child(new SpacerWidget(0, 1))
-                                                                .child(<MovePaneButton direction="left" />)
-                                                                .child(<MovePaneButton direction="right" />)
-                                                                .child(<ClosePaneButton />)
-                                                                .child(<CreatePaneButton />)
+                                                                .child(new MovePaneButton(true))
+                                                                .child(new MovePaneButton(false))
+                                                                .child(new ClosePaneButton())
+                                                                .child(new CreatePaneButton())
                                                         )
                                                         .child(<Ribbon />)
                                                         .child(<SharedInfo />)
@@ -138,7 +138,7 @@ export default class DesktopLayout {
                                                                 .child(new PromotedAttributesWidget())
                                                                 .child(<SqlTableSchemas />)
                                                                 .child(new NoteDetailWidget())
-                                                                .child(<NoteList media="screen" />)
+                                                                .child(new NoteListWidget(false))
                                                                 .child(<SearchResult />)
                                                                 .child(<SqlResults />)
                                                                 .child(<ScrollPadding />)

apps/client/src/layouts/layout_commons.tsx

@@ -27,10 +27,10 @@ import FlexContainer from "../widgets/containers/flex_container.js";
 import NoteIconWidget from "../widgets/note_icon";
 import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
+import NoteListWidget from "../widgets/note_list.js";
 import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
 import NoteTitleWidget from "../widgets/note_title.jsx";
 import { PopupEditorFormattingToolbar } from "../widgets/ribbon/FormattingToolbar.js";
-import NoteList from "../widgets/collections/NoteList.jsx";
 
 export function applyModals(rootContainer: RootContainer) {
     rootContainer
@@ -66,6 +66,6 @@ export function applyModals(rootContainer: RootContainer) {
                 .child(<PopupEditorFormattingToolbar />)
                 .child(new PromotedAttributesWidget())
                 .child(new NoteDetailWidget())
-                .child(<NoteList media="screen" displayOnlyCollections />))
+                .child(new NoteListWidget(true)))
         .child(<CallToActionDialog />);
 }

apps/client/src/layouts/mobile_layout.tsx

@@ -5,6 +5,7 @@ import QuickSearchWidget from "../widgets/quick_search.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import NoteListWidget from "../widgets/note_list.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
@@ -21,9 +22,7 @@ import FloatingButtons from "../widgets/FloatingButtons.jsx";
 import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
 import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
 import CloseZenModeButton from "../widgets/close_zen_button.js";
-import NoteWrapperWidget from "../widgets/note_wrapper.js";
 import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
-import NoteList from "../widgets/collections/NoteList.jsx";
 
 const MOBILE_CSS = `
 <style>
@@ -40,8 +39,8 @@ kbd {
     border: none;
     cursor: pointer;
     font-size: 1.25em;
-    padding-inline-start: 0.5em;
-    padding-inline-end: 0.5em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
     color: var(--main-text-color);
 }
 .quick-search {
@@ -59,7 +58,7 @@ const FANCYTREE_CSS = `
     margin-top: 0px;
     overflow-y: auto;
     contain: content;
-    padding-inline-start: 10px;
+    padding-left: 10px;
 }
 
 .fancytree-custom-icon {
@@ -68,7 +67,7 @@ const FANCYTREE_CSS = `
 
 .fancytree-title {
     font-size: 1.5em;
-    margin-inline-start: 0.6em !important;
+    margin-left: 0.6em !important;
 }
 
 .fancytree-node {
@@ -81,7 +80,7 @@ const FANCYTREE_CSS = `
 
 span.fancytree-expander {
     width: 24px !important;
-    margin-inline-end: 5px;
+    margin-right: 5px;
 }
 
 .fancytree-loading span.fancytree-expander {
@@ -101,7 +100,7 @@ span.fancytree-expander {
 .tree-wrapper .scroll-to-active-note-button,
 .tree-wrapper .tree-settings-button {
     position: fixed;
-    margin-inline-end: 16px;
+    margin-right: 16px;
     display: none;
 }
 
@@ -126,39 +125,36 @@ export default class MobileLayout {
                             .class("d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-3 col-xl-3")
                             .id("mobile-sidebar-wrapper")
                             .css("max-height", "100%")
-                            .css("padding-inline-start", "0")
-                            .css("padding-inline-end", "0")
+                            .css("padding-left", "0")
+                            .css("padding-right", "0")
                             .css("contain", "content")
                             .child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))
                     )
                     .child(
-                        new ScreenContainer("detail", "row")
+                        new ScreenContainer("detail", "column")
                             .id("detail-container")
                             .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-9")
                             .child(
-                                new NoteWrapperWidget()
-                                    .child(
-                                        new FlexContainer("row")
-                                            .contentSized()
-                                            .css("font-size", "larger")
-                                            .css("align-items", "center")
-                                            .child(<ToggleSidebarButton />)
-                                            .child(<NoteTitleWidget />)
-                                            .child(<MobileDetailMenu />)
-                                    )
-                                    .child(<SharedInfoWidget />)
-                                    .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
-                                    .child(new PromotedAttributesWidget())
-                                    .child(
-                                        new ScrollingContainer()
-                                            .filling()
-                                            .contentSized()
-                                            .child(new NoteDetailWidget())
-                                            .child(<NoteList media="screen" />)
-                                            .child(<FilePropertiesWrapper />)
-                                    )
-                                    .child(<MobileEditorToolbar />)
+                                new FlexContainer("row")
+                                    .contentSized()
+                                    .css("font-size", "larger")
+                                    .css("align-items", "center")
+                                    .child(<ToggleSidebarButton />)
+                                    .child(<NoteTitleWidget />)
+                                    .child(<MobileDetailMenu />)
                             )
+                            .child(<SharedInfoWidget />)
+                            .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
+                            .child(new PromotedAttributesWidget())
+                            .child(
+                                new ScrollingContainer()
+                                    .filling()
+                                    .contentSized()
+                                    .child(new NoteDetailWidget())
+                                    .child(new NoteListWidget(false))
+                                    .child(<FilePropertiesWrapper />)
+                            )
+                            .child(<MobileEditorToolbar />)
                     )
             )
             .child(
@@ -187,4 +183,4 @@ function FilePropertiesWrapper() {
             {note?.type === "file" && <FilePropertiesTab note={note} />}
         </div>
     );
-}
+}

apps/client/src/login.ts

@@ -1,3 +1,5 @@
+import "./stylesheets/bootstrap.scss";
+
 // @ts-ignore - module = undefined
 // Required for correct loading of scripts in Electron
 if (typeof module === 'object') {window.module = module; module = undefined;}

apps/client/src/menus/context_menu.ts

@@ -1,8 +1,6 @@
-import { KeyboardActionNames } from "@triliumnext/commons";
-import keyboardActionService, { getActionSync } from "../services/keyboard_actions.js";
+import keyboardActionService from "../services/keyboard_actions.js";
 import note_tooltip from "../services/note_tooltip.js";
 import utils from "../services/utils.js";
-import { should } from "vitest";
 
 export interface ContextMenuOptions<T> {
     x: number;
@@ -15,13 +13,8 @@ export interface ContextMenuOptions<T> {
     onHide?: () => void;
 }
 
-export interface MenuSeparatorItem {
-    kind: "separator";
-}
-
-export interface MenuHeader {
-    title: string;
-    kind: "header";
+interface MenuSeparatorItem {
+    title: "----";
 }
 
 export interface MenuItemBadge {
@@ -45,13 +38,12 @@ export interface MenuCommandItem<T> {
     handler?: MenuHandler<T>;
     items?: MenuItem<T>[] | null;
     shortcut?: string;
-    keyboardShortcut?: KeyboardActionNames;
     spellingSuggestion?: string;
     checked?: boolean;
     columns?: number;
 }
 
-export type MenuItem<T> = MenuCommandItem<T> | MenuSeparatorItem | MenuHeader;
+export type MenuItem<T> = MenuCommandItem<T> | MenuSeparatorItem;
 export type MenuHandler<T> = (item: MenuCommandItem<T>, e: JQuery.MouseDownEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => void;
 export type ContextMenuEvent = PointerEvent | MouseEvent | JQuery.ContextMenuEvent;
 
@@ -150,57 +142,20 @@ class ContextMenu {
         this.$widget
             .css({
                 display: "block",
-                top,
-                left
+                top: top,
+                left: left
             })
             .addClass("show");
     }
 
-    addItems($parent: JQuery<HTMLElement>, items: MenuItem<any>[], multicolumn = false) {
-        let $group = $parent; // The current group or parent element to which items are being appended
-        let shouldStartNewGroup = false; // If true, the next item will start a new group
-        let shouldResetGroup = false; // If true, the next item will be the last one from the group
-
-        for (let index = 0; index < items.length; index++) {
-            const item = items[index];
+    addItems($parent: JQuery<HTMLElement>, items: MenuItem<any>[]) {
+        for (const item of items) {
             if (!item) {
                 continue;
             }
 
-            // If the current item is a header, start a new group. This group will contain the
-            // header and the next item that follows the header.
-            if ("kind" in item && item.kind === "header") {
-                if (multicolumn && !shouldResetGroup) {
-                    shouldStartNewGroup = true;
-                }
-            }
-
-            // If the next item is a separator, start a new group. This group will contain the
-            // current item, the separator, and the next item after the separator.
-            const nextItem = (index < items.length - 1) ? items[index + 1] : null;
-            if (multicolumn && nextItem && "kind" in nextItem && nextItem.kind === "separator") {
-                if (!shouldResetGroup) {
-                    shouldStartNewGroup = true;
-                } else {
-                    shouldResetGroup = true; // Continue the current group
-                }
-            }
-
-            // Create a new group to avoid column breaks before and after the seaparator / header.
-            // This is a workaround for Firefox not supporting break-before / break-after: avoid
-            // for columns.
-            if (shouldStartNewGroup) {
-                $group = $("<div class='dropdown-no-break'>");
-                $parent.append($group);
-                shouldStartNewGroup = false;
-            }
-
-            if ("kind" in item && item.kind === "separator") {
-                $group.append($("<div>").addClass("dropdown-divider"));
-                shouldResetGroup = true; // End the group after the next item
-            } else if ("kind" in item && item.kind === "header") {
-                $group.append($("<h6>").addClass("dropdown-header").text(item.title));
-                shouldResetGroup = true;
+            if (item.title === "----") {
+                $parent.append($("<div>").addClass("dropdown-divider"));
             } else {
                 const $icon = $("<span>");
 
@@ -230,23 +185,7 @@ class ContextMenu {
                     }
                 }
 
-                if ("keyboardShortcut" in item && item.keyboardShortcut) {
-                    const shortcuts = getActionSync(item.keyboardShortcut).effectiveShortcuts;
-                    if (shortcuts) {
-                        const allShortcuts: string[] = [];
-                        for (const effectiveShortcut of shortcuts) {
-                            allShortcuts.push(effectiveShortcut.split("+")
-                                .map(key => `<kbd>${key}</kbd>`)
-                                .join("+"));
-                        }
-
-                        if (allShortcuts.length) {
-                            const container = $("<span>").addClass("keyboard-shortcut");
-                            container.append($(allShortcuts.join(",")));
-                            $link.append(container);
-                        }
-                    }
-                } else if ("shortcut" in item && item.shortcut) {
+                if ("shortcut" in item && item.shortcut) {
                     $link.append($("<kbd>").text(item.shortcut));
                 }
 
@@ -302,24 +241,16 @@ class ContextMenu {
                     $link.addClass("dropdown-toggle");
 
                     const $subMenu = $("<ul>").addClass("dropdown-menu");
-                    const hasColumns = !!item.columns && item.columns > 1;
-                    if (!this.isMobile && hasColumns) {
-                        $subMenu.css("column-count", item.columns!);
+                    if (!this.isMobile && item.columns) {
+                        $subMenu.css("column-count", item.columns);
                     }
 
-                    this.addItems($subMenu, item.items, hasColumns);
+                    this.addItems($subMenu, item.items);
 
                     $item.append($subMenu);
                 }
 
-                $group.append($item);
-
-                // After adding a menu item, if the previous item was a separator or header,
-                // reset the group so that the next item will be appended directly to the parent.
-                if (shouldResetGroup) {
-                    $group = $parent;
-                    shouldResetGroup = false;
-                };
+                $parent.append($item);
             }
         }
     }

apps/client/src/menus/electron_context_menu.ts

@@ -37,7 +37,7 @@ function setupContextMenu() {
                 handler: () => webContents.session.addWordToSpellCheckerDictionary(params.misspelledWord)
             });
 
-            items.push({ kind: "separator" });
+            items.push({ title: `----` });
         }
 
         if (params.isEditable) {
@@ -112,7 +112,7 @@ function setupContextMenu() {
             // Replace the placeholder with the real search keyword.
             let searchUrl = searchEngineUrl.replace("{keyword}", encodeURIComponent(params.selectionText));
 
-            items.push({ kind: "separator" });
+            items.push({ title: "----" });
 
             items.push({
                 title: t("electron_context_menu.search_online", { term: shortenedSelection, searchEngine: searchEngineName }),

apps/client/src/menus/launcher_context_menu.ts

@@ -45,16 +45,16 @@ export default class LauncherContextMenu implements SelectMenuItemEventListener<
             isVisibleRoot || isAvailableRoot ? { title: t("launcher_context_menu.add-script-launcher"), command: "addScriptLauncher", uiIcon: "bx bx-code-curly" } : null,
             isVisibleRoot || isAvailableRoot ? { title: t("launcher_context_menu.add-custom-widget"), command: "addWidgetLauncher", uiIcon: "bx bx-customize" } : null,
             isVisibleRoot || isAvailableRoot ? { title: t("launcher_context_menu.add-spacer"), command: "addSpacerLauncher", uiIcon: "bx bx-dots-horizontal" } : null,
-            isVisibleRoot || isAvailableRoot ? { kind: "separator" } : null,
+            isVisibleRoot || isAvailableRoot ? { title: "----" } : null,
 
             isAvailableItem ? { title: t("launcher_context_menu.move-to-visible-launchers"), command: "moveLauncherToVisible", uiIcon: "bx bx-show", enabled: true } : null,
             isVisibleItem ? { title: t("launcher_context_menu.move-to-available-launchers"), command: "moveLauncherToAvailable", uiIcon: "bx bx-hide", enabled: true } : null,
-            isVisibleItem || isAvailableItem ? { kind: "separator" } : null,
+            isVisibleItem || isAvailableItem ? { title: "----" } : null,
 
             { title: `${t("launcher_context_menu.duplicate-launcher")}`, command: "duplicateSubtree", uiIcon: "bx bx-outline", enabled: isItem },
             { title: `${t("launcher_context_menu.delete")}`, command: "deleteNotes", uiIcon: "bx bx-trash destructive-action-icon", enabled: canBeDeleted },
 
-            { kind: "separator" },
+            { title: "----" },
 
             { title: t("launcher_context_menu.reset"), command: "resetLauncher", uiIcon: "bx bx-reset destructive-action-icon", enabled: canBeReset }
         ];

apps/client/src/menus/tree_context_menu.ts

@@ -13,8 +13,6 @@ import type NoteTreeWidget from "../widgets/note_tree.js";
 import type FAttachment from "../entities/fattachment.js";
 import type { SelectMenuItemEventListener } from "../components/events.js";
 import utils from "../services/utils.js";
-import attributes from "../services/attributes.js";
-import { executeBulkActions } from "../services/bulk_action.js";
 
 // TODO: Deduplicate once client/server is well split.
 interface ConvertToAttachmentResponse {
@@ -63,11 +61,6 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
         // the only exception is when the only selected note is the one that was right-clicked, then
         // it's clear what the user meant to do.
         const selNodes = this.treeWidget.getSelectedNodes();
-        const selectedNotes = await froca.getNotes(selNodes.map(node => node.data.noteId));
-        if (note && !selectedNotes.includes(note)) selectedNotes.push(note);
-        const isArchived = selectedNotes.every(note => note.isArchived);
-        const canToggleArchived = !selectedNotes.some(note => note.isArchived !== isArchived);
-
         const noSelectedNotes = selNodes.length === 0 || (selNodes.length === 1 && selNodes[0] === this.node);
 
         const notSearch = note?.type !== "search";
@@ -76,29 +69,27 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
         const insertNoteAfterEnabled = isNotRoot && !isHoisted && parentNotSearch;
 
         const items: (MenuItem<TreeCommandNames> | null)[] = [
-            { title: t("tree-context-menu.open-in-a-new-tab"), command: "openInTab", shortcut: "Ctrl+Click", uiIcon: "bx bx-link-external", enabled: noSelectedNotes },
+            { title: `${t("tree-context-menu.open-in-a-new-tab")}`, command: "openInTab", uiIcon: "bx bx-link-external", enabled: noSelectedNotes },
             { title: t("tree-context-menu.open-in-a-new-split"), command: "openNoteInSplit", uiIcon: "bx bx-dock-right", enabled: noSelectedNotes },
             { title: t("tree-context-menu.open-in-popup"), command: "openNoteInPopup", uiIcon: "bx bx-edit", enabled: noSelectedNotes },
 
             isHoisted
                 ? null
                 : {
-                      title: `${t("tree-context-menu.hoist-note")}`,
+                      title: `${t("tree-context-menu.hoist-note")} <kbd data-command="toggleNoteHoisting"></kbd>`,
                       command: "toggleNoteHoisting",
-                      keyboardShortcut: "toggleNoteHoisting",
                       uiIcon: "bx bxs-chevrons-up",
                       enabled: noSelectedNotes && notSearch
                   },
             !isHoisted || !isNotRoot
                 ? null
-                : { title: t("tree-context-menu.unhoist-note"), command: "toggleNoteHoisting", keyboardShortcut: "toggleNoteHoisting", uiIcon: "bx bx-door-open" },
+                : { title: `${t("tree-context-menu.unhoist-note")} <kbd data-command="toggleNoteHoisting"></kbd>`, command: "toggleNoteHoisting", uiIcon: "bx bx-door-open" },
 
-            { kind: "separator" },
+            { title: "----" },
 
             {
-                title: t("tree-context-menu.insert-note-after"),
+                title: `${t("tree-context-menu.insert-note-after")}<kbd data-command="createNoteAfter"></kbd>`,
                 command: "insertNoteAfter",
-                keyboardShortcut: "createNoteAfter",
                 uiIcon: "bx bx-plus",
                 items: insertNoteAfterEnabled ? await noteTypesService.getNoteTypeItems("insertNoteAfter") : null,
                 enabled: insertNoteAfterEnabled && noSelectedNotes && notOptionsOrHelp,
@@ -106,22 +97,21 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
             },
 
             {
-                title: t("tree-context-menu.insert-child-note"),
+                title: `${t("tree-context-menu.insert-child-note")}<kbd data-command="createNoteInto"></kbd>`,
                 command: "insertChildNote",
-                keyboardShortcut: "createNoteInto",
                 uiIcon: "bx bx-plus",
                 items: notSearch ? await noteTypesService.getNoteTypeItems("insertChildNote") : null,
                 enabled: notSearch && noSelectedNotes && notOptionsOrHelp,
                 columns: 2
             },
 
-            { kind: "separator" },
+            { title: "----" },
 
             { title: t("tree-context-menu.protect-subtree"), command: "protectSubtree", uiIcon: "bx bx-check-shield", enabled: noSelectedNotes },
 
             { title: t("tree-context-menu.unprotect-subtree"), command: "unprotectSubtree", uiIcon: "bx bx-shield", enabled: noSelectedNotes },
 
-            { kind: "separator" },
+            { title: "----" },
 
             {
                 title: t("tree-context-menu.advanced"),
@@ -130,52 +120,48 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
                 items: [
                     { title: t("tree-context-menu.apply-bulk-actions"), command: "openBulkActionsDialog", uiIcon: "bx bx-list-plus", enabled: true },
 
-                    { kind: "separator" },
+                    { title: "----" },
 
                     {
-                        title: t("tree-context-menu.edit-branch-prefix"),
+                        title: `${t("tree-context-menu.edit-branch-prefix")} <kbd data-command="editBranchPrefix"></kbd>`,
                         command: "editBranchPrefix",
-                        keyboardShortcut: "editBranchPrefix",
                         uiIcon: "bx bx-rename",
                         enabled: isNotRoot && parentNotSearch && noSelectedNotes && notOptionsOrHelp
                     },
                     { title: t("tree-context-menu.convert-to-attachment"), command: "convertNoteToAttachment", uiIcon: "bx bx-paperclip", enabled: isNotRoot && !isHoisted && notOptionsOrHelp },
 
-                    { kind: "separator" },
+                    { title: "----" },
 
-                    { title: t("tree-context-menu.expand-subtree"), command: "expandSubtree", keyboardShortcut: "expandSubtree", uiIcon: "bx bx-expand", enabled: noSelectedNotes },
-                    { title: t("tree-context-menu.collapse-subtree"), command: "collapseSubtree", keyboardShortcut: "collapseSubtree", uiIcon: "bx bx-collapse", enabled: noSelectedNotes },
+                    { title: `${t("tree-context-menu.expand-subtree")} <kbd data-command="expandSubtree"></kbd>`, command: "expandSubtree", uiIcon: "bx bx-expand", enabled: noSelectedNotes },
+                    { title: `${t("tree-context-menu.collapse-subtree")} <kbd data-command="collapseSubtree"></kbd>`, command: "collapseSubtree", uiIcon: "bx bx-collapse", enabled: noSelectedNotes },
                     {
-                        title: t("tree-context-menu.sort-by"),
+                        title: `${t("tree-context-menu.sort-by")} <kbd data-command="sortChildNotes"></kbd>`,
                         command: "sortChildNotes",
-                        keyboardShortcut: "sortChildNotes",
                         uiIcon: "bx bx-sort-down",
                         enabled: noSelectedNotes && notSearch
                     },
 
-                    { kind: "separator" },
+                    { title: "----" },
 
                     { title: t("tree-context-menu.copy-note-path-to-clipboard"), command: "copyNotePathToClipboard", uiIcon: "bx bx-directions", enabled: true },
                     { title: t("tree-context-menu.recent-changes-in-subtree"), command: "recentChangesInSubtree", uiIcon: "bx bx-history", enabled: noSelectedNotes && notOptionsOrHelp }
                 ]
             },
 
-            { kind: "separator" },
+            { title: "----" },
 
             {
-                title: t("tree-context-menu.cut"),
+                title: `${t("tree-context-menu.cut")} <kbd data-command="cutNotesToClipboard"></kbd>`,
                 command: "cutNotesToClipboard",
-                keyboardShortcut: "cutNotesToClipboard",
                 uiIcon: "bx bx-cut",
                 enabled: isNotRoot && !isHoisted && parentNotSearch
             },
 
-            { title: t("tree-context-menu.copy-clone"), command: "copyNotesToClipboard", keyboardShortcut: "copyNotesToClipboard", uiIcon: "bx bx-copy", enabled: isNotRoot && !isHoisted },
+            { title: `${t("tree-context-menu.copy-clone")} <kbd data-command="copyNotesToClipboard"></kbd>`, command: "copyNotesToClipboard", uiIcon: "bx bx-copy", enabled: isNotRoot && !isHoisted },
 
             {
-                title: t("tree-context-menu.paste-into"),
+                title: `${t("tree-context-menu.paste-into")} <kbd data-command="pasteNotesFromClipboard"></kbd>`,
                 command: "pasteNotesFromClipboard",
-                keyboardShortcut: "pasteNotesFromClipboard",
                 uiIcon: "bx bx-paste",
                 enabled: !clipboard.isClipboardEmpty() && notSearch && noSelectedNotes
             },
@@ -188,71 +174,39 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
             },
 
             {
-                title: t("tree-context-menu.move-to"),
+                title: `${t("tree-context-menu.move-to")} <kbd data-command="moveNotesTo"></kbd>`,
                 command: "moveNotesTo",
-                keyboardShortcut: "moveNotesTo",
                 uiIcon: "bx bx-transfer",
                 enabled: isNotRoot && !isHoisted && parentNotSearch
             },
 
-            { title: t("tree-context-menu.clone-to"), command: "cloneNotesTo", keyboardShortcut: "cloneNotesTo", uiIcon: "bx bx-duplicate", enabled: isNotRoot && !isHoisted },
+            { title: `${t("tree-context-menu.clone-to")} <kbd data-command="cloneNotesTo"></kbd>`, command: "cloneNotesTo", uiIcon: "bx bx-duplicate", enabled: isNotRoot && !isHoisted },
 
             {
-                title: t("tree-context-menu.duplicate"),
+                title: `${t("tree-context-menu.duplicate")} <kbd data-command="duplicateSubtree">`,
                 command: "duplicateSubtree",
-                keyboardShortcut: "duplicateSubtree",
                 uiIcon: "bx bx-outline",
                 enabled: parentNotSearch && isNotRoot && !isHoisted && notOptionsOrHelp
             },
 
             {
-                title: !isArchived ? t("tree-context-menu.archive") : t("tree-context-menu.unarchive"),
-                uiIcon: !isArchived ? "bx bx-archive" : "bx bx-archive-out",
-                enabled: canToggleArchived,
-                handler: () => {
-                    if (!selectedNotes.length) return;
-
-                    if (selectedNotes.length == 1) {
-                        const note = selectedNotes[0];
-                        if (!isArchived) {
-                            attributes.addLabel(note.noteId, "archived");
-                        } else {
-                            attributes.removeOwnedLabelByName(note, "archived");
-                        }
-                    } else {
-                        const noteIds = selectedNotes.map(note => note.noteId);
-                        if (!isArchived) {
-                            executeBulkActions(noteIds, [{
-                                name: "addLabel", labelName: "archived"
-                            }]);
-                        } else {
-                            executeBulkActions(noteIds, [{
-                                name: "deleteLabel", labelName: "archived"
-                            }]);
-                        }
-                    }
-                }
-            },
-            {
-                title: t("tree-context-menu.delete"),
+                title: `${t("tree-context-menu.delete")} <kbd data-command="deleteNotes"></kbd>`,
                 command: "deleteNotes",
-                keyboardShortcut: "deleteNotes",
                 uiIcon: "bx bx-trash destructive-action-icon",
                 enabled: isNotRoot && !isHoisted && parentNotSearch && notOptionsOrHelp
             },
 
-            { kind: "separator" },
+            { title: "----" },
 
             { title: t("tree-context-menu.import-into-note"), command: "importIntoNote", uiIcon: "bx bx-import", enabled: notSearch && noSelectedNotes && notOptionsOrHelp },
 
             { title: t("tree-context-menu.export"), command: "exportNote", uiIcon: "bx bx-export", enabled: notSearch && noSelectedNotes && notOptionsOrHelp },
 
-            { kind: "separator" },
+            { title: "----" },
 
             {
-                title: t("tree-context-menu.search-in-subtree"),
+                title: `${t("tree-context-menu.search-in-subtree")} <kbd data-command="searchInSubtree"></kbd>`,
                 command: "searchInSubtree",
-                keyboardShortcut: "searchInSubtree",
                 uiIcon: "bx bx-search",
                 enabled: notSearch && noSelectedNotes
             }

apps/client/src/mobile.ts

@@ -1,6 +1,7 @@
 import appContext from "./components/app_context.js";
 import noteAutocompleteService from "./services/note_autocomplete.js";
 import glob from "./services/glob.js";
+import "./stylesheets/bootstrap.scss";
 import "boxicons/css/boxicons.min.css";
 import "autocomplete.js/index_jquery.js";
 

apps/client/src/print.css

@@ -1,155 +0,0 @@
-:root {
-    --print-font-size: 11pt;
-    --ck-content-color-image-caption-background: transparent !important;
-}
-
-html,
-body {
-    width: 100%;
-    height: 100%;
-    color: black;
-}
-
-@page {
-    margin: 2cm;
-}
-
-.note-list-widget.full-height,
-.note-list-widget.full-height .note-list-widget-content {
-    height: unset !important;
-}
-
-.component {
-    contain: none !important;
-}
-
-body[data-note-type="text"] .ck-content {
-    font-size: var(--print-font-size);
-    text-align: justify;
-}
-
-.ck-content figcaption {
-    font-style: italic;
-}
-
-.ck-content a {
-    text-decoration: none;
-}
-
-.ck-content a:not([href^="#root/"]) {
-    text-decoration: underline;
-    color: #374a75;
-}
-
-.ck-content .todo-list__label * {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-}
-
-@supports selector(.todo-list__label__description:has(*)) and (height: 1lh) {
-    .ck-content .todo-list__label__description {
-        /* The percentage of the line height that the check box occupies */
-        --box-ratio: 0.75;
-        /* The size of the gap between the check box and the caption */
-        --box-text-gap: 0.25em;
-
-        --box-size: calc(1lh * var(--box-ratio));
-        --box-vert-offset: calc((1lh - var(--box-size)) / 2);
-
-        display: inline-block;
-        padding-inline-start: calc(var(--box-size) + var(--box-text-gap));
-        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e");
-        background-position: 0 var(--box-vert-offset);
-        background-size: var(--box-size);
-        background-repeat: no-repeat;
-    }
-
-    .ck-content .todo-list__label:has(input[type="checkbox"]:checked) .todo-list__label__description {
-        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-outline/ */
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5A2%2c2 0 0%2c0 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5A2%2c2 0 0%2c0 19%2c3M19%2c5V19H5V5H19M10%2c17L6%2c13L7.41%2c11.58L10%2c14.17L16.59%2c7.58L18%2c9' /%3e%3c/svg%3e");
-    }
-
-    .ck-content .todo-list__label input[type="checkbox"] {
-        display: none !important;
-    }
-}
-
-/* #region Footnotes */
-.footnote-reference a,
-.footnote-back-link a {
-    text-decoration: none !important;
-}
-
-li.footnote-item {
-    position: relative;
-    width: fit-content;
-}
-
-.ck-content .footnote-back-link {
-    margin-right: 0.25em;
-}
-
-.ck-content .footnote-content {
-    display: inline-block;
-    width: unset;
-}
-/* #endregion */
-
-/* #region Widows and orphans */
-p,
-blockquote {
-    widows: 4;
-    orphans: 4;
-}
-
-pre > code {
-    widows: 6;
-    orphans: 6;
-    overflow: auto;
-    white-space: pre-wrap !important;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    page-break-after: avoid;
-    break-after: avoid;
-}
-/* #endregion */
-
-/* #region Tables */
-.table thead th,
-.table td,
-.table th {
-    /* Fix center vertical alignment of table cells */
-    vertical-align: middle;
-}
-
-pre {
-    box-shadow: unset !important;
-    border: 0.75pt solid gray !important;
-    border-radius: 2pt !important;
-}
-
-th,
-span[style] {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-}
-/* #endregion */
-
-/* #region Page breaks */
-.page-break {
-    page-break-after: always;
-    break-after: always;
-}
-
-.page-break > *,
-.page-break::after {
-    display: none !important;
-}
-/* #endregion */

apps/client/src/print.tsx

@@ -1,92 +0,0 @@
-import FNote from "./entities/fnote";
-import { render } from "preact";
-import { CustomNoteList } from "./widgets/collections/NoteList";
-import { useCallback, useLayoutEffect, useRef } from "preact/hooks";
-import content_renderer from "./services/content_renderer";
-
-interface RendererProps {
-    note: FNote;
-    onReady: () => void;
-}
-
-async function main() {
-    const notePath = window.location.hash.substring(1);
-    const noteId = notePath.split("/").at(-1);
-    if (!noteId) return;
-
-    await import("./print.css");
-    const froca = (await import("./services/froca")).default;
-    const note = await froca.getNote(noteId);
-
-    render(<App note={note} noteId={noteId} />, document.body);
-}
-
-function App({ note, noteId }: { note: FNote | null | undefined, noteId: string }) {
-    const sentReadyEvent = useRef(false);
-    const onReady = useCallback(() => {
-        if (sentReadyEvent.current) return;
-        window.dispatchEvent(new Event("note-ready"));
-        window._noteReady = true;
-        sentReadyEvent.current = true;
-    }, []);
-    const props: RendererProps | undefined | null = note && { note, onReady };
-
-    if (!note || !props) return <Error404 noteId={noteId} />
-
-    useLayoutEffect(() => {
-        document.body.dataset.noteType = note.type;
-    }, [ note ]);
-
-    return (
-        <>
-            {note.type === "book"
-            ? <CollectionRenderer {...props} />
-            : <SingleNoteRenderer {...props} />
-            }
-        </>
-    );
-}
-
-function SingleNoteRenderer({ note, onReady }: RendererProps) {
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    useLayoutEffect(() => {
-        async function load() {
-            if (note.type === "text") {
-                await import("@triliumnext/ckeditor5/src/theme/ck-content.css");
-            }
-            const { $renderedContent } = await content_renderer.getRenderedContent(note, { noChildrenList: true });
-            containerRef.current?.replaceChildren(...$renderedContent);
-        }
-
-        load().then(() => requestAnimationFrame(onReady))
-    }, [ note ]);
-
-    return <>
-        <h1>{note.title}</h1>
-        <main ref={containerRef} />
-    </>;
-}
-
-function CollectionRenderer({ note, onReady }: RendererProps) {
-    return <CustomNoteList
-        isEnabled
-        note={note}
-        notePath={note.getBestNotePath().join("/")}
-        ntxId="print"
-        highlightedTokens={null}
-        media="print"
-        onReady={onReady}
-    />;
-}
-
-function Error404({ noteId }: { noteId: string }) {
-    return (
-        <main>
-            <p>The note you are trying to print could not be found.</p>
-            <small>{noteId}</small>
-        </main>
-    )
-}
-
-main();

apps/client/src/runtime.ts

@@ -1,15 +1,5 @@
 import $ from "jquery";
-
-async function loadBootstrap() {
-    if (document.body.dir === "rtl") {
-        await import("bootstrap/dist/css/bootstrap.rtl.min.css");
-    } else {
-        await import("bootstrap/dist/css/bootstrap.min.css");
-    }
-}
-
 (window as any).$ = $;
 (window as any).jQuery = $;
-await loadBootstrap();
 
 $("body").show();

apps/client/src/services/branches.ts

@@ -210,7 +210,7 @@ function makeToast(id: string, message: string): ToastOptions {
 }
 
 ws.subscribeToMessages(async (message) => {
-    if (!("taskType" in message) || message.taskType !== "deleteNotes") {
+    if (message.taskType !== "deleteNotes") {
         return;
     }
 
@@ -228,7 +228,7 @@ ws.subscribeToMessages(async (message) => {
 });
 
 ws.subscribeToMessages(async (message) => {
-    if (!("taskType" in message) || message.taskType !== "undeleteNotes") {
+    if (message.taskType !== "undeleteNotes") {
         return;
     }
 

apps/client/src/services/content_renderer.ts

@@ -23,13 +23,11 @@ interface Options {
     tooltip?: boolean;
     trim?: boolean;
     imageHasZoom?: boolean;
-    /** If enabled, it will prevent the default behavior in which an empty note would display a list of children. */
-    noChildrenList?: boolean;
 }
 
 const CODE_MIME_TYPES = new Set(["application/json"]);
 
-export async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: Options = {}) {
+async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: Options = {}) {
 
     options = Object.assign(
         {
@@ -44,7 +42,7 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
     const $renderedContent = $('<div class="rendered-content">');
 
     if (type === "text" || type === "book") {
-        await renderText(entity, $renderedContent, options);
+        await renderText(entity, $renderedContent);
     } else if (type === "code") {
         await renderCode(entity, $renderedContent);
     } else if (["image", "canvas", "mindMap"].includes(type)) {
@@ -116,7 +114,7 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
     };
 }
 
-async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: Options = {}) {
+async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>) {
     // entity must be FNote
     const blob = await note.getBlob();
 
@@ -137,7 +135,7 @@ async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HT
         }
 
         await formatCodeBlocks($renderedContent);
-    } else if (note instanceof FNote && !options.noChildrenList) {
+    } else if (note instanceof FNote) {
         await renderChildrenList($renderedContent, note);
     }
 }
@@ -258,19 +256,8 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
             </button>
         `);
 
-        $downloadButton.on("click", (e) => {
-            e.stopPropagation();
-            openService.downloadFileNote(entity.noteId)
-        });
-        $openButton.on("click", async (e) => {
-            const iconEl = $openButton.find("> .bx");
-            iconEl.removeClass("bx bx-link-external");
-            iconEl.addClass("bx bx-loader spin");
-            e.stopPropagation();
-            await openService.openNoteExternally(entity.noteId, entity.mime)
-            iconEl.removeClass("bx bx-loader spin");
-            iconEl.addClass("bx bx-link-external");
-        });
+        $downloadButton.on("click", () => openService.downloadFileNote(entity.noteId));
+        $openButton.on("click", () => openService.openNoteExternally(entity.noteId, entity.mime));
         // open doesn't work for protected notes since it works through a browser which isn't in protected session
         $openButton.toggle(!entity.isProtected);
 

apps/client/src/services/css_class_manager.ts

@@ -1,39 +1,21 @@
-import {readCssVar} from "../utils/css-var";
-import Color, { ColorInstance } from "color";
-
 const registeredClasses = new Set<string>();
 
-// Read the color lightness limits defined in the theme as CSS variables
+function createClassForColor(color: string | null) {
+    if (!color?.trim()) {
+        return "";
+    }
 
-const lightThemeColorMaxLightness = readCssVar(
-                                        document.documentElement,
-                                        "tree-item-light-theme-max-color-lightness"
-                                    ).asNumber(70);
+    const normalizedColorName = color.replace(/[^a-z0-9]/gi, "");
 
-const darkThemeColorMinLightness = readCssVar(
-                                        document.documentElement,
-                                        "tree-item-dark-theme-min-color-lightness"
-                                    ).asNumber(50);
+    if (!normalizedColorName.trim()) {
+        return "";
+    }
 
-function createClassForColor(colorString: string | null) {
-    if (!colorString?.trim()) return "";
-
-    const color = parseColor(colorString);
-    if (!color) return "";
-
-    const className = `color-${color.hex().substring(1)}`;
+    const className = `color-${normalizedColorName}`;
 
     if (!registeredClasses.has(className)) {
-        const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
-                                                   darkThemeColorMinLightness!);
-
-        $("head").append(`<style>
-            .${className}, span.fancytree-active.${className} {
-                --light-theme-custom-color: ${adjustedColor.lightThemeColor};
-                --dark-theme-custom-color: ${adjustedColor.darkThemeColor};
-                --custom-color-hue: ${getHue(color) ?? 'unset'};
-            }
-        </style>`);
+        // make the active fancytree selector more specific than the normal color setting
+        $("head").append(`<style>.${className}, span.fancytree-active.${className} { color: ${color} !important; }</style>`);
 
         registeredClasses.add(className);
     }
@@ -41,41 +23,6 @@ function createClassForColor(colorString: string | null) {
     return className;
 }
 
-function parseColor(color: string) {
-    try {
-        return Color(color);
-    } catch (ex) {
-        console.error(ex);
-    }
-}
-
-/**
- * Returns a pair of colors — one optimized for light themes and the other for dark themes, derived
- * from the specified color to maintain sufficient contrast with each theme.
- * The adjustment is performed by limiting the color’s lightness in the CIELAB color space,
- * according to the lightThemeMaxLightness and darkThemeMinLightness parameters.
- */
-function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: number, darkThemeMinLightness: number) {
-    const labColor = color.lab();
-    const lightness = labColor.l();
-
-    // For the light theme, limit the maximum lightness
-    const lightThemeColor = labColor.l(Math.min(lightness, lightThemeMaxLightness)).hex();
-
-    // For the dark theme, limit the minimum lightness
-    const darkThemeColor = labColor.l(Math.max(lightness, darkThemeMinLightness)).hex();
-
-    return {lightThemeColor, darkThemeColor};
-}
-
-/** Returns the hue of the specified color, or undefined if the color is grayscale. */
-function getHue(color: ColorInstance) {
-    const hslColor = color.hsl();
-    if (hslColor.saturationl() > 0) {
-        return hslColor.hue();
-    }
-}
-
 export default {
     createClassForColor
 };

apps/client/src/services/dialog.ts

@@ -60,7 +60,7 @@ async function confirmDeleteNoteBoxWithNote(title: string) {
     return new Promise<ConfirmDialogResult | undefined>((res) => appContext.triggerCommand("showConfirmDeleteNoteBoxWithNoteDialog", { title, callback: res }));
 }
 
-export async function prompt(props: PromptDialogOptions) {
+async function prompt(props: PromptDialogOptions) {
     return new Promise<string | null>((res) => appContext.triggerCommand("showPromptDialog", { ...props, callback: res }));
 }
 

apps/client/src/services/doc_renderer.ts

@@ -48,6 +48,6 @@ function getUrl(docNameValue: string, language: string) {
     // Cannot have spaces in the URL due to how JQuery.load works.
     docNameValue = docNameValue.replaceAll(" ", "%20");
 
-    const basePath = window.glob.isDev ? window.glob.assetPath + "/.." : window.glob.assetPath;
+    const basePath = window.glob.isDev ? new URL(window.glob.assetPath).pathname : window.glob.assetPath;
     return `${basePath}/doc_notes/${language}/${docNameValue}.html`;
 }

apps/client/src/services/file_watcher.ts

@@ -1,8 +1,16 @@
 import ws from "./ws.js";
 import appContext from "../components/app_context.js";
-import { OpenedFileUpdateStatus } from "@triliumnext/commons";
 
-const fileModificationStatus: Record<string, Record<string, OpenedFileUpdateStatus>> = {
+// TODO: Deduplicate
+interface Message {
+    type: string;
+    entityType: string;
+    entityId: string;
+    lastModifiedMs: number;
+    filePath: string;
+}
+
+const fileModificationStatus: Record<string, Record<string, Message>> = {
     notes: {},
     attachments: {}
 };
@@ -31,7 +39,7 @@ function ignoreModification(entityType: string, entityId: string) {
     delete fileModificationStatus[entityType][entityId];
 }
 
-ws.subscribeToMessages(async message => {
+ws.subscribeToMessages(async (message: Message) => {
     if (message.type !== "openedFileUpdated") {
         return;
     }

apps/client/src/services/froca.ts

@@ -40,23 +40,20 @@ class FrocaImpl implements Froca {
 
     constructor() {
         this.initializedPromise = this.loadInitialTree();
-        this.#clear();
     }
 
     async loadInitialTree() {
         const resp = await server.get<SubtreeResponse>("tree");
 
         // clear the cache only directly before adding new content which is important for e.g., switching to protected session
-        this.#clear();
-        this.addResp(resp);
-    }
 
-    #clear() {
         this.notes = {};
         this.branches = {};
         this.attributes = {};
         this.attachments = {};
         this.blobPromises = {};
+
+        this.addResp(resp);
     }
 
     async loadSubTree(subTreeNoteId: string) {

apps/client/src/services/froca_updater.ts

@@ -8,7 +8,6 @@ import FAttribute, { type FAttributeRow } from "../entities/fattribute.js";
 import FAttachment, { type FAttachmentRow } from "../entities/fattachment.js";
 import type { default as FNote, FNoteRow } from "../entities/fnote.js";
 import type { EntityChange } from "../server_types.js";
-import type { OptionNames } from "@triliumnext/commons";
 
 async function processEntityChanges(entityChanges: EntityChange[]) {
     const loadResults = new LoadResults(entityChanges);
@@ -31,8 +30,9 @@ async function processEntityChanges(entityChanges: EntityChange[]) {
                     continue; // only noise
                 }
 
-                options.set(attributeEntity.name as OptionNames, attributeEntity.value);
-                loadResults.addOption(attributeEntity.name as OptionNames);
+                options.set(attributeEntity.name, attributeEntity.value);
+
+                loadResults.addOption(attributeEntity.name);
             } else if (ec.entityName === "attachments") {
                 processAttachment(loadResults, ec);
             } else if (ec.entityName === "blobs") {

apps/client/src/services/frontend_script_api.ts

@@ -21,7 +21,6 @@ import dayjs from "dayjs";
 import type NoteContext from "../components/note_context.js";
 import type NoteDetailWidget from "../widgets/note_detail.js";
 import type Component from "../components/component.js";
-import { formatLogMessage } from "@triliumnext/commons";
 
 /**
  * A whole number
@@ -456,7 +455,7 @@ export interface Api {
     /**
      * Log given message to the log pane in UI
      */
-    log(message: string | object): void;
+    log(message: string): void;
 }
 
 /**
@@ -697,7 +696,7 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
     this.log = (message) => {
         const { noteId } = this.startNote;
 
-        message = `${utils.now()}: ${formatLogMessage(message)}`;
+        message = `${utils.now()}: ${message}`;
 
         console.log(`Script ${noteId}: ${message}`);
 

apps/client/src/services/i18n.spec.ts

@@ -6,7 +6,7 @@ import { describe, expect, it } from "vitest";
 describe("i18n", () => {
     it("translations are valid JSON", () => {
         for (const locale of LOCALES) {
-            if (locale.contentOnly || locale.id === "en_rtl") {
+            if (locale.contentOnly) {
                 continue;
             }
 

apps/client/src/services/import.ts

@@ -4,7 +4,6 @@ import ws from "./ws.js";
 import utils from "./utils.js";
 import appContext from "../components/app_context.js";
 import { t } from "./i18n.js";
-import { WebSocketMessage } from "@triliumnext/commons";
 
 type BooleanLike = boolean | "true" | "false";
 
@@ -67,7 +66,7 @@ function makeToast(id: string, message: string): ToastOptions {
 }
 
 ws.subscribeToMessages(async (message) => {
-    if (!("taskType" in message) || message.taskType !== "importNotes") {
+    if (message.taskType !== "importNotes") {
         return;
     }
 
@@ -88,8 +87,8 @@ ws.subscribeToMessages(async (message) => {
     }
 });
 
-ws.subscribeToMessages(async (message: WebSocketMessage) => {
-    if (!("taskType" in message) || message.taskType !== "importAttachments") {
+ws.subscribeToMessages(async (message) => {
+    if (message.taskType !== "importAttachments") {
         return;
     }
 

apps/client/src/services/in_app_help.ts

@@ -1,6 +1,6 @@
 import { NoteType } from "@triliumnext/commons";
+import { ViewTypeOptions } from "./note_list_renderer";
 import FNote from "../entities/fnote";
-import { ViewTypeOptions } from "../widgets/collections/interface";
 
 export const byNoteType: Record<Exclude<NoteType, "book">, string | null> = {
     canvas: null,
@@ -27,8 +27,7 @@ export const byBookType: Record<ViewTypeOptions, string | null> = {
     calendar: "xWbu3jpNWapp",
     table: "2FvYrpmOXm29",
     geoMap: "81SGnPGMk7Xc",
-    board: "CtBQqbwXDx1w",
-    presentation: null
+    board: "CtBQqbwXDx1w"
 };
 
 export function getHelpUrlForNote(note: FNote | null | undefined) {

apps/client/src/services/link.ts

@@ -3,8 +3,16 @@ import linkContextMenuService from "../menus/link_context_menu.js";
 import appContext, { type NoteCommandData } from "../components/app_context.js";
 import froca from "./froca.js";
 import utils from "./utils.js";
-import { ALLOWED_PROTOCOLS } from "@triliumnext/commons";
-import { openInCurrentNoteContext } from "../components/note_context.js";
+
+// Be consistent with `allowedSchemes` in `src\services\html_sanitizer.ts`
+// TODO: Deduplicate with server once we can.
+export const ALLOWED_PROTOCOLS = [
+    'http', 'https', 'ftp', 'ftps', 'mailto', 'data', 'evernote', 'file', 'facetime', 'gemini', 'git',
+    'gopher', 'imap', 'irc', 'irc6', 'jabber', 'jar', 'lastfm', 'ldap', 'ldaps', 'magnet', 'message',
+    'mumble', 'nfs', 'onenote', 'pop', 'rmi', 's3', 'sftp', 'skype', 'sms', 'spotify', 'steam', 'svn', 'udp',
+    'view-source', 'vlc', 'vnc', 'ws', 'wss', 'xmpp', 'jdbc', 'slack', 'tel', 'smb', 'zotero', 'geo',
+    'mid'
+];
 
 function getNotePathFromUrl(url: string) {
     const notePathMatch = /#(root[A-Za-z0-9_/]*)$/.exec(url);
@@ -27,7 +35,8 @@ async function getLinkIcon(noteId: string, viewMode: ViewMode | undefined) {
     return icon;
 }
 
-export type ViewMode = "default" | "source" | "attachments" | "contextual-help";
+// TODO: Remove `string` once all the view modes have been mapped.
+type ViewMode = "default" | "source" | "attachments" | "contextual-help" | string;
 
 export interface ViewScope {
     /**
@@ -317,7 +326,21 @@ function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent
                 viewScope
             });
         } else if (isLeftClick) {
-            openInCurrentNoteContext(evt, notePath, viewScope);
+            const ntxId = $(evt?.target as any)
+                .closest("[data-ntx-id]")
+                .attr("data-ntx-id");
+
+            const noteContext = ntxId ? appContext.tabManager.getNoteContextById(ntxId) : appContext.tabManager.getActiveContext();
+
+            if (noteContext) {
+                noteContext.setNote(notePath, { viewScope }).then(() => {
+                    if (noteContext !== appContext.tabManager.getActiveContext()) {
+                        appContext.tabManager.activateNoteContext(noteContext.ntxId);
+                    }
+                });
+            } else {
+                appContext.tabManager.openContextWithNote(notePath, { viewScope, activate: true });
+            }
         }
     } else if (hrefLink) {
         const withinEditLink = $link?.hasClass("ck-link-actions__preview");

apps/client/src/services/load_results.ts

@@ -1,4 +1,4 @@
-import type { AttachmentRow, EtapiTokenRow, OptionNames } from "@triliumnext/commons";
+import type { AttachmentRow, EtapiTokenRow } from "@triliumnext/commons";
 import type { AttributeType } from "../entities/fattribute.js";
 import type { EntityChange } from "../server_types.js";
 
@@ -67,7 +67,7 @@ export default class LoadResults {
     private revisionRows: RevisionRow[];
     private noteReorderings: string[];
     private contentNoteIdToComponentId: ContentNoteIdToComponentIdRow[];
-    private optionNames: OptionNames[];
+    private optionNames: string[];
     private attachmentRows: AttachmentRow[];
     public hasEtapiTokenChanges: boolean = false;
 
@@ -180,11 +180,11 @@ export default class LoadResults {
         return this.contentNoteIdToComponentId.find((l) => l.noteId === noteId && l.componentId !== componentId);
     }
 
-    addOption(name: OptionNames) {
+    addOption(name: string) {
         this.optionNames.push(name);
     }
 
-    isOptionReloaded(name: OptionNames) {
+    isOptionReloaded(name: string) {
         return this.optionNames.includes(name);
     }
 

apps/client/src/services/note_list_renderer.ts

@@ -0,0 +1,71 @@
+import type FNote from "../entities/fnote.js";
+import BoardView from "../widgets/view_widgets/board_view/index.js";
+import CalendarView from "../widgets/view_widgets/calendar_view.js";
+import GeoView from "../widgets/view_widgets/geo_view/index.js";
+import ListOrGridView from "../widgets/view_widgets/list_or_grid_view.js";
+import TableView from "../widgets/view_widgets/table_view/index.js";
+import type { ViewModeArgs } from "../widgets/view_widgets/view_mode.js";
+import type ViewMode from "../widgets/view_widgets/view_mode.js";
+
+const allViewTypes = ["list", "grid", "calendar", "table", "geoMap", "board"] as const;
+export type ArgsWithoutNoteId = Omit<ViewModeArgs, "noteIds">;
+export type ViewTypeOptions = typeof allViewTypes[number];
+
+export default class NoteListRenderer {
+
+    private viewType: ViewTypeOptions;
+    private args: ArgsWithoutNoteId;
+    public viewMode?: ViewMode<any>;
+
+    constructor(args: ArgsWithoutNoteId) {
+        this.args = args;
+        this.viewType = this.#getViewType(args.parentNote);
+    }
+
+    #getViewType(parentNote: FNote): ViewTypeOptions {
+        const viewType = parentNote.getLabelValue("viewType");
+
+        if (!(allViewTypes as readonly string[]).includes(viewType || "")) {
+            // when not explicitly set, decide based on the note type
+            return parentNote.type === "search" ? "list" : "grid";
+        } else {
+            return viewType as ViewTypeOptions;
+        }
+    }
+
+    get isFullHeight() {
+        switch (this.viewType) {
+            case "list":
+            case "grid":
+                return false;
+            default:
+                return true;
+        }
+    }
+
+    async renderList() {
+        const args = this.args;
+        const viewMode = this.#buildViewMode(args);
+        this.viewMode = viewMode;
+        await viewMode.beforeRender();
+        return await viewMode.renderList();
+    }
+
+    #buildViewMode(args: ViewModeArgs) {
+        switch (this.viewType) {
+            case "calendar":
+                return new CalendarView(args);
+            case "table":
+                return new TableView(args);
+            case "geoMap":
+                return new GeoView(args);
+            case "board":
+                return new BoardView(args);
+            case "list":
+            case "grid":
+            default:
+                return new ListOrGridView(this.viewType, args);
+        }
+    }
+
+}

apps/client/src/services/note_types.ts

@@ -1,7 +1,7 @@
 import { t } from "./i18n.js";
 import froca from "./froca.js";
 import server from "./server.js";
-import type { MenuCommandItem, MenuItem, MenuItemBadge, MenuSeparatorItem } from "../menus/context_menu.js";
+import type { MenuCommandItem, MenuItem, MenuItemBadge } from "../menus/context_menu.js";
 import type { NoteType } from "../entities/fnote.js";
 import type { TreeCommandNames } from "../menus/tree_context_menu.js";
 
@@ -73,7 +73,7 @@ const BETA_BADGE = {
     title: t("note_types.beta-feature")
 };
 
-const SEPARATOR: MenuSeparatorItem = { kind: "separator" };
+const SEPARATOR = { title: "----" };
 
 const creationDateCache = new Map<string, Date>();
 let rootCreationDate: Date | undefined;
@@ -81,8 +81,8 @@ let rootCreationDate: Date | undefined;
 async function getNoteTypeItems(command?: TreeCommandNames) {
     const items: MenuItem<TreeCommandNames>[] = [
         ...getBlankNoteTypes(command),
-        ...await getBuiltInTemplates(null, command, false),
         ...await getBuiltInTemplates(t("note_types.collections"), command, true),
+        ...await getBuiltInTemplates(null, command, false),
         ...await getUserTemplates(command)
     ];
 
@@ -121,10 +121,7 @@ async function getUserTemplates(command?: TreeCommandNames) {
     }
 
     const items: MenuItem<TreeCommandNames>[] = [
-        {
-            title: t("note_type_chooser.templates"),
-            kind: "header"
-        }
+        SEPARATOR
     ];
 
     for (const templateNote of templateNotes) {
@@ -161,15 +158,15 @@ async function getBuiltInTemplates(title: string | null, command: TreeCommandNam
     if (title) {
         items.push({
             title: title,
-            kind: "header"
+            enabled: false,
+            uiIcon: "bx bx-empty"
         });
     } else {
         items.push(SEPARATOR);
     }
 
     for (const templateNote of childNotes) {
-        if (templateNote.hasLabel("collection") !== filterCollections ||
-            !templateNote.hasLabel("template")) {
+        if (templateNote.hasLabel("collection") !== filterCollections) {
             continue;
         }
 

apps/client/src/services/options.ts

@@ -20,7 +20,7 @@ class Options {
         this.arr = arr;
     }
 
-    get(key: OptionNames) {
+    get(key: string) {
         return this.arr?.[key] as string;
     }
 
@@ -40,7 +40,7 @@ class Options {
         }
     }
 
-    getInt(key: OptionNames) {
+    getInt(key: string) {
         const value = this.arr?.[key];
         if (typeof value === "number") {
             return value;
@@ -52,7 +52,7 @@ class Options {
         return null;
     }
 
-    getFloat(key: OptionNames) {
+    getFloat(key: string) {
         const value = this.arr?.[key];
         if (typeof value !== "string") {
             return null;
@@ -60,15 +60,15 @@ class Options {
         return parseFloat(value);
     }
 
-    is(key: OptionNames) {
+    is(key: string) {
         return this.arr[key] === "true";
     }
 
-    set(key: OptionNames, value: OptionValue) {
+    set(key: string, value: OptionValue) {
         this.arr[key] = value;
     }
 
-    async save(key: OptionNames, value: OptionValue) {
+    async save(key: string, value: OptionValue) {
         this.set(key, value);
 
         const payload: Record<string, OptionValue> = {};
@@ -85,7 +85,7 @@ class Options {
         await server.put<void>("options", newValues);
     }
 
-    async toggle(key: OptionNames) {
+    async toggle(key: string) {
         await this.save(key, (!this.is(key)).toString());
     }
 }

apps/client/src/services/protected_session.ts

@@ -107,11 +107,11 @@ function makeToast(message: Message, title: string, text: string): ToastOptions
 }
 
 ws.subscribeToMessages(async (message) => {
-    if (!("taskType" in message) || message.taskType !== "protectNotes") {
+    if (message.taskType !== "protectNotes") {
         return;
     }
 
-    const isProtecting = message.data?.protect;
+    const isProtecting = message.data.protect;
     const title = isProtecting ? t("protected_session.protecting-title") : t("protected_session.unprotecting-title");
 
     if (message.type === "taskError") {

apps/client/src/services/resizer.ts

@@ -10,10 +10,6 @@ let leftInstance: ReturnType<typeof Split> | null;
 let rightPaneWidth: number;
 let rightInstance: ReturnType<typeof Split> | null;
 
-const noteSplitMap = new Map<string[], ReturnType<typeof Split> | undefined>(); // key: a group of ntxIds, value: the corresponding Split instance
-const noteSplitRafMap = new Map<string[], number>();
-let splitNoteContainer: HTMLElement | undefined;
-
 function setupLeftPaneResizer(leftPaneVisible: boolean) {
     if (leftInstance) {
         leftInstance.destroy();
@@ -87,86 +83,7 @@ function setupRightPaneResizer() {
     }
 }
 
-function findKeyByNtxId(ntxId: string): string[] | undefined {
-    // Find the corresponding key in noteSplitMap based on ntxId
-    for (const key of noteSplitMap.keys()) {
-        if (key.includes(ntxId)) return key;
-    }
-    return undefined;
-}
-
-function setupNoteSplitResizer(ntxIds: string[]) {
-    let targetNtxIds: string[] | undefined;
-    for (const ntxId of ntxIds) {
-        targetNtxIds = findKeyByNtxId(ntxId);
-        if (targetNtxIds) break; 
-    }
-
-    if (targetNtxIds) {
-        noteSplitMap.get(targetNtxIds)?.destroy();
-        for (const id of ntxIds) {
-            if (!targetNtxIds.includes(id)) {
-                targetNtxIds.push(id)
-            };
-        }
-    } else {
-        targetNtxIds = [...ntxIds];
-    }
-    noteSplitMap.set(targetNtxIds, undefined);
-    createSplitInstance(targetNtxIds);
-}
-
-
-function delNoteSplitResizer(ntxIds: string[]) {
-    let targetNtxIds = findKeyByNtxId(ntxIds[0]);
-    if (!targetNtxIds) {
-        return;
-    }
-
-    noteSplitMap.get(targetNtxIds)?.destroy();
-    noteSplitMap.delete(targetNtxIds);
-    targetNtxIds = targetNtxIds.filter(id => !ntxIds.includes(id));
-
-    if (targetNtxIds.length >= 2) {
-        noteSplitMap.set(targetNtxIds, undefined);
-        createSplitInstance(targetNtxIds);
-    }
-}
-
-function moveNoteSplitResizer(ntxId: string) {
-    const targetNtxIds = findKeyByNtxId(ntxId);
-    if (!targetNtxIds) {
-        return;
-    }
-    noteSplitMap.get(targetNtxIds)?.destroy();
-    noteSplitMap.set(targetNtxIds, undefined);
-    createSplitInstance(targetNtxIds);
-}
-
-function createSplitInstance(targetNtxIds: string[]) {
-    const prevRafId = noteSplitRafMap.get(targetNtxIds);
-    if (prevRafId) {
-        cancelAnimationFrame(prevRafId);
-    }
-
-    const rafId = requestAnimationFrame(() => {
-        splitNoteContainer = splitNoteContainer ?? $("#center-pane").find(".split-note-container-widget")[0];
-        const splitPanels = [...splitNoteContainer.querySelectorAll<HTMLElement>(':scope > .note-split')]
-            .filter(el => targetNtxIds.includes(el.getAttribute('data-ntx-id') ?? ""));
-        const splitInstance = Split(splitPanels, {
-            gutterSize: DEFAULT_GUTTER_SIZE,
-            minSize: 150,
-        });
-        noteSplitMap.set(targetNtxIds, splitInstance);
-        noteSplitRafMap.delete(targetNtxIds);
-    });
-    noteSplitRafMap.set(targetNtxIds, rafId);
-}
-
 export default {
     setupLeftPaneResizer,
-    setupRightPaneResizer,
-    setupNoteSplitResizer,
-    delNoteSplitResizer,
-    moveNoteSplitResizer
+    setupRightPaneResizer
 };

apps/client/src/services/shortcuts.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
-import shortcuts, { keyMatches, matchesShortcut, isIMEComposing } from "./shortcuts.js";
+import shortcuts, { keyMatches, matchesShortcut } from "./shortcuts.js";
 
 // Mock utils module
 vi.mock("./utils.js", () => ({
@@ -119,6 +119,11 @@ describe("shortcuts", () => {
             metaKey: options.metaKey || false
         } as KeyboardEvent);
 
+        it("should match simple key shortcuts", () => {
+            const event = createKeyboardEvent({ key: "a", code: "KeyA" });
+            expect(matchesShortcut(event, "a")).toBe(true);
+        });
+
         it("should match shortcuts with modifiers", () => {
             const event = createKeyboardEvent({ key: "a", code: "KeyA", ctrlKey: true });
             expect(matchesShortcut(event, "ctrl+a")).toBe(true);
@@ -143,28 +148,6 @@ describe("shortcuts", () => {
             expect(matchesShortcut(event, "a")).toBe(false);
         });
 
-        it("should not match when no modifiers are used", () => {
-            const event = createKeyboardEvent({ key: "a", code: "KeyA" });
-            expect(matchesShortcut(event, "a")).toBe(false);
-        });
-
-        it("should match some keys even with no modifiers", () => {
-            // Bare function keys
-            let event = createKeyboardEvent({ key: "F1", code: "F1" });
-            expect(matchesShortcut(event, "F1")).toBeTruthy();
-            expect(matchesShortcut(event, "f1")).toBeTruthy();
-
-            // Function keys with shift
-            event = createKeyboardEvent({ key: "F1", code: "F1", shiftKey: true });
-            expect(matchesShortcut(event, "Shift+F1")).toBeTruthy();
-
-            // Special keys
-            for (const keyCode of [ "Delete", "Enter" ]) {
-                event = createKeyboardEvent({ key: keyCode, code: keyCode });
-                expect(matchesShortcut(event, keyCode), `Key ${keyCode}`).toBeTruthy();
-            }
-        });
-
         it("should handle alternative modifier names", () => {
             const ctrlEvent = createKeyboardEvent({ key: "a", code: "KeyA", ctrlKey: true });
             expect(matchesShortcut(ctrlEvent, "control+a")).toBe(true);
@@ -337,36 +320,4 @@ describe("shortcuts", () => {
             expect(event.preventDefault).not.toHaveBeenCalled();
         });
     });
-
-    describe('isIMEComposing', () => {
-        it('should return true when event.isComposing is true', () => {
-            const event = { isComposing: true, keyCode: 65 } as KeyboardEvent;
-            expect(isIMEComposing(event)).toBe(true);
-        });
-
-        it('should return true when keyCode is 229', () => {
-            const event = { isComposing: false, keyCode: 229 } as KeyboardEvent;
-            expect(isIMEComposing(event)).toBe(true);
-        });
-
-        it('should return true when both isComposing is true and keyCode is 229', () => {
-            const event = { isComposing: true, keyCode: 229 } as KeyboardEvent;
-            expect(isIMEComposing(event)).toBe(true);
-        });
-
-        it('should return false for normal keys', () => {
-            const event = { isComposing: false, keyCode: 65 } as KeyboardEvent;
-            expect(isIMEComposing(event)).toBe(false);
-        });
-
-        it('should return false when isComposing is undefined and keyCode is not 229', () => {
-            const event = { keyCode: 13 } as KeyboardEvent;
-            expect(isIMEComposing(event)).toBe(false);
-        });
-
-        it('should handle null/undefined events gracefully', () => {
-            expect(isIMEComposing(null as any)).toBe(false);
-            expect(isIMEComposing(undefined as any)).toBe(false);
-        });
-    });
 });

apps/client/src/services/shortcuts.ts

@@ -36,35 +36,8 @@ const keyMap: { [key: string]: string[] } = {
 };
 
 // Function keys
-const functionKeyCodes: string[] = [];
 for (let i = 1; i <= 19; i++) {
-    const keyCode = `F${i}`;
-    functionKeyCodes.push(keyCode);
-    keyMap[`f${i}`] = [ keyCode ];
-}
-
-const KEYCODES_WITH_NO_MODIFIER = new Set([
-    "Delete",
-    "Enter",
-    ...functionKeyCodes
-]);
-
-/**
- * Check if IME (Input Method Editor) is composing
- * This is used to prevent keyboard shortcuts from firing during IME composition
- * @param e - The keyboard event to check
- * @returns true if IME is currently composing, false otherwise
- */
-export function isIMEComposing(e: KeyboardEvent): boolean {
-    // Handle null/undefined events gracefully
-    if (!e) {
-        return false;
-    }
-
-    // Standard check for composition state
-    // e.isComposing is true when IME is actively composing
-    // e.keyCode === 229 is a fallback for older browsers where 229 indicates IME processing
-    return e.isComposing || e.keyCode === 229;
+    keyMap[`f${i}`] = [`F${i}`];
 }
 
 function removeGlobalShortcut(namespace: string) {
@@ -95,13 +68,6 @@ function bindElShortcut($el: JQuery<ElementType | Element>, keyboardShortcut: st
                 }
 
                 const e = evt as KeyboardEvent;
-
-                // Skip processing if IME is composing to prevent shortcuts from
-                // interfering with text input in CJK languages
-                if (isIMEComposing(e)) {
-                    return;
-                }
-
                 if (matchesShortcut(e, keyboardShortcut)) {
                     e.preventDefault();
                     e.stopPropagation();
@@ -171,12 +137,6 @@ export function matchesShortcut(e: KeyboardEvent, shortcut: string): boolean {
     const expectedShift = modifiers.includes('shift');
     const expectedMeta = modifiers.includes('meta') || modifiers.includes('cmd') || modifiers.includes('command');
 
-    // Refuse key combinations that don't include modifiers because they interfere with the normal usage of the application.
-    // Some keys such as function keys are an exception.
-    if (!(expectedCtrl || expectedAlt || expectedShift || expectedMeta) && !KEYCODES_WITH_NO_MODIFIER.has(e.code)) {
-        return false;
-    }
-
     return e.ctrlKey === expectedCtrl &&
            e.altKey === expectedAlt &&
            e.shiftKey === expectedShift &&

apps/client/src/services/syntax_highlight.ts

@@ -61,11 +61,7 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
         highlightedText = highlightAuto(text);
     } else if (normalizedMimeType) {
         await ensureMimeTypesForHighlighting(normalizedMimeType);
-        try {
-            highlightedText = highlight(text, { language: normalizedMimeType });
-        } catch (e) {
-            console.warn("Unable to apply syntax highlight.", e);
-        }
+        highlightedText = highlight(text, { language: normalizedMimeType });
     }
 
     if (highlightedText) {
@@ -80,7 +76,7 @@ export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
 
     // Load theme.
     const currentThemeName = String(options.get("codeBlockTheme"));
-    await loadHighlightingTheme(currentThemeName);
+    loadHighlightingTheme(currentThemeName);
 
     // Load mime types.
     let mimeTypes: MimeType[];
@@ -102,16 +98,17 @@ export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
     highlightingLoaded = true;
 }
 
-export async function loadHighlightingTheme(themeName: string) {
+export function loadHighlightingTheme(themeName: string) {
     const themePrefix = "default:";
     let theme: Theme | null = null;
-    if (glob.device === "print") {
-        theme = Themes.vs;
-    } else if (themeName.includes(themePrefix)) {
+    if (themeName.includes(themePrefix)) {
         theme = Themes[themeName.substring(themePrefix.length)];
     }
+    if (!theme) {
+        theme = Themes.default;
+    }
 
-    await loadTheme(theme ?? Themes.default);
+    loadTheme(theme);
 }
 
 /**

apps/client/src/services/toast.ts

@@ -1,9 +1,10 @@
+import ws from "./ws.js";
 import utils from "./utils.js";
 
 export interface ToastOptions {
     id?: string;
     icon: string;
-    title?: string;
+    title: string;
     message: string;
     delay?: number;
     autohide?: boolean;
@@ -11,32 +12,20 @@ export interface ToastOptions {
 }
 
 function toast(options: ToastOptions) {
-    const $toast = $(options.title
-        ? `\
-            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-                <div class="toast-header">
-                    <strong class="me-auto">
-                        <span class="bx bx-${options.icon}"></span>
-                        <span class="toast-title"></span>
-                    </strong>
-                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-                </div>
-                <div class="toast-body"></div>
-            </div>`
-        : `
-            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-                <div class="toast-icon">
+    const $toast = $(
+        `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header">
+                <strong class="me-auto">
                     <span class="bx bx-${options.icon}"></span>
-                </div>
-                <div class="toast-body"></div>
-                <div class="toast-header">
-                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-                </div>
-            </div>`
+                    <span class="toast-title"></span>
+                </strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body"></div>
+        </div>`
     );
 
-    $toast.toggleClass("no-title", !options.title);
-    $toast.find(".toast-title").text(options.title ?? "");
+    $toast.find(".toast-title").text(options.title);
     $toast.find(".toast-body").html(options.message);
 
     if (options.id) {
@@ -81,6 +70,7 @@ function showMessage(message: string, delay = 2000) {
     console.debug(utils.now(), "message:", message);
 
     toast({
+        title: "Info",
         icon: "check",
         message: message,
         autohide: true,
@@ -92,6 +82,7 @@ export function showError(message: string, delay = 10000) {
     console.log(utils.now(), "error: ", message);
 
     toast({
+        title: "Error",
         icon: "alert",
         message: message,
         autohide: true,

apps/client/src/services/utils.ts

@@ -47,6 +47,27 @@ function parseDate(str: string) {
     }
 }
 
+// Source: https://stackoverflow.com/a/30465299/4898894
+function getMonthsInDateRange(startDate: string, endDate: string) {
+    const start = startDate.split("-");
+    const end = endDate.split("-");
+    const startYear = parseInt(start[0]);
+    const endYear = parseInt(end[0]);
+    const dates: string[] = [];
+
+    for (let i = startYear; i <= endYear; i++) {
+        const endMonth = i != endYear ? 11 : parseInt(end[1]) - 1;
+        const startMon = i === startYear ? parseInt(start[1]) - 1 : 0;
+
+        for (let j = startMon; j <= endMonth; j = j > 12 ? j % 12 || 11 : j + 1) {
+            const month = j + 1;
+            const displayMonth = month < 10 ? "0" + month : month;
+            dates.push([i, displayMonth].join("-"));
+        }
+    }
+    return dates;
+}
+
 function padNum(num: number) {
     return `${num <= 9 ? "0" : ""}${num}`;
 }
@@ -128,18 +149,6 @@ export function isElectron() {
     return !!(window && window.process && window.process.type);
 }
 
-/**
- * Returns `true` if the client is running as a PWA, otherwise `false`.
- */
-export function isPWA() {
-    return (
-        window.matchMedia('(display-mode: standalone)').matches
-        || window.matchMedia('(display-mode: window-controls-overlay)').matches
-        || window.navigator.standalone
-        || window.navigator.windowControlsOverlay
-    );
-}
-
 export function isMac() {
     return navigator.platform.indexOf("Mac") > -1;
 }
@@ -288,54 +297,6 @@ function isHtmlEmpty(html: string) {
     );
 }
 
-function formatHtml(html: string) {
-    let indent = "\n";
-    const tab = "\t";
-    let i = 0;
-    let pre: { indent: string; tag: string }[] = [];
-
-    html = html
-        .replace(new RegExp("<pre>([\\s\\S]+?)?</pre>"), function (x) {
-            pre.push({ indent: "", tag: x });
-            return "<--TEMPPRE" + i++ + "/-->";
-        })
-        .replace(new RegExp("<[^<>]+>[^<]?", "g"), function (x) {
-            let ret;
-            const tagRegEx = /<\/?([^\s/>]+)/.exec(x);
-            let tag = tagRegEx ? tagRegEx[1] : "";
-            let p = new RegExp("<--TEMPPRE(\\d+)/-->").exec(x);
-
-            if (p) {
-                const pInd = parseInt(p[1]);
-                pre[pInd].indent = indent;
-            }
-
-            if (["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr"].indexOf(tag) >= 0) {
-                // self closing tag
-                ret = indent + x;
-            } else {
-                if (x.indexOf("</") < 0) {
-                    //open tag
-                    if (x.charAt(x.length - 1) !== ">") ret = indent + x.substr(0, x.length - 1) + indent + tab + x.substr(x.length - 1, x.length);
-                    else ret = indent + x;
-                    !p && (indent += tab);
-                } else {
-                    //close tag
-                    indent = indent.substr(0, indent.length - 1);
-                    if (x.charAt(x.length - 1) !== ">") ret = indent + x.substr(0, x.length - 1) + indent + x.substr(x.length - 1, x.length);
-                    else ret = indent + x;
-                }
-            }
-            return ret;
-        });
-
-    for (i = pre.length; i--;) {
-        html = html.replace("<--TEMPPRE" + i + "/-->", pre[i].tag.replace("<pre>", "<pre>\n").replace("</pre>", pre[i].indent + "</pre>"));
-    }
-
-    return html.charAt(0) === "\n" ? html.substr(1, html.length - 1) : html;
-}
-
 export async function clearBrowserCache() {
     if (isElectron()) {
         const win = dynamicRequire("@electron/remote").getCurrentWindow();
@@ -487,7 +448,7 @@ function sleep(time_ms: number) {
     });
 }
 
-export function escapeRegExp(str: string) {
+function escapeRegExp(str: string) {
     return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
 }
 
@@ -869,23 +830,12 @@ export function getErrorMessage(e: unknown) {
     }
 }
 
-/**
- * Handles left or right placement of e.g. tooltips in case of right-to-left languages. If the current language is a RTL one, then left and right are swapped. Other directions are unaffected.
- * @param placement a string optionally containing a "left" or "right" value.
- * @returns a left/right value swapped if needed, or the same as input otherwise.
- */
-export function handleRightToLeftPlacement<T extends string>(placement: T) {
-    if (!glob.isRtl) return placement;
-    if (placement === "left") return "right";
-    if (placement === "right") return "left";
-    return placement;
-}
-
 export default {
     reloadFrontendApp,
     restartDesktopApp,
     reloadTray,
     parseDate,
+    getMonthsInDateRange,
     formatDateISO,
     formatDateTime,
     formatTimeInterval,
@@ -893,7 +843,6 @@ export default {
     localNowDateTime,
     now,
     isElectron,
-    isPWA,
     isMac,
     isCtrlKey,
     assertArguments,
@@ -906,7 +855,6 @@ export default {
     getNoteTypeClass,
     getMimeTypeClass,
     isHtmlEmpty,
-    formatHtml,
     clearBrowserCache,
     copySelectionToClipboard,
     dynamicRequire,

apps/client/src/services/ws.ts

@@ -6,11 +6,9 @@ import frocaUpdater from "./froca_updater.js";
 import appContext from "../components/app_context.js";
 import { t } from "./i18n.js";
 import type { EntityChange } from "../server_types.js";
-import { WebSocketMessage } from "@triliumnext/commons";
-import toast from "./toast.js";
 
-type MessageHandler = (message: WebSocketMessage) => void;
-let messageHandlers: MessageHandler[] = [];
+type MessageHandler = (message: any) => void;
+const messageHandlers: MessageHandler[] = [];
 
 let ws: WebSocket;
 let lastAcceptedEntityChangeId = window.glob.maxEntityChangeIdAtLoad;
@@ -49,14 +47,10 @@ function logInfo(message: string) {
 window.logError = logError;
 window.logInfo = logInfo;
 
-export function subscribeToMessages(messageHandler: MessageHandler) {
+function subscribeToMessages(messageHandler: MessageHandler) {
     messageHandlers.push(messageHandler);
 }
 
-export function unsubscribeToMessage(messageHandler: MessageHandler) {
-    messageHandlers = messageHandlers.filter(handler => handler !== messageHandler);
-}
-
 // used to serialize frontend update operations
 let consumeQueuePromise: Promise<void> | null = null;
 
@@ -279,17 +273,13 @@ function connectWebSocket() {
 
 async function sendPing() {
     if (Date.now() - lastPingTs > 30000) {
-        console.warn(utils.now(), "Lost websocket connection to the backend");
-        toast.showPersistent({
-            id: "lost-websocket-connection",
-            title: t("ws.lost-websocket-connection-title"),
-            message: t("ws.lost-websocket-connection-message"),
-            icon: "no-signal"
-        });
+        console.log(
+            utils.now(),
+            "Lost websocket connection to the backend. If you keep having this issue repeatedly, you might want to check your reverse proxy (nginx, apache) configuration and allow/unblock WebSocket."
+        );
     }
 
     if (ws.readyState === ws.OPEN) {
-        toast.closePersistent("lost-websocket-connection");
         ws.send(
             JSON.stringify({
                 type: "ping",
@@ -304,8 +294,6 @@ async function sendPing() {
 }
 
 setTimeout(() => {
-    if (glob.device === "print") return;
-
     ws = connectWebSocket();
 
     lastPingTs = Date.now();

apps/client/src/set_password.ts

@@ -1,3 +1,4 @@
+import "./stylesheets/bootstrap.scss";
 import "./stylesheets/auth.css";
 
 // @TriliumNextTODO: is this even needed anymore?

apps/client/src/setup.ts

@@ -1,6 +1,7 @@
 import "jquery";
 import utils from "./services/utils.js";
 import ko from "knockout";
+import "./stylesheets/bootstrap.scss";
 
 // TriliumNextTODO: properly make use of below types
 // type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";

apps/client/src/share.ts

@@ -1,6 +1,6 @@
 import "normalize.css";
 import "boxicons/css/boxicons.min.css";
-import "@triliumnext/ckeditor5/src/theme/ck-content.css";
+import "@triliumnext/ckeditor5/content.css";
 import "@triliumnext/share-theme/styles/index.css";
 import "@triliumnext/share-theme/scripts/index.js";
 

apps/client/src/stylesheets/bootstrap.scss

@@ -0,0 +1,2 @@
+/* Import all of Bootstrap's CSS */
+@use "bootstrap/scss/bootstrap";

apps/client/src/stylesheets/calendar.css

@@ -60,7 +60,7 @@
     appearance: none;
     text-align: center;
     border: 0;
-    border-inline-start: unset;
+    border-left: unset;
     background-color: var(--menu-background-color);
     font-weight: bold;
     outline: 0;
@@ -102,7 +102,7 @@
     content: '';
     position: absolute;
     top: 0;
-    inset-inline-end: 0;
+    right: 0;
     bottom: 0;
     width: 1px;
     background-color: var(--main-border-color);

apps/client/src/stylesheets/llm_chat.css

@@ -299,7 +299,7 @@
     content: '';
     position: absolute;
     top: 0;
-    inset-inline-start: -100%;
+    left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, var(--hover-item-background-color, rgba(0, 0, 0, 0.03)), transparent);
@@ -406,10 +406,10 @@
 
 @keyframes shimmer {
     0% {
-        inset-inline-start: -100%;
+        left: -100%;
     }
     100% {
-        inset-inline-start: 100%;
+        left: 100%;
     }
 }
 

apps/client/src/stylesheets/print.css

@@ -0,0 +1,322 @@
+:root {
+    --main-background-color: white;
+    --root-background: var(--main-background-color);
+    --launcher-pane-background-color: var(--main-background-color);
+    --main-text-color: black;
+    --input-text-color: var(--main-text-color);
+
+    --print-font-size: 11pt;
+}
+
+@page {
+    margin: 2cm;
+}
+
+.ck-content {
+    font-size: var(--print-font-size);
+    text-align: justify;
+}
+
+.note-detail-readonly-text {
+    padding: 0 !important;
+}
+
+.no-print,
+.no-print *,
+.tab-row-container,
+.tab-row-widget,
+.title-bar-buttons,
+#launcher-pane,
+#left-pane,
+#center-pane > *:not(.split-note-container-widget),
+#right-pane,
+.title-row .note-icon-widget,
+.title-row .button-widget,
+.ribbon-container,
+.promoted-attributes-widget,
+.scroll-padding-widget,
+.note-list-widget,
+.spacer {
+    display: none !important;
+}
+
+body.mobile #mobile-sidebar-wrapper,
+body.mobile .classic-toolbar-widget,
+body.mobile .action-button {
+    display: none !important;
+}
+
+body.mobile #detail-container {
+    max-height: unset;
+}
+
+body.mobile .note-title-widget {
+    padding: 0 !important;
+}
+
+body,
+#root-widget,
+#rest-pane > div.component:first-child,
+.note-detail-printable,
+.note-detail-editable-text-editor {
+    height: unset !important;
+    overflow: auto;
+}
+
+.ck.ck-editor__editable_inline {
+    overflow: hidden !important;
+}
+
+.note-title-widget input,
+.note-detail-editable-text,
+.note-detail-editable-text-editor {
+    padding: 0 !important;
+}
+
+html,
+body {
+    width: unset !important;
+    height: unset !important;
+    overflow: visible;
+    position: unset;
+    /* https://github.com/zadam/trilium/issues/3202 */
+    color: black;
+}
+
+#root-widget,
+#horizontal-main-container,
+#rest-pane,
+#vertical-main-container,
+#center-pane,
+.split-note-container-widget,
+.note-split:not(.hidden-ext),
+body.mobile #mobile-rest-container {
+    display: block !important;
+    overflow: auto;
+    border-radius: 0 !important;
+}
+
+#center-pane,
+#rest-pane,
+.note-split,
+body.mobile #detail-container {
+    width: unset !important;
+    max-width: unset !important;
+}
+
+.component {
+    contain: none !important;
+}
+
+/* Respect page breaks */
+.page-break {
+    page-break-after: always;
+    break-after: always;
+}
+
+.page-break > * {
+    display: none !important;
+}
+
+.relation-map-wrapper {
+    height: 100vh !important;
+}
+
+.table thead th,
+.table td,
+.table th {
+    /* Fix center vertical alignment of table cells */
+    vertical-align: middle;
+}
+
+pre {
+    box-shadow: unset !important;
+    border: 0.75pt solid gray !important;
+    border-radius: 2pt !important;
+}
+
+th,
+span[style] {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+}
+
+/*
+ * Text note specific fixes
+ */
+.ck-widget {
+    outline: none !important;
+}
+
+.ck-placeholder,
+.ck-widget__type-around,
+.ck-widget__selection-handle {
+    display: none !important;
+}
+
+.ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused,
+.ck-widget.table td.ck-editor__nested-editable:focus,
+.ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused,
+.ck-widget.table th.ck-editor__nested-editable:focus {
+    background: unset !important;
+    outline: unset !important;
+}
+
+.include-note .include-note-content {
+    max-height: unset !important;
+    overflow: unset !important;
+}
+
+/* TODO: This will break once we translate the language */
+.ck-content pre[data-language="Auto-detected"]:after {
+    display: none !important;
+}
+
+/*
+ * Code note specific fixes.
+ */
+.note-detail-code pre {
+    border: unset !important;
+    border-radius: unset !important;
+}
+
+/*
+ * Links
+ */
+
+.note-detail-printable a {
+    text-decoration: none;
+}
+
+.note-detail-printable a:not([href^="#root/"]) {
+    text-decoration: underline;
+    color: #374a75;
+}
+
+.note-detail-printable a::after {
+    /* Hide the external link trailing arrow */
+    display: none !important;
+}
+
+/*
+ * TODO list check boxes
+ */
+
+.note-detail-printable .todo-list__label * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+}
+
+@supports selector(.todo-list__label__description:has(*)) and (height: 1lh) {
+    .note-detail-printable .todo-list__label__description {
+        /* The percentage of the line height that the check box occupies */
+        --box-ratio: 0.75;
+        /* The size of the gap between the check box and the caption */
+        --box-text-gap: 0.25em;
+
+        --box-size: calc(1lh * var(--box-ratio));
+        --box-vert-offset: calc((1lh - var(--box-size)) / 2);
+
+        display: inline-block;
+        padding-left: calc(var(--box-size) + var(--box-text-gap));
+        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e");
+        background-position: 0 var(--box-vert-offset);
+        background-size: var(--box-size);
+        background-repeat: no-repeat;
+    }
+
+    .note-detail-printable .todo-list__label:has(input[type="checkbox"]:checked) .todo-list__label__description {
+        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-outline/ */
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5A2%2c2 0 0%2c0 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5A2%2c2 0 0%2c0 19%2c3M19%2c5V19H5V5H19M10%2c17L6%2c13L7.41%2c11.58L10%2c14.17L16.59%2c7.58L18%2c9' /%3e%3c/svg%3e");
+    }
+
+    .note-detail-printable .todo-list__label input[type="checkbox"] {
+        display: none !important;
+    }
+}
+
+/*
+ * Blockquotes
+ */
+
+.note-detail-printable blockquote {
+    box-shadow: unset;
+}
+
+/* 
+ * Figures
+ */
+
+.note-detail-printable figcaption {
+    --accented-background-color: transparent;
+
+    font-style: italic;
+}
+
+/*
+ * Footnotes
+ */
+
+.note-detail-printable .footnote-reference a,
+.footnote-back-link a {
+    text-decoration: none;
+}
+
+/* Make the "^" link cover the whole area of the footnote item */
+
+.footnote-section {
+    clear: both;
+}
+
+.note-detail-printable li.footnote-item {
+    position: relative;
+    width: fit-content;
+}
+
+.note-detail-printable .footnote-back-link,
+.note-detail-printable .footnote-back-link *,
+.note-detail-printable .footnote-back-link a {
+    display: block;
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.note-detail-printable .footnote-back-link a {
+    color: transparent;
+}
+
+.note-detail-printable .footnote-content {
+    display: inline-block;
+    width: unset;
+}
+
+/*
+ * Widows and orphans
+ */
+p,
+blockquote {
+    widows: 4;
+    orphans: 4;
+}
+
+pre > code {
+    widows: 6;
+    orphans: 6;
+    overflow: auto;
+    white-space: pre-wrap !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    page-break-after: avoid;
+    break-after: avoid;
+}

apps/client/src/stylesheets/relation_map.css

@@ -62,7 +62,7 @@
 .note-detail-relation-map .endpoint {
     position: absolute;
     bottom: 37%;
-    inset-inline-end: 5px;
+    right: 5px;
     width: 1em;
     height: 1em;
     background-color: #333;

apps/client/src/stylesheets/style.css

@@ -161,8 +161,7 @@ textarea,
     color: var(--muted-text-color);
 }
 
-.form-group.disabled,
-.form-checkbox.disabled {
+.form-group.disabled {
     opacity: 0.5;
     pointer-events: none;
 }
@@ -174,12 +173,12 @@ textarea,
 /* Add a gap between consecutive radios / check boxes */
 label.tn-radio + label.tn-radio,
 label.tn-checkbox + label.tn-checkbox {
-    margin-inline-start: 12px;
+    margin-left: 12px;
 }
 
 label.tn-radio input[type="radio"],
 label.tn-checkbox input[type="checkbox"] {
-    margin-inline-end: .5em;
+    margin-right: .5em;
 }
 
 #left-pane input,
@@ -226,7 +225,7 @@ samp {
 .badge {
     --bs-badge-color: var(--muted-text-color);
 
-    margin-inline-start: 8px;
+    margin-left: 8px;
     background: var(--accented-background-color);
 }
 
@@ -252,6 +251,10 @@ button.close:hover {
     color: var(--main-text-color) !important;
 }
 
+.note-title[readonly] {
+    background: inherit;
+}
+
 .tdialog {
     display: none;
 }
@@ -290,11 +293,6 @@ button.close:hover {
     pointer-events: none;
 }
 
-.icon-action.btn {
-    padding: 0 8px;
-    min-width: unset !important;
-}
-
 .ui-widget-content a:not(.ui-tabs-anchor) {
     color: #337ab7 !important;
 }
@@ -338,8 +336,8 @@ button kbd {
 }
 
 .ui-menu kbd {
-    margin-inline-start: 30px;
-    float: inline-end;
+    margin-left: 30px;
+    float: right;
 }
 
 .suppressed {
@@ -360,23 +358,24 @@ button kbd {
 }
 
 .dropdown-menu,
-.tabulator-popup-container,
-:root .excalidraw .popover {
+.tabulator-popup-container {
     color: var(--menu-text-color) !important;
     font-size: inherit;
-    background: var(--menu-background-color) !important;
+    background-color: var(--menu-background-color) !important;
     user-select: none;
     -webkit-user-select: none;
     --bs-dropdown-zindex: 999;
     --bs-dropdown-link-active-bg: var(--active-item-background-color) !important;
 }
 
+.dropdown-menu .dropdown-divider {
+    break-before: avoid;
+    break-after: avoid;
+}
+
 body.desktop .dropdown-menu,
-body.desktop .tabulator-popup-container,
-:root .excalidraw .dropdown-menu .dropdown-menu-container,
-:root .excalidraw .popover {
+body.desktop .tabulator-popup-container {
     border: 1px solid var(--dropdown-border-color);
-    column-rule: 1px solid var(--dropdown-border-color);
     box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
     animation: dropdown-menu-opening 100ms ease-in;
 }
@@ -395,7 +394,7 @@ body.desktop .tabulator-popup-container,
 }
 
 .dropend .dropdown-toggle::after {
-    margin-inline-start: 0.5em;
+    margin-left: 0.5em;
     color: var(--muted-text-color);
 }
 
@@ -406,7 +405,7 @@ body.desktop .tabulator-popup-container,
 
 .dropdown-menu .disabled .disabled-tooltip {
     pointer-events: all;
-    margin-inline-start: 8px;
+    margin-left: 8px;
     font-size: 0.5em;
     color: var(--disabled-tooltip-icon-color);
     cursor: help;
@@ -418,18 +417,17 @@ body.desktop .tabulator-popup-container,
 }
 
 .dropdown-menu a:hover:not(.disabled),
-.dropdown-item:hover:not(.disabled, .dropdown-container-item),
-.tabulator-menu-item:hover,
-:root .excalidraw .context-menu .context-menu-item:hover {
+.dropdown-item:hover:not(.disabled, .dropdown-item-container),
+.tabulator-menu-item:hover {
     color: var(--hover-item-text-color) !important;
     background-color: var(--hover-item-background-color) !important;
     border-color: var(--hover-item-border-color) !important;
     cursor: pointer;
 }
 
-.dropdown-container-item,
-.dropdown-item.dropdown-container-item:hover,
-.dropdown-container-item:active {
+.dropdown-item-container,
+.dropdown-item-container:hover,
+.dropdown-item-container:active {
     background: transparent;
     cursor: default;
 }
@@ -444,11 +442,9 @@ body #context-menu-container .dropdown-item > span {
     align-items: center;
 }
 
-.dropdown-item span.keyboard-shortcut,
-.dropdown-item *:not(.keyboard-shortcut) > kbd {
+.dropdown-item span.keyboard-shortcut {
     flex-grow: 1;
-    text-align: end;
-    padding-inline-start: 12px;
+    text-align: right;
 }
 
 .dropdown-menu kbd {    
@@ -458,21 +454,16 @@ body #context-menu-container .dropdown-item > span {
     box-shadow: none;
     padding-bottom: 0;
     padding: 0;
+    flex-grow: 1;
+    text-align: right;
 }
 
 .dropdown-item,
-.dropdown-header,
-:root .excalidraw .context-menu .context-menu-item:hover {
+.dropdown-header {
     color: var(--menu-text-color) !important;
     border: 1px solid transparent !important;
 }
 
-/*  This is a workaround for Firefox not supporting break-before / break-after: avoid on columns. 
- *  It usually wraps a menu item followed by a separator / header and another menu item. */
-.dropdown-no-break {
-    break-inside: avoid;
-}
-
 .dropdown-item.disabled,
 .dropdown-item.disabled kbd {
     color: #aaa !important;
@@ -480,9 +471,9 @@ body #context-menu-container .dropdown-item > span {
 
 .dropdown-item.active,
 .dropdown-item:focus {
-    color: var(--active-item-text-color);
-    background-color: var(--active-item-background-color);
-    border-color: var(--active-item-border-color);
+    color: var(--active-item-text-color) !important;
+    background-color: var(--active-item-background-color) !important;
+    border-color: var(--active-item-border-color) !important;
     outline: none;
 }
 
@@ -509,7 +500,7 @@ body #context-menu-container .dropdown-item > span {
 
 body .cm-editor .cm-gutters {
     background-color: inherit !important;
-    border-inline-end: none;
+    border-right: none;
 }
 
 body .cm-editor .cm-placeholder {
@@ -591,10 +582,6 @@ button.btn-sm {
     z-index: 1000;
 }
 
-body[dir=rtl] .ck.ck-block-toolbar-button {
-    transform: translateX(-7px);
-}
-
 pre:not(.hljs) {
     color: var(--main-text-color) !important;
     white-space: pre-wrap;
@@ -613,11 +600,11 @@ pre:not(.hljs) {
 pre > button.copy-button {
     position: absolute;
     top: var(--copy-button-margin-size);
-    inset-inline-end: var(--copy-button-margin-size);
+    right: var(--copy-button-margin-size);
 }
 
 :root pre:has(> button.copy-button) {
-    padding-inline-end: calc(var(--copy-button-width) + (var(--copy-button-margin-size) * 2));
+    padding-right: calc(var(--copy-button-width) + (var(--copy-button-margin-size) * 2));
 }
 
 pre > button.copy-button:hover {
@@ -643,31 +630,31 @@ pre > button.copy-button:active {
 .full-text-search-button {
     cursor: pointer;
     font-size: 1.3em;
-    padding-inline-start: 5px;
-    padding-inline-end: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 .input-clearer-button {
     cursor: pointer;
     font-size: 1.3em;
     background: inherit !important;
-    padding-inline-start: 5px;
-    padding-inline-end: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 .open-external-link-button {
     cursor: pointer;
     font-size: 1.3em;
-    padding-inline-start: 5px;
-    padding-inline-end: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
     padding-top: 8px;
 }
 
 .go-to-selected-note-button {
     cursor: pointer;
     font-size: 1.3em;
-    padding-inline-start: 4px;
-    padding-inline-end: 3px;
+    padding-left: 4px;
+    padding-right: 3px;
 }
 
 .go-to-selected-note-button.disabled,
@@ -680,7 +667,7 @@ pre > button.copy-button:active {
 
 .note-autocomplete-input {
     /* this is for seamless integration of "input clearer" button */
-    border-inline-end: 0;
+    border-right: 0;
 }
 
 table.promoted-attributes-in-tooltip {
@@ -713,10 +700,10 @@ table.promoted-attributes-in-tooltip th {
     border-top-color: var(--main-border-color) !important;
 }
 .bs-tooltip-left .tooltip-arrow::before {
-    border-inline-start-color: var(--main-border-color) !important;
+    border-left-color: var(--main-border-color) !important;
 }
 .bs-tooltip-right .tooltip-arrow::before {
-    border-inline-end-color: var(--main-border-color) !important;
+    border-right-color: var(--main-border-color) !important;
 }
 
 .bs-tooltip-bottom .tooltip-arrow::after {
@@ -726,17 +713,17 @@ table.promoted-attributes-in-tooltip th {
     border-top-color: var(--tooltip-background-color) !important;
 }
 .bs-tooltip-left .tooltip-arrow::after {
-    border-inline-start-color: var(--tooltip-background-color) !important;
+    border-left-color: var(--tooltip-background-color) !important;
 }
 .bs-tooltip-right .tooltip-arrow::after {
-    border-inline-end-color: var(--tooltip-background-color) !important;
+    border-right-color: var(--tooltip-background-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
 .bs-tooltip-left .tooltip-arrow::before {
-    inset-inline-start: -1px;
+    left: -1px;
     border-width: 0.4rem 0 0.4rem 0.4rem;
-    border-inline-start-color: var(--main-border-color) !important;
+    border-left-color: var(--main-border-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
@@ -748,9 +735,9 @@ table.promoted-attributes-in-tooltip th {
 
 .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
 .bs-tooltip-right .tooltip-arrow::before {
-    inset-inline-end: -1px;
+    right: -1px;
     border-width: 0.4rem 0.4rem 0.4rem 0;
-    border-inline-end-color: var(--main-border-color) !important;
+    border-right-color: var(--main-border-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
@@ -762,9 +749,9 @@ table.promoted-attributes-in-tooltip th {
 
 .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::after,
 .bs-tooltip-left .tooltip-arrow::after {
-    inset-inline-start: -1px;
+    left: -1px;
     border-width: 0.4rem 0 0.4rem 0.4rem;
-    border-inline-start-color: var(--tooltip-background-color) !important;
+    border-left-color: var(--tooltip-background-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::after,
@@ -776,9 +763,9 @@ table.promoted-attributes-in-tooltip th {
 
 .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::after,
 .bs-tooltip-right .tooltip-arrow::after {
-    inset-inline-end: -1px;
+    right: -1px;
     border-width: 0.4rem 0.4rem 0.4rem 0;
-    border-inline-end-color: var(--tooltip-background-color) !important;
+    border-right-color: var(--tooltip-background-color) !important;
 }
 
 .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::after,
@@ -797,7 +784,7 @@ table.promoted-attributes-in-tooltip th {
     background-color: var(--tooltip-background-color) !important;
     border: 1px solid var(--main-border-color);
     border-radius: 5px;
-    text-align: start;
+    text-align: left;
     color: var(--main-text-color) !important;
     max-width: 500px;
     box-shadow: 10px 10px 93px -25px #aaaaaa;
@@ -830,7 +817,7 @@ table.promoted-attributes-in-tooltip th {
 
 .note-tooltip-content .open-popup-button {
     position: absolute;
-    inset-inline-end: 15px;
+    right: 15px;
     bottom: 8px;
     font-size: 1.2em;
     color: inherit;
@@ -850,7 +837,7 @@ table.promoted-attributes-in-tooltip th {
 }
 
 .tooltip-inner figure.image-style-side {
-    float: inline-end;
+    float: right;
 }
 
 .tooltip.show {
@@ -899,7 +886,7 @@ table.promoted-attributes-in-tooltip th {
 .aa-dropdown-menu .aa-suggestion .text {
     display: inline-block;
     width: calc(100% - 20px);
-    padding-inline-start: 4px;
+    padding-left: 4px;
 }
 
 .aa-dropdown-menu .aa-suggestion .search-result-title {
@@ -925,7 +912,7 @@ table.promoted-attributes-in-tooltip th {
 }
 
 .help-button {
-    float: inline-end;
+    float: right;
     background: none;
     font-weight: 900;
     color: orange;
@@ -1013,7 +1000,7 @@ svg.ck-icon .note-icon {
     --ck-content-line-height: var(--bs-body-line-height);
 }
 
-:root .ck-content .table table:not(.layout-table) th {
+.ck-content .table table th {
     background-color: var(--accented-background-color);
 }
 
@@ -1042,7 +1029,7 @@ svg.ck-icon .note-icon {
     counter-increment: footnote-counter;
     display: flex;
     list-style: none;
-    margin-inline-start: 0.5em;
+    margin-left: 0.5em;
 }
 
 .ck-content .footnote-item > * {
@@ -1050,13 +1037,13 @@ svg.ck-icon .note-icon {
 }
 
 .ck-content .footnote-back-link {
-    margin-inline-end: 0.1em;
+    margin-right: 0.1em;
     position: relative;
     top: -0.2em;
 }
 
 .ck-content .footnotes .footnote-back-link > sup {
-    margin-inline-end: 0;
+    margin-right: 0;
 }
 
 .ck-content .footnote-item:before {
@@ -1064,8 +1051,8 @@ svg.ck-icon .note-icon {
     display: inline-block;
     min-width: fit-content;
     position: relative;
-    inset-inline-end: 0.2em;
-    text-align: end;
+    right: 0.2em;
+    text-align: right;
 }
 
 .ck-content .footnote-content {
@@ -1081,11 +1068,11 @@ svg.ck-icon .note-icon {
 }
 
 #options-dialog input[type="number"] {
-    text-align: end;
+    text-align: right;
 }
 
 .help-cards ul {
-    padding-inline-start: 20px;
+    padding-left: 20px;
 }
 
 .help-cards kbd {
@@ -1147,27 +1134,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 
 .toast-body {
     white-space: preserve-breaks;
-    overflow: hidden;
-}
-
-.toast.no-title {
-    display: flex;
-    flex-direction: row;
-}
-
-.toast.no-title .toast-icon {
-    display: flex;
-    align-items: center;
-    padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
-}
-
-.toast.no-title .toast-body {
-    padding-inline-start: 0;
-    padding-inline-end: 0;
-}
-
-.toast.no-title .toast-header {
-    background-color: unset !important;
 }
 
 .ck-mentions .ck-button {
@@ -1276,15 +1242,11 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     cursor: row-resize;
 }
 
-.hidden-ext.note-split + .gutter {
-    display: none;
-}
-
 #context-menu-cover.show {
     position: fixed;
     top: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
+    left: 0;
+    right: 0;
     bottom: 0;
     z-index: 1000;
     background: rgba(0, 0, 0, 0.1);
@@ -1297,8 +1259,8 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 
 body.mobile #context-menu-container.mobile-bottom-menu {
     position: fixed !important;
-    inset-inline-start: 0 !important;
-    inset-inline-end: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
     bottom: 0 !important;
     top: unset !important;
     max-height: 70vh;
@@ -1348,7 +1310,7 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu {
 
 .dropdown-submenu > .dropdown-menu {
     top: 0;
-    inset-inline-start: calc(100% - 2px); /* -2px, otherwise there's a small gap between menu and submenu where the hover can disappear */
+    left: calc(100% - 2px); /* -2px, otherwise there's a small gap between menu and submenu where the hover can disappear */
     margin-top: -10px;
     min-width: 15rem;
     /* to make submenu scrollable https://github.com/zadam/trilium/issues/3136 */
@@ -1357,7 +1319,7 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu {
 }
 
 body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
-    inset-inline-start: calc(-100% + 10px);
+    left: calc(-100% + 10px);
 }
 
 .right-dropdown-widget {
@@ -1423,7 +1385,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 
 .ck.ck-slash-command-button__text-part,
 .ck.ck-template-form__text-part {
-    margin-inline-start: 0.5em;
+    margin-left: 0.5em;
     line-height: 1.2em !important;
 }
 
@@ -1454,8 +1416,8 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 .area-expander-text {
-    padding-inline-start: 20px;
-    padding-inline-end: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
     white-space: nowrap;
 }
 
@@ -1501,7 +1463,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     cursor: pointer;
     border: none;
     color: var(--launcher-pane-text-color);
-    background-color: transparent;
+    background: transparent;
     flex-shrink: 0;
 }
 
@@ -1542,16 +1504,16 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         position: fixed !important;
         bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
         top: unset !important;
-        inset-inline-start: 0 !important;
-        inset-inline-end: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
         transform: unset !important;
     }
 
     #mobile-sidebar-container {
         position: fixed;
         top: 0;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
+        left: 0;
+        right: 0;
         bottom: 0;
         z-index: 1000;
         transition: background-color 250ms ease-in-out;
@@ -1566,7 +1528,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     #mobile-sidebar-wrapper {
         position: absolute;
         top: 0;
-        inset-inline-start: 0;
+        left: 0;
         bottom: 0;
         width: 85vw;
         padding-top: env(safe-area-inset-top);
@@ -1598,8 +1560,8 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     body.mobile .modal-dialog {
         position: fixed;
         bottom: 0;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
+        left: 0;
+        right: 0;
         margin: 0 !important;
         max-height: 85vh;        
         display: flex;
@@ -1757,8 +1719,8 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
-    margin-inline-start: 10px;
-    margin-inline-end: 5px;
+    margin-left: 10px;
+    margin-right: 5px;
 }
 
 #right-pane .card-header {
@@ -1798,7 +1760,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 #right-pane .card-body ul {
-    padding-inline-start: 25px;
+    padding-left: 25px;
     margin-bottom: 5px;
 }
 
@@ -1809,8 +1771,9 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 .note-split {
-    margin-inline-start: auto;
-    margin-inline-end: auto;
+    flex-basis: 0; /* so that each split has same width */
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .note-split.full-content-width {
@@ -1829,7 +1792,7 @@ button.close:hover {
 .reference-link .bx {
     position: relative;
     top: 1px;
-    margin-inline-end: 3px;
+    margin-right: 3px;
 }
 
 .options-section:first-of-type h4 {
@@ -1867,7 +1830,7 @@ textarea {
 
 .attachment-help-button {
     display: inline-block;
-    margin-inline-start: 10px;
+    margin-left: 10px;
     vertical-align: middle;
     font-size: 1em;
 }
@@ -1905,6 +1868,11 @@ textarea {
     width: 100%;
 }
 
+.jump-to-note-results .aa-dropdown-menu .aa-suggestion:hover,
+.jump-to-note-results .aa-dropdown-menu .aa-cursor {
+    background-color: var(--hover-item-background-color, #f8f9fa);
+}
+
 /* Command palette styling */
 .jump-to-note-dialog .command-suggestion {
     display: flex;
@@ -1975,7 +1943,7 @@ textarea {
 }
 
 body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
-    padding-inline-start: 1em;
+    padding-left: 1em;
 }
 
 #tab-row-left-spacer {
@@ -1983,12 +1951,8 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
     -webkit-app-region: drag;
 }
 
-body.electron.platform-darwin:not(.native-titlebar) #tab-row-left-spacer {
-    width: 80px;
-}
-
 .tab-row-widget {
-    padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw));
+    padding-right: calc(100vw - env(titlebar-area-width, 100vw));
 }
 
 .tab-row-container .toggle-button {
@@ -2038,20 +2002,16 @@ body.zen .ribbon-container:not(:has(.classic-toolbar-widget.visible)),
 body.zen .ribbon-container:has(.classic-toolbar-widget.visible) .ribbon-top-row,
 body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget.visible)),
 body.zen .note-icon-widget,
-body.zen .title-row .icon-action,
+body.zen .title-row .button-widget,
 body.zen .floating-buttons-children > *:not(.bx-edit-alt),
 body.zen .action-button {
     display: none !important;
 }
 
-body.zen .split-note-container-widget > .gutter {
-    display: unset !important;
-}
-
 body.zen #launcher-pane {
     position: absolute !important;
     top: 0 !important;
-    inset-inline-end: 0 !important;
+    right: 0 !important;
     width: 64px !important;
     height: 64px !important;
     background: transparent !important;
@@ -2062,8 +2022,8 @@ body.zen .title-row {
     display: block !important;
     height: unset !important;
     -webkit-app-region: drag;
-    padding-inline-start: env(titlebar-area-x);
-    padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em);
+    padding-left: env(titlebar-area-x);
+    padding-right: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em);
 }
 
 body.zen .floating-buttons {
@@ -2071,7 +2031,7 @@ body.zen .floating-buttons {
 }
 
 body.zen .floating-buttons-children {
-    inset-inline-end: 0;
+    right: 0;
 }
 
 body.zen .floating-buttons-children .button-widget {
@@ -2230,7 +2190,7 @@ footer.webview-footer button {
 .chat-input {
     width: 100%;
     resize: none;
-    padding-inline-end: 40px;
+    padding-right: 40px;
 }
 
 .chat-buttons {
@@ -2286,13 +2246,14 @@ footer.webview-footer button {
 
 .admonition {
     --accent-color: var(--card-border-color);
-    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
     border: 1px solid var(--accent-color);
+    box-shadow: var(--card-box-shadow);
+    background: var(--card-background-color);
     border-radius: 0.5em;
     padding: 1em;
     margin: 1.25em 0;
     position: relative;
-    padding-inline-start: 2.5em;
+    padding-left: 2.5em;
     overflow: hidden;
 }
 
@@ -2305,7 +2266,7 @@ footer.webview-footer button {
     font-family: boxicons !important;
     position: absolute;
     top: 1em;
-    inset-inline-start: 1em;
+    left: 1em;
 }
 
 .admonition.note { --accent-color: var(--admonition-note-accent-color); }
@@ -2331,18 +2292,18 @@ footer.webview-footer button {
     display: flex;
     align-items: center;
     font-size: 0.9em;
-    margin-inline-end: 15px;
+    margin-right: 15px;
     cursor: pointer;
 }
 
 .chat-option input[type="checkbox"] {
-    margin-inline-end: 5px;
+    margin-right: 5px;
 }
 
 /* Style for thinking process in chat responses */
 .thinking-process {
     background-color: rgba(0, 0, 0, 0.05);
-    border-inline-start: 3px solid var(--main-text-color);
+    border-left: 3px solid var(--main-text-color);
     padding: 10px;
     margin: 10px 0;
     border-radius: 4px;
@@ -2350,23 +2311,23 @@ footer.webview-footer button {
 
 .thinking-step {
     margin-bottom: 8px;
-    padding-inline-start: 10px;
+    padding-left: 10px;
 }
 
 .thinking-step.observation {
-    border-inline-start: 2px solid #69c7ff;
+    border-left: 2px solid #69c7ff;
 }
 
 .thinking-step.hypothesis {
-    border-inline-start: 2px solid #9839f7;
+    border-left: 2px solid #9839f7;
 }
 
 .thinking-step.evidence {
-    border-inline-start: 2px solid #40c025;
+    border-left: 2px solid #40c025;
 }
 
 .thinking-step.conclusion {
-    border-inline-start: 2px solid #e2aa03;
+    border-left: 2px solid #e2aa03;
     font-weight: bold;
 }
 
@@ -2381,17 +2342,17 @@ footer.webview-footer button {
 
 .content-floating-buttons.top-left {
     top: 10px;
-    inset-inline-start: 10px;
+    left: 10px;
 }
 
 .content-floating-buttons.bottom-left {
     bottom: 10px;
-    inset-inline-start: 10px;
+    left: 10px;
 }
 
 .content-floating-buttons.bottom-right {
     bottom: 10px;
-    inset-inline-end: 10px;
+    right: 10px;
 }
 
 .content-floating-buttons button.bx {
@@ -2413,23 +2374,4 @@ footer.webview-footer button {
     max-width: 25vw;
     overflow: hidden;
     text-overflow: ellipsis;
-}
-
-.revision-diff-added {
-    background: rgba(100, 200, 100, 0.5);
-}
-
-.revision-diff-removed {
-    background: rgba(255, 100, 100, 0.5);
-    text-decoration: line-through;
-}
-
-iframe.print-iframe {
-    position: absolute;
-    top: 0;
-    left: -600px;
-    right: -600px;
-    bottom: 0;
-    width: 0;
-    height: 0;
 }

apps/client/src/stylesheets/table.css

@@ -67,13 +67,13 @@
 }
 
 .tabulator div.tabulator-header .tabulator-frozen.tabulator-frozen-left {
-    margin-inline-start: var(--cell-editing-border-width);
+    margin-left: var(--cell-editing-border-width);
 }
 
 .tabulator div.tabulator-header .tabulator-col,
 .tabulator div.tabulator-header .tabulator-frozen.tabulator-frozen-left {
     background: var(--col-header-background-color);
-    border-inline-end: var(--col-header-separator-border);
+    border-right: var(--col-header-separator-border);
 }
 
 /* Table body */
@@ -90,8 +90,8 @@
 }
 
 .tabulator-row .tabulator-cell input {
-    padding-inline-start: var(--cell-horiz-padding-size) !important;
-    padding-inline-end: var(--cell-horiz-padding-size) !important;
+    padding-left: var(--cell-horiz-padding-size) !important;
+    padding-right: var(--cell-horiz-padding-size) !important;
 }
 
 .tabulator-row {
@@ -117,12 +117,12 @@
 /* Cell */
 
 .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
-    margin-inline-end: var(--cell-editing-border-width);
+    margin-right: var(--cell-editing-border-width);
 }
 
 .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left,
 .tabulator-row .tabulator-cell {
-    border-inline-end-color: transparent;
+    border-right-color: transparent;
 }
 
 .tabulator-row .tabulator-cell:not(.tabulator-editable) {
@@ -156,14 +156,14 @@
 /* Align items without children/expander to the ones with. */
 .tabulator-cell[tabulator-field="title"] > span:first-child,         /* 1st level */
 .tabulator-cell[tabulator-field="title"] > div:first-child + span {  /* sub-level */
-    padding-inline-start: 21px;
+    padding-left: 21px;
 }
 
 /* Checkbox cells */
 
 .tabulator .tabulator-cell:has(svg),
 .tabulator .tabulator-cell:has(input[type="checkbox"]) {
-    padding-inline-start: 8px;
+    padding-left: 8px;
     display: inline-flex;
     flex-direction: column;
     justify-content: center;

apps/client/src/stylesheets/theme-dark.css

@@ -1,16 +1,16 @@
 :root {
     --theme-style: dark;
 
-    --main-font-family: Montserrat, sans-serif;
+    --main-font-family: Montserrat;
     --main-font-size: normal;
 
-    --tree-font-family: Montserrat, sans-serif;
+    --tree-font-family: Montserrat;
     --tree-font-size: normal;
 
-    --detail-font-family: Montserrat, sans-serif;
+    --detail-font-family: Montserrat;
     --detail-font-size: normal;
 
-    --monospace-font-family: JetBrainsLight, monospace;
+    --monospace-font-family: JetBrainsLight;
     --monospace-font-size: normal;
 
     --main-background-color: #333;
@@ -82,10 +82,6 @@ body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
 
-#left-pane .fancytree-node.tinted {
-    --custom-color: var(--dark-theme-custom-color);
-}
-
 .excalidraw.theme--dark {
     --theme-filter: invert(80%) hue-rotate(180deg) !important;
 }

apps/client/src/stylesheets/theme-light.css

@@ -5,16 +5,16 @@ html {
     /* either light or dark, colored theme with darker tones are also dark, used e.g. for note map node colors */
     --theme-style: light;
 
-    --main-font-family: Montserrat, sans-serif;
+    --main-font-family: Montserrat;
     --main-font-size: normal;
 
-    --tree-font-family: Montserrat, sans-serif;
+    --tree-font-family: Montserrat;
     --tree-font-size: normal;
 
-    --detail-font-family: Montserrat, sans-serif;
+    --detail-font-family: Montserrat;
     --detail-font-size: normal;
 
-    --monospace-font-family: JetBrainsLight, monospace;
+    --monospace-font-family: JetBrainsLight;
     --monospace-font-size: normal;
 
     --main-background-color: white;
@@ -81,7 +81,3 @@ html {
     --mermaid-theme: default;
     --native-titlebar-background: #ffffff00;
 }
-
-#left-pane .fancytree-node.tinted {
-    --custom-color: var(--light-theme-custom-color);
-}

apps/client/src/stylesheets/theme-next-dark.css

@@ -13,7 +13,6 @@
 
     --theme-style: dark;
     --native-titlebar-background: #00000000;
-    --window-background-color-bgfx: transparent; /* When background effects enabled */
 
     --main-background-color: #272727;
     --main-text-color: #ccc;
@@ -148,20 +147,14 @@
     --launcher-pane-vert-button-hover-background: #ffffff1c;
     --launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
     --launcher-pane-vert-button-focus-outline-color: var(--input-focus-outline-color);
-    --launcher-pane-vert-background-color-bgfx: #00000026; /* When background effects enabled */
 
     --launcher-pane-horiz-border-color: rgb(22, 22, 22);
     --launcher-pane-horiz-background-color: #282828;
-    --launcher-pane-horiz-text-color: #b8b8b8;
+    --launcher-pane-horiz-text-color: #909090;
     --launcher-pane-horiz-button-hover-color: #ffffff;
     --launcher-pane-horiz-button-hover-background: #ffffff1c;
     --launcher-pane-horiz-button-hover-shadow: unset;
     --launcher-pane-horiz-button-focus-outline-color: var(--input-focus-outline-color);
-    --launcher-pane-horiz-background-color-bgfx: #ffffff17; /* When background effects enabled */
-    --launcher-pane-horiz-border-color-bgfx: #00000080; /* When background effects enabled */
-
-    --global-menu-update-available-badge-background-color: #7dbe61;
-    --global-menu-update-available-badge-color: black;
 
     --protected-session-active-icon-color: #8edd8e;
     --sync-status-error-pulse-color: #f47871;
@@ -175,10 +168,9 @@
 
     --tab-close-button-hover-background: #a45353;
     --tab-close-button-hover-color: white;
-    
+
     --active-tab-background-color: #ffffff1c;
     --active-tab-hover-background-color: var(--active-tab-background-color);
-    --active-tab-icon-color: #a9a9a9;
     --active-tab-text-color: #ffffffcd;
     --active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), -1px -1px 3px rgba(0, 0, 0, 0.4);
     --active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, 0.4);
@@ -268,15 +260,6 @@
  * Dark color scheme tweaks
  */
 
-#left-pane .fancytree-node.tinted {
-    --custom-color: var(--dark-theme-custom-color);
-
-    /* The background color of the active item in the note tree.
-     * The --custom-color-hue variable contains the hue of the user-selected note color.
-     * This value is unset for gray tones. */
-    --custom-bg-color: hsl(var(--custom-color-hue), 20%, 33%, 0.4);
-}
-
 body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
@@ -287,4 +270,4 @@ body ::-webkit-calendar-picker-indicator {
 
 body .todo-list input[type="checkbox"]:not(:checked):before {
     border-color: var(--muted-text-color) !important;
-}
+}

apps/client/src/stylesheets/theme-next-light.css

@@ -13,7 +13,6 @@
 
     --theme-style: light;
     --native-titlebar-background: #ffffff00;
-    --window-background-color-bgfx: transparent; /* When background effects enabled */
 
     --main-background-color: white;
     --main-text-color: black;
@@ -122,12 +121,12 @@
     --left-pane-collapsed-border-color: #0000000d;
     --left-pane-background-color: #f2f2f2;
     --left-pane-text-color: #383838;
-    --left-pane-item-hover-background: rgba(0, 0, 0, 0.032);
+    --left-pane-item-hover-background: #eaeaea;
     --left-pane-item-selected-background: white;
     --left-pane-item-selected-color: black;
     --left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-    --left-pane-item-action-button-background: rgba(0, 0, 0, 0.11);
-    --left-pane-item-action-button-color: var(--left-pane-text-color);
+    --left-pane-item-action-button-background: #d7d7d7;
+    --left-pane-item-action-button-color: inherit;
     --left-pane-item-action-button-hover-background: white;
     --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
     --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
@@ -142,7 +141,6 @@
     --launcher-pane-vert-button-hover-background: white;
     --launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.075);
     --launcher-pane-vert-button-focus-outline-color: var(--input-focus-outline-color);
-    --launcher-pane-vert-background-color-bgfx: #00000009; /* When background effects enabled */
 
     --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.1);
     --launcher-pane-horiz-background-color: #fafafa;
@@ -150,11 +148,6 @@
     --launcher-pane-horiz-button-hover-background: var(--icon-button-hover-background);
     --launcher-pane-horiz-button-hover-shadow: unset;
     --launcher-pane-horiz-button-focus-outline-color: var(--input-focus-outline-color);
-    --launcher-pane-horiz-background-color-bgfx: #ffffffb3; /* When background effects enabled */
-    --launcher-pane-horiz-border-color-bgfx: #00000026; /* When background effects enabled */
-
-    --global-menu-update-available-badge-background-color: #4fa450;
-    --global-menu-update-available-badge-color: white;
 
     --protected-session-active-icon-color: #16b516;
     --sync-status-error-pulse-color: #ff5528;
@@ -168,10 +161,9 @@
 
     --tab-close-button-hover-background: #c95a5a;
     --tab-close-button-hover-color: white;
-    
+
     --active-tab-background-color: white;
     --active-tab-hover-background-color: var(--active-tab-background-color);
-    --active-tab-icon-color: gray;
     --active-tab-text-color: black;
     --active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1), -1px -1px 3px rgba(0, 0, 0, 0.05);
     --active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, 0.1);
@@ -261,13 +253,5 @@
     --ck-editor-toolbar-button-on-color: black;
     --ck-editor-toolbar-button-on-shadow: none;
     --ck-editor-toolbar-dropdown-button-open-background: #0000000f;
+
 }
-
-#left-pane .fancytree-node.tinted {
-    --custom-color: var(--light-theme-custom-color);
-
-    /* The background color of the active item in the note tree.
-     * The --custom-color-hue variable contains the hue of the user-selected note color.
-     * This value is unset for gray tones. */
-    --custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1);
-}

apps/client/src/stylesheets/theme-next/base.css

@@ -4,7 +4,6 @@
 @import url(./pages.css);
 @import url(./ribbon.css);
 @import url(./notes/text.css);
-@import url(./notes/canvas.css);
 @import url(./notes/collections/table.css);
 
 @font-face {
@@ -27,7 +26,7 @@
     --detail-font-family: var(--main-font-family);
     --detail-font-size: normal;
 
-    --monospace-font-family: JetBrainsLight, monospace;
+    --monospace-font-family: JetBrainsLight;
     --monospace-font-size: normal;
 
     --left-pane-item-selected-shadow-size: 2px;
@@ -82,20 +81,6 @@
 
     /* Theme capabilities */
     --tab-note-icons: true;
-
-    /* To ensure that a tree item's custom color remains sufficiently contrasted and readable,
-     * the color is adjusted based on the current color scheme (light or dark). The lightness
-     * component of the color represented in the CIELAB color space, will be
-     * constrained to a certain percentage defined below.
-     * 
-     * Note: the tree background may vary when background effects are enabled, so it is recommended
-     * to maintain a higher contrast margin than on the usual note tree solid background. */
-
-    /* The maximum perceptual lightness for the custom color in the light theme (%): */
-    --tree-item-light-theme-max-color-lightness: 60;
-    
-    /* The minimum perceptual lightness for the custom color in the dark theme (%): */
-    --tree-item-dark-theme-min-color-lightness: 65;
 }
 
 body.backdrop-effects-disabled {
@@ -111,13 +96,16 @@ body.backdrop-effects-disabled {
  * supported when this class is used.
  */
 
- .dropdown-menu:not(.static),
- :root .excalidraw .popover {
+ .dropdown-menu:not(.static) {
     border-radius: var(--dropdown-border-radius);
-    padding: var(--padding, var(--menu-padding-size)) !important;
+    padding: var(--menu-padding-size) !important;
     font-size: 0.9rem !important;
 }
 
+.dropdown-menu {
+    --scrollbar-background-color: var(--menu-background-color);
+}
+
 body.mobile .dropdown-menu {
     backdrop-filter: var(--dropdown-backdrop-filter);
     border-radius: var(--dropdown-border-radius);
@@ -130,15 +118,14 @@ body.mobile .dropdown-menu .dropdown-menu {
 }
 
 body.desktop .dropdown-menu::before,
-:root .ck.ck-dropdown__panel::before,
-:root .excalidraw .popover::before {
+:root .ck.ck-dropdown__panel::before {
     content: "";
     backdrop-filter: var(--dropdown-backdrop-filter);
     border-radius: var(--dropdown-border-radius);
     position: absolute;
     top: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
+    left: 0;
+    right: 0;
     bottom: 0;
     z-index: -1;
 }
@@ -165,32 +152,14 @@ body.desktop .dropdown-submenu .dropdown-menu {
 }
 
 .dropdown-item,
-body.mobile .dropdown-submenu .dropdown-toggle,
-.excalidraw .context-menu .context-menu-item {
-    --menu-item-start-padding: 8px;
-    --menu-item-end-padding: 22px;
-    --menu-item-vertical-padding: 2px;
-    
-    padding-top: var(--menu-item-vertical-padding) !important;
-    padding-bottom: var(--menu-item-vertical-padding) !important;
-    padding-inline-start: var(--menu-item-start-padding) !important;
-    padding-inline-end: var(--menu-item-end-padding) !important;
-
+body.mobile .dropdown-submenu .dropdown-toggle {
+    padding: 2px 2px 2px 8px !important;
+    padding-inline-end: 16px !important;
     /* Note: the right padding should also accommodate the submenu arrow. */
     border-radius: 6px;
     cursor: default !important;
 }
 
-:root .dropdown-item:focus-visible {
-    outline: 2px solid var(--input-focus-outline-color) !important;
-    background-color: transparent;
-    color: unset;
-}
-
-:root .dropdown-item:active {
-    background: unset;
-}
-
 body.mobile .dropdown-submenu {
     padding: 0 !important;
 }
@@ -227,8 +196,7 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item keyboard shortcut */
-.dropdown-item kbd,
-.excalidraw .context-menu-item__shortcut {
+.dropdown-item kbd {
     font-family: unset !important;
     font-size: unset !important;
     color: var(--menu-item-keyboard-shortcut-color) !important;
@@ -237,23 +205,21 @@ html body .dropdown-item[disabled] {
 
 .dropdown-item span.keyboard-shortcut {
     color: var(--menu-item-keyboard-shortcut-color) !important;
-    margin-inline-start: 16px;
+    margin-left: 16px;
 }
 
-.dropdown-divider,
-.excalidraw .context-menu hr {
+.dropdown-divider {
     position: relative;
     border-color: transparent !important;
     overflow: visible;
 }
 
-.dropdown-divider::after,
-.excalidraw .context-menu hr::before {
+.dropdown-divider::after {
     position: absolute;
     content: "";
     top: -1px;
-    inset-inline-start: calc(0px - var(--menu-padding-size));
-    inset-inline-end: calc(0px - var(--menu-padding-size));
+    left: calc(0px - var(--menu-padding-size));
+    right: calc(0px - var(--menu-padding-size));
     border-top: 1px solid var(--menu-item-delimiter-color);
 }
 
@@ -265,7 +231,7 @@ html body .dropdown-item[disabled] {
     align-items: center;
     justify-content: center;
     top: 0;
-    inset-inline-end: 0;
+    right: 0;
     margin: unset !important;
     border: unset !important;
     padding: 0 4px;
@@ -274,16 +240,10 @@ html body .dropdown-item[disabled] {
     color: var(--menu-item-arrow-color) !important;
 }
 
-body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdown-toggle::after {
-    content: "\ea4d" !important;
-}
-
 /* Menu item group heading */
 
 /* The heading body */
-.dropdown-menu h6,
-.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
-.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"] {
+.dropdown-menu h6 {
     position: relative;
     background: transparent;
     padding: 1em 8px 14px 8px;
@@ -294,14 +254,12 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
 }
 
 /* The delimiter line */
-.dropdown-menu h6::before,
-.excalidraw .dropdown-menu-container .dropdown-menu-group-title::before,
-.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"]::before {
+.dropdown-menu h6::before {
     content: "";
     position: absolute;
     bottom: 8px;
-    inset-inline-start: calc(0px - var(--menu-padding-size));
-    inset-inline-end: calc(0px - var(--menu-padding-size));
+    left: calc(0px - var(--menu-padding-size));
+    right: calc(0px - var(--menu-padding-size));
     border-top: 1px solid var(--menu-item-delimiter-color);
 }
 
@@ -331,20 +289,6 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
     transform: rotate(270deg);
 }
 
-/* Dropdown item button (used in zoom buttons in global menu) */
-
-li.dropdown-item a.dropdown-item-button {
-    border: unset;
-}
-
-li.dropdown-item a.dropdown-item-button.bx {
-    color: var(--menu-text-color) !important;
-}
-
-li.dropdown-item a.dropdown-item-button:focus-visible {
-    outline: 2px solid var(--input-focus-outline-color) !important;
-}
-
 /*
  * TOASTS
  */
@@ -363,49 +307,30 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     --modal-control-button-color: var(--bs-toast-color);
 
     display: flex;
-    flex-direction: column;
+    flex-direction: row-reverse;
     backdrop-filter: blur(6px);
 }
 
 #toast-container .toast .toast-header {
+    padding: 0 !important;
     background: transparent !important;
     border-bottom: none;
-    color: var(--toast-text-color) !important;
 }
 
-#toast-container .toast .toast-header strong > * {
-    vertical-align: middle;
+#toast-container .toast .toast-header strong {
+    /* The title of the toast is no longer displayed */
+    display: none;
 }
 
 #toast-container .toast .toast-header .btn-close {
-    margin: 0 0 0 12px;
-}
+    margin: 0 var(--bs-toast-padding-x) 0 12px;
 
-#toast-container .toast.no-title {
-    flex-direction: row;
 }
 
 #toast-container .toast .toast-body {
     flex-grow: 1;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding-top: 0;
-}
-
-#toast-container .toast:not(.no-title) .bx {
-    margin-inline-end: 0.5em;
-    font-size: 1.1em;
-    opacity: 0.85;
-}
-
-#toast-container .toast.no-title .bx {
-    margin-inline-end: 0;
-    font-size: 1.3em;
-}
-
-#toast-container .toast.no-title .toast-body {
-    padding-top: var(--bs-toast-padding-x);
-    color: var(--toast-text-color);
 }
 
 /*

apps/client/src/stylesheets/theme-next/dialogs.css

@@ -29,7 +29,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-inline-start: 8px;
+    margin-left: 8px;
     border: 0;
     border-radius: 50%;
     padding: 0;
@@ -56,7 +56,7 @@
 }
 
 .modal .modal-header .help-button {
-    margin-inline-end: 0;
+    margin-right: 0;
     font-size: calc(var(--modal-control-button-size) * .75);
     font-family: unset;
     font-weight: bold;
@@ -141,7 +141,7 @@ div.tn-tool-dialog {
 
 /* Search box wrapper */
 .jump-to-note-dialog .input-group {
-    margin-inline-end: 16px;
+    margin-right: 16px;
 }
 
 .jump-to-note-dialog .input-group:hover {
@@ -197,8 +197,8 @@ div.tn-tool-dialog {
     border: unset;
     padding-top: var(--timeline-item-top-padding);
     padding-bottom: var(--timeline-item-bottom-padding);
-    padding-inline-start: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
-    padding-inline-end: var(--timeline-left-gap);
+    padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
+    padding-right: var(--timeline-left-gap);
     color: var(--active-item-text-color);
 }
 
@@ -259,7 +259,7 @@ div.tn-tool-dialog {
     position: absolute;
     content: "";
     top: var(--connector-top, 0);
-    inset-inline-start: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
+    left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
     bottom: var(--connector-bottom, 0);
     width: var(--timeline-connector-size);
     border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
@@ -291,7 +291,7 @@ div.tn-tool-dialog {
     position: absolute;
     content: "";
     top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos));
-    inset-inline-start: var(--timeline-left-gap);
+    left: var(--timeline-left-gap);
     width: var(--timeline-bullet-size);
     height: var(--timeline-bullet-size);
     border-radius: 50%;
@@ -374,7 +374,7 @@ div.tn-tool-dialog {
 }
 
 .help-dialog .help-cards kbd:first-child {
-    margin-inline-start: 0;
+    margin-left: 0;
 }
 
 /* Inline code - used for Markdown samples */
@@ -392,7 +392,7 @@ div.tn-tool-dialog {
 }
 
 .delete-notes-list .note-path {
-    padding-inline-end: 8px;
+    padding-left: 8px;
 }
 
 /*
@@ -401,7 +401,7 @@ div.tn-tool-dialog {
 
 /* Labels */
 .attr-edit-table th {
-    padding-inline-end: 12px;
+    padding-right: 12px;
     font-weight: normal;
     white-space: nowrap;
 }
@@ -419,5 +419,5 @@ div.tn-tool-dialog {
 }
 
 .note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.bx {
-    margin-inline-end: .25em;
+    margin-right: .25em;
 }

apps/client/src/stylesheets/theme-next/forms.css

@@ -62,7 +62,7 @@ button.btn.btn-secondary span.bx,
 button.btn.btn-sm span.bx,
 button.btn.btn-success span.bx {
     color: var(--cmd-button-icon-color);
-    padding-inline-end: 0.35em;
+    padding-right: 0.35em;
     font-size: 1.2em;
 }
 
@@ -71,7 +71,7 @@ button.btn.btn-primary kbd,
 button.btn.btn-secondary kbd,
 button.btn.btn-sm kbd,
 button.btn.btn-success kbd {
-    margin-inline-start: 0.5em;
+    margin-left: 0.5em;
     background: var(--cmd-button-keyboard-shortcut-background);
     color: var(--cmd-button-keyboard-shortcut-color);
     font-size: 0.6em;
@@ -84,7 +84,7 @@ button.btn.btn-success kbd {
  */
 
 :root .icon-action:not(.global-menu-button),
-:root .tn-tool-button,
+:root .btn.tn-tool-button,
 :root .btn-group .tn-tool-button:not(:last-child),
 :root .btn-group .tn-tool-button:last-child {
     width: var(--icon-button-size);
@@ -96,13 +96,8 @@ button.btn.btn-success kbd {
     color: var(--icon-button-color);
 }
 
-:root .btn-group .icon-action:last-child {
-    border-top-left-radius: unset !important;
-    border-bottom-left-radius: unset !important;
-}
-
 .btn-group .tn-tool-button + .tn-tool-button {
-    margin-inline-start: 4px !important;
+    margin-left: 4px !important;
 }
 
 /* The "x" icon button */
@@ -197,8 +192,8 @@ input[type="password"]:focus,
 input[type="date"]:focus,
 input[type="time"]:focus,
 input[type="datetime-local"]:focus,
-:root input.ck.ck-input-text:not([readonly="true"]):focus,
-:root input.ck.ck-input-number:not([readonly="true"]):focus,
+:root input.ck.ck-input-text:focus,
+:root input.ck.ck-input-number:focus,
 textarea.form-control:focus,
 textarea:focus,
 :root textarea.ck.ck-textarea:focus,
@@ -237,7 +232,7 @@ input::selection,
     outline-offset: 6px;
     background: var(--input-background-color);
     border-radius: 6px;
-    padding-inline-end: 8px;
+    padding-right: 8px;
     color: var(--quick-search-color);
     flex-wrap: nowrap;
 }
@@ -357,20 +352,13 @@ select.form-control,
 
     outline: 3px solid transparent;
     outline-offset: 6px;
-    padding-inline-end: calc(15px + 1.5rem);
-    background: var(--input-background-color) var(--dropdown-arrow);;
+    padding-right: calc(15px + 1.5rem);
+    background: var(--input-background-color) var(--dropdown-arrow);
     color: var(--input-text-color);
     border: unset;
     border-radius: 0.375rem;
 }
 
-body[dir=rtl] select,
-body[dir=rtl] select.form-select,
-body[dir=rtl] select.form-control,
-body[dir=rtl] .select-button.dropdown-toggle.btn {
-    background-position: left 0.75rem center;
-}
-
 select:hover,
 select.form-select:hover,
 select.form-control:hover,
@@ -451,7 +439,7 @@ optgroup {
     content: "\eae1";
     width: 2em;
     height: 100%;
-    inset-inline-end: 0;
+    right: 0;
     top: 0;
     font-size: 1.2em;
     font-family: boxicons;
@@ -469,7 +457,7 @@ optgroup {
         --box-label-gap: 0.5em;
 
         position: relative;
-        padding-inline-start: calc(var(--box-size) + var(--box-label-gap)) !important;
+        padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
         user-select: none;
     }
 
@@ -478,7 +466,7 @@ optgroup {
     label.tn-checkbox > input[type="checkbox"] {
         position: absolute;
         top: 0;
-        inset-inline-start: 0;
+        left: 0;
         width: var(--box-size);
         height: 100%;
         margin: unset;
@@ -492,7 +480,7 @@ optgroup {
         content: "";
         position: absolute;
         top: 50%;
-        inset-inline-start: 0;
+        left: 0;
         translate: 0 -50%;
         width: var(--box-size);
         height: var(--box-size);

apps/client/src/stylesheets/theme-next/llm-chat.css

@@ -19,11 +19,11 @@
 }
 
 .chat-message.user-message {
-    margin-inline-start: auto;
+    margin-left: auto;
 }
 
 .chat-message.assistant-message {
-    margin-inline-end: auto;
+    margin-right: auto;
 }
 
 .message-avatar {
@@ -33,7 +33,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-inline-end: 8px;
+    margin-right: 8px;
 }
 
 .user-message .message-avatar {

apps/client/src/stylesheets/theme-next/notes/canvas.css

@@ -1,261 +0,0 @@
-:root .excalidraw {
-    --ui-font: var(--main-font-family);
-
-
-    /* Button hover background color */
-    --button-hover-bg: var(--hover-item-background-color);
-    --color-surface-high: var(--hover-item-background-color);
-
-
-    --button-active-border: transparent;
-    --color-brand-active: transparent;
-
-    --color-surface-mid: transparent;
-    --color-surface-low: transparent;
-
-    /* Slider colors */
-    --color-slider-track: var(--menu-item-delimiter-color);
-    --color-slider-thumb: var(--muted-text-color);
-
-    /* Selected button icon fill color */
-    --color-on-primary-container: var(--ck-editor-toolbar-button-on-color);
-    --color-primary: var(--ck-editor-toolbar-button-on-color);
-
-    /* Selected button icon background color */
-    --color-surface-primary-container: var(--ck-editor-toolbar-button-on-background);
-    --color-primary-light: var(--ck-editor-toolbar-button-on-background);
-
-    --island-bg-color: var(--floating-button-background-color);
-
-}
-
-/* Dark theme tweaks */
-
-:root body .excalidraw.theme--dark {
-    --color-surface-high: transparent;
-    --color-brand-hover: transparent;
-}
-
-:root .excalidraw.theme--dark.excalidraw .App-mobile-menu,
-:root .excalidraw.theme--dark.excalidraw .App-menu__left {
-    --button-hover-bg: var(--hover-item-background-color);
-}
-
-:root .excalidraw.theme--dark.excalidraw .dropdown-menu-button:hover {
-    --background: var(--hover-item-background-color);
-}
-
-/* Backdrop blur pseudo-element */
-.Island:not(.App-menu__left)::before,
-.excalidraw .picker::before,
-:root .App-menu__left > .panelColumn > fieldset::before,
-:root .App-menu__left > .panelColumn > label::before,
-:root .App-menu__left > .panelColumn > div:has(> *)::before {
-    display: block;
-    position: absolute;
-    content: "";
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    backdrop-filter: blur(10px) saturate(6);
-    z-index: -1;
-}
-
-/* Note's root */
-
-:root .type-canvas {
-    --floating-buttons-vert-offset: 20px;
-}
-
-
-/* Context menus */
-
-/* Context menu - outer wrapper */
-:root .excalidraw .popover {
-    --padding: 0;
-
-    max-width: unset;
-    overflow: hidden;
-    font-family: var(--main-font-family);
-}
-
-/* Context menu - inner wrapper */
-:root .excalidraw .popover > .context-menu {
-    margin: 0;
-    padding: 8px !important;
-    overflow-y: auto;
-    overflow-x: hidden;
-    height: 100%;
-    border: none;
-    padding: 0;
-    box-shadow: none;
-    background: transparent;
-}
-
-/* Context menu item */
-:root .excalidraw .context-menu .context-menu-item {
-    --menu-item-start-padding: 22px;
-
-    border: 1px solid transparent;
-}
-
-/* Context menu item icon */
-:root .excalidraw .dropdown-menu-item__icon {
-    color: var(--menu-item-icon-color);
-}
-
-/* Context menu item label */
-:root .excalidraw .context-menu-item__label,
-:root .excalidraw .context-menu-item.dangerous .context-menu-item__label {
-    color: var(--menu-text-color);
-}
-
-:root .excalidraw .context-menu-item:hover .context-menu-item__label {
-    color: var(--hover-item-text-color);
-}
-
-/* Context menu item keyboard shortcut */
-:root .excalidraw .context-menu-item__shortcut {
-    padding: 0;
-    opacity: 1;
-}
-
-/* Context menu separator */
-.excalidraw .context-menu .context-menu-item-separator {
-    margin: 8px 0;
-    opacity: 1;
-}
-
-/* Main menu */
-
-/* Hide separators - no longer needed as the menu group headers feature a delimiter line */
-.excalidraw .Island.dropdown-menu-container>div:not(:has(>*)) {
-    display: none;
-}
-
-/* Menu group header */
-.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
-.excalidraw .Island.dropdown-menu-container div[data-testid="canvas-background-label"] {
-    margin: 0 !important;
-}
-
-/* Header */
-
-.excalidraw .App-menu.App-menu_top {
-    align-items: center;
-}
-
-.excalidraw .App-menu.App-menu_top .App-menu_top__left {
-    /* Fixes a layout glitch with the header when the options panel is visbile */
-    --gap: 0 !important;
-}
-
-/* The parent element of the "Library" button  */
-.excalidraw .App-menu.App-menu_top > div:nth-child(3) {
-    flex-direction: row-reverse;
-}
-
-/* Panels */
-
-.excalidraw .zoom-actions,
-.undo-redo-buttons {
-    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
-    backdrop-filter: blur(10px) saturate(6);
-}
-
-:root .excalidraw .main-menu-trigger,
-:root .excalidraw .sidebar-trigger,
-:root .excalidraw .help-icon  {
-    box-shadow: none;
-}
-
-/* Selected color outline */
-:root .excalidraw .color-picker__button.active .color-picker__button-outline {
-    box-shadow: 0 0 0 2px var(--input-focus-outline-color);
-}
-
-:root .excalidraw .buttonList label.active {
-    border-color: transparent;
-}
-
-/* Options panel */
-
-.excalidraw .Island.App-menu__left {
-    box-shadow: none;
-    background: transparent;
-    backdrop-filter: none;
-    width: 13.2em;
-}
-
-body[dir=ltr] .excalidraw .Island.App-menu__left {
-    right: 0;
-}
-
-body[dir=rtl] .excalidraw .Island.App-menu__left {
-    left: 0;
-}
-
-:root .App-menu__left > .panelColumn {
-    row-gap: 5px;
-}
-
-/* Options panel card */
-:root .App-menu__left > .panelColumn > fieldset,
-:root .App-menu__left > .panelColumn > label,
-:root .App-menu__left > .panelColumn > div:has(> *) {
-    position: relative;
-    margin: 0;
-    border-radius: 4px;
-    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
-    background: var(--floating-button-background-color);
-    padding: 8px 12px;
-
-    /* backdrop: blur() creates a new stacking context that prevents some popovers like the
-     * arrowheads picker from being positioned correctly. To workaround this, the backdrop blur
-     * effect is applyed using a pseudo-element instead. */
-}
-
-/* Options panel card title */
-:root .App-menu__left fieldset > legend,
-:root .App-menu__left div > h3,
-:root .App-menu__left > .panelColumn > label {
-    text-transform: uppercase;
-    font-size: .65rem;
-    letter-spacing: 1pt;
-    color: var(--muted-text-color);
-}
-
-/* Options panel button bar */
-:root .excalidraw .App-menu__left .buttonList {
-    padding: 0;
-}
-
-/* Picker */
-body[dir=ltr] .excalidraw .App-menu__left .buttonList .picker {
-    translate: -80% 0;
-}
-
-/* Properties panel */
-
-body[dir=ltr] .excalidraw .exc-stats {
-    left: 0;
-}
-
-body[dir=rtl] .excalidraw .exc-stats {
-    right: 0;
-}
-
-/* Sidebar */
-
-.split-note-container-widget > .component.type-canvas:has(.excalidraw-container > .Island.default-sidebar) > .floating-buttons {
-    /* Hide the floating buttons when the sidebar is open */
-    display: none;
-}
-
-/* Pickers */
-
-.excalidraw .picker {
-    position: relative;
-}

apps/client/src/stylesheets/theme-next/notes/text.css

@@ -117,9 +117,9 @@
     content: "";
     position: absolute;
     top: var(--negative-padding);
-    inset-inline-end: var(--negative-padding);
+    right: var(--negative-padding);
     bottom: var(--negative-padding);
-    inset-inline-start: var(--negative-padding);
+    left: var(--negative-padding);
     border-radius: var(--dropdown-border-radius);
     backdrop-filter: var(--dropdown-backdrop-filter);
     z-index: -1;
@@ -210,7 +210,7 @@
 /* Separator */
 :root .ck .ck-list__separator {
     margin: .5em 0;
-    margin-inline-start: calc(0px - var(--ck-editor-popup-padding));
+    margin-left: calc(0px - var(--ck-editor-popup-padding));
     width: calc(100% + (var(--ck-editor-popup-padding) * 2));
     background: var(--menu-item-delimiter-color);
 }
@@ -233,8 +233,8 @@
     position: absolute;
     top: 0;
     bottom: var(--negative-padding);
-    inset-inline-start: var(--negative-padding);
-    inset-inline-end: var(--negative-padding);
+    left: var(--negative-padding);
+    right: var(--negative-padding);
     border-top: 1px solid var(--ck-editor-popup-border-color);
     background: var(--menu-section-background-color);
 }
@@ -255,7 +255,7 @@
 
 :root .ck.ck-toolbar .ck.ck-toolbar__separator {
     background: transparent;
-    border-inline-start: 1px solid var(--ck-color-toolbar-border);
+    border-left: 1px solid var(--ck-color-toolbar-border);
 }
 
 /* The last separator of the toolbar */
@@ -354,8 +354,7 @@
     align-items: center;
     width: 100%;
     margin: 4px;
-    background: color-mix(in srgb, var(--accent) 15%, var(--main-background-color));
-    padding-inline-end: 2em;
+    padding-right: 2em;
     border: 1px solid var(--accent);
     border-radius: 6px;
 }
@@ -493,7 +492,7 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck
     /* Move the label above the text box regardless of the text box state */
     transform: translate(0, calc(-.2em - var(--ck-input-label-height))) !important;
     
-    padding-inline-start: 0 !important;
+    padding-left: 0 !important;
     background: transparent;
     font-size: .85em;
     font-weight: 600;
@@ -557,7 +556,7 @@ pre button.copy-button.icon-action {
 }
 
 :root pre:has(> button.copy-button) {
-    padding-inline-end: calc(var(--icon-button-size) + (var(--copy-button-margin-size) * 2));
+    padding-right: calc(var(--icon-button-size) + (var(--copy-button-margin-size) * 2));
 }
 
 html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
@@ -616,12 +615,12 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
 
 .ck-content blockquote:before {
     content: "“";
-    inset-inline-start: 0.2em;
+    left: 0.2em;
 }
 
 .ck-content blockquote:after {
     content: "”";
-    inset-inline-end: 0.35em;
+    right: 0.35em;
 }
 
 .ck-content h2,

apps/client/src/stylesheets/theme-next/pages.css

@@ -52,7 +52,7 @@
     background-color: #f5f5f5;
 }
 .google-login-btn img {
-    margin-inline-end: 10px;
+    margin-right: 10px;
     width: 18px;
     height: 18px;
 }
@@ -109,11 +109,6 @@
  * NOTE MAP
  */
 
-.note-detail-note-map .fixnodes-type-switcher .tn-tool-button,
-.note-map-widget .fixnodes-type-switcher .tn-tool-button {
-    padding: unset;
-}
-
  .note-detail-note-map .fixnodes-type-switcher .tn-tool-button.toggled {
     color: var(--tab-close-button-hover-background);
 }
@@ -199,7 +194,7 @@ body.desktop .option-section:not(.tn-no-card) {
     color: var(--launcher-pane-text-color);
     margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important;
     margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important;
-    margin-inline-start: calc(-1 * var(--options-card-padding));
+    margin-left: calc(-1 * var(--options-card-padding));
 }
 
 .options-section:not(.tn-no-card) h5 {
@@ -216,8 +211,8 @@ body.desktop .option-section:not(.tn-no-card) {
 .options-section hr {
     --bs-border-width: 2px;
 
-    margin-inline-start: calc(var(--options-card-padding) * -1);
-    margin-inline-end: calc(var(--options-card-padding) * -1);
+    margin-left: calc(var(--options-card-padding) * -1);
+    margin-right: calc(var(--options-card-padding) * -1);
     opacity: 1;
     color: var(--root-background);
 }

apps/client/src/stylesheets/theme-next/ribbon.css

@@ -94,18 +94,19 @@ div.promoted-attributes-container {
 
 /* Note type dropdown */
 
-ul.note-type-dropdown .check {
-    margin-inline-end: 6px;
-}
-
-ul.note-type-dropdown li.dropdown-item {
-    --menu-item-icon-vert-offset: 0;
+div.note-type-dropdown .check {
+    margin-right: 6px;
 }
 
 /* Editability dropdown */
 
-ul.editability-dropdown li.dropdown-item > div {
-    margin-inline-start: 4px;
+div.editability-dropdown a.dropdown-item {
+    padding: 4px 16px 4px 0;
+    align-items: start !important;
+}
+
+.editability-dropdown .dropdown-item .check {
+    margin-left: 4px;
 }
 
 .editability-dropdown .dropdown-item .description {
@@ -142,12 +143,12 @@ ul.editability-dropdown li.dropdown-item > div {
 }
 
 .attribute-list .save-attributes-button {
-    inset-inline-end: 30px;
+    right: 30px;
 }
 
 /* Note path in attribute detail dialog */
 .attr-detail .note-path {
-    margin-inline-start: 8px;
+    margin-left: 8px;
 }
 
 /*

apps/client/src/stylesheets/theme-next/shell.css

@@ -18,7 +18,7 @@
 
 body {
     --native-titlebar-darwin-x-offset: 10;
-    --native-titlebar-darwin-y-offset: 12 !important;
+    --native-titlebar-darwin-y-offset: 17 !important;
 }
 
 body.layout-horizontal {
@@ -36,23 +36,31 @@ body.mobile {
 
 /* #region Mica */
 body.background-effects.platform-win32 {
-    --background-material: tabbed;
-    --launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx);
-    --launcher-pane-horiz-background-color: var(--launcher-pane-horiz-background-color-bgfx);
-    --launcher-pane-vert-background-color: var(--launcher-pane-vert-background-color-bgfx);
-    --tab-background-color: var(--window-background-color-bgfx);
-    --new-tab-button-background: var(--window-background-color-bgfx);
+    --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.15);
+    --launcher-pane-horiz-background-color: rgba(255, 255, 255, 0.7);
+    --launcher-pane-vert-background-color: rgba(255, 255, 255, 0.055);
+    --tab-background-color: transparent;
+    --new-tab-button-background: transparent;
     --active-tab-background-color: var(--launcher-pane-horiz-background-color);
+    --background-material: tabbed;
+}
+
+@media (prefers-color-scheme: dark) {
+    body.background-effects.platform-win32 {
+        --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.5);
+        --launcher-pane-horiz-background-color: rgba(255, 255, 255, 0.09);
+    }
 }
 
 body.background-effects.platform-win32.layout-vertical {
-    --left-pane-background-color: var(--window-background-color-bgfx);
+    --left-pane-background-color: transparent;
+    --left-pane-item-hover-background: rgba(127, 127, 127, 0.05);
     --background-material: mica;
 }
 
 body.background-effects.platform-win32,
 body.background-effects.platform-win32 #root-widget {
-    background: var(--window-background-color-bgfx) !important;
+    background: transparent !important;
 }
 
 body.background-effects.platform-win32.layout-horizontal #horizontal-main-container,
@@ -69,7 +77,7 @@ body.background-effects.platform-win32.layout-vertical #vertical-main-container
 
 /* Add a border to the vertical launch bar if collapsed. */
 body.layout-vertical #horizontal-main-container.left-pane-hidden #launcher-pane.vertical {
-    border-inline-end: 2px solid var(--left-pane-collapsed-border-color);
+    border-right: 2px solid var(--left-pane-collapsed-border-color);
 }
 
 body.background-effects.zen #root-widget {
@@ -81,7 +89,7 @@ body.background-effects.zen #root-widget {
  * Gutter
  */
 
-.gutter {
+ .gutter {
     background: var(--gutter-color) !important;
     transition: background 150ms ease-out;
 }
@@ -100,7 +108,7 @@ body.layout-horizontal > .horizontal {
     align-items: center;
 }
 
-body[dir=ltr] #launcher-container {
+#launcher-container {
     scrollbar-gutter: stable both-edges;
 }
 
@@ -223,7 +231,7 @@ body[dir=ltr] #launcher-container {
 }
 
 #launcher-pane .launcher-button:focus,
-#launcher-pane .global-menu :focus {
+#launcher-pane .global-menu button:focus {
     outline: none;
 }
 
@@ -279,13 +287,16 @@ body[dir=ltr] #launcher-container {
     animation: sync-status-pulse 1s ease-in-out alternate-reverse infinite;
 }
 
-#launcher-pane button.global-menu-button {
-    --update-badge-x-offset: 3%;
-    --update-badge-y-offset: -12%;
-
+#launcher-pane .global-menu-button {
     --hover-item-background-color: transparent;
 }
 
+#launcher-pane.horizontal .global-menu-button .global-menu-button-update-available {
+    right: -23px;
+    bottom: -22px;
+    transform: scale(0.85);
+}
+
 .tooltip .tooltip-arrow {
     display: none;
 }
@@ -301,6 +312,18 @@ body[dir=ltr] #launcher-container {
     color: var(--tooltip-foreground-color) !important;
 }
 
+/*
+ * Global menu
+ */
+
+ .global-menu div.zoom-buttons a {
+    border: unset;
+}
+
+.global-menu div.zoom-buttons a.bx {
+    color: var(--menu-text-color) !important;
+}
+
 /*
  * Calendar
  */
@@ -333,21 +356,6 @@ body[dir=ltr] #launcher-container {
     --select-arrow-svg: initial; /* Disable the dropdown arrow */
 }
 
-/* Week number column */
-.calendar-dropdown-widget .calendar-week-number {
-    transform: rotate(270deg);
-    justify-content: center;
-    padding: 0;
-    opacity: 0.5;
-    font-size: 1em;
-    font-weight: 700;
-    letter-spacing: .5pt;
-}
-
-.calendar-dropdown-widget .calendar-week-number::after {
-    display: none;
-}
-
 @media (max-width: 992px) {
     .calendar-dropdown-widget .calendar-header button {
         margin: 0 !important;
@@ -397,9 +405,9 @@ body[dir=ltr] #launcher-container {
     content: "";
     position: absolute;
     top: var(--vertical-margin);
-    inset-inline-end: var(--horiz-margin);
+    right: var(--horiz-margin);
     bottom: var(--vertical-margin);
-    inset-inline-start: var(--horiz-margin);
+    left: var(--horiz-margin);
     border-radius: 6px;
     background: var(--calendar-day-highlight-background);
     z-index: -1;
@@ -447,7 +455,7 @@ div.bookmark-folder-widget .note-link:hover {
 }
 
 div.bookmark-folder-widget .note-link a {
-    padding-inline-start: 8px;
+    padding-left: 8px;
     color: var(--menu-text-color);
     cursor: default;
 }
@@ -468,8 +476,8 @@ div.bookmark-folder-widget .note-link .bx {
 
 div.quick-search {
     --padding-top: 8px;
-    --padding-inline-start: 8px;
-    --padding-inline-end: 8px;
+    --padding-left: 8px;
+    --padding-right: 8px;
     --padding-bottom: 8px;
 
     position: relative;
@@ -477,7 +485,7 @@ div.quick-search {
     align-items: center;
     height: unset;
     contain: unset;
-    padding: var(--padding-top) var(--padding-inline-end) var(--padding-bottom) var(--padding-inline-start);
+    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
 }
 
 div.quick-search,
@@ -493,9 +501,9 @@ div.quick-search::before {
     position: absolute;
     content: "";
     top: var(--padding-top);
-    inset-inline-start: var(--padding-inline-start);
+    left: var(--padding-left);
     bottom: var(--padding-bottom);
-    inset-inline-end: var(--padding-inline-end);
+    right: var(--padding-right);
     z-index: 0;
     border: 2px solid transparent;
     border-radius: 6px;
@@ -517,7 +525,7 @@ div.quick-search:focus-within:before {
 }
 
 div.quick-search input {
-    padding-inline-start: 15px !important;
+    padding-left: 15px !important;
     box-shadow: unset !important;
     background: transparent !important;
 }
@@ -536,7 +544,7 @@ div.quick-search .search-button {
     justify-content: center;
     width: 25px;
     height: 25px;
-    margin-inline-end: 8px;
+    margin-right: 8px;
     border-radius: 50%;
     padding: 0;
     color: var(--quick-search-color) !important;
@@ -562,21 +570,15 @@ div.quick-search .search-button.show {
     transition: background-color 100ms ease-out !important;
 }
 
+/*
+ * Quick search results
+ */
+
 div.quick-search .dropdown-menu {
     --quick-search-item-delimiter-color: transparent;
     --menu-item-icon-vert-offset: -.065em;
 }
 
-/*
- * TO FIX: The quick search results dropdown has a backdrop issue with the tree panel
- * when background effects are enabled in Electron.
- * As a temporary workaround, the backdrop and transparency are disabled for the
- * vertical layout.
- */
-body.layout-vertical.background-effects div.quick-search .dropdown-menu {    
-    --menu-background-color: var(--menu-background-color-no-backdrop) !important;
-}
-
 /* Item */
 .quick-search .dropdown-menu *.dropdown-item {
     padding: 8px 12px !important;
@@ -628,18 +630,18 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
 }
 
 #left-pane .ui-fancytree ul {
-    padding-inline-start: 10px;
+    padding-left: 10px;
 }
 
 /* The root element of the tree */
 #left-pane .fancytree-container > li:first-child > span {
-    padding-inline-start: 12px;
+    padding-left: 12px;
 }
 
 #left-pane span.fancytree-node.fancytree-active {
     position: relative;
     background: transparent !important;
-    color: var(--custom-color, var(--left-pane-item-selected-color));
+    color: var(--left-pane-item-selected-color) !important;
 }
 
 @keyframes left-pane-item-select {
@@ -655,10 +657,10 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     position: absolute;
     content: "";
     top: var(--left-pane-item-selected-shadow-size);
-    inset-inline-start: var(--left-pane-item-selected-shadow-size);
+    left: var(--left-pane-item-selected-shadow-size);
     bottom: var(--left-pane-item-selected-shadow-size);
-    inset-inline-end: var(--left-pane-item-selected-shadow-size);
-    background: var(--custom-bg-color, var(--left-pane-item-selected-background)) !important;
+    right: var(--left-pane-item-selected-shadow-size);
+    background: var(--left-pane-item-selected-background) !important;
     box-shadow: var(--left-pane-item-selected-shadow);
     border-radius: 6px;
     animation: left-pane-item-select 200ms ease-out;
@@ -673,7 +675,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
 #left-pane span.fancytree-node.protected > span.fancytree-custom-icon:after {
     position: absolute;
     bottom: 0;
-    inset-inline-end: 0;
+    right: 0;
     font-size: 14px;
     content: "\eb4a";
     font-family: "boxicons";
@@ -682,10 +684,6 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     border-radius: 50%;
 }
 
-body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-icon:after {
-    transform: translateX(-25%);
-}
-
 body.mobile .fancytree-expander::before,
 body.mobile .fancytree-title,
 body.mobile .fancytree-node > span {
@@ -700,7 +698,7 @@ body.mobile .fancytree-node > span {
     body.mobile:not(.force-fixed-tree) #mobile-sidebar-wrapper {
         border-top-right-radius: 12px;
         border-bottom-right-radius: 12px;
-        border-inline-end: 1px solid var(--subtle-border-color);
+        border-right: 1px solid var(--subtle-border-color);
     }
 }
 
@@ -718,6 +716,9 @@ body.mobile .fancytree-node > span {
     margin-top: 0; /* Use this to align the icon with the tree view item's caption */
 }
 
+#left-pane span .fancytree-title {
+    margin-top: -5px;
+}
 
 #left-pane span.fancytree-active .fancytree-title {
     font-weight: normal;
@@ -732,7 +733,7 @@ body.mobile .fancytree-node > span {
 }
 
 #left-pane .tree-item-button {
-    margin-inline-end: 6px;
+    margin-right: 6px;
     border: unset;
     border-radius: 50%;
     background: var(--left-pane-item-action-button-background);
@@ -766,12 +767,12 @@ body.mobile .fancytree-node > span {
 /* Toolbar container (collapsed state) */
 #left-pane .tree-actions {
     max-width: var(--tree-actions-toolbar-collapsed-width);
-    inset-inline-end: var(--tree-actions-toolbar-horizontal-margin);
+    right: var(--tree-actions-toolbar-horizontal-margin);
     bottom: var(--tree-actions-toolbar-vertical-margin);
     overflow: hidden;
     border: 1px solid transparent;
     padding: var(--tree-actions-toolbar-padding-size);
-    padding-inline-end: var(--tree-actions-toolbar-collapsed-width);
+    padding-right: var(--tree-actions-toolbar-collapsed-width);
     background: transparent;
     transition:
         max-width 400ms ease-out,
@@ -815,7 +816,7 @@ body.mobile .fancytree-node > span {
     justify-content: center;
     align-items: center;
     top: 50%;
-    inset-inline-end: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2);
+    right: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2);
     width: var(--tree-actions-toolbar-expand-button-size);
     height: var(--tree-actions-toolbar-expand-button-size);
     box-shadow: 2px 2px 6px var(--left-pane-background-color);
@@ -873,10 +874,7 @@ body.mobile .fancytree-node > span {
 }
 
 .tab-row-container .toggle-button {
-    --icon-button-size: 30px;
-    --icon-button-icon-ratio: .6;
-
-    margin: 3px 6px auto 8px !important;
+    margin: 6px 10px !important;
 }
 
 .tab-row-container {
@@ -888,80 +886,6 @@ body.layout-horizontal .tab-row-container {
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
 }
 
-body.electron.background-effects.layout-horizontal .tab-row-container {
-    border-bottom: unset !important;
-}
-
-body.electron.background-effects.layout-horizontal .note-tab-wrapper {
-    top: 1px;
-}
-
-body.electron.background-effects.layout-horizontal .tab-row-container .toggle-button {
-    position: relative;
-}
-
-body.electron.background-effects.layout-horizontal .tab-row-container .toggle-button:after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    inset-inline-start: -10px;
-    inset-inline-end: -10px;
-    top: 32px;
-    height: 1px;
-    border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
-}
-
-body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-left,
-body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-right {
-    position: relative;
-}
-
-body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-inset-inline-start:after,
-body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-inset-inline-end:after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    inset-inline-start: 0px;
-    inset-inline-end: 0px;
-    height: 1px;
-    border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
-}
-
-body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[active]:before {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    inset-inline-start: -32768px;
-    top: var(--tab-height);
-    inset-inline-end: calc(100% - 1px);
-    height: 1px;
-    border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
-}
-
-body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[active]:after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    inset-inline-start: 100%;
-    top: var(--tab-height);
-    inset-inline-end: 0;
-    width: 100vw;
-    height: 1px;
-    border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
-}
-
-body.electron.background-effects.layout-horizontal .tab-row-container .note-new-tab:before {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    inset-inline-start: -4px;
-    top: calc(var(--tab-height), -1);
-    inset-inline-end: 0;
-    width: 100vw;
-    height: 1px;
-    border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
-}
-
 body.layout-vertical.electron.platform-darwin .tab-row-container {
     border-bottom: 1px solid var(--subtle-border-color);
 }
@@ -1043,24 +967,16 @@ body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
     content: "";
     position: absolute;
     top: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
+    left: 0;
+    right: 0;
     height: 3px;
     background-color: var(--workspace-tab-background-color);
 }
 
-body:not([dir=rtl]) .tab-row-widget .note-tab:nth-child(1) {
+.tab-row-widget .note-tab:nth-child(1) {
     transform: translate3d(var(--tab-first-item-horiz-offset), 0, 0);
 }
 
-:root .tab-row-widget .note-tab .note-tab-icon {
-    padding-inline-end: 5px; /* The gap between the icon and the title */
-}
-
-.tab-row-widget .note-tab[active] .note-tab-icon {
-    color: var(--active-tab-icon-color);
-}
-
 .tab-row-widget .note-tab .note-tab-title {
     text-overflow: ellipsis;
 }
@@ -1099,7 +1015,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
 
 .tab-row-widget .note-new-tab {
     position: relative;
-    margin-inline-start: 3px;
+    margin-left: 3px;
     color: transparent; /* Prevent the original "+" from being displayed */
 }
 
@@ -1112,7 +1028,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
     position: absolute;
     content: "";
     top: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
-    inset-inline-start: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
+    left: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
     width: var(--new-tab-button-size);
     height: var(--new-tab-button-size);
     background: var(--new-tab-button-background);
@@ -1137,7 +1053,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
     display: flex;
     position: absolute;
     content: "\ebc0";
-    inset-inline-start: 0;
+    left: 0;
     top: 0;
     width: 100%;
     height: 100%;
@@ -1185,11 +1101,6 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
     /* will-change: opacity; -- causes some weird artifacts to the note menu in split view */
 }
 
-.split-note-container-widget > .gutter {
-    background: var(--root-background) !important;
-    transition: background 150ms ease-out;
-}
-
 /*
  * Ribbon & note header
  */
@@ -1198,6 +1109,10 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
     margin-bottom: 0 !important;
 }
 
+.note-split:not(.hidden-ext) + .note-split:not(.hidden-ext) {
+    border-left: 4px solid var(--root-background);
+}
+
 @keyframes note-entrance {
     from {
         opacity: 0;
@@ -1219,23 +1134,23 @@ body.mobile .note-title {
 }
 
 .title-row > *:first-child {
-    margin-inline-end: 0;
+    margin-right: 0;
 }
 
 .title-row > *:nth-child(2) {
-    margin-inline-start: 0;
+    margin-left: 0;
 }
 
 .title-row {
     /* Aligns the "Create new split" button with the note menu button (the three dots button) */
-    padding-inline-end: 3px;
+    padding-right: 3px;
 }
 
 .note-title-widget input {
     --input-background-color: transparent;
 
     border-radius: 8px;
-    padding-inline-start: 12px;
+    padding-left: 12px;
 }
 
 /* The "Change note icon" button */
@@ -1310,7 +1225,7 @@ body.mobile .note-title {
 /* The promoted attributes section */
 div.promoted-attributes-container {
     display: flex;
-    margin-inline-end: 10%;
+    margin-right: 10%;
     padding: 6px 0;
     gap: 8px;
     align-items: stretch;
@@ -1324,8 +1239,8 @@ div.promoted-attributes-container input {
 
 /* A promoted attribute card */
 div.promoted-attribute-cell {
-    --pa-card-padding-inline-start: 16px;
-    --pa-card-padding-inline-end: 2px;
+    --pa-card-padding-left: 16px;
+    --pa-card-padding-right: 2px;
     --input-background-color: transparent;
 
     box-shadow: 1px 1px 2px var(--promoted-attribute-card-shadow-color);
@@ -1333,7 +1248,7 @@ div.promoted-attribute-cell {
     display: inline-flex;
     margin: 0;
     border-radius: 8px;
-    padding: 2px var(--pa-card-padding-inline-end) 2px var(--pa-card-padding-inline-start);
+    padding: 2px var(--pa-card-padding-right) 2px var(--pa-card-padding-left);
     background: var(--promoted-attribute-card-background-color);
     overflow-y: visible;
 }
@@ -1348,7 +1263,7 @@ div.promoted-attribute-cell {
 /* A promoted attribute card (boolean attribute) */
 div.promoted-attribute-cell:has(input[type="checkbox"]):not(:has(.multiplicity > span)) {
     /* Checbox attribute, without multiplicity */
-    padding-inline-end: var(--pa-card-padding-inline-start);
+    padding-right: var(--pa-card-padding-left);
 }
 
 div.promoted-attribute-cell > * {
@@ -1398,23 +1313,16 @@ div.promoted-attribute-cell .tn-checkbox {
 /* Relocate the checkbox before the label */
 div.promoted-attribute-cell.promoted-attribute-label-boolean > div:first-of-type {
     order: -1;
-    margin-inline-end: 1.5em;
+    margin-right: 1.5em;
 }
 
 /* The element containing the "new attribute" and "remove this attribute button" */
 div.promoted-attribute-cell .multiplicity:has(span) {
     --icon-button-size: 24px;
 
-    margin-inline-start: 8px;
-    margin-inline-end: calc(var(--pa-card-padding-inline-start) - var(--pa-card-padding-inline-end));
+    margin-left: 8px;
+    margin-right: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
     font-size: 0; /* Prevent whitespaces creating a gap between buttons */
-    display: flex;
-}
-
-div.promoted-attribute-cell .multiplicity:has(span) span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 /*
@@ -1434,10 +1342,6 @@ div#center-pane .floating-buttons-children {
                 opacity 250ms ease-out;
 }
 
-body[dir=rtl] div#center-pane .floating-buttons-children {
-    transform-origin: left;
-}
-
  /* Floating buttons container (collapsed) */
  div#center-pane .floating-buttons-children.temporarily-hidden {
     display: flex !important;
@@ -1549,7 +1453,7 @@ div.floating-buttons-children .close-floating-buttons {
 }
 
 div.floating-buttons-children .close-floating-buttons {
-    margin-inline-start: 0 !important;
+    margin-left: 0 !important;
     background: var(--floating-button-hide-button-background);
     color: var(--floating-button-hide-button-color);
 }
@@ -1639,12 +1543,12 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 }
 
 .find-replace-widget .form-check {
-    padding-inline-start: 0;
+    padding-left: 0;
     white-space: nowrap;
 }
 
 .find-replace-widget .form-check .form-check-input {
-    margin-inline-start: 0;
+    margin-left: 0;
 }
 
 /* Narrow version */
@@ -1664,13 +1568,13 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 
     .find-widget-box,
     .replace-widget-box {
-        padding-inline-end: 3em !important;
+        padding-right: 3em !important;
     }
 
     .find-widget-close-button {
         position: absolute;
         top: .85em;
-        inset-inline-end: .5em;
+        right: .5em;
     }
 
     .find-widget-box > * {
@@ -1702,7 +1606,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
     }
 
     .replace-widget-box > * {
-        margin-inline-end: unset !important;
+        margin-right: unset !important;
     }
 
     div.replace-widget-box button.btn.btn-sm {
@@ -1745,7 +1649,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 #right-pane .toc li,
 #right-pane .highlights-list li {
     padding-top: 2px;
-    padding-inline-end: 8px;
+    padding-right: 8px;
     padding-bottom: 2px;
     border-radius: 4px;
     text-align: unset;
@@ -1784,6 +1688,10 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
     --border-radius-lg: 6px;
 }
 
+.excalidraw .Island {
+    backdrop-filter: var(--dropdown-backdrop-filter);
+}
+
 .excalidraw .Island.App-toolbar {
     --island-bg-color: var(--floating-button-background-color);
     --shadow-island: 1px 1px 1px var(--floating-button-shadow-color);
@@ -1804,8 +1712,8 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 }
 
 .excalidraw .dropdown-menu .dropdown-menu-container > div:not([class]):not(:last-child) {
-    margin-inline-start: calc(var(--padding) * var(--space-factor) * -1) !important;
-    margin-inline-end: calc(var(--padding) * var(--space-factor) * -1) !important;
+    margin-left: calc(var(--padding) * var(--space-factor) * -1) !important;
+    margin-right: calc(var(--padding) * var(--space-factor) * -1) !important;
 }
 
 .excalidraw .dropdown-menu:before {

apps/client/src/stylesheets/tree.css

@@ -1,5 +1,5 @@
 ul.fancytree-container {
-    padding-inline-start: 0;
+    padding-left: 0;
 }
 
 ul.fancytree-container li {
@@ -15,8 +15,10 @@ span.fancytree-node.fancytree-hide {
     flex-shrink: 1;
     flex-grow: 1;
     overflow: hidden;
-    margin-inline-start: 7px;
+    margin-left: 7px;
     outline: none;
+    position: relative;
+    top: 2px;
 }
 
 .fancytree-expander {
@@ -40,7 +42,6 @@ span.fancytree-node.fancytree-hide {
     text-overflow: ellipsis;
     user-select: none !important;
     -webkit-user-select: none !important;
-    color: var(--custom-color, inherit);
 }
 
 .fancytree-node:not(.fancytree-loading) .fancytree-expander {
@@ -58,11 +59,7 @@ span.fancytree-node.fancytree-hide {
     line-height: 1;
     position: relative;
     top: 2px;
-    margin-inline-end: 5px;
-}
-
-body[dir=rtl] .fancytree-node:not(.fancytree-loading):not(.fancytree-expanded) .fancytree-expander:before {
-    content: "\ea4d";   /* bx bx-chevron-left */
+    margin-right: 5px;
 }
 
 .fancytree-loading span.fancytree-expander {
@@ -83,7 +80,7 @@ body[dir=rtl] .fancytree-node:not(.fancytree-loading):not(.fancytree-expanded) .
     width: 12px;
     height: 12px;
     margin-top: 2px;
-    margin-inline-start: 1px;
+    margin-left: 1px;
     border-width: 1px;
     border-style: solid;
 }
@@ -172,15 +169,15 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
 
 /* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */
 .ui-fancytree > li > ul {
-    padding-inline-start: 5px;
+    padding-left: 5px;
 }
 
 .ui-fancytree ul {
-    padding-inline-start: 20px;
+    padding-left: 20px;
 }
 
 span.fancytree-active {
-    color: var(--active-item-text-color);
+    color: var(--active-item-text-color) !important;
     background-color: var(--active-item-background-color) !important;
     border-color: transparent; /* invisible border */
     border-radius: 5px;
@@ -232,14 +229,14 @@ span.fancytree-node.archived {
     display: none;
     font-size: 120%;
     cursor: pointer;
-    margin-inline-start: 8px;
+    margin-left: 8px;
     padding: 1px;
     border: 1px solid transparent;
     border-radius: 5px;
 }
 
 .unhoist-button.bx.tree-item-button {
-    margin-inline-start: 0; /* unhoist button is on the left and doesn't need more margin */
+    margin-left: 0; /* unhoist button is on the left and doesn't need more margin */
     display: block; /* keep always visible */
 }
 

apps/client/src/test/easy-froca.ts

@@ -3,8 +3,6 @@ import FNote from "../entities/fnote.js";
 import froca from "../services/froca.js";
 import FAttribute from "../entities/fattribute.js";
 import noteAttributeCache from "../services/note_attribute_cache.js";
-import FBranch from "../entities/fbranch.js";
-import FBlob from "../entities/fblob.js";
 
 type AttributeDefinitions = { [key in `#${string}`]: string; };
 type RelationDefinitions = { [key in `~${string}`]: string; };
@@ -12,8 +10,6 @@ type RelationDefinitions = { [key in `~${string}`]: string; };
 interface NoteDefinition extends AttributeDefinitions, RelationDefinitions {
     id?: string | undefined;
     title: string;
-    children?: NoteDefinition[];
-    content?: string;
 }
 
 /**
@@ -51,38 +47,6 @@ export function buildNote(noteDef: NoteDefinition) {
         blobId: ""
     });
     froca.notes[note.noteId] = note;
-    let childNotePosition = 0;
-
-    // Manage content.
-    const content = noteDef.content ?? "";
-    note.getContent = async () => content;
-
-    const blob = new FBlob({
-        blobId: utils.randomString(10),
-        content,
-        contentLength: content.length,
-        dateModified: new Date().toISOString(),
-        utcDateModified: new Date().toISOString()
-    });
-    note.getBlob = async () => blob;
-
-    // Manage children.
-    if (noteDef.children) {
-        for (const childDef of noteDef.children) {
-            const childNote = buildNote(childDef);
-            const branchId = `${note.noteId}_${childNote.noteId}`;
-            const branch = new FBranch(froca, {
-                branchId,
-                noteId: childNote.noteId,
-                parentNoteId: note.noteId,
-                notePosition: childNotePosition,
-                fromSearchNote: false
-            });
-            froca.branches[branchId] = branch;
-            note.addChild(childNote.noteId, branchId, false);
-            childNotePosition += 10;
-        }
-    }
 
     let position = 0;
     for (const [ key, value ] of Object.entries(noteDef)) {

apps/client/src/translations/ca/translation.json

@@ -121,7 +121,7 @@
         "sat": "Ds",
         "sun": "Dg",
         "january": "Gener",
-        "february": "Febrer",
+        "febuary": "Febrer",
         "march": "Març",
         "april": "Abril",
         "may": "Maig",