Files
CodeNomad/packages/ui/src/styles/panels/modal.css
MusiCode1 1c68f5d288 feat(i18n): Hebrew locale + full RTL support (#243)
# feat(i18n): Hebrew locale + full RTL support

## Summary

This PR adds full Hebrew (he) locale support to the UI, including a
complete translation of all user-facing strings and comprehensive RTL
layout support across all components.

## What was done

### Hebrew translation
- Full translation of all i18n message files for the `he` locale (17
translation files)
- Registered the language in the i18n system and the language picker

### RTL support
- Automatic direction detection (`dir="rtl"`) when Hebrew is selected
- Replaced physical CSS properties (`left`/`right`) with logical
equivalents (`inline-start`/`inline-end`) across the project
- Fixed resize direction, file path alignment, and textarea padding
- Fixed navigation button positioning in textarea for RTL
- Fixed scrollbar direction in RTL
- Fixed code block direction and selector alignment
- Fixed Monaco editor direction in the file viewer
- Auto-detect text direction in reasoning block (`dir="auto"` +
`unicode-bidi: plaintext`)

### Adapted components
- `session-layout` — sidebar and resize handle
- `prompt-input` — text direction and buttons
- `message-base` — message blocks and reasoning
- `message-timeline` — timeline bar
- `right-panel` — right side panel
- `tool-call` — tool call display
- `settings-screen` — settings page
- `selector` — selection component
- `instance-shell` — main shell

## New files

```
packages/ui/src/lib/i18n/messages/he/
  advancedSettings.ts
  app.ts
  commands.ts
  dialogs.ts
  filesystem.ts
  folderSelection.ts
  index.ts
  instance.ts
  loadingScreen.ts
  logs.ts
  markdown.ts
  messaging.ts
  remoteAccess.ts
  session.ts
  settings.ts
  time.ts
  toolCall.ts
```

## Suggested testing
- Switch language to Hebrew and verify all strings are translated
- Verify RTL layout is correct across all screens (session, settings,
file viewer)
- Verify that English text inside a reasoning block is displayed LTR
- Switch back to English and verify everything returns to LTR

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Shantur Rathore <i@shantur.com>
2026-03-24 21:09:52 +00:00

80 lines
1.6 KiB
CSS

/* Modal utilities */
.modal-overlay {
@apply fixed inset-0 z-50;
background-color: var(--overlay-scrim);
}
.modal-surface {
@apply rounded-lg shadow-2xl flex flex-col;
background-color: var(--surface-base);
color: var(--text-primary);
max-width: min(100%, calc(100vw - 32px));
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
.modal-search-container {
@apply p-4 border-b;
border-color: var(--border-base);
}
.modal-search-input {
@apply flex-1 bg-transparent outline-none;
color: var(--text-primary);
}
.modal-search-input::placeholder {
color: var(--text-muted);
}
.modal-search-icon {
color: var(--text-muted);
}
.modal-list-container {
@apply flex-1 overflow-y-auto;
}
.modal-section-header {
@apply px-4 py-2 text-xs font-semibold uppercase tracking-wide;
color: var(--text-muted);
}
.modal-item {
@apply w-full px-4 py-3 flex items-start gap-3 transition-colors cursor-pointer border-none text-start;
color: var(--text-primary);
}
.modal-item:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.modal-list-container[data-pointer-mode="pointer"] .modal-item:hover {
background-color: var(--surface-hover);
}
.modal-list-container[data-pointer-mode="keyboard"] .modal-item:hover:not(.modal-item-highlight) {
background-color: inherit;
}
.modal-item-highlight {
background-color: var(--selection-highlight-bg);
}
.modal-item-label {
@apply font-medium;
color: var(--text-primary);
}
.modal-item-description {
@apply text-sm mt-0.5;
color: var(--text-secondary);
}
.modal-empty-state {
@apply p-8 text-center;
color: var(--text-muted);
}