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>
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { Show, type Component, type JSX } from "solid-js"
|
|
|
|
import { useI18n } from "../../../../../lib/i18n"
|
|
import OverlayList from "./OverlayList"
|
|
|
|
type SplitFilePanelList = {
|
|
panel: () => JSX.Element
|
|
overlay: () => JSX.Element
|
|
}
|
|
|
|
interface SplitFilePanelProps {
|
|
header: JSX.Element
|
|
list: SplitFilePanelList
|
|
viewer: JSX.Element
|
|
|
|
listOpen: boolean
|
|
onToggleList: () => void
|
|
|
|
splitWidth: number
|
|
onResizeMouseDown: (event: MouseEvent) => void
|
|
onResizeTouchStart: (event: TouchEvent) => void
|
|
|
|
isPhoneLayout: boolean
|
|
overlayAriaLabel: string
|
|
}
|
|
|
|
const SplitFilePanel: Component<SplitFilePanelProps> = (props) => {
|
|
const { t } = useI18n()
|
|
return (
|
|
<div class="files-tab-container">
|
|
<div class="files-tab-header">
|
|
<div class="files-tab-header-row">
|
|
<button type="button" class="files-toggle-button" onClick={props.onToggleList}>
|
|
{props.listOpen ? t("instanceShell.filesShell.hideFiles") : t("instanceShell.filesShell.showFiles")}
|
|
</button>
|
|
|
|
{props.header}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="files-tab-body">
|
|
<Show
|
|
when={!props.isPhoneLayout && props.listOpen}
|
|
fallback={props.viewer}
|
|
>
|
|
<div class="files-split" style={{ "--files-pane-width": `${props.splitWidth}px` }}>
|
|
<div class="file-list-panel">
|
|
<div class="file-list-scroll">{props.list.panel()}</div>
|
|
</div>
|
|
<div
|
|
class="file-split-handle"
|
|
role="separator"
|
|
aria-orientation="vertical"
|
|
aria-label="Resize file list"
|
|
onMouseDown={props.onResizeMouseDown}
|
|
onTouchStart={props.onResizeTouchStart}
|
|
/>
|
|
{props.viewer}
|
|
</div>
|
|
</Show>
|
|
|
|
<Show when={props.isPhoneLayout}>
|
|
<Show when={props.listOpen}>
|
|
<OverlayList ariaLabel={props.overlayAriaLabel}>{props.list.overlay()}</OverlayList>
|
|
</Show>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SplitFilePanel
|