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