WIP PWA for Grain
feat: add actor autocomplete to login dialog
- Add quickslice-elements CDN for qs-actor-autocomplete component
- Replace plain input with autocomplete for Bluesky handle lookup
- Style component to match app's dark theme
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+20
-17
+1
index.html
+1
index.html
···
9
9
<link rel="preconnect" href="https://fonts.googleapis.com">
10
10
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
11
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
12
+
<script src="https://cdn.jsdelivr.net/gh/bigmoves/elements@v0.2.1/dist/elements.min.js"></script>
12
13
<title>Grain</title>
13
14
</head>
14
15
<body>
+18
-16
src/components/molecules/grain-login-dialog.js
+18
-16
src/components/molecules/grain-login-dialog.js
···
36
36
font-weight: var(--font-weight-semibold);
37
37
color: var(--color-text-primary);
38
38
}
39
-
input {
39
+
qs-actor-autocomplete {
40
+
display: block;
40
41
width: 100%;
41
-
padding: var(--space-sm);
42
-
border: 1px solid var(--color-border);
43
-
border-radius: 6px;
44
-
font-size: var(--font-size-sm);
45
-
background: var(--color-bg-primary);
46
-
color: var(--color-text-primary);
47
42
margin-bottom: var(--space-md);
48
-
box-sizing: border-box;
49
-
}
50
-
input:focus {
51
-
outline: none;
52
-
border-color: var(--color-text-primary);
43
+
--qs-input-bg: #000000;
44
+
--qs-input-border: #363636;
45
+
--qs-input-border-focus: #fafafa;
46
+
--qs-input-text: #fafafa;
47
+
--qs-input-placeholder: #a8a8a8;
48
+
--qs-menu-bg: #121212;
49
+
--qs-menu-border: #363636;
50
+
--qs-menu-shadow: rgba(0, 0, 0, 0.5);
51
+
--qs-item-hover: #262626;
52
+
--qs-avatar-bg: #262626;
53
+
--qs-handle-color: #fafafa;
54
+
--qs-name-color: #a8a8a8;
53
55
}
54
56
button {
55
57
width: 100%;
···
110
112
<div class="overlay" @click=${this.#handleOverlayClick}>
111
113
<form class="dialog" @submit=${this.#handleSubmit}>
112
114
<h2>Login with Bluesky</h2>
113
-
<input
114
-
type="text"
115
+
<qs-actor-autocomplete
116
+
name="handle"
115
117
placeholder="handle.bsky.social"
116
-
.value=${this._handle}
118
+
value=${this._handle}
117
119
@input=${e => this._handle = e.target.value}
118
120
?disabled=${this._loading}
119
-
/>
121
+
></qs-actor-autocomplete>
120
122
<button type="submit" ?disabled=${this._loading || !this._handle.trim()}>
121
123
${this._loading ? 'Redirecting...' : 'Continue'}
122
124
</button>