Skip to content

Commit 63122ad

Browse files
EoicEoic
committed
design: update sandbox page UIs
1 parent 6f4b21f commit 63122ad

7 files changed

Lines changed: 71 additions & 21 deletions

File tree

‎frontend/dev-pages/src/styles/dev-pages.scss‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,51 @@ body.dev-page {
2929
min-height: 100vh;
3030
font-family: "Roboto", sans-serif;
3131
color: var(--ink);
32-
background:
33-
linear-gradient(180deg, rgba(78, 161, 255, 0.08) 0%, transparent 160px),
34-
var(--bg);
32+
background-color: var(--bg);
3533
}
3634

3735
.dev-page__main {
3836
margin: 0 auto;
3937
padding: var(--space-5);
4038
}
4139

40+
.dev-page-nav {
41+
display: flex;
42+
flex-wrap: wrap;
43+
gap: var(--space-2);
44+
margin-bottom: var(--space-4);
45+
}
46+
47+
.dev-page-nav__link {
48+
display: inline-flex;
49+
align-items: center;
50+
min-height: 36px;
51+
padding: 0 var(--space-3);
52+
border: 1px solid var(--line);
53+
background: var(--bg-elevated);
54+
color: var(--muted);
55+
text-decoration: none;
56+
font-size: 0.9rem;
57+
font-weight: 500;
58+
transition:
59+
border-color 140ms ease,
60+
background-color 140ms ease,
61+
color 140ms ease;
62+
}
63+
64+
.dev-page-nav__link:hover {
65+
border-color: var(--accent);
66+
color: var(--ink);
67+
}
68+
69+
.dev-page-nav__link--active {
70+
border-color: var(--accent);
71+
background: var(--panel-strong);
72+
color: var(--accent-strong);
73+
}
74+
4275
.dev-page--auth .dev-page__main {
43-
max-width: 1400px;
76+
max-width: 1480px;
4477
}
4578

4679
.dev-page--powersync .dev-page__main {

‎frontend/dev-pages/templates/auth_sandbox.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22

33
{% block page_content %}
44
<header class="dev-page-header">
5-
<div class="dev-page-header__eyebrow">Development Console</div>
6-
<h1>Auth Sandbox</h1>
5+
<h1>Authentication sandbox</h1>
76
<p>Exercise registration, login, browser OAuth, token refresh, recovery, and protected calls with explicit runtime status.</p>
87
</header>
98

‎frontend/dev-pages/templates/base.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,21 @@
1717
</head>
1818
<body class="dev-page {{ body_class }}" data-dev-page="{{ page_id }}">
1919
<main class="dev-page__main">
20+
<nav class="dev-page-nav" aria-label="Sandbox navigation">
21+
<a
22+
href="/__dev/auth-sandbox"
23+
class="dev-page-nav__link{% if page_id == 'auth-sandbox' %} dev-page-nav__link--active{% endif %}"
24+
>
25+
Authentication
26+
</a>
27+
<a
28+
href="/__dev/powersync-sandbox"
29+
class="dev-page-nav__link{% if page_id == 'powersync-sandbox' %} dev-page-nav__link--active{% endif %}"
30+
>
31+
PowerSync
32+
</a>
33+
</nav>
34+
2035
{% block page_content %}{% endblock %}
2136
</main>
2237

‎frontend/dev-pages/templates/powersync_sandbox.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22

33
{% block page_content %}
44
<header class="dev-page-header">
5-
<div class="dev-page-header__eyebrow">Development Console</div>
6-
<h1>PowerSync Sandbox</h1>
5+
<h1>PowerSync sandbox</h1>
76
<p>Validate the full Papyrus-to-PowerSync flow with visible auth state, connection state, queued changes, and replicated rows.</p>
87
</header>
98

@@ -27,7 +26,7 @@ <h1>PowerSync Sandbox</h1>
2726
<div class="dev-panel__header">
2827
<div>
2928
<div class="dev-panel__eyebrow">Stage 1</div>
30-
<h2>Auth And Session</h2>
29+
<h2>Authentication and session</h2>
3130
</div>
3231
</div>
3332
<label for="email">Email</label>

‎papyrus/api/routes/dev_auth_sandbox.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ async def auth_sandbox(request: Request) -> HTMLResponse:
4848
return render_dev_page(
4949
request,
5050
template_name="auth_sandbox.html",
51-
page_title="Papyrus Auth Sandbox",
51+
page_title="Papyrus Authentication sandbox",
5252
page_id="auth-sandbox",
5353
body_class="dev-page--auth",
5454
entry_module="src/pages/auth-sandbox/main.ts",

‎tests/api/routes/test_auth_sandbox.py‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,13 @@ async def test_auth_sandbox_registered_in_debug_vite_mode(
2525
response = await debug_client.get("/__dev/auth-sandbox")
2626

2727
assert response.status_code == 200
28-
assert "Auth Sandbox" in response.text
29-
assert 'window.__PAPYRUS_DEV_PAGE_CONFIG__ =' in response.text
28+
assert "Authentication sandbox" in response.text
29+
assert "window.__PAPYRUS_DEV_PAGE_CONFIG__ =" in response.text
3030
assert 'data-dev-page="auth-sandbox"' in response.text
3131
assert 'data-shell-marker="sticky-status-rail"' in response.text
32+
assert 'href="/__dev/auth-sandbox"' in response.text
33+
assert 'href="/__dev/powersync-sandbox"' in response.text
34+
assert "dev-page-nav__link--active" in response.text
3235
assert 'src="http://vite.test:5173/@vite/client"' in response.text
3336
assert 'src="http://vite.test:5173/src/pages/auth-sandbox/main.ts"' in response.text
3437
assert '"registerUrl": "/v1/auth/register"' in response.text
@@ -44,16 +47,14 @@ async def test_auth_sandbox_renders_built_assets_when_manifest_exists(
4447
"""Test the auth sandbox uses built assets when Vite mode is disabled."""
4548
manifest_path = tmp_path / "manifest.json"
4649
manifest_path.write_text(
47-
json.dumps(
48-
{
49-
"src/pages/auth-sandbox/main.ts": {
50-
"file": "assets/auth-sandbox.js",
51-
"css": ["assets/auth-sandbox.css"],
52-
"imports": [],
53-
"src": "src/pages/auth-sandbox/main.ts",
54-
}
50+
json.dumps({
51+
"src/pages/auth-sandbox/main.ts": {
52+
"file": "assets/auth-sandbox.js",
53+
"css": ["assets/auth-sandbox.css"],
54+
"imports": [],
55+
"src": "src/pages/auth-sandbox/main.ts",
5556
}
56-
),
57+
}),
5758
encoding="utf-8",
5859
)
5960

‎tests/api/routes/test_powersync_sandbox.py‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ async def test_powersync_sandbox_registered_in_debug_vite_mode(
5656
assert "PowerSync Sandbox" in response.text
5757
assert 'data-dev-page="powersync-sandbox"' in response.text
5858
assert 'data-shell-marker="sticky-status-rail"' in response.text
59+
assert 'href="/__dev/auth-sandbox"' in response.text
60+
assert 'href="/__dev/powersync-sandbox"' in response.text
61+
assert 'dev-page-nav__link--active' in response.text
5962
assert 'src="http://vite.test:5173/@vite/client"' in response.text
6063
assert 'src="http://vite.test:5173/src/pages/powersync-sandbox/main.ts"' in response.text
6164
assert '"powersync_endpoint": "http://localhost:8081"' in response.text

0 commit comments

Comments
 (0)