Skip to content

Commit 73d8f01

Browse files
author
Cristian Carlos dos Santos
committed
Polish responsive desktop interface
1 parent 831d83d commit 73d8f01

11 files changed

Lines changed: 96 additions & 32 deletions

‎apps/desktop/src/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1175,11 +1175,11 @@ export default function App({ themeName: name, onToggleTheme: toggle }: AppProps
11751175
/>
11761176

11771177
<Dialog open={metadataRefreshConfirmOpen} onOpenChange={(_, data) => setMetadataRefreshConfirmOpen(data.open)}>
1178-
<DialogSurface>
1179-
<DialogBody>
1178+
<DialogSurface className="omni-standard-dialog omni-confirm-dialog">
1179+
<DialogBody className="omni-dialog-body">
11801180
<DialogTitle>{t("refreshMetadata")}</DialogTitle>
11811181
<DialogContent>{t("refreshMetadataConfirm")}</DialogContent>
1182-
<DialogActions>
1182+
<DialogActions className="omni-dialog-actions">
11831183
<Button appearance="secondary" onClick={() => setMetadataRefreshConfirmOpen(false)}>{t("cancel")}</Button>
11841184
<Button
11851185
appearance="primary"

‎apps/desktop/src/components/ConnectionDialog.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -246,10 +246,10 @@ export function ConnectionDialog({ open, editing, duplicating = false, onClose,
246246

247247
return (
248248
<Dialog open={open} onOpenChange={(_, data) => !data.open && onClose()}>
249-
<DialogSurface>
250-
<form onSubmit={onSave}>
249+
<DialogSurface className="omni-standard-dialog omni-connection-dialog">
250+
<form className="omni-dialog-form" onSubmit={onSave}>
251251
<DialogTitle>{duplicating ? t("duplicateConnection") : editing ? t("editConnection") : t("newConnection")}</DialogTitle>
252-
<DialogBody style={{ display: "flex", flexDirection: "column", gap: 12 }}>
252+
<DialogBody className="omni-dialog-body">
253253
<Label>
254254
Tipo
255255
<select
@@ -295,7 +295,7 @@ export function ConnectionDialog({ open, editing, duplicating = false, onClose,
295295

296296
{mode !== "demo" && mode !== "jdbc-generic" && (
297297
<>
298-
<div style={{ display: "flex", gap: 12 }}>
298+
<div className="omni-connection-host-row">
299299
<Label style={{ flex: 1 }}>
300300
Host
301301
<Input value={host} onChange={(_, data) => setHost(data.value)} placeholder="127.0.0.1" disabled={busy} required style={{ marginTop: 4 }} />
@@ -383,7 +383,7 @@ export function ConnectionDialog({ open, editing, duplicating = false, onClose,
383383
</Text>
384384
)}
385385
</DialogBody>
386-
<DialogActions>
386+
<DialogActions className="omni-dialog-actions">
387387
{mode !== "demo" && (
388388
<Button type="button" onClick={onTest} disabled={busy || !canConnect()}>
389389
{busy ? t("loading") : t("connect")}

‎apps/desktop/src/components/ExecutionRiskDialog.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ export function ExecutionRiskDialog({ analysis, onCancel, onConfirm }: Execution
3232

3333
return (
3434
<Dialog open={analysis !== null} onOpenChange={(_, data) => !data.open && onCancel()}>
35-
<DialogSurface style={{ width: "min(720px, calc(100vw - 24px))" }}>
36-
<DialogBody>
35+
<DialogSurface className="omni-standard-dialog omni-risk-dialog">
36+
<DialogBody className="omni-dialog-body">
3737
<DialogTitle>{t("destructiveSqlTitle")}</DialogTitle>
38-
<DialogContent style={{ display: "grid", gap: 12 }}>
38+
<DialogContent className="omni-dialog-content" style={{ display: "grid", gap: 12 }}>
3939
<p style={{ margin: 0 }}>{analysis?.level === "critical" ? t("destructiveSqlCritical") : t("destructiveSqlWarning")}</p>
4040
{analysis?.findings.map((finding, index) => (
4141
<section key={`${finding.start}-${finding.kind}-${index}`} style={{ borderLeft: `3px solid ${finding.level === "critical" ? tokens.colorPaletteRedBorderActive : tokens.colorPaletteDarkOrangeBorderActive}`, paddingLeft: 10 }}>
@@ -59,7 +59,7 @@ export function ExecutionRiskDialog({ analysis, onCancel, onConfirm }: Execution
5959
/>
6060
)}
6161
</DialogContent>
62-
<DialogActions>
62+
<DialogActions className="omni-dialog-actions">
6363
<Button onClick={onCancel}>{t("cancel")}</Button>
6464
<Button appearance="primary" disabled={!canConfirm} onClick={() => onConfirm(suppressWarnings)}>{t("destructiveSqlConfirm")}</Button>
6565
</DialogActions>

‎apps/desktop/src/components/HistoryPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export function HistoryPanel({ open, entries, onClose, onClear }: HistoryPanelPr
7676
<div style={{ padding: 8, borderBottom: `1px solid ${tokens.colorNeutralStroke1}` }}><Input placeholder={t("searchHistory")} aria-label={t("searchHistory")} value={searchText} onChange={(_, data) => setSearchText(data.value)} contentBefore={<SearchRegular />} style={{ width: "100%" }} /></div>
7777
<div style={{ flex: 1, overflow: "auto", padding: 6 }}>
7878
<Text size={200} style={{ color: tokens.colorNeutralForeground2, padding: "2px 4px 6px" }}>{filteredEntries.length} {t("resultCount")}</Text>
79-
{filteredEntries.length === 0 ? <div style={{ padding: "32px 16px", textAlign: "center" }}><Text size={200} style={{ color: tokens.colorNeutralForeground2 }}>{entries.length === 0 ? t("noQueries") : t("noMatchingHistory")}</Text></div> : filteredEntries.map((entry) => (
79+
{filteredEntries.length === 0 ? <div className="omni-empty-state"><Text size={200}>{entries.length === 0 ? t("noQueries") : t("noMatchingHistory")}</Text></div> : filteredEntries.map((entry) => (
8080
<div key={entry.id} style={{ width: "100%", background: tokens.colorNeutralBackground2, border: `1px solid ${tokens.colorNeutralStroke1}`, borderRadius: 4, marginBottom: 6, color: tokens.colorNeutralForeground1, display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto" }}>
8181
<button onClick={() => setSelectedEntry(entry)} aria-label={`${t("executedSql")}: ${entry.sql}`} style={{ minWidth: 0, border: 0, padding: "8px 4px 8px 8px", textAlign: "left", cursor: "pointer", color: "inherit", background: "transparent" }}>
8282
<div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 11, color: tokens.colorNeutralForeground2 }}>

‎apps/desktop/src/components/McpEditDialog.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,17 @@ export function McpEditDialog({
3232
const { t } = useLanguage();
3333
return (
3434
<Dialog open={proposal !== null} onOpenChange={(_, data) => !data.open && onReject()}>
35-
<DialogSurface style={{ width: "min(900px, calc(100vw - 24px))", maxHeight: "calc(100vh - 24px)", display: "flex", flexDirection: "column" }}>
35+
<DialogSurface className="omni-standard-dialog omni-mcp-edit-dialog">
3636
<DialogBody style={{ display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
3737
<DialogTitle style={{ flexShrink: 0 }}>{t("mcpEditTitle")}</DialogTitle>
3838
<DialogContent style={{ display: "grid", gap: 12, overflowY: "auto", minHeight: 0 }}>
3939
<Text>{t("mcpEditRationale")}: {proposal?.rationale}</Text>
40-
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, minHeight: 240 }}>
40+
<div className="omni-mcp-edit-grid">
4141
<SqlPreview label={t("mcpOriginalSql")} value={proposal?.originalSql ?? ""} />
4242
<SqlPreview label={t("mcpProposedSql")} value={proposal?.proposedSql ?? ""} accent />
4343
</div>
4444
</DialogContent>
45-
<DialogActions style={{ flexShrink: 0 }}>
45+
<DialogActions className="omni-dialog-actions" style={{ flexShrink: 0 }}>
4646
<Button appearance="secondary" onClick={onReject}>{t("reject")}</Button>
4747
<Button appearance="primary" onClick={onApply}>{t("applyEdit")}</Button>
4848
</DialogActions>

‎apps/desktop/src/components/ResultsGrid.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -471,7 +471,7 @@ export function ResultsGrid({
471471
{planText && <Tab value="plan" icon={<WrenchRegular fontSize={12} />}>{t("plan")}</Tab>}
472472
</TabList>
473473
{activeTab === "data" && (
474-
<div style={{ display: "flex", alignItems: "center", gap: 8, flex: 1, justifyContent: "flex-end" }}>
474+
<div className="omni-results-actions">
475475
{result && editability && !editability.editable && (
476476
<Text role="status" aria-live="polite" size={200} style={{ color: tokens.colorNeutralForeground2, background: tokens.colorNeutralBackground3, border: `1px solid ${tokens.colorNeutralStroke1}`, borderRadius: 4, padding: "4px 8px", maxWidth: 360, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={editability.reason ?? t("inlineEditingUnavailable")}>
477477
{t("inlineEditingUnavailableText")}{editability.reason ? `: ${editability.reason}` : "."}
@@ -502,7 +502,7 @@ export function ResultsGrid({
502502
<FilterRegular aria-hidden="true" />
503503
</>
504504
}
505-
style={{ minWidth: 180, maxWidth: 240 }}
505+
className="omni-results-filter"
506506
/>
507507
<Popover positioning="below-end">
508508
<PopoverTrigger disableButtonEnhancement>
@@ -597,7 +597,7 @@ export function ResultsGrid({
597597
{activeTab === "data" && (
598598
<>
599599
{!result ? (
600-
<Text size={200} style={{ padding: 16, display: "block", color: tokens.colorNeutralForeground2 }}>
600+
<Text className="omni-empty-state" size={200}>
601601
{t("noResults")}
602602
</Text>
603603
) : (
@@ -792,7 +792,7 @@ export function ResultsGrid({
792792
)}
793793
</div>
794794
) : (
795-
<Text size={200} style={{ color: tokens.colorNeutralForeground2 }}>
795+
<Text className="omni-empty-state" size={200}>
796796
{t("noMessages")}
797797
</Text>
798798
)}

‎apps/desktop/src/components/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -807,7 +807,7 @@ export function Sidebar({
807807
</div>
808808
<div className="omni-sidebar-tree" style={{ flex: 1, minWidth: 0, minHeight: 0, overflow: "auto", padding: "0 8px 8px" }}>
809809
{groups.length === 0 ? (
810-
<Text size={200} style={{ color: tokens.colorNeutralForeground2, padding: 8 }}>
810+
<Text className="omni-empty-state" size={200}>
811811
{loading ? tr("loading") : search ? tr("noResults") : tr("noObjects")}
812812
</Text>
813813
) : (

‎apps/desktop/src/components/StatusBar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ export function StatusBar({ connection, result, cursorPosition, busyMsg, health
235235
</Text>
236236
)}
237237
<Dialog open={mcpOpen} onOpenChange={(_, data) => setMcpOpen(data.open)}>
238-
<DialogSurface style={{ width: "min(620px, calc(100vw - 24px))", maxHeight: "calc(100vh - 24px)", display: "flex", flexDirection: "column" }}>
238+
<DialogSurface className="omni-standard-dialog omni-mcp-status-dialog">
239239
<DialogBody style={{ display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
240240
<DialogTitle style={{ flexShrink: 0 }}>{t("mcpStatusTitle")}</DialogTitle>
241241
<DialogContent style={{ display: "grid", gap: 12, overflowY: "auto", minHeight: 0 }}>
@@ -321,7 +321,7 @@ export function StatusBar({ connection, result, cursorPosition, busyMsg, health
321321
</div>
322322
)}
323323
</DialogContent>
324-
<DialogActions style={{ flexShrink: 0 }}>
324+
<DialogActions className="omni-dialog-actions" style={{ flexShrink: 0 }}>
325325
<Button appearance="secondary" onClick={() => setMcpOpen(false)}>{t("cancel")}</Button>
326326
</DialogActions>
327327
</DialogBody>

‎apps/desktop/src/components/Toolbar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export function Toolbar({
114114
</select>
115115
</div>
116116

117-
<div className="omni-toolbar-group" role="group" aria-label={t("tabActions")}>
117+
<div className="omni-toolbar-group omni-toolbar-tab-actions" role="group" aria-label={t("tabActions")}>
118118
<ToolbarButton icon={<AddRegular fontSize={14} />} onClick={onAdd} aria-label={t("newSqlTab")} title={t("newSqlTab")} />
119119
<ToolbarButton icon={<FolderOpenRegular fontSize={14} />} onClick={onOpen} aria-label={t("openSavedTab")}>
120120
{t("openSavedTab")}
@@ -144,10 +144,10 @@ export function Toolbar({
144144
<ToolbarButton icon={<MoreVerticalRegular fontSize={14} />} aria-label={t("moreOptions")} title={t("moreOptions")} />
145145
{pendingRunCount && (
146146
<Dialog open onOpenChange={(_, data) => !data.open && onRunChoiceCancel?.()}>
147-
<DialogSurface style={{ minWidth: 280 }}>
148-
<DialogBody>
147+
<DialogSurface className="omni-standard-dialog omni-confirm-dialog" style={{ minWidth: 280 }}>
148+
<DialogBody className="omni-dialog-body">
149149
<DialogTitle>{t("multipleStatements")}</DialogTitle>
150-
<DialogActions>
150+
<DialogActions className="omni-dialog-actions">
151151
<Button onClick={() => onRunChoice?.("current")} appearance="primary">
152152
{t("runCurrent")}
153153
</Button>

‎apps/desktop/src/components/VariablesDialog.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,10 @@ export function VariablesDialog({ open, variables, onClose, onSubmit }: Variable
4646

4747
return (
4848
<Dialog open={open} onOpenChange={(_, data) => !data.open && onClose()}>
49-
<DialogSurface>
50-
<DialogBody>
49+
<DialogSurface className="omni-standard-dialog omni-variables-dialog">
50+
<DialogBody className="omni-dialog-body">
5151
<DialogTitle>{t("run")}</DialogTitle>
52-
<DialogContent>
52+
<DialogContent className="omni-dialog-content">
5353
{variables.length === 0 ? (
5454
<Text>{t("noResults")}</Text>
5555
) : (
@@ -74,7 +74,7 @@ export function VariablesDialog({ open, variables, onClose, onSubmit }: Variable
7474
{t("variableValuesHint")}
7575
</Text>
7676
</DialogContent>
77-
<DialogActions>
77+
<DialogActions className="omni-dialog-actions">
7878
<DialogTrigger disableButtonEnhancement>
7979
<Button appearance="secondary" onClick={onClose}>
8080
{t("cancel")}

0 commit comments

Comments
 (0)