atmosphere explorer
pds.ls
tool
typescript
atproto
show display name in handle typeahead
+11
-4
+11
-4
src/components/search.tsx
+11
-4
src/components/search.tsx
···
255
255
{(prefixItem, index) => (
256
256
<button
257
257
type="button"
258
-
class={`flex items-center rounded-lg p-2 ${
258
+
class={`flex items-center rounded-md p-2 ${
259
259
index() === selectedIndex() ?
260
260
"bg-neutral-200 dark:bg-neutral-700"
261
261
: "hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
···
280
280
const adjustedIndex = getPrefixSuggestions().length + index();
281
281
return (
282
282
<A
283
-
class={`flex items-center gap-2 rounded-lg p-2 ${
283
+
class={`flex items-center gap-2 rounded-md p-2 ${
284
284
adjustedIndex === selectedIndex() ?
285
285
"bg-neutral-200 dark:bg-neutral-700"
286
286
: "hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
···
290
290
>
291
291
<img
292
292
src={actor.avatar?.replace("img/avatar/", "img/avatar_thumbnail/")}
293
-
class="size-8 rounded-full"
293
+
class="size-9 rounded-full"
294
294
/>
295
-
<span>{actor.handle}</span>
295
+
<div class="flex flex-col">
296
+
<Show when={actor.displayName}>
297
+
<span class="text-sm font-medium">{actor.displayName}</span>
298
+
</Show>
299
+
<span class="text-xs text-neutral-600 dark:text-neutral-400">
300
+
@{actor.handle}
301
+
</span>
302
+
</div>
296
303
</A>
297
304
);
298
305
}}