Skip to content

Commit bdd97c1

Browse files
dean-journeyappsdean-journeyapps
committed
feat(app): add helpful links section and updated styles
1 parent 1c5f291 commit bdd97c1

File tree

4 files changed

+116
-29
lines changed

4 files changed

+116
-29
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ dist
66
.DS_Store
77
.env.local
88
.env
9+
.vscode

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ If you prefer using the Supabase CLI, you can set up your project as follows:
4949
3. Enable "anonymous sign-ins" for the project [here](https://supabase.com/dashboard/project/_/auth/providers)
5050
4. Copy your project ID from the Supabase dashboard [here](https://supabase.com/dashboard/project/_/settings/general)
5151
5. Link your local project `npx supabase link --project-ref <project-id>`
52-
6. Create your `npx supabase migration new create_powersync_tables` and copy the contents of [`database.pgsql`](database.pgsql) into the newly created migration file in the `supabase/migrations` directory.
52+
6. Create your first migration with `npx supabase migration new create_powersync_tables` and then copy the contents of [`database.pgsql`](database.pgsql) into the newly created migration file in the `supabase/migrations` directory.
5353
7. Push your tables to the cloud db
5454
```shell
5555
npx supabase db push

‎src/App.css‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
html, body, #root {
1+
html,
2+
body,
3+
#root {
24
height: 100%;
35
margin: 0;
46
padding: 0;
@@ -75,3 +77,48 @@ html, body, #root {
7577
border-radius: 6px;
7678
cursor: pointer;
7779
}
80+
81+
.top-row {
82+
display: flex;
83+
flex-wrap: wrap;
84+
gap: 1rem;
85+
}
86+
87+
.status-card,
88+
.links-card {
89+
flex: 1;
90+
min-width: 300px;
91+
padding: 1rem;
92+
border: 1px solid #ddd;
93+
border-radius: 8px;
94+
text-align: center;
95+
}
96+
97+
.links-card ul {
98+
list-style-type: none;
99+
padding: 0;
100+
}
101+
102+
.links-card li {
103+
margin-bottom: 0.5rem;
104+
}
105+
106+
.links-card a {
107+
color: #007bff;
108+
text-decoration: none;
109+
}
110+
111+
.links-card a:hover {
112+
text-decoration: underline;
113+
}
114+
115+
.counter-grid {
116+
display: grid;
117+
gap: 1rem;
118+
}
119+
120+
.counter-card {
121+
padding: 1rem;
122+
border: 1px solid #ddd;
123+
border-radius: 8px;
124+
}

‎src/App.tsx‎

Lines changed: 66 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -108,34 +108,73 @@ function App() {
108108

109109
return (
110110
<div className="app-container">
111-
<div className="status-card">
112-
<h3>PowerSync Status</h3>
113-
<div className="mono-text">
114-
{/* SDK version of the rust core extension and it's hash - see here https://github.com/powersync-ja/powersync-sqlite-core/releases */}
115-
<div><strong>SDK Version:</strong> {powerSync.sdkVersion}</div>
116-
{status && (
117-
<>
118-
<div><strong>connected:</strong> {status.connected.toString()}</div>
119-
<div><strong>connecting:</strong> {status.connecting.toString()}</div>
120-
<div><strong>uploading:</strong> {status.dataFlowStatus?.uploading?.toString()}</div>
121-
<div><strong>downloading:</strong> {status.dataFlowStatus?.downloading?.toString()}</div>
122-
<div>
123-
<strong>downloadProgress:</strong>{" "}
124-
{status.downloadProgress?.downloadedFraction != null
125-
? `${(status.downloadProgress.downloadedFraction * 100).toFixed(2)}%`
126-
: "0%"}
127-
</div>
128-
<div><strong>hasSynced:</strong> {status.hasSynced?.toString() ?? "false"}</div>
129-
<div><strong>lastSyncedAt:</strong> {status.lastSyncedAt?.toLocaleString() ?? "N/A"}</div>
130-
</>
131-
)}
111+
{/* Top row with Status and Helpful Links cards */}
112+
<div className="top-row">
113+
<div className="status-card">
114+
<h3>PowerSync Status</h3>
115+
<div className="mono-text">
116+
{/* SDK version of the rust core extension and it's hash - see here https://github.com/powersync-ja/powersync-sqlite-core/releases */}
117+
<div><strong>SDK Version:</strong> {powerSync.sdkVersion}</div>
118+
{status && (
119+
<>
120+
<div><strong>connected:</strong> {status.connected.toString()}</div>
121+
<div><strong>connecting:</strong> {status.connecting.toString()}</div>
122+
<div><strong>uploading:</strong> {status.dataFlowStatus?.uploading?.toString()}</div>
123+
<div><strong>downloading:</strong> {status.dataFlowStatus?.downloading?.toString()}</div>
124+
<div>
125+
<strong>downloadProgress:</strong>{" "}
126+
{status.downloadProgress?.downloadedFraction != null
127+
? `${(status.downloadProgress.downloadedFraction * 100).toFixed(2)}%`
128+
: "0%"}
129+
</div>
130+
<div><strong>hasSynced:</strong> {status.hasSynced?.toString() ?? "false"}</div>
131+
<div><strong>lastSyncedAt:</strong> {status.lastSyncedAt?.toLocaleString() ?? "N/A"}</div>
132+
</>
133+
)}
134+
</div>
135+
136+
{/* Authentication Status */}
137+
<div className="auth-status">
138+
<div><strong>User ID:</strong> {userID || "Not authenticated"}</div>
139+
{isAuthenticating && <div><strong>Status:</strong> Authenticating...</div>}
140+
{authError && <div style={{color: 'red'}}><strong>Auth Error:</strong> {authError}</div>}
141+
</div>
132142
</div>
133-
134-
{/* Authentication Status */}
135-
<div className="auth-status">
136-
<div><strong>User ID:</strong> {userID || "Not authenticated"}</div>
137-
{isAuthenticating && <div><strong>Status:</strong> Authenticating...</div>}
138-
{authError && <div style={{color: 'red'}}><strong>Auth Error:</strong> {authError}</div>}
143+
144+
<div className="links-card">
145+
<h3>Helpful Links</h3>
146+
<ul className="links-list">
147+
<li>
148+
<a href="https://docs.powersync.com" target="_blank" rel="noopener noreferrer">
149+
PowerSync Documentation
150+
</a>
151+
</li>
152+
<li>
153+
<a href="https://accounts.journeyapps.com/portal" target="_blank" rel="noopener noreferrer">
154+
PowerSync Dashboard Portal
155+
</a>
156+
</li>
157+
<li>
158+
<a href="https://docs.powersync.com/usage/sync-rules" target="_blank" rel="noopener noreferrer">
159+
PowerSync Sync Rules
160+
</a>
161+
</li>
162+
<li>
163+
<a href="https://app.supabase.com" target="_blank" rel="noopener noreferrer">
164+
Supabase Dashboard
165+
</a>
166+
</li>
167+
<li>
168+
<a href="https://docs.powersync.com/integration-guides/supabase-+-powersync" target="_blank" rel="noopener noreferrer">
169+
Supabase + PowerSync Guide
170+
</a>
171+
</li>
172+
<li>
173+
<a href="https://supabase.com/docs/guides/auth" target="_blank" rel="noopener noreferrer">
174+
Supabase Auth Guide
175+
</a>
176+
</li>
177+
</ul>
139178
</div>
140179
</div>
141180

0 commit comments

Comments
 (0)