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>
This commit is contained in:
MusiCode1
@@ -141,13 +141,13 @@
|
||||
|
||||
.message-step-start {
|
||||
background-color: var(--message-assistant-bg);
|
||||
border-left: 4px solid var(--message-assistant-border);
|
||||
border-inline-start: 4px solid var(--message-assistant-border);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.message-step-finish {
|
||||
background-color: var(--message-assistant-bg);
|
||||
border-left: 4px solid var(--message-assistant-border);
|
||||
border-inline-start: 4px solid var(--message-assistant-border);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-right: 0.35rem;
|
||||
margin-inline-end: 0.35rem;
|
||||
}
|
||||
|
||||
.message-step-heading {
|
||||
@@ -189,7 +189,7 @@
|
||||
}
|
||||
|
||||
.message-error-block {
|
||||
@apply text-sm p-3 rounded border-l-[3px] my-2;
|
||||
@apply text-sm p-3 rounded border-s-[3px] my-2;
|
||||
color: var(--status-error);
|
||||
background-color: var(--message-error-bg);
|
||||
border-color: var(--status-error);
|
||||
@@ -258,6 +258,7 @@
|
||||
padding: 8px;
|
||||
background-color: var(--surface-code);
|
||||
border-radius: 4px;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.message-error-part {
|
||||
@@ -335,12 +336,12 @@
|
||||
|
||||
.message-step-start {
|
||||
background-color: var(--message-assistant-bg);
|
||||
border-left: 4px solid var(--message-assistant-border);
|
||||
border-inline-start: 4px solid var(--message-assistant-border);
|
||||
}
|
||||
|
||||
.message-step-finish {
|
||||
background-color: var(--message-assistant-bg);
|
||||
border-left: 4px solid var(--message-assistant-border);
|
||||
border-inline-start: 4px solid var(--message-assistant-border);
|
||||
}
|
||||
|
||||
.message-step-heading {
|
||||
@@ -363,7 +364,7 @@
|
||||
}
|
||||
|
||||
.message-step-time {
|
||||
@apply text-[11px] text-[var(--text-muted)] font-normal ml-auto;
|
||||
@apply text-[11px] text-[var(--text-muted)] font-normal ms-auto;
|
||||
}
|
||||
|
||||
.message-step-meta-inline {
|
||||
@@ -390,7 +391,7 @@
|
||||
.message-reasoning-card {
|
||||
--reasoning-border-color: var(--border-strong, var(--border-base));
|
||||
background-color: var(--message-assistant-bg);
|
||||
border-left: 4px solid var(--message-assistant-border);
|
||||
border-inline-start: 4px solid var(--message-assistant-border);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
@@ -424,7 +425,7 @@
|
||||
padding: 0.25rem 0.6rem;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
@@ -546,4 +547,5 @@
|
||||
color: var(--text-primary);
|
||||
white-space: pre-wrap;
|
||||
margin: 0;
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
@@ -207,7 +207,7 @@
|
||||
|
||||
.message-scroll-button-wrapper {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
inset-inline-end: 1rem;
|
||||
bottom: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -274,7 +274,7 @@
|
||||
}
|
||||
|
||||
.message-quote-button + .message-quote-button {
|
||||
border-left: 1px solid var(--list-item-highlight-border);
|
||||
border-inline-start: 1px solid var(--list-item-highlight-border);
|
||||
}
|
||||
|
||||
.message-quote-button:hover {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
.message-select-checkbox {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
cursor: pointer;
|
||||
accent-color: var(--status-error);
|
||||
flex: 0 0 auto;
|
||||
@@ -134,7 +134,7 @@
|
||||
}
|
||||
|
||||
.message-delete-mode-menu {
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: calc(100% + 6px);
|
||||
min-width: 150px;
|
||||
width: max-content;
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 64px;
|
||||
inset-inline-end: 64px;
|
||||
width: 1px;
|
||||
background-color: var(--border-muted);
|
||||
pointer-events: none;
|
||||
@@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
.message-layout--with-timeline::after {
|
||||
right: 40px;
|
||||
inset-inline-end: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -311,12 +311,12 @@
|
||||
|
||||
/* Tool segments that are part of a group get a left accent border. */
|
||||
.message-timeline-group-child {
|
||||
border-left: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
|
||||
border-inline-start: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
|
||||
}
|
||||
|
||||
/* The assistant "parent" at the bottom of a tool group gets the same border. */
|
||||
.message-timeline-group-parent {
|
||||
border-left: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
|
||||
border-inline-start: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
|
||||
}
|
||||
|
||||
/* Extra spacing before the first tool in a group to separate from the
|
||||
@@ -346,7 +346,7 @@
|
||||
/* Extend the overlay box into the stream so ribs are not relying on
|
||||
overflow-visible behavior (which is brittle around scroll containers). */
|
||||
--xray-overhang: calc(var(--max-rib-width, 50vw) + 84px);
|
||||
left: calc(-1 * var(--xray-overhang));
|
||||
inset-inline-start: calc(-1 * var(--xray-overhang));
|
||||
width: calc(100% + var(--xray-overhang));
|
||||
overflow: hidden;
|
||||
padding: 0.25rem;
|
||||
@@ -374,10 +374,10 @@
|
||||
|
||||
.message-timeline-xray-token-label {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
inset-inline-end: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
height: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -403,16 +403,25 @@
|
||||
var(--status-success) calc(100% - var(--segment-weight) * 100%),
|
||||
var(--status-error) calc(var(--segment-weight) * 100%)
|
||||
);
|
||||
border-radius: 3px 0 0 3px;
|
||||
border-start-start-radius: 3px;
|
||||
border-end-start-radius: 3px;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
transition: width 0.3s ease, background-color 0.3s ease;
|
||||
box-shadow: -2px 0 4px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
[dir="rtl"] .message-timeline-relative-bar {
|
||||
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.message-timeline-absolute-bar {
|
||||
height: 3px;
|
||||
width: calc(var(--segment-weight) * var(--max-rib-width, 50vw));
|
||||
background-color: var(--text-muted);
|
||||
border-radius: 2px 0 0 2px;
|
||||
border-start-start-radius: 2px;
|
||||
border-end-start-radius: 2px;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
transition: width 0.3s ease;
|
||||
opacity: 0.5;
|
||||
position: relative;
|
||||
@@ -425,7 +434,7 @@
|
||||
.message-timeline-absolute-bar-overflow::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
inset-inline-start: -1px;
|
||||
top: -3px;
|
||||
bottom: -3px;
|
||||
width: 3px;
|
||||
|
||||
@@ -35,7 +35,9 @@
|
||||
}
|
||||
|
||||
.prompt-input {
|
||||
@apply w-full pl-3 pr-10 pt-2.5 border text-sm resize-none outline-none transition-colors;
|
||||
@apply w-full pt-2.5 border text-sm resize-none outline-none transition-colors;
|
||||
padding-inline-start: 2.5rem;
|
||||
padding-inline-end: 0.75rem;
|
||||
font-family: inherit;
|
||||
background-color: var(--surface-base);
|
||||
color: var(--text-primary);
|
||||
@@ -65,8 +67,8 @@
|
||||
.prompt-input-overlay {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
left: 0.75rem;
|
||||
right: 0.75rem;
|
||||
inset-inline-start: 0.75rem;
|
||||
inset-inline-end: 0.75rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
@@ -81,11 +83,13 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Navigation buttons container (expand, prev, next) */
|
||||
/* Navigation buttons container (expand, prev, next).
|
||||
Intentionally at inline-start (left in LTR, right in RTL) so buttons never overlap
|
||||
the scrollbar, which browsers always place at inline-end. */
|
||||
.prompt-nav-buttons {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
right: 0.25rem;
|
||||
inset-inline-start: 0.25rem;
|
||||
bottom: 0.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -160,6 +164,11 @@
|
||||
@apply opacity-60 cursor-not-allowed;
|
||||
}
|
||||
|
||||
/* In RTL: override dir="auto" which defaults to LTR on empty textarea */
|
||||
[dir="rtl"] .prompt-input {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.prompt-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -256,7 +265,7 @@
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
padding: 8px;
|
||||
background-color: var(--surface-base);
|
||||
border: 1px solid var(--border-base);
|
||||
@@ -335,6 +344,7 @@
|
||||
.prompt-input {
|
||||
min-height: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding-inline-start: 2.5rem; /* preserve space for nav buttons */
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
.tool-call-message {
|
||||
@apply flex flex-col gap-2 p-3 w-full;
|
||||
background-color: var(--message-tool-bg);
|
||||
border-left: 4px solid var(--message-tool-border);
|
||||
border-inline-start: 4px solid var(--message-tool-border);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
}
|
||||
|
||||
.tool-call-header-toggle {
|
||||
@apply flex items-center gap-2 p-2 w-full bg-transparent border-none cursor-pointer text-left;
|
||||
@apply flex items-center gap-2 p-2 w-full bg-transparent border-none cursor-pointer text-start;
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 13px;
|
||||
border-radius: 0;
|
||||
@@ -105,7 +105,7 @@
|
||||
.tool-call-header-toggle::before {
|
||||
content: "▶";
|
||||
font-size: 11px;
|
||||
margin-right: 0.35rem;
|
||||
margin-inline-end: 0.35rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@@ -159,7 +159,7 @@
|
||||
}
|
||||
|
||||
.tool-call-summary {
|
||||
@apply flex-1 text-left inline-flex items-center gap-2;
|
||||
@apply flex-1 text-start inline-flex items-center gap-2;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@@ -168,26 +168,26 @@
|
||||
}
|
||||
|
||||
.tool-call-summary[data-tool-icon=""]::before {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.tool-call-summary[data-tool-icon]:not([data-tool-icon=""])::before {
|
||||
margin-right: 0.35rem;
|
||||
margin-inline-end: 0.35rem;
|
||||
}
|
||||
|
||||
/* ToolState uses status="completed"; keep "success" as a legacy alias. */
|
||||
.tool-call-status-completed,
|
||||
.tool-call-status-success {
|
||||
border-left: 3px solid var(--status-success);
|
||||
border-inline-start: 3px solid var(--status-success);
|
||||
}
|
||||
|
||||
.tool-call-status-error {
|
||||
border-left: 3px solid var(--status-error);
|
||||
border-inline-start: 3px solid var(--status-error);
|
||||
}
|
||||
|
||||
.tool-call-status-running {
|
||||
border-left: 3px solid var(--status-warning);
|
||||
border-inline-start: 3px solid var(--status-warning);
|
||||
}
|
||||
|
||||
.tool-call-status-running .tool-call-status {
|
||||
@@ -195,7 +195,7 @@
|
||||
}
|
||||
|
||||
.tool-call-status-pending {
|
||||
border-left: 3px solid var(--accent-primary);
|
||||
border-inline-start: 3px solid var(--accent-primary);
|
||||
}
|
||||
|
||||
.tool-call-status-pending .tool-call-summary {
|
||||
@@ -257,7 +257,7 @@
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--tool-call-border-color);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
font-size: 0.875rem;
|
||||
font-weight: normal;
|
||||
color: var(--text-primary);
|
||||
@@ -267,7 +267,7 @@
|
||||
.tool-call-io-toggle::before {
|
||||
content: "▶";
|
||||
font-size: 11px;
|
||||
margin-right: 0.35rem;
|
||||
margin-inline-end: 0.35rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@@ -393,7 +393,7 @@
|
||||
}
|
||||
|
||||
.tool-call-awaiting-permission {
|
||||
border-left-color: var(--status-warning);
|
||||
border-inline-start-color: var(--status-warning);
|
||||
}
|
||||
|
||||
.tool-call-permission {
|
||||
@@ -484,7 +484,7 @@
|
||||
}
|
||||
|
||||
.tool-call-permission-shortcuts .kbd {
|
||||
margin-right: 0.25rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
.tool-call-permission-queued-text {
|
||||
@@ -549,6 +549,7 @@
|
||||
min-height: auto;
|
||||
max-height: none;
|
||||
overflow-y: visible;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/* Shiki injects inline background colors; force token surfaces. */
|
||||
@@ -610,7 +611,7 @@
|
||||
}
|
||||
|
||||
.tool-call-diagnostics-heading {
|
||||
@apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-left;
|
||||
@apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-start;
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
@@ -634,7 +635,7 @@
|
||||
|
||||
|
||||
.tool-call-diagnostics-heading {
|
||||
@apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-left;
|
||||
@apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-start;
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
@@ -693,8 +694,8 @@
|
||||
gap: var(--space-xs);
|
||||
max-height: calc(4 * var(--tool-call-line-unit, 1.4em));
|
||||
overflow-y: scroll;
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
padding-inline-end: 0;
|
||||
margin-inline-end: 0;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
@@ -762,6 +763,7 @@
|
||||
overflow-x: auto;
|
||||
max-height: var(--tool-call-max-height-compact, calc(25 * 1.4em));
|
||||
overflow-y: scroll;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.tool-call-section code {
|
||||
@@ -843,7 +845,7 @@
|
||||
|
||||
.tool-call-error-content {
|
||||
background-color: var(--message-error-bg);
|
||||
border-left: 3px solid var(--status-error);
|
||||
border-inline-start: 3px solid var(--status-error);
|
||||
padding: 12px;
|
||||
margin: 8px 0;
|
||||
border-radius: 4px;
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
.tool-call-task-summary .tool-call::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
@@ -117,7 +117,7 @@
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.35rem 0.5rem 0.35rem 0.75rem;
|
||||
border-left: 2px solid var(--tool-call-border-color, var(--border-base));
|
||||
border-inline-start: 2px solid var(--tool-call-border-color, var(--border-base));
|
||||
font-size: var(--font-size-sm);
|
||||
font-family: var(--font-family-mono);
|
||||
line-height: 1.35;
|
||||
@@ -134,19 +134,19 @@
|
||||
}
|
||||
|
||||
.tool-call-task-item[data-task-status="completed"] {
|
||||
border-left-color: var(--status-success);
|
||||
border-inline-start-color: var(--status-success);
|
||||
}
|
||||
|
||||
.tool-call-task-item[data-task-status="running"] {
|
||||
border-left-color: var(--status-warning);
|
||||
border-inline-start-color: var(--status-warning);
|
||||
}
|
||||
|
||||
.tool-call-task-item[data-task-status="pending"] {
|
||||
border-left-color: var(--accent-primary);
|
||||
border-inline-start-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.tool-call-task-item[data-task-status="error"] {
|
||||
border-left-color: var(--status-error);
|
||||
border-inline-start-color: var(--status-error);
|
||||
}
|
||||
|
||||
.tool-call-task-icon {
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
.virtual-follow-list-controls-container {
|
||||
position: absolute;
|
||||
bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
|
||||
right: var(--space-md);
|
||||
inset-inline-end: var(--space-md);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user