Scratch space for learning atproto app development
cduck.me
1import type { Status } from '#/db'
2import { html } from '../lib/view'
3import { shell } from './shell'
4
5const TODAY = new Date().toDateString()
6
7export const STATUS_OPTIONS = [
8 '👍',
9 '👎',
10 '💙',
11 '🥹',
12 '😧',
13 '🙃',
14 '😉',
15 '😎',
16 '🤓',
17 '🤨',
18 '🥳',
19 '😭',
20 '😤',
21 '🤯',
22 '🫡',
23 '💀',
24 '✊',
25 '🤘',
26 '👀',
27 '🧠',
28 '👩💻',
29 '🧑💻',
30 '🥷',
31 '🧌',
32 '🦋',
33 '🚀',
34]
35
36type Props = {
37 statuses: Status[]
38 didHandleMap: Record<string, string | undefined>
39 profile?: { displayName?: string }
40 myStatus?: Status
41}
42
43export function home(props: Props) {
44 return shell({
45 title: 'Home',
46 content: content(props),
47 })
48}
49
50function content({ statuses, didHandleMap, profile, myStatus }: Props) {
51 return html`<div id="root">
52 <div class="error"></div>
53 <div id="header">
54 <h1>Statusphere</h1>
55 <p>Set your status on the Atmosphere.</p>
56 </div>
57 <div class="container">
58 <div class="card">
59 ${profile
60 ? html`<form action="/logout" method="post" class="session-form">
61 <div>
62 Hi, <strong>${profile.displayName || 'friend'}</strong>. What's
63 your status today?
64 </div>
65 <div>
66 <button type="submit">Log out</button>
67 </div>
68 </form>`
69 : html`<div class="session-form">
70 <div><a href="/login">Log in</a> to set your status!</div>
71 <div>
72 <a href="/login" class="button">Log in</a>
73 </div>
74 </div>`}
75 </div>
76 <form action="/status" method="post" class="status-options">
77 ${STATUS_OPTIONS.map(
78 (status) =>
79 html`<button
80 class=${myStatus?.status === status
81 ? 'status-option selected'
82 : 'status-option'}
83 name="status"
84 value="${status}"
85 >
86 ${status}
87 </button>`,
88 )}
89 </form>
90 ${statuses.map((status, i) => {
91 const handle = didHandleMap[status.authorDid] || status.authorDid
92 const date = ts(status)
93 return html`
94 <div class=${i === 0 ? 'status-line no-line' : 'status-line'}>
95 <div>
96 <div class="status">${status.status}</div>
97 </div>
98 <div class="desc">
99 <a class="author" href=${toBskyLink(handle)}>@${handle}</a>
100 ${date === TODAY
101 ? `is feeling ${status.status} today`
102 : `was feeling ${status.status} on ${date}`}
103 </div>
104 </div>
105 `
106 })}
107 </div>
108 </div>`
109}
110
111function toBskyLink(did: string) {
112 return `https://bsky.app/profile/${did}`
113}
114
115function ts(status: Status) {
116 const createdAt = new Date(status.createdAt)
117 const indexedAt = new Date(status.indexedAt)
118 if (createdAt < indexedAt) return createdAt.toDateString()
119 return indexedAt.toDateString()
120}