Skip to content

Commit 089be03

Browse files
pallyoungpallyoung
committed
feat(web): refine mobile workspace home chrome
1 parent 13b6231 commit 089be03

4 files changed

Lines changed: 103 additions & 189 deletions

File tree

‎packages/web/src/features/workspace/views/mobile/workspace-mobile-view.tsx‎

Lines changed: 19 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
pendingFocusSessionAtom,
77
visibleMobileSessionIdAtom,
88
} from "../../../../atoms/app-ui";
9-
import { EmptyState, Sheet } from "../../../../components/ui";
9+
import { Sheet } from "../../../../components/ui";
1010
import { useTranslation } from "../../../../lib/i18n";
1111
import { SessionCard } from "../../../agent-panes/views/shared/session-card";
1212
import { useCodeEditorActions } from "../../../code-editor/actions/use-code-editor-actions";
@@ -365,41 +365,24 @@ export function WorkspaceMobileView() {
365365
</>
366366
) : (
367367
<section className="mobile-shell__agent-empty" data-testid="mobile-agent-empty">
368-
<div className="mobile-shell__empty-content">
369-
<div className="mobile-shell__empty-panel" aria-hidden="true" />
370-
<EmptyState
371-
className="mobile-shell__empty-state"
372-
style={{ minHeight: "auto" }}
373-
title={
374-
<div className="mobile-shell__empty-heading">
375-
<span className="mobile-shell__empty-kicker">{t("label.agent")}</span>
376-
<p className="mobile-shell__empty-title">{t("mobile.empty.start_session")}</p>
377-
</div>
378-
}
379-
description={
380-
<div className="mobile-shell__placeholder-copy">
381-
<p>{t("mobile.empty.files_terminal_hint")}</p>
382-
<div className="mobile-shell__placeholder-pills" aria-hidden="true">
383-
<span className="mobile-shell__placeholder-pill">{t("label.agent")}</span>
384-
<span className="mobile-shell__placeholder-pill">{t("file.title")}</span>
385-
<span className="mobile-shell__placeholder-pill">
386-
{t("label.terminal")}
387-
</span>
388-
</div>
389-
</div>
390-
}
391-
action={
392-
<div className="mobile-shell__empty-action-row">
393-
<button
394-
type="button"
395-
className="mobile-shell__empty-cta"
396-
onClick={() => setAgentSheetOpen(true)}
397-
>
398-
{t("action.create_session")}
399-
</button>
400-
</div>
401-
}
402-
/>
368+
<div className="mobile-shell__empty-content mobile-shell__empty-content--flat">
369+
<div className="mobile-shell__empty-state">
370+
<div className="mobile-shell__empty-heading">
371+
<p className="mobile-shell__empty-title">{t("mobile.empty.start_session")}</p>
372+
</div>
373+
<div className="mobile-shell__placeholder-copy">
374+
<p>{t("mobile.empty.files_terminal_hint")}</p>
375+
</div>
376+
<div className="mobile-shell__empty-action-row">
377+
<button
378+
type="button"
379+
className="mobile-shell__empty-cta"
380+
onClick={() => setAgentSheetOpen(true)}
381+
>
382+
{t("action.create_session")}
383+
</button>
384+
</div>
385+
</div>
403386
</div>
404387
</section>
405388
)}

‎packages/web/src/shells/mobile-shell/index.test.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2789,7 +2789,16 @@ describe("MobileShell Phase 2 workspace", () => {
27892789
expect(screen.getByTestId("mobile-agent-empty")).toBeInTheDocument();
27902790
});
27912791
expect(screen.queryByTestId("agent-panes-empty-mock")).not.toBeInTheDocument();
2792+
expect(document.querySelector(".mobile-shell__empty-kicker")).toBeNull();
2793+
expect(document.querySelector(".mobile-shell__empty-panel")).toBeNull();
2794+
expect(document.querySelector(".mobile-shell__empty-content")).toHaveClass(
2795+
"mobile-shell__empty-content--flat"
2796+
);
2797+
expect(document.querySelector(".mobile-shell__placeholder-pills")).toBeNull();
27922798
expect(screen.getByRole("button", { name: "Create Session" })).toBeInTheDocument();
2799+
expect(
2800+
document.querySelector(".mobile-shell__bottom-stack .workspace-status-bar")
2801+
).not.toBeNull();
27932802

27942803
await user.click(screen.getByRole("button", { name: "Create Session" }));
27952804

@@ -2826,6 +2835,7 @@ describe("MobileShell Phase 2 workspace", () => {
28262835
expect(screen.getByRole("button", { name: "打开终端面板" })).toBeInTheDocument();
28272836
expect(screen.getByText("为当前工作区启动一个新的 Agent 会话。")).toBeInTheDocument();
28282837
expect(screen.getByText("文件和终端可继续通过底部栏访问。")).toBeInTheDocument();
2838+
expect(document.querySelector(".mobile-shell__empty-kicker")).toBeNull();
28292839

28302840
await user.click(screen.getByRole("button", { name: "切换工作区" }));
28312841

‎packages/web/src/styles/components.css‎

Lines changed: 43 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -8275,9 +8275,10 @@ textarea.input {
82758275
min-height: 36px;
82768276
height: 36px;
82778277
padding: 0 var(--sp-3);
8278-
border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
8279-
border-radius: 999px;
8280-
background: color-mix(in srgb, var(--bg-surface) 84%, var(--bg-page));
8278+
border: none;
8279+
border-bottom: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
8280+
border-radius: 0;
8281+
background: color-mix(in srgb, var(--bg-surface) 24%, transparent);
82818282
color: var(--text-primary);
82828283
}
82838284

@@ -8423,8 +8424,8 @@ textarea.input {
84238424
height: 36px;
84248425
padding: 0;
84258426
border: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
8426-
border-radius: 999px;
8427-
background: color-mix(in srgb, var(--bg-surface) 82%, var(--bg-page));
8427+
border-radius: 10px;
8428+
background: color-mix(in srgb, var(--bg-surface) 42%, transparent);
84288429
color: var(--text-primary);
84298430
transition:
84308431
background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -8645,7 +8646,7 @@ textarea.input {
86458646
flex-direction: column;
86468647
align-items: stretch;
86478648
justify-content: flex-start;
8648-
padding: clamp(44px, 11vh, 92px) var(--sp-4) var(--sp-3);
8649+
padding: clamp(34px, 9vh, 72px) var(--sp-4) var(--sp-3);
86498650
border: none;
86508651
background: transparent;
86518652
box-shadow: none;
@@ -8654,139 +8655,64 @@ textarea.input {
86548655
.mobile-shell__empty-content {
86558656
position: relative;
86568657
display: flex;
8657-
width: min(100%, 344px);
8658+
width: min(100%, 320px);
86588659
flex-direction: column;
86598660
align-self: flex-start;
8660-
gap: var(--sp-3);
8661-
padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 2px);
8662-
border-top: none;
8663-
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
8664-
border-radius: var(--radius-xl);
8665-
background: linear-gradient(
8666-
180deg,
8667-
color-mix(in srgb, var(--bg-surface) 94%, transparent) 0%,
8668-
color-mix(in srgb, var(--bg-page) 96%, var(--bg-surface) 4%) 100%
8669-
);
8670-
box-shadow: 0 18px 40px color-mix(in srgb, var(--bg-page) 44%, transparent);
8671-
overflow: hidden;
8672-
}
8673-
8674-
.mobile-shell__empty-content::before {
8675-
content: "";
8676-
position: absolute;
8677-
inset: 16px auto 16px 0;
8678-
width: 2px;
8679-
border-radius: var(--radius-full);
8680-
background: linear-gradient(
8681-
180deg,
8682-
color-mix(in srgb, var(--accent-blue) 34%, var(--border)) 0%,
8683-
color-mix(in srgb, var(--accent-blue) 14%, transparent) 36%,
8684-
transparent 100%
8685-
);
8661+
gap: 0;
8662+
padding: 0;
8663+
border: none;
8664+
border-radius: 0;
8665+
background: transparent;
8666+
box-shadow: none;
8667+
overflow: visible;
86868668
}
86878669

8688-
.mobile-shell__empty-panel {
8689-
position: absolute;
8690-
inset: 0 0 auto 0;
8691-
height: 96px;
8692-
background:
8693-
radial-gradient(
8694-
circle at top left,
8695-
color-mix(in srgb, var(--accent-blue) 18%, transparent),
8696-
transparent 58%
8697-
),
8698-
linear-gradient(
8699-
180deg,
8700-
color-mix(in srgb, var(--bg-surface) 8%, transparent) 0%,
8701-
transparent 100%
8702-
);
8703-
pointer-events: none;
8670+
.mobile-shell__empty-content--flat {
8671+
width: min(100%, 320px);
87048672
}
87058673

87068674
.mobile-shell__empty-state {
87078675
width: 100%;
87088676
align-items: flex-start;
87098677
justify-content: center;
8710-
gap: var(--sp-4);
8678+
gap: var(--sp-3);
87118679
min-height: 0;
87128680
padding: 0;
87138681
text-align: left;
8714-
position: relative;
8715-
z-index: 1;
8682+
display: flex;
8683+
flex-direction: column;
87168684
}
87178685

87188686
.mobile-shell__empty-heading {
87198687
display: flex;
87208688
width: 100%;
87218689
flex-direction: column;
8722-
gap: var(--sp-2);
8723-
}
8724-
8725-
.mobile-shell__empty-kicker {
8726-
display: inline-flex;
8727-
align-items: center;
8728-
gap: 6px;
8729-
font-size: 10px;
8730-
line-height: 1.1;
8731-
color: var(--text-tertiary);
8732-
font-family: var(--font-mono);
8733-
text-transform: uppercase;
8734-
letter-spacing: 0.08em;
8735-
}
8736-
8737-
.mobile-shell__empty-kicker::before {
8738-
content: "";
8739-
width: 6px;
8740-
height: 6px;
8741-
border: 1px solid color-mix(in srgb, var(--accent-blue) 38%, var(--border));
8742-
border-radius: var(--radius-full);
8743-
background: color-mix(in srgb, var(--accent-blue) 22%, transparent);
8690+
gap: 0;
87448691
}
87458692

87468693
.mobile-shell__empty-title {
87478694
margin: 0;
87488695
color: var(--text-primary);
8749-
font-size: clamp(22px, 5.8vw, 30px);
8696+
font-size: clamp(24px, 6.4vw, 32px);
87508697
font-weight: var(--font-semibold);
8751-
line-height: 1.2;
8752-
letter-spacing: -0.02em;
8698+
line-height: 1.08;
8699+
letter-spacing: -0.035em;
87538700
}
87548701

87558702
.mobile-shell__placeholder-copy {
87568703
display: flex;
87578704
flex-direction: column;
87588705
align-items: flex-start;
8759-
gap: var(--sp-3);
8760-
max-width: 31ch;
8706+
gap: var(--sp-2);
8707+
max-width: 18ch;
87618708
color: var(--text-secondary);
87628709
text-align: left;
87638710
}
87648711

87658712
.mobile-shell__placeholder-copy p {
87668713
margin: 0;
8767-
font-size: 15px;
8768-
line-height: 1.65;
8769-
}
8770-
8771-
.mobile-shell__placeholder-pills {
8772-
display: flex;
8773-
flex-wrap: wrap;
8774-
gap: var(--sp-2);
8775-
}
8776-
8777-
.mobile-shell__placeholder-pill {
8778-
display: inline-flex;
8779-
align-items: center;
8780-
min-height: 26px;
8781-
padding: 0 10px;
8782-
border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
8783-
border-radius: 999px;
8784-
background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
8785-
color: var(--text-tertiary);
8786-
font-family: var(--font-mono);
8787-
font-size: 10px;
8788-
letter-spacing: 0.08em;
8789-
text-transform: uppercase;
8714+
font-size: 14px;
8715+
line-height: 1.62;
87908716
}
87918717

87928718
.mobile-shell__empty-action-row {
@@ -8800,13 +8726,13 @@ textarea.input {
88008726
display: inline-flex;
88018727
align-items: center;
88028728
justify-content: center;
8803-
min-height: 40px;
8729+
min-height: 38px;
88048730
width: auto;
8805-
min-width: 150px;
8731+
min-width: 136px;
88068732
padding: 0 var(--sp-4);
88078733
border: 1px solid color-mix(in srgb, var(--accent-blue) 34%, var(--border));
8808-
border-radius: 999px;
8809-
background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-surface));
8734+
border-radius: 12px;
8735+
background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-surface));
88108736
color: var(--text-primary);
88118737
font-size: 13px;
88128738
font-weight: var(--font-semibold);
@@ -8837,7 +8763,7 @@ textarea.input {
88378763

88388764
.mobile-dock-shell {
88398765
position: relative;
8840-
padding: 6px calc(var(--mobile-safe-right) + var(--sp-4)) 0
8766+
padding: 3px calc(var(--mobile-safe-right) + var(--sp-4)) 0
88418767
calc(var(--mobile-safe-left) + var(--sp-4));
88428768
}
88438769

@@ -8964,12 +8890,13 @@ textarea.input {
89648890
flex-direction: column;
89658891
align-items: center;
89668892
justify-content: center;
8967-
min-height: 42px;
8893+
min-height: 30px;
89688894
gap: 4px;
8969-
padding: 8px var(--sp-2) 7px;
8970-
border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
8971-
border-radius: var(--radius-xl);
8972-
background: color-mix(in srgb, var(--bg-surface) 74%, transparent);
8895+
padding: 2px var(--sp-2) 2px;
8896+
border: none;
8897+
border-top: 1px solid transparent;
8898+
border-radius: 0;
8899+
background: transparent;
89738900
color: var(--text-tertiary);
89748901
transition:
89758902
background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -8980,21 +8907,13 @@ textarea.input {
89808907
}
89818908

89828909
.mobile-dock__item--active {
8983-
border-color: color-mix(in srgb, var(--accent-blue) 34%, var(--border));
8984-
background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-surface));
8910+
border-top-color: color-mix(in srgb, var(--accent-blue) 72%, transparent);
8911+
background: transparent;
89858912
color: var(--text-primary);
89868913
}
89878914

89888915
.mobile-dock__item--active::before {
8989-
content: "";
8990-
position: absolute;
8991-
top: 6px;
8992-
left: 50%;
8993-
width: 18px;
8994-
height: 2px;
8995-
border-radius: var(--radius-full);
8996-
background: color-mix(in srgb, var(--accent-blue) 78%, transparent);
8997-
transform: translateX(-50%);
8916+
content: none;
89988917
}
89998918

90008919
.mobile-dock__icon {
@@ -9010,7 +8929,7 @@ textarea.input {
90108929
}
90118930

90128931
.mobile-dock__label {
9013-
font-size: 11px;
8932+
font-size: 10px;
90148933
font-weight: var(--font-medium);
90158934
line-height: 1.1;
90168935
}

0 commit comments

Comments
 (0)