appview-less bluesky client
feat: when quoting a post make the post look 'embedded' inside the text area
+40
-22
+4
-1
src/app.css
+4
-1
src/app.css
···
24
24
}
25
25
26
26
@utility single-line-input {
27
-
@apply w-full rounded-sm border-2 px-3 py-2 font-medium transition-all focus:scale-[1.02] focus:shadow-lg focus:outline-none;
27
+
@apply w-full rounded-sm border-2 border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3 px-3 py-2 font-medium transition-all;
28
+
&:focus {
29
+
@apply scale-[1.02] border-(--nucleus-accent)/80 bg-(--nucleus-accent)/10 [box-shadow:none] outline-none;
30
+
}
28
31
}
29
32
30
33
@utility action-button {
+1
-1
src/components/BskyPost.svelte
+1
-1
src/components/BskyPost.svelte
···
521
521
{@render dropdownItem('heroicons:link-20-solid', 'copy at uri', () =>
522
522
navigator.clipboard.writeText(post.uri)
523
523
)}
524
-
{@render dropdownItem('heroicons:clipboard', 'copy post text', () =>
524
+
{@render dropdownItem('heroicons:clipboard-20-solid', 'copy post text', () =>
525
525
navigator.clipboard.writeText(post.record.text)
526
526
)}
527
527
{#if actionClient}
+33
-18
src/components/PostComposer.svelte
+33
-18
src/components/PostComposer.svelte
···
145
145
{#if replying}
146
146
{@render renderPost(replying)}
147
147
{/if}
148
-
<textarea
149
-
bind:this={textareaEl}
150
-
bind:value={postText}
151
-
onfocus={() => (isFocused = true)}
152
-
onblur={unfocus}
153
-
onkeydown={(event) => {
154
-
if (event.key === 'Escape') unfocus();
155
-
if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) doPost();
156
-
}}
157
-
placeholder="what's on your mind?"
158
-
rows="4"
159
-
class="field-sizing-content resize-none"
160
-
></textarea>
161
-
{#if quoting}
162
-
{@render renderPost(quoting)}
163
-
{/if}
148
+
<div class="composer space-y-2">
149
+
<textarea
150
+
bind:this={textareaEl}
151
+
bind:value={postText}
152
+
onfocus={() => (isFocused = true)}
153
+
onblur={unfocus}
154
+
onkeydown={(event) => {
155
+
if (event.key === 'Escape') unfocus();
156
+
if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) doPost();
157
+
}}
158
+
placeholder="what's on your mind?"
159
+
rows="4"
160
+
class="field-sizing-content resize-none"
161
+
></textarea>
162
+
{#if quoting}
163
+
{@render renderPost(quoting)}
164
+
{/if}
165
+
</div>
164
166
{/snippet}
165
167
166
168
<div class="relative min-h-13">
···
211
213
</div>
212
214
</div>
213
215
216
+
<!-- TODO: this fucking blows -->
214
217
<style>
215
218
@reference "../app.css";
216
219
217
220
input,
218
-
textarea {
221
+
.composer {
219
222
@apply single-line-input bg-(--nucleus-bg)/35;
220
223
border-color: color-mix(in srgb, var(--acc-color) 30%, transparent);
221
224
}
222
225
226
+
.composer {
227
+
@apply p-2;
228
+
}
229
+
230
+
textarea {
231
+
@apply w-full bg-transparent p-0;
232
+
}
233
+
223
234
input {
224
235
@apply p-1 px-2;
225
236
}
226
237
227
-
textarea {
238
+
.composer {
228
239
@apply focus:scale-100;
229
240
}
230
241
231
242
input::placeholder,
232
243
textarea::placeholder {
233
244
color: color-mix(in srgb, var(--acc-color) 45%, var(--nucleus-bg));
245
+
}
246
+
247
+
textarea:focus {
248
+
@apply border-none! [box-shadow:none]! outline-none!;
234
249
}
235
250
</style>
+2
-2
src/components/SettingsPopup.svelte
+2
-2
src/components/SettingsPopup.svelte
···
76
76
type="url"
77
77
bind:value={localSettings.endpoints[name]}
78
78
placeholder={defaultSettings.endpoints[name]}
79
-
class="single-line-input border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3"
79
+
class="single-line-input"
80
80
/>
81
81
</div>
82
82
{/snippet}
···
97
97
type="url"
98
98
bind:value={localSettings.socialAppUrl}
99
99
placeholder={defaultSettings.socialAppUrl}
100
-
class="single-line-input border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3"
100
+
class="single-line-input"
101
101
/>
102
102
</div>
103
103