Exosphere is a set of small, modular, self-hostable community tools built on the AT Protocol.
app.exosphere.site
style: ui improvemen
+29
-12
+17
-2
packages/app/src/app.tsx
+17
-2
packages/app/src/app.tsx
···
71
71
return <Dashboard />;
72
72
}
73
73
74
+
function NotFoundPage() {
75
+
return (
76
+
<div class={ui.container}>
77
+
<div class={ui.section}>
78
+
<h1 class={ui.pageTitle}>Page not found</h1>
79
+
<p class={ui.description}>The page you're looking for doesn't exist.</p>
80
+
<a href={spherePath("/")} class={ui.button}>
81
+
Go home
82
+
</a>
83
+
</div>
84
+
</div>
85
+
);
86
+
}
87
+
74
88
/** Watches the :sphereHandle route param and reloads sphere data when it changes. */
75
89
function SphereLoader() {
76
90
const { params } = useRoute();
···
126
140
/>
127
141
<Route path="/s/:sphereHandle" component={withSphereLoader(SpherePage)} />
128
142
<Route path="/" component={MultiSphereDefaultPage} />
129
-
<Route default component={MultiSphereDefaultPage} />
143
+
<Route default component={NotFoundPage} />
130
144
</Router>
131
145
);
132
146
}
···
161
175
{moduleRoutes.map((r) => (
162
176
<Route key={r.path} path={r.path} component={r.component} />
163
177
))}
164
-
<Route default component={SpherePage} />
178
+
<Route path="/" component={SpherePage} />
179
+
<Route default component={NotFoundPage} />
165
180
</Router>
166
181
);
167
182
}
+4
-4
packages/kanban/src/ui/components/column.tsx
+4
-4
packages/kanban/src/ui/components/column.tsx
···
34
34
const isOver = draggedTaskId && dt?.status === status;
35
35
const indicatorIndex = isOver ? dt.insertIndex : -1;
36
36
37
-
const columnClasses = [kbUi.column];
38
-
if (isOver) columnClasses.push(kbUi.columnDragOver);
37
+
const headerClasses = [kbUi.columnHeader];
38
+
if (isOver) headerClasses.push(kbUi.columnHeaderDragOver);
39
39
40
40
return (
41
41
<div
42
-
class={columnClasses.join(" ")}
42
+
class={kbUi.column}
43
43
onDragOver={onDragOver}
44
44
onDragLeave={onDragLeave}
45
45
onDrop={onDrop}
46
46
>
47
-
<div class={kbUi.columnHeader}>
47
+
<div class={headerClasses.join(" ")}>
48
48
<span class={kbUi.columnTitle}>{title}</span>
49
49
<span class={kbUi.columnCount}>{tasks.length}</span>
50
50
</div>
+1
-1
packages/kanban/src/ui/components/task-card.tsx
+1
-1
packages/kanban/src/ui/components/task-card.tsx
+7
-5
packages/kanban/src/ui/ui.css.ts
+7
-5
packages/kanban/src/ui/ui.css.ts
···
38
38
display: "flex",
39
39
alignItems: "center",
40
40
justifyContent: "space-between",
41
-
paddingBlockEnd: vars.space.sm,
42
-
borderBlockEnd: `2px solid ${vars.color.border}`,
41
+
paddingBlock: vars.space.sm,
42
+
paddingInline: vars.space.sm,
43
+
borderBlockEnd: "none",
44
+
boxShadow: `0 1px 2px ${vars.color.shadow}`,
43
45
marginBlockEnd: vars.space.xs,
46
+
borderRadius: vars.radius.sm,
47
+
transition: "background-color 0.15s",
44
48
});
45
49
46
50
export const columnTitle = style({
···
192
196
193
197
// ---- Drag and drop ----
194
198
195
-
export const columnDragOver = style({
199
+
export const columnHeaderDragOver = style({
196
200
backgroundColor: vars.color.primaryLight,
197
-
borderRadius: vars.radius.sm,
198
-
transition: "background-color 0.15s",
199
201
});
200
202
201
203
export const taskCardDraggable = style({