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
7const 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]
36
37type Props = {
38 statuses: Status[]
39 didHandleMap: Record<string, string>
40 profile?: { displayName?: string }
41 myStatus?: Status
42}
43
44export function home(props: Props) {
45 return shell({
46 title: 'Home',
47 content: content(props),
48 })
49}
50
51function content({ statuses, didHandleMap, profile, myStatus }: Props) {
52 return html`<div id="root">
53 <div class="error"></div>
54 <div id="header">
55 <h1>Statusphere</h1>
56 <p>Set your status on the Atmosphere.</p>
57 </div>
58 <div class="container">
59 <div class="card">
60 ${profile
61 ? html`<form action="/logout" method="post" class="session-form">
62 <div>
63 Hi, <strong>${profile.displayName || 'friend'}</strong>. What's
64 your status today?
65 </div>
66 <div>
67 <button type="submit">Log out</button>
68 </div>
69 </form>`
70 : html`<div class="session-form">
71 <div><a href="/login">Log in</a> to set your status!</div>
72 <div>
73 <a href="/login" class="button">Log in</a>
74 </div>
75 </div>`}
76 </div>
77 <form action="/status" method="post" class="status-options">
78 ${STATUS_OPTIONS.map(
79 (status) =>
80 html`<button
81 class=${
82 myStatus?.status === status
83 ? 'status-option selected'
84 : 'status-option'
85 }
86 name="status"
87 value="${status}"
88 >
89 ${status}
90 </div>`
91 )}
92 </form>
93 ${statuses.map((status, i) => {
94 const handle = didHandleMap[status.authorDid] || status.authorDid
95 const date = ts(status)
96 return html`
97 <div class=${i === 0 ? 'status-line no-line' : 'status-line'}>
98 <div>
99 <div class="status">${status.status}</div>
100 </div>
101 <div class="desc">
102 <a class="author" href=${toBskyLink(handle)}>@${handle}</a>
103 ${date === TODAY
104 ? `is feeling ${status.status} today`
105 : `was feeling ${status.status} on ${date}`}
106 </div>
107 </div>
108 `
109 })}
110 </div>
111 </div>`
112}
113
114function toBskyLink(did: string) {
115 return `https://bsky.app/profile/${did}`
116}
117
118function ts(status: Status) {
119 const indexedAt = new Date(status.indexedAt)
120 const updatedAt = new Date(status.updatedAt)
121 if (updatedAt > indexedAt) return updatedAt.toDateString()
122 return indexedAt.toDateString()
123}