A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Dashboard: de-emphasize the create-publication button when one exists
The "+ New publication" button was a prominent, sun-filled primary in the
list header in every state. But once a writer has a publication, their wanted
action is to write (already the top-bar CTA), not to create another.
Make the button state-dependent: keep it prominent in the empty state, where
creating a publication is the point, and render it as a quiet secondary
control below the list once at least one publication exists.
author
Jeremy Herve
date
(Jun 10, 2026, 3:01 PM +0200)
commit
2d6a190d
2d6a190dd09c0bf6fdfa367afee5e60b1c875f9f
parent
8f34577a
8f34577a9aa54b829676c5244e1d9dffe7215c3e
+72
-32
+39
-32
src/components/Dashboard.tsx
+39
-32
src/components/Dashboard.tsx
···
188
188
<section className="dash__section">
189
189
<div className="dash__section-head">
190
190
<h1 className="dash__h1">Your publications</h1>
191
-
<button type="button" className="dash__new" onClick={ onNew }>
192
-
+ New publication
193
-
</button>
194
191
</div>
195
192
196
193
{ publications.length === 0 ? (
197
-
<p className="dash__empty">
198
-
You don't have any publications yet. Create one to start publishing.
199
-
</p>
194
+
<div className="dash__empty-state">
195
+
<p>You don't have any publications yet. Create one to start publishing.</p>
196
+
<button type="button" className="dash__new" onClick={ onNew }>
197
+
+ New publication
198
+
</button>
199
+
</div>
200
200
) : (
201
-
<ul className="dash__pubs">
202
-
{ publications.map( ( pub ) => {
203
-
return (
204
-
<li className="dash__pub" key={ pub.uri }>
205
-
<PublicationLogo
206
-
icon={ pub.icon }
207
-
name={ pub.name }
208
-
pdsUrl={ pdsUrl }
209
-
did={ did }
210
-
/>
211
-
<span className="dash__pubtext">
212
-
<span className="dash__pubname">{ pub.name }</span>
213
-
<span className="dash__pubslug">/{ pub.slug }</span>
214
-
</span>
215
-
<span className="dash__pubactions">
216
-
<a className="dash__link" href={ `/@${ handle }/${ pub.slug }` }>
217
-
View
218
-
</a>
219
-
<button type="button" onClick={ () => onManage( pub ) }>
220
-
Manage
221
-
</button>
222
-
</span>
223
-
</li>
224
-
);
225
-
} ) }
226
-
</ul>
201
+
<>
202
+
<ul className="dash__pubs">
203
+
{ publications.map( ( pub ) => {
204
+
return (
205
+
<li className="dash__pub" key={ pub.uri }>
206
+
<PublicationLogo
207
+
icon={ pub.icon }
208
+
name={ pub.name }
209
+
pdsUrl={ pdsUrl }
210
+
did={ did }
211
+
/>
212
+
<span className="dash__pubtext">
213
+
<span className="dash__pubname">{ pub.name }</span>
214
+
<span className="dash__pubslug">/{ pub.slug }</span>
215
+
</span>
216
+
<span className="dash__pubactions">
217
+
<a className="dash__link" href={ `/@${ handle }/${ pub.slug }` }>
218
+
View
219
+
</a>
220
+
<button type="button" onClick={ () => onManage( pub ) }>
221
+
Manage
222
+
</button>
223
+
</span>
224
+
</li>
225
+
);
226
+
} ) }
227
+
</ul>
228
+
<div className="dash__add">
229
+
<button type="button" className="dash__new-quiet" onClick={ onNew }>
230
+
+ New publication
231
+
</button>
232
+
</div>
233
+
</>
227
234
) }
228
235
229
236
{ foreign.length > 0 && (
+33
src/pages/dashboard.astro
+33
src/pages/dashboard.astro
···
87
87
padding: 0.5rem 1rem;
88
88
cursor: pointer;
89
89
}
90
+
/* Empty state: creating a publication is the wanted action, so the CTA is
91
+
prominent here. */
92
+
.dash__empty-state {
93
+
display: flex;
94
+
flex-direction: column;
95
+
align-items: flex-start;
96
+
gap: 1rem;
97
+
padding: 1.5rem;
98
+
}
99
+
.dash__empty-state p {
100
+
margin: 0;
101
+
color: var(--muted);
102
+
}
103
+
/* Once a publication exists, "Write" (in the top bar) is the wanted action, so
104
+
the add-another button is de-emphasized to a quiet secondary control. */
105
+
.dash__add {
106
+
margin-top: 1.5rem;
107
+
padding-top: 1.25rem;
108
+
border-top: 1px solid var(--line);
109
+
}
110
+
.dash__new-quiet {
111
+
border: 1px solid var(--line-strong);
112
+
background: var(--paper-raised);
113
+
border-radius: 6px;
114
+
color: var(--ink-soft);
115
+
font: inherit;
116
+
font-size: 0.85rem;
117
+
padding: 0.35rem 0.75rem;
118
+
cursor: pointer;
119
+
}
120
+
.dash__new-quiet:hover {
121
+
color: var(--ink);
122
+
}
90
123
.dash__pubs,
91
124
.dash__postlist {
92
125
list-style: none;