···

       
3
       
 
       
import { html } from '../view'

     

       
4
       
 
       
import { shell } from './shell'

     

       
5
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
6
       
 
       
const STATUS_OPTIONS = [

     

       
7
       
 
       
  '👍',

     

       
8
       
 
       
  '👎',

     
···

       
37
       
 
       
  statuses: Status[]

     

       
38
       
 
       
  didHandleMap: Record<string, string>

     

       
39
       
 
       
  profile?: { displayName?: string; handle: string }

     

       
0
       
 
       

     

       
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"

     

       
0
       
 
       

     

       
0
       
 
       

     

       
80
       
 
       
              data-value="${status}"

     

       
81
       
 
       
              data-authed=${profile ? '1' : '0'}

     

       
82
       
 
       
            >

     
···

       
86
       
 
       
      </div>

     

       
87
       
 
       
      ${statuses.map((status, i) => {

     

       
88
       
 
       
        const handle = didHandleMap[status.authorDid] || status.authorDid

     

       
0
       
 
       

     

       
89
       
 
       
        return html`

     

       
90
       
 
       
          <div class=${i === 0 ? 'status-line no-line' : 'status-line'}>

     

       
91
       
 
       
            <div>

     
···

       
93
       
 
       
            </div>

     

       
94
       
 
       
            <div class="desc">

     

       
95
       
 
       
              <a class="author" href=${toBskyLink(handle)}>@${handle}</a>

     

       
96
       
-
       
              is feeling ${status.status} on ${ts(status)}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
97
       
 
       
            </div>

     

       
98
       
 
       
          </div>

     

       
99
       
 
       
        `

     

···

       
3
       
 
       
import { html } from '../view'

     

       
4
       
 
       
import { shell } from './shell'

     

       
5
       
 
       


     

       
6
       
+
       
const TODAY = new Date().toDateString()

     

       
7
       
+
       


     

       
8
       
 
       
const STATUS_OPTIONS = [

     

       
9
       
 
       
  '👍',

     

       
10
       
 
       
  '👎',

     
···

       
39
       
 
       
  statuses: Status[]

     

       
40
       
 
       
  didHandleMap: Record<string, string>

     

       
41
       
 
       
  profile?: { displayName?: string; handle: string }

     

       
42
       
+
       
  myStatus?: Status

     

       
43
       
 
       
}

     

       
44
       
 
       


     

       
45
       
 
       
export function home(props: Props) {

     
···

       
49
       
 
       
  })

     

       
50
       
 
       
}

     

       
51
       
 
       


     

       
52
       
+
       
function content({ statuses, didHandleMap, profile, myStatus }: Props) {

     

       
53
       
 
       
  return html`<div id="root">

     

       
54
       
 
       
    <div class="error"></div>

     

       
55
       
 
       
    <div id="header">

     
···

       
79
       
 
       
        ${STATUS_OPTIONS.map(

     

       
80
       
 
       
          (status) =>

     

       
81
       
 
       
            html`<div

     

       
82
       
+
       
              class=${myStatus?.status === status

     

       
83
       
+
       
                ? 'status-option selected'

     

       
84
       
+
       
                : 'status-option'}

     

       
85
       
 
       
              data-value="${status}"

     

       
86
       
 
       
              data-authed=${profile ? '1' : '0'}

     

       
87
       
 
       
            >

     
···

       
91
       
 
       
      </div>

     

       
92
       
 
       
      ${statuses.map((status, i) => {

     

       
93
       
 
       
        const handle = didHandleMap[status.authorDid] || status.authorDid

     

       
94
       
+
       
        const date = ts(status)

     

       
95
       
 
       
        return html`

     

       
96
       
 
       
          <div class=${i === 0 ? 'status-line no-line' : 'status-line'}>

     

       
97
       
 
       
            <div>

     
···

       
99
       
 
       
            </div>

     

       
100
       
 
       
            <div class="desc">

     

       
101
       
 
       
              <a class="author" href=${toBskyLink(handle)}>@${handle}</a>

     

       
102
       
+
       
              ${date === TODAY

     

       
103
       
+
       
                ? `is feeling ${status.status} today`

     

       
104
       
+
       
                : `was feeling ${status.status} on ${date}`}

     

       
105
       
 
       
            </div>

     

       
106
       
 
       
          </div>

     

       
107
       
 
       
        `

     

···

       
27
       
 
       
        <button type="submit">Log in</button>

     

       
28
       
 
       
        ${error ? html`<p>Error: <i>${error}</i></p>` : undefined}

     

       
29
       
 
       
      </form>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
30
       
 
       
    </div>

     

       
31
       
 
       
  </div>`

     

       
32
       
 
       
}

     

···

       
27
       
 
       
        <button type="submit">Log in</button>

     

       
28
       
 
       
        ${error ? html`<p>Error: <i>${error}</i></p>` : undefined}

     

       
29
       
 
       
      </form>

     

       
30
       
+
       
      <div class="signup-cta">

     

       
31
       
+
       
        Don't have an account on the Atmosphere?

     

       
32
       
+
       
        <a href="https://bsky.app">Sign up for Bluesky</a> to create one now!

     

       
33
       
+
       
      </div>

     

       
34
       
 
       
    </div>

     

       
35
       
 
       
  </div>`

     

       
36
       
 
       
}

     

···

       
5
       
 
       
  --gray-100: #fafafa;

     

       
6
       
 
       
  --gray-500: #666;

     

       
7
       
 
       
  --gray-700: #333;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
8
       
 
       
  --primary-400: #2e8fff;

     

       
9
       
 
       
  --primary-500: #0078ff;

     

       
10
       
 
       
  --primary-600: #0066db;

     
···

       
146
       
 
       
}

     

       
147
       
 
       


     

       
148
       
 
       
.status-option:hover {

     

       
149
       
-
       
  background-color: var(--gray-100);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
150
       
 
       
}

     

       
151
       
 
       


     

       
152
       
 
       
.status-line {

     
···

       
190
       
 
       


     

       
191
       
 
       
.status-line .author:hover {

     

       
192
       
 
       
  text-decoration: underline;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
193
       
 
       
}
     

···

       
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 {

     
···

       
202
       
 
       


     

       
203
       
 
       
.status-line .author:hover {

     

       
204
       
 
       
  text-decoration: underline;

     

       
205
       
+
       
}

     

       
206
       
+
       


     

       
207
       
+
       
.signup-cta {

     

       
208
       
+
       
  text-align: center;

     

       
209
       
+
       
  text-wrap: balance;

     

       
210
       
+
       
  margin-top: 1rem;

     

       
211
       
 
       
}
     

···

       
95
       
 
       
        .orderBy('indexedAt', 'desc')

     

       
96
       
 
       
        .limit(10)

     

       
97
       
 
       
        .execute()

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
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