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>
123 lines
2.5 KiB
CSS
123 lines
2.5 KiB
CSS
/* Panel component shells */
|
|
.panel {
|
|
@apply rounded-lg shadow-sm border overflow-hidden min-w-0;
|
|
background-color: var(--surface-base);
|
|
border-color: var(--border-base);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.panel-footer-hints {
|
|
@apply flex items-center justify-center flex-wrap gap-3 text-xs;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.panel-header {
|
|
@apply px-4 py-3 border-b;
|
|
border-color: var(--border-base);
|
|
background-color: var(--surface-secondary);
|
|
}
|
|
|
|
.panel-title {
|
|
@apply text-base font-semibold;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.panel-subtitle {
|
|
@apply text-xs mt-0.5;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.panel-body {
|
|
@apply p-4;
|
|
background-color: var(--surface-base);
|
|
}
|
|
|
|
.panel-section {
|
|
@apply border-t;
|
|
border-color: var(--border-base);
|
|
}
|
|
|
|
.panel-section-header {
|
|
@apply w-full px-4 py-3 flex items-center justify-center transition-colors cursor-pointer gap-2;
|
|
background-color: var(--surface-secondary);
|
|
}
|
|
|
|
.panel-section-header:hover {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.panel-section-content {
|
|
@apply px-4 py-3 border-t overflow-visible space-y-4 w-full;
|
|
border-color: var(--border-base);
|
|
background-color: var(--surface-secondary);
|
|
}
|
|
|
|
.panel-list {
|
|
@apply max-h-[400px] overflow-y-auto w-full min-w-0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.panel-list--fill {
|
|
max-height: none;
|
|
height: 100%;
|
|
}
|
|
|
|
.panel-list-item {
|
|
@apply border-b last:border-b-0 transition-colors w-full;
|
|
border-color: var(--border-base);
|
|
}
|
|
|
|
.panel-list-item:hover {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.panel-list-item-highlight {
|
|
background-color: var(--list-item-highlight-bg) !important;
|
|
box-shadow: inset 0 0 0 1px var(--list-item-highlight-border);
|
|
}
|
|
|
|
.panel-list-item-content {
|
|
@apply flex-1 text-start px-4 py-3 flex items-center justify-between gap-3 outline-none transition-colors w-full min-w-0;
|
|
}
|
|
|
|
.panel-list-item-content:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.panel-list-item-content:disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.panel-list-item button:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.panel-list-item-disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.panel-empty-state {
|
|
@apply p-6 text-center;
|
|
}
|
|
|
|
.panel-empty-state-icon {
|
|
@apply text-gray-400 dark:text-gray-600 mb-2;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.panel-empty-state-title {
|
|
@apply font-medium text-sm mb-1;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.panel-empty-state-description {
|
|
@apply text-xs;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.panel-footer {
|
|
@apply px-4 py-3 border-t;
|
|
border-color: var(--border-base);
|
|
background-color: var(--surface-secondary);
|
|
}
|