Tools for the Atmosphere
tools.slices.network
slices.network
quickslice
atproto
html
feat: add actor autocomplete for login input
Use qs-actor-autocomplete from elements library to provide Bluesky
handle suggestions when logging in. Styled to match dark theme.
chadtmiller.com
+33
-2
teal-scrobble.html
+33
-2
teal-scrobble.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
<meta
7
7
http-equiv="Content-Security-Policy"
8
-
content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; connect-src 'self' https://fmteal.slices.network https://musicbrainz.org; img-src 'self' https: data:;"
8
+
content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; connect-src 'self' https://fmteal.slices.network https://musicbrainz.org https://public.api.bsky.app; img-src 'self' https: data:;"
9
9
/>
10
10
<title>Teal Scrobble</title>
11
11
<style>
···
478
478
.hidden {
479
479
display: none !important;
480
480
}
481
+
482
+
/* Actor Autocomplete Styling */
483
+
qs-actor-autocomplete {
484
+
--qs-input-bg: var(--bg-input);
485
+
--qs-input-border: var(--border);
486
+
--qs-input-border-focus: var(--accent);
487
+
--qs-input-text: var(--text-primary);
488
+
--qs-input-placeholder: var(--text-secondary);
489
+
--qs-input-padding: 0.75rem;
490
+
--qs-menu-bg: var(--bg-card);
491
+
--qs-menu-border: var(--border);
492
+
--qs-menu-shadow: rgba(0, 0, 0, 0.3);
493
+
--qs-item-hover: var(--bg-hover);
494
+
--qs-avatar-bg: var(--bg-hover);
495
+
--qs-handle-color: var(--text-primary);
496
+
--qs-name-color: var(--text-secondary);
497
+
--qs-radius: 0.375rem;
498
+
display: block;
499
+
width: 100%;
500
+
}
481
501
</style>
482
502
</head>
483
503
<body>
···
495
515
</div>
496
516
497
517
<script src="https://cdn.jsdelivr.net/gh/bigmoves/quickslice@main/quickslice-client-js/dist/quickslice-client.min.js"></script>
518
+
<script src="https://cdn.jsdelivr.net/gh/bigmoves/elements@v0.1.0/dist/elements.min.js"></script>
498
519
<script>
499
520
// =============================================================================
500
521
// CONFIGURATION
···
725
746
<form onsubmit="handleLogin(event)">
726
747
<div class="form-group">
727
748
<label for="handle">AT Protocol Handle</label>
728
-
<input type="text" id="handle" placeholder="you.bsky.social" required />
749
+
<qs-actor-autocomplete id="handle-autocomplete" placeholder="you.bsky.social"></qs-actor-autocomplete>
750
+
<input type="hidden" id="handle" />
729
751
</div>
730
752
<button type="submit" class="btn btn-primary">Continue</button>
731
753
</form>
732
754
</div>
733
755
`;
756
+
757
+
// Set up actor autocomplete event listener
758
+
const autocomplete = document.getElementById("handle-autocomplete");
759
+
autocomplete.addEventListener("qs-select", (e) => {
760
+
document.getElementById("handle").value = e.detail.actor.handle;
761
+
});
762
+
autocomplete.addEventListener("input", () => {
763
+
document.getElementById("handle").value = autocomplete.value;
764
+
});
734
765
}
735
766
736
767
function renderUserCard() {