···

       
65
       
 
       
                <button type="submit">Log out</button>

     

       
66
       
 
       
              </div>

     

       
67
       
 
       
            </form>`

     

       
68
       
-
       
          : html`<p><a href="/login">Log in</a> to set your status!</p>`}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
69
       
 
       
      </div>

     

       
70
       
-
       
      <div class="">

     

       
71
       
-
       
        <div class="status-options">

     

       
72
       
-
       
          ${STATUS_OPTIONS.map(

     

       
73
       
-
       
            (status) =>

     

       
74
       
-
       
              html`<div class="status-option" data-value="${status}">

     

       
75
       
-
       
                ${status}

     

       
76
       
-
       
              </div>`

     

       
77
       
-
       
          )}

     

       
78
       
-
       
        </div>

     

       
79
       
-
       
      </div>

     

       
80
       
-
       
      <div class="status-line no-line">

     

       
81
       
-
       
        <div class="status">👍</div>

     

       
82
       
-
       
        <div class="desc">

     

       
83
       
-
       
          <a class="author" href="/">@pfrazee.com</a>

     

       
84
       
-
       
          is feeling 👍 on Aug 12, 2024

     

       
85
       
-
       
        </div>

     

       
86
       
-
       
      </div>

     

       
87
       
-
       
      <div class="status-line">

     

       
88
       
-
       
        <div class="status">👍</div>

     

       
89
       
-
       
        <div class="desc">

     

       
90
       
-
       
          <a class="author" href="/">@pfrazee.com</a>

     

       
91
       
-
       
          is feeling 👍 on Aug 12, 2024

     

       
92
       
-
       
        </div>

     

       
93
       
-
       
      </div>

     

       
94
       
-
       
      <div class="status-line">

     

       
95
       
-
       
        <div class="status">👍</div>

     

       
96
       
-
       
        <div class="desc">

     

       
97
       
-
       
          <a class="author" href="/">@pfrazee.com</a>

     

       
98
       
-
       
          is feeling 👍 on Aug 12, 2024

     

       
99
       
-
       
        </div>

     

       
100
       
-
       
      </div>

     

       
101
       
-
       
      <div class="status-line">

     

       
102
       
-
       
        <div class="status">👍</div>

     

       
103
       
-
       
        <div class="desc">

     

       
104
       
-
       
          <a class="author" href="/">@pfrazee.com</a>

     

       
105
       
-
       
          is feeling 👍 on Aug 12, 2024

     

       
106
       
-
       
        </div>

     

       
107
       
-
       
      </div>

     

       
108
       
-
       
      <div class="status-line">

     

       
109
       
-
       
        <div class="status">👍</div>

     

       
110
       
-
       
        <div class="desc">

     

       
111
       
-
       
          <a class="author" href="/">@pfrazee.com</a>

     

       
112
       
-
       
          is feeling 👍 on Aug 12, 2024

     

       
113
       
-
       
        </div>

     

       
114
       
-
       
      </div>

     

       
115
       
-
       
      <div class="status-line">

     

       
116
       
-
       
        <div class="status">👍</div>

     

       
117
       
-
       
        <div class="desc">

     

       
118
       
-
       
          <a class="author" href="/">@pfrazee.com</a>

     

       
119
       
-
       
          is feeling 👍 on Aug 12, 2024

     

       
120
       
-
       
        </div>

     

       
121
       
 
       
      </div>

     

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

     

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

     

···

       
65
       
 
       
                <button type="submit">Log out</button>

     

       
66
       
 
       
              </div>

     

       
67
       
 
       
            </form>`

     

       
68
       
+
       
          : html`<div class="session-form">

     

       
69
       
+
       
              <div><a href="/login">Log in</a> to set your status!</div>

     

       
70
       
+
       
              <div>

     

       
71
       
+
       
                <a href="/login" class="button">Log in</a>

     

       
72
       
+
       
              </div>

     

       
73
       
+
       
            </div>`}

     

       
74
       
 
       
      </div>

     

       
75
       
+
       
      <div class="status-options">

     

       
76
       
+
       
        ${STATUS_OPTIONS.map(

     

       
77
       
+
       
          (status) =>

     

       
78
       
+
       
            html`<div

     

       
79
       
+
       
              class="status-option"

     

       
80
       
+
       
              data-value="${status}"

     

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

     

       
82
       
+
       
            >

     

       
83
       
+
       
              ${status}

     

       
84
       
+
       
            </div>`

     

       
85
       
+
       
        )}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
86
       
 
       
      </div>

     

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

     

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

     

···

       
12
       
 
       


     

       
13
       
 
       
function content({ error }: Props) {

     

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

     

       
15
       
-
       
    <form action="/login" method="post">

     

       
16
       
-
       
      <input type="text" name="handle" placeholder="handle" required />

     

       
17
       
-
       
      <button type="submit">Log in.</button>

     

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

     

       
19
       
-
       
    </form>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
20
       
 
       
  </div>`

     

       
21
       
 
       
}

     

···

       
12
       
 
       


     

       
13
       
 
       
function content({ error }: Props) {

     

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

     

       
15
       
+
       
    <div id="header">

     

       
16
       
+
       
      <h1>Statusphere</h1>

     

       
17
       
+
       
      <p>Set your status on the Atmosphere.</p>

     

       
18
       
+
       
    </div>

     

       
19
       
+
       
    <div class="container">

     

       
20
       
+
       
      <form action="/login" method="post" class="login-form">

     

       
21
       
+
       
        <input

     

       
22
       
+
       
          type="text"

     

       
23
       
+
       
          name="handle"

     

       
24
       
+
       
          placeholder="Enter your handle (eg alice.bsky.social)"

     

       
25
       
+
       
          required

     

       
26
       
+
       
        />

     

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

     

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

     

       
29
       
+
       
      </form>

     

       
30
       
+
       
    </div>

     

       
31
       
 
       
  </div>`

     

       
32
       
 
       
}

     

···

       
1
       
 
       
Array.from(document.querySelectorAll('.status-option'), (el) => {

     

       
2
       
 
       
  el.addEventListener('click', async (ev) => {

     

       
3
       
 
       
    setError('')

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
4
       
 
       
    const res = await fetch('/status', {

     

       
5
       
 
       
      method: 'POST',

     

       
6
       
 
       
      headers: { 'content-type': 'application/json' },

     

···

       
1
       
 
       
Array.from(document.querySelectorAll('.status-option'), (el) => {

     

       
2
       
 
       
  el.addEventListener('click', async (ev) => {

     

       
3
       
 
       
    setError('')

     

       
4
       
+
       


     

       
5
       
+
       
    if (el.dataset.authed !== '1') {

     

       
6
       
+
       
      window.location = '/login'

     

       
7
       
+
       
      return

     

       
8
       
+
       
    }

     

       
9
       
+
       


     

       
10
       
 
       
    const res = await fetch('/status', {

     

       
11
       
 
       
      method: 'POST',

     

       
12
       
 
       
      headers: { 'content-type': 'application/json' },

     

···

       
43
       
 
       
/*

     

       
44
       
 
       
  Common components

     

       
45
       
 
       
*/

     

       
46
       
-
       
button {

     

       
0
       
 
       

     

       
47
       
 
       
  border: 0;

     

       
48
       
 
       
  background-color: var(--primary-500);

     

       
49
       
 
       
  border-radius: 50px;

     

       
50
       
 
       
  color: #fff;

     

       
51
       
 
       
  padding: 2px 10px;

     

       
52
       
 
       
  cursor: pointer;

     

       
0
       
 
       

     

       
53
       
 
       
}

     

       
54
       
-
       
button:hover {

     

       
55
       
 
       
  background: var(--primary-400);

     

       
56
       
 
       
}

     

       
57
       
 
       


     
···

       
106
       
 
       
  flex-direction: row;

     

       
107
       
 
       
  align-items: center;

     

       
108
       
 
       
  justify-content: space-between;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
109
       
 
       
}

     

       
110
       
 
       


     

       
111
       
 
       
.status-options {

     

···

       
43
       
 
       
/*

     

       
44
       
 
       
  Common components

     

       
45
       
 
       
*/

     

       
46
       
+
       
button, .button {

     

       
47
       
+
       
  display: inline-block;

     

       
48
       
 
       
  border: 0;

     

       
49
       
 
       
  background-color: var(--primary-500);

     

       
50
       
 
       
  border-radius: 50px;

     

       
51
       
 
       
  color: #fff;

     

       
52
       
 
       
  padding: 2px 10px;

     

       
53
       
 
       
  cursor: pointer;

     

       
54
       
+
       
  text-decoration: none;

     

       
55
       
 
       
}

     

       
56
       
+
       
button:hover, .button:hover {

     

       
57
       
 
       
  background: var(--primary-400);

     

       
58
       
 
       
}

     

       
59
       
 
       


     
···

       
108
       
 
       
  flex-direction: row;

     

       
109
       
 
       
  align-items: center;

     

       
110
       
 
       
  justify-content: space-between;

     

       
111
       
+
       
}

     

       
112
       
+
       


     

       
113
       
+
       
.login-form {

     

       
114
       
+
       
  display: flex;

     

       
115
       
+
       
  flex-direction: row;

     

       
116
       
+
       
  gap: 6px;

     

       
117
       
+
       
  border: 1px solid var(--border-color);

     

       
118
       
+
       
  border-radius: 6px;

     

       
119
       
+
       
  padding: 10px 16px;

     

       
120
       
+
       
  background-color: #fff;

     

       
121
       
+
       
}

     

       
122
       
+
       


     

       
123
       
+
       
.login-form input {

     

       
124
       
+
       
  flex: 1;

     

       
125
       
+
       
  border: 0;

     

       
126
       
 
       
}

     

       
127
       
 
       


     

       
128
       
 
       
.status-options {