1c68f5d288
# 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>
337 lines
7.0 KiB
CSS
337 lines
7.0 KiB
CSS
/* Selector component utilities */
|
|
.selector-trigger {
|
|
@apply inline-flex items-center justify-between gap-2 px-2 py-1 border rounded outline-none transition-colors text-xs min-w-[180px];
|
|
background-color: var(--surface-base);
|
|
border-color: var(--border-base);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.selector-trigger:hover {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.selector-trigger:focus {
|
|
@apply ring-2;
|
|
ring-color: var(--accent-primary);
|
|
}
|
|
|
|
.selector-trigger:disabled,
|
|
.selector-trigger[aria-disabled="true"],
|
|
.selector-trigger[data-disabled],
|
|
.selector-trigger-disabled {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|
|
|
|
.selector-trigger-label {
|
|
@apply flex flex-col min-w-0;
|
|
}
|
|
|
|
.selector-trigger-label--stacked {
|
|
@apply items-start;
|
|
}
|
|
|
|
.selector-trigger-label--top {
|
|
@apply self-start;
|
|
}
|
|
|
|
.selector-trigger-primary {
|
|
@apply text-sm font-medium truncate;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.selector-trigger-primary--align-left {
|
|
@apply text-start w-full;
|
|
}
|
|
|
|
.selector-trigger-secondary {
|
|
@apply text-xs text-start truncate w-full;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-trigger-icon {
|
|
@apply flex-shrink-0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-trigger-hint {
|
|
@apply flex-shrink-0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-trigger-hint--top {
|
|
@apply self-start mt-0.5;
|
|
}
|
|
|
|
.selector-popover {
|
|
@apply rounded-md shadow-lg overflow-hidden min-w-[300px];
|
|
background-color: var(--surface-base);
|
|
border: 1px solid var(--border-base);
|
|
z-index: 2200;
|
|
}
|
|
|
|
.selector-search-container {
|
|
@apply p-2 border-b;
|
|
border-color: var(--border-base);
|
|
}
|
|
|
|
.selector-search-input {
|
|
@apply w-full px-3 py-1.5 text-xs border rounded outline-none transition-colors;
|
|
background-color: var(--surface-base);
|
|
border-color: var(--border-base);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.selector-search-input:focus {
|
|
@apply ring-2;
|
|
ring-color: var(--accent-primary);
|
|
}
|
|
|
|
.selector-search-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-listbox {
|
|
@apply max-h-64 overflow-auto p-1;
|
|
background-color: var(--surface-base);
|
|
}
|
|
|
|
.selector-option {
|
|
@apply px-3 py-2 cursor-pointer rounded outline-none transition-colors flex items-start gap-2 w-full;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.selector-option:hover {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.selector-option[data-highlighted],
|
|
.selector-option[data-focused] {
|
|
background-color: var(--selection-highlight-bg);
|
|
}
|
|
|
|
.selector-option[data-selected],
|
|
.selector-option-selected {
|
|
background-color: var(--selection-highlight-strong-bg);
|
|
}
|
|
|
|
.selector-option-content {
|
|
@apply flex flex-col flex-1 min-w-0;
|
|
}
|
|
|
|
.selector-option-label {
|
|
@apply font-medium text-sm;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.selector-option-description {
|
|
@apply text-xs;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-option .remove-binary-button {
|
|
opacity: 0;
|
|
}
|
|
|
|
.selector-option:hover .remove-binary-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.remove-binary-button {
|
|
@apply p-1 rounded transition-all;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.remove-binary-button:hover {
|
|
background-color: var(--danger-soft-bg);
|
|
color: var(--status-error);
|
|
}
|
|
|
|
.selector-option-indicator {
|
|
@apply flex-shrink-0 mt-0.5;
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.selector-option-action {
|
|
@apply flex items-center justify-center py-1;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-option-star {
|
|
@apply p-1 rounded transition-colors flex-shrink-0 mt-0.5;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-option-star[data-active="true"] {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.selector-option-star:hover {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.selector-option-star:focus-visible {
|
|
@apply ring-2;
|
|
ring-color: var(--accent-primary);
|
|
}
|
|
|
|
/* Worktree selector separators */
|
|
.worktree-selector-item {
|
|
border-bottom: 1px solid var(--border-base);
|
|
}
|
|
|
|
.worktree-selector-item:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.selector-favorites-toggle {
|
|
@apply p-2 rounded border transition-colors flex items-center justify-center;
|
|
background-color: var(--surface-base);
|
|
border-color: var(--border-base);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-favorites-toggle[data-active="true"] {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.selector-favorites-toggle:hover {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.selector-favorites-toggle:focus-visible {
|
|
@apply ring-2;
|
|
ring-color: var(--accent-primary);
|
|
}
|
|
|
|
.selector-favorites-toggle:disabled {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|
|
|
|
.selector-footer {
|
|
@apply border-t;
|
|
border-color: var(--border-base);
|
|
background-color: var(--surface-base);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.selector-section {
|
|
@apply px-3 py-2 border-b;
|
|
border-color: var(--border-base);
|
|
background-color: var(--surface-secondary);
|
|
}
|
|
|
|
.selector-section-title {
|
|
@apply text-xs font-medium;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-badge {
|
|
@apply rounded px-1.5 py-0.5 text-xs font-normal;
|
|
background-color: var(--accent-primary);
|
|
color: var(--text-inverted);
|
|
}
|
|
|
|
.selector-badge-version {
|
|
@apply text-xs;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-badge-time {
|
|
@apply text-xs;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-validation-error {
|
|
@apply p-2 rounded border;
|
|
background-color: var(--message-error-bg);
|
|
border-color: var(--status-error);
|
|
color: var(--status-error);
|
|
}
|
|
|
|
.selector-validation-error-content {
|
|
@apply flex items-start gap-2;
|
|
}
|
|
|
|
.selector-validation-error-icon {
|
|
@apply w-4 h-4 mt-0.5 flex-shrink-0;
|
|
color: var(--status-error);
|
|
}
|
|
|
|
.selector-validation-error-text {
|
|
@apply text-xs;
|
|
}
|
|
|
|
.selector-input-group {
|
|
@apply flex gap-2;
|
|
}
|
|
|
|
.selector-input {
|
|
@apply flex-1 px-2 py-1.5 text-sm border rounded outline-none transition-colors;
|
|
background-color: var(--surface-base);
|
|
border-color: var(--border-base);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.selector-input:focus {
|
|
@apply ring-1;
|
|
ring-color: var(--accent-primary);
|
|
}
|
|
|
|
.selector-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-button {
|
|
@apply px-3 py-1.5 text-sm rounded transition-colors cursor-pointer w-full inline-flex items-center justify-center font-medium;
|
|
background-color: var(--surface-secondary);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-base);
|
|
}
|
|
|
|
.selector-button-primary {
|
|
background-color: var(--accent-primary) !important;
|
|
color: var(--text-inverted) !important;
|
|
border: 1px solid var(--accent-primary) !important;
|
|
}
|
|
|
|
.selector-button-primary:hover:not(:disabled) {
|
|
background-color: var(--accent-hover);
|
|
}
|
|
|
|
.selector-button-primary:disabled {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
background-color: var(--surface-muted);
|
|
}
|
|
|
|
.selector-button-secondary {
|
|
background-color: var(--surface-base);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-base);
|
|
}
|
|
|
|
.selector-button-secondary:hover:not(:disabled) {
|
|
background-color: var(--surface-secondary);
|
|
border-color: var(--border-base);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.selector-button-secondary:disabled {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|
|
|
|
.selector-empty-state {
|
|
@apply p-4 text-center text-sm;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-loading {
|
|
@apply flex items-center gap-2;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.selector-loading-spinner {
|
|
@apply w-4 h-4 animate-spin;
|
|
color: var(--accent-primary);
|
|
}
|