the statusphere demo reworked into a vite/react app in a monorepo
Highlight current status
+26
-4
+5
-2
src/pages/home.ts
+5
-2
src/pages/home.ts
···
37
37
statuses: Status[]
38
38
didHandleMap: Record<string, string>
39
39
profile?: { displayName?: string; handle: string }
40
+
myStatus?: Status
40
41
}
41
42
42
43
export function home(props: Props) {
···
46
47
})
47
48
}
48
49
49
-
function content({ statuses, didHandleMap, profile }: Props) {
50
+
function content({ statuses, didHandleMap, profile, myStatus }: Props) {
50
51
return html`<div id="root">
51
52
<div class="error"></div>
52
53
<div id="header">
···
76
77
${STATUS_OPTIONS.map(
77
78
(status) =>
78
79
html`<div
79
-
class="status-option"
80
+
class=${myStatus?.status === status
81
+
? 'status-option selected'
82
+
: 'status-option'}
80
83
data-value="${status}"
81
84
data-authed=${profile ? '1' : '0'}
82
85
>
+13
-1
src/public/styles.css
+13
-1
src/public/styles.css
···
5
5
--gray-100: #fafafa;
6
6
--gray-500: #666;
7
7
--gray-700: #333;
8
+
--primary-100: #d2e7ff;
9
+
--primary-200: #b1d3fa;
8
10
--primary-400: #2e8fff;
9
11
--primary-500: #0078ff;
10
12
--primary-600: #0066db;
···
146
148
}
147
149
148
150
.status-option:hover {
149
-
background-color: var(--gray-100);
151
+
background-color: var(--primary-100);
152
+
box-shadow: 0 0 0 1px var(--primary-400);
153
+
}
154
+
155
+
.status-option.selected {
156
+
box-shadow: 0 0 0 1px var(--primary-500);
157
+
background-color: var(--primary-100);
158
+
}
159
+
160
+
.status-option.selected:hover {
161
+
background-color: var(--primary-200);
150
162
}
151
163
152
164
.status-line {
+8
-1
src/routes/index.ts
+8
-1
src/routes/index.ts
···
95
95
.orderBy('indexedAt', 'desc')
96
96
.limit(10)
97
97
.execute()
98
+
const myStatus = agent
99
+
? await ctx.db
100
+
.selectFrom('status')
101
+
.selectAll()
102
+
.where('authorDid', '=', agent.accountDid)
103
+
.executeTakeFirst()
104
+
: undefined
98
105
const didHandleMap = await ctx.resolver.resolveDidsToHandles(
99
106
statuses.map((s) => s.authorDid)
100
107
)
···
104
111
const { data: profile } = await agent.getProfile({ actor: session.did })
105
112
return res
106
113
.type('html')
107
-
.send(page(home({ statuses, didHandleMap, profile })))
114
+
.send(page(home({ statuses, didHandleMap, profile, myStatus })))
108
115
})
109
116
)
110
117