Merge remote-tracking branch 'origin/master' into express-5-8529

Author: haraldschilly

src/.claude/commands/update-i18n.md

@@ -0,0 +1,49 @@
+# Update i18n Translations
+
+Complete workflow for updating internationalization translations in CoCalc frontend.
+
+## What this command does
+
+This command runs the full i18n update sequence:
+1. **Extract** new translation strings from source code
+2. **Upload** them to SimpleLocalize for automatic translation to 19+ languages  
+3. **Download** the translated files
+4. **Compile** them for runtime use
+
+## Usage
+
+```
+/update-i18n
+```
+
+## Commands executed
+
+Run this in `./packages/frontend/`
+
+Step 1:
+
+Wait for the auto-translations to finish
+
+```bash
+pnpm i18n:extract && pnpm i18n:upload
+```
+
+Step 2:
+
+
+```
+pnpm i18n:download && pnpm i18n:compile
+```
+
+## When to use
+
+- After adding new FormattedMessage components with translation IDs
+- After modifying existing translation strings
+- When preparing translations for a new feature release
+- When onboarding new languages
+
+## Prerequisites
+
+- Must be in the `packages/frontend` directory
+- SIMPLELOCALIZE_KEY environment variable must be set
+- Changes to translation strings should already be committed to source code

src/.claude/settings.json

@@ -3,6 +3,8 @@
     "allow": [
       "Bash(../node_modules/.bin/tsc:*)",
       "Bash(NODE_OPTIONS=--max-old-space-size=8192 ../node_modules/.bin/tsc --noEmit)",
+      "Bash(bash:*)",
+      "Bash(chmod:*)",
       "Bash(curl:*)",
       "Bash(docker run:*)",
       "Bash(find:*)",
@@ -17,23 +19,27 @@
       "Bash(npm show:*)",
       "Bash(npm view:*)",
       "Bash(npx tsc:*)",
+      "Bash(pnpm add:*)",
+      "Bash(pnpm audit:*)",
       "Bash(pnpm build:*)",
       "Bash(pnpm i18n:*)",
+      "Bash(pnpm info:*)",
       "Bash(pnpm list:*)",
+      "Bash(pnpm list:*)",
+      "Bash(pnpm remove:*)",
+      "Bash(pnpm run:*)",
       "Bash(pnpm ts-build:*)",
       "Bash(pnpm tsc:*)",
+      "Bash(pnpm update:*)",
       "Bash(pnpm view:*)",
       "Bash(pnpm why:*)",
       "Bash(prettier -w:*)",
       "Bash(psql:*)",
-      "WebFetch(domain:cocalc.com)",
-      "WebFetch(domain:doc.cocalc.com)",
-      "WebFetch(domain:docs.anthropic.com)",
-      "WebFetch(domain:github.com)",
-      "WebFetch(domain:mistral.ai)",
-      "WebFetch(domain:simplelocalize.io)",
-      "WebFetch(domain:www.anthropic.com)",
+      "Bash(python3:*)",
+      "WebFetch",
+      "WebSearch",
       "mcp__cclsp__find_definition",
+      "mcp__cclsp__find_references",
       "mcp__github__get_issue",
       "mcp__github__get_issue_comments",
       "mcp__github__get_pull_request",

src/CLAUDE.md

@@ -16,18 +16,20 @@ This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI
 - Run `pretter -w [filename]` after modifying a file (ts, tsx, md, json, ...) to format it correctly.
 - All .js and .ts files are formatted by the tool prettier
 - Add suitable types when you write code
-- Variable name styles are "camelCase" for local and "FOO_BAR" for global variables. If you edit older code not following these guidlines, adjust this rule to fit the files style.
+- Follow DRY principles!
+- Variable name styles are `camelCase` for local and `FOO_BAR` for global variables. React Components and Classes are `FooBar`. If you edit older code not following these guidlines, adjust this rule to fit the files style.
 - Some older code is JavaScript or CoffeeScript, which will be translated to TypeScript
 - Use ES modules (import/export) syntax, not CommonJS (require)
 - Organize the list of imports in such a way: installed npm packages are on top, newline, then are imports from @cocalc's code base. Sorted alphabetically.
+- **Colors**: Always use the `COLORS` dictionary from `@cocalc/util/theme` for all color values. Never hardcode colors like `#f0f0f0` or `rgb(...)`. Import with `import { COLORS } from "@cocalc/util/theme";` and use predefined constants like `COLORS.GRAY_M`, `COLORS.GRAY_L`, `COLORS.GRAY_LL`, etc.
 - **Backend Logging**: Use `getLogger` from `@cocalc/project/logger` for logging in backend code. Do NOT use `console.log`. Example: `const L = getLogger("module:name").debug;`
 
 ## Development Commands
 
 ### Essential Commands
 
 - `pnpm build-dev` - Build all packages for development
-- `pnpm clean` - Clean all node_modules and dist directories
+- `pnpm clean` - Clean all `node_modules` and `dist` directories
 - `pnpm test` - Run full test suite
 - `pnpm depcheck` - Check for dependency issues
 - `python3 ./scripts/check_npm_packages.py` - Check npm package consistency across packages
@@ -38,15 +40,16 @@ This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI
 
 - `cd packages/[package] && pnpm build` - Build and compile a specific package
   - for packages/next and packages/static, run `cd packages/[package] && pnpm build-dev`
-- `cd packages/[package] && pnpm tsc:watch` - TypeScript compilation in watch mode for a specific package
 - `cd packages/[package] && pnpm test` - Run tests for a specific package
 - `cd packages/[package] && pnpm build` - Build a specific package
+- To typecheck the frontend, it is best to run `cd packages/static && pnpm build` - this implicitly compiles the frontend and reports typescript errors
 - **IMPORTANT**: When modifying packages like `util` that other packages depend on, you must run `pnpm build` in the modified package before typechecking dependent packages
 
 ### Development
 
 - **IMPORTANT**: Always run `prettier -w [filename]` immediately after editing any .ts, .tsx, .md, or .json file to ensure consistent styling
 - After TypeScript or `*.tsx` changes, run `pnpm build` in the relevant package directory
+  - When editing the frontend, run `pnpm build-dev` in `packages/static`. This implicitly builds the frontend!
 
 ## Architecture Overview
 
@@ -166,18 +169,34 @@ CoCalc is organized as a monorepo with key packages:
 
 CoCalc uses react-intl for internationalization with SimpleLocalize as the translation platform.
 
+### Architecture Overview
+
+- **Library**: Uses `react-intl` library with `defineMessages()` and `defineMessage()`
+- **Default Language**: English uses `defaultMessage` directly - no separate English translation files
+- **Supported Languages**: 19+ languages including German, Chinese, Spanish, French, Italian, Dutch, Russian, Japanese, Portuguese, Korean, Polish, Turkish, Hebrew, Hindi, Hungarian, Arabic, and Basque
+- **Translation Platform**: SimpleLocalize with OpenAI GPT-4o for automatic translations
+
 ### Translation ID Naming Convention
 
 Translation IDs follow a hierarchical pattern: `[directory].[subdir].[filename].[aspect].[label|title|tooltip|...]`
 
 Examples:
+
 - `labels.masked_files` - for common UI labels
 - `account.sign-out.button.title` - for account sign-out dialog
 - `command.generic.force_build.label` - for command labels
 
+### Usage Patterns
+
+- **TSX Components**: `<FormattedMessage id="..." defaultMessage="..." />`
+- **Data Structures**: `defineMessage({id: "...", defaultMessage: "..."})`
+- **Programmatic Use**: `useIntl()` hook + `intl.formatMessage()`
+- **Non-React Contexts**: `getIntl()` function
+
 ### Translation Workflow
 
 **For new translation keys:**
+
 1. Add the translation to source code (e.g., `packages/frontend/i18n/common.ts`)
 2. Run `pnpm i18n:extract` - updates `extracted.json` from source code
 3. Run `pnpm i18n:upload` - sends new strings to SimpleLocalize
@@ -190,14 +209,22 @@ Same flow as above, but **before 3. i18n:upload**, delete the key. Only new keys
 
 ### Translation File Structure
 
-- `packages/frontend/i18n/README.md` - more information
-- `packages/frontend/i18n/common.ts` - shared translation definitions
-- `packages/frontend/i18n/extracted.json` - auto-generated, do not edit manually
-- `packages/frontend/i18n/[locale].json` - downloaded translations per language
-- `packages/frontend/i18n/[locale].compiled.json` - compiled for runtime use
+- `packages/frontend/i18n/README.md` - detailed documentation
+- `packages/frontend/i18n/common.ts` - shared translation definitions (labels, menus, editor, jupyter, etc.)
+- `packages/frontend/i18n/extracted.json` - auto-extracted messages from source code
+- `packages/frontend/i18n/trans/[locale].json` - downloaded translations from SimpleLocalize
+- `packages/frontend/i18n/trans/[locale].compiled.json` - compiled translation files for runtime
+- `packages/frontend/i18n/index.ts` - exports and locale loading logic
 
 # Ignore
 
 - Ignore files covered by `.gitignore`
 - Ignore everything in `node_modules` or `dist` directories
 - Ignore all files not tracked by Git, unless they are newly created files
+
+# important-instruction-reminders
+
+Do what has been asked; nothing more, nothing less.
+NEVER create files unless they're absolutely necessary for achieving your goal.
+ALWAYS prefer editing an existing file to creating a new one.
+NEVER proactively create documentation files (\*.md) or README files. Only create documentation files if explicitly requested by the User.

src/packages/backend/package.json

@@ -46,7 +46,7 @@
     "@types/debug": "^4.1.12",
     "@types/jest": "^30.0.0",
     "awaiting": "^3.0.0",
-    "better-sqlite3": "^11.10.0",
+    "better-sqlite3": "^12.2.0",
     "chokidar": "^3.6.0",
     "debug": "^4.4.0",
     "fs-extra": "^11.2.0",

src/packages/frontend/account/i18n-selector.tsx

@@ -4,11 +4,20 @@
  */
 
 /*
-Basically a drop-down to change the langauge (i18n localization)
+Basically a drop-down to change the language (i18n localization)
 */
 
 import { DownOutlined } from "@ant-design/icons";
-import { Button, Dropdown, MenuProps, Modal, Space, Tooltip } from "antd";
+import {
+  Button,
+  Dropdown,
+  MenuProps,
+  Modal,
+  Select,
+  SelectProps,
+  Space,
+  Tooltip,
+} from "antd";
 import { SizeType } from "antd/es/config-provider/SizeContext";
 import { useState } from "react";
 import { defineMessage, useIntl } from "react-intl";
@@ -54,6 +63,50 @@ Thank you for your patience and understanding as we work to make our application
   description: "Content of translation information modal",
 });
 
+interface LanguageSelectorProps
+  extends Omit<SelectProps, "options" | "onChange"> {
+  value?: string;
+  onChange?: (language: Locale) => void;
+}
+
+/**
+ * A reusable language selector component for translation purposes.
+ */
+export function LanguageSelector({
+  value,
+  onChange,
+  ...props
+}: LanguageSelectorProps) {
+  const intl = useIntl();
+
+  let availableLocales = Object.keys(LOCALIZATIONS) as Locale[];
+
+  const options = availableLocales.map((locale) => {
+    const localization = LOCALIZATIONS[locale];
+    const other =
+      locale === value
+        ? localization.name
+        : intl.formatMessage(localization.trans);
+    return {
+      value: locale,
+      label: `${localization.flag} ${localization.native} (${other})`,
+    };
+  });
+
+  return (
+    <Select
+      value={value}
+      onChange={onChange}
+      options={options}
+      placeholder="Select a language..."
+      showSearch
+      optionFilterProp="label"
+      popupMatchSelectWidth={false}
+      {...props}
+    />
+  );
+}
+
 export function I18NSelector(props: Readonly<Props>) {
   const { isWide = true, size, confirm = false } = props;
 
@@ -114,7 +167,7 @@ export function I18NSelector(props: Readonly<Props>) {
 
   const menu: MenuProps = {
     items,
-    style: { maxHeight: "75vh", overflow: "auto" },
+    style: { maxHeight: "50vh", overflow: "auto" },
     onClick: ({ key }) => {
       if (key in LOCALIZATIONS) {
         if (confirm) {