commit f0b2461d47b16605e5dfc1ed6fa52f520f757c3c · pdsls.dev/pdsls

+14 -22

src/components/account.tsx

···

       1
        
       import { Client, CredentialManager } from "@atcute/client";

     

       2
        
       import { Did } from "@atcute/lexicons";

     

       3
        
       import { deleteStoredSession, getSession, OAuthUserAgent } from "@atcute/oauth-browser-client";

     

       4
       -
       import { A } from "@solidjs/router";

     

       5
        
       import { createSignal, For, onMount, Show } from "solid-js";

     

       6
        
       import { createStore } from "solid-js/store";

     

       7
        
       import { resolveDidDoc } from "../utils/api.js";

     
···

       76
        
                 <div class="mb-3 max-h-[20rem] overflow-y-auto md:max-h-[25rem]">

     

       77
        
                   <For each={Object.keys(sessions)}>

     

       78
        
                     {(did) => (

     

       79
       -
                       <div class="flex w-full items-center justify-between gap-x-2 rounded-lg hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600">

     

       80
       -
                         <button

     

       81
       -
                           class="flex basis-full items-center justify-between gap-1 truncate p-1"

     

       82
       -
                           onclick={() => resumeSession(did as Did)}

     

       83
       -
                         >

     

       84
       -
                           <span class="truncate">{sessions[did]?.length ? sessions[did] : did}</span>

     

       85
       -
                           <Show when={did === agent()?.sub}>

     

       86
       -
                             <span class="iconify lucide--check shrink-0"></span>

     

       87
       -
                           </Show>

     

       88
       -
                         </button>

     

       89
       -
                         <div class="flex items-center gap-1">

     

       90
       -
                           <A

     

       91
       -
                             href={`/at://${did}`}

     

       92
       -
                             onClick={() => setOpenManager(false)}

     

       93
       -
                             class="flex items-center p-1"

     

       94
       -
                           >

     

       95
       -
                             <span class="iconify lucide--book-user"></span>

     

       96
       -
                           </A>

     

       97
        
                           <button

     

       98
       -
                             onclick={() => removeSession(did as Did)}

     

       99
       -
                             class="flex items-center p-1 hover:text-red-500 hover:dark:text-red-400"

     

       100
        
                           >

     

       101
       -
                             <span class="iconify lucide--user-round-x"></span>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       102
        
                           </button>

     

       103
        
                         </div>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       104
        
                       </div>

     

       105
        
                     )}

     

       106
        
                   </For>

···

       1
        
       import { Client, CredentialManager } from "@atcute/client";

     

       2
        
       import { Did } from "@atcute/lexicons";

     

       3
        
       import { deleteStoredSession, getSession, OAuthUserAgent } from "@atcute/oauth-browser-client";

     

       0
        
       
     

       4
        
       import { createSignal, For, onMount, Show } from "solid-js";

     

       5
        
       import { createStore } from "solid-js/store";

     

       6
        
       import { resolveDidDoc } from "../utils/api.js";

     
···

       75
        
                 <div class="mb-3 max-h-[20rem] overflow-y-auto md:max-h-[25rem]">

     

       76
        
                   <For each={Object.keys(sessions)}>

     

       77
        
                     {(did) => (

     

       78
       +
                       <div class="flex items-center gap-1">

     

       79
       +
                         <div class="flex w-full items-center justify-between gap-x-2 rounded-lg hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600">

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       80
        
                           <button

     

       81
       +
                             class="flex basis-full items-center justify-between gap-1 truncate p-1"

     

       82
       +
                             onclick={() => resumeSession(did as Did)}

     

       83
        
                           >

     

       84
       +
                             <span class="truncate">{sessions[did]?.length ? sessions[did] : did}</span>

     

       85
       +
                             <Show when={did === agent()?.sub}>

     

       86
       +
                               <span class="iconify lucide--check shrink-0"></span>

     

       87
       +
                             </Show>

     

       88
        
                           </button>

     

       89
        
                         </div>

     

       90
       +
                         <button

     

       91
       +
                           onclick={() => removeSession(did as Did)}

     

       92
       +
                           class="flex items-center p-1 hover:text-red-500 hover:dark:text-red-400"

     

       93
       +
                         >

     

       94
       +
                           <span class="iconify lucide--user-round-x"></span>

     

       95
       +
                         </button>

     

       96
        
                       </div>

     

       97
        
                     )}

     

       98
        
                   </For>

+54 -7

src/components/search.tsx

···

       1
       -
       import { useLocation, useNavigate } from "@solidjs/router";

     

       2
       -
       import { createSignal, onCleanup, onMount, Show } from "solid-js";

     

       0
        
       
     

       3
        
       import { isTouchDevice } from "../layout";

     

       0
        
       
     

       4
        
       

     

       5
        
       export const [showSearch, setShowSearch] = createSignal(false);

     

       6
        
       

     
···

       38
        
       const Search = () => {

     

       39
        
         const navigate = useNavigate();

     

       40
        
         let searchInput!: HTMLInputElement;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       41
        
       

     

       42
        
         onMount(() => {

     

       43
        
           if (useLocation().pathname !== "/") searchInput.focus();

     

       44
        
         });

     

       45
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       46
        
         const processInput = (input: string) => {

     

       47
        
           input = input.trim().replace(/^@/, "");

     

       48
        
           if (!input.length) return;

     
···

       54
        
             (input.startsWith("https://") || input.startsWith("http://"))

     

       55
        
           ) {

     

       56
        
             navigate(`/${input.replace("https://", "").replace("http://", "").replace("/", "")}`);

     

       0
        
       
     

       0
        
       
     

       57
        
           } else {

     

       58
        
             const uri = input

     

       59
        
               .replace("at://", "")

     
···

       64
        
               `/at://${uriParts[0]}${uriParts.length > 1 ? `/${uriParts.slice(1).join("/")}` : ""}`,

     

       65
        
             );

     

       66
        
           }

     

       0
        
       
     

       67
        
         };

     

       68
        
       

     

       69
        
         return (

     

       70
        
           <form

     

       71
       -
             class="w-[22rem] sm:w-[24rem]"

     

       72
        
             onsubmit={(e) => {

     

       73
        
               e.preventDefault();

     

       74
        
               processInput(searchInput.value);

     
···

       85
        
                 ref={searchInput}

     

       86
        
                 id="input"

     

       87
        
                 class="grow select-none placeholder:text-sm focus:outline-none"

     

       0
        
       
     

       0
        
       
     

       88
        
               />

     

       89
       -
               <button

     

       90
       -
                 type="submit"

     

       91
       -
                 class="iconify lucide--arrow-right text-lg text-neutral-500 dark:text-neutral-400"

     

       92
       -
               ></button>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       93
        
             </div>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       94
        
           </form>

     

       95
        
         );

     

       96
        
       };

···

       1
       +
       import { Client, CredentialManager } from "@atcute/client";

     

       2
       +
       import { A, useLocation, useNavigate } from "@solidjs/router";

     

       3
       +
       import { createResource, createSignal, For, onCleanup, onMount, Show, Suspense } from "solid-js";

     

       4
        
       import { isTouchDevice } from "../layout";

     

       5
       +
       import { createDebouncedValue } from "../utils/hooks/debounced";

     

       6
        
       

     

       7
        
       export const [showSearch, setShowSearch] = createSignal(false);

     

       8
        
       

     
···

       40
        
       const Search = () => {

     

       41
        
         const navigate = useNavigate();

     

       42
        
         let searchInput!: HTMLInputElement;

     

       43
       +
         const rpc = new Client({

     

       44
       +
           handler: new CredentialManager({ service: "https://public.api.bsky.app" }),

     

       45
       +
         });

     

       46
        
       

     

       47
        
         onMount(() => {

     

       48
        
           if (useLocation().pathname !== "/") searchInput.focus();

     

       49
        
         });

     

       50
        
       

     

       51
       +
         const fetchTypeahead = async (input: string) => {

     

       52
       +
           if (!input.length) return [];

     

       53
       +
           const res = await rpc.get("app.bsky.actor.searchActorsTypeahead", {

     

       54
       +
             params: { q: input, limit: 5 },

     

       55
       +
           });

     

       56
       +
           if (res.ok) {

     

       57
       +
             return res.data.actors;

     

       58
       +
           }

     

       59
       +
           return [];

     

       60
       +
         };

     

       61
       +
       

     

       62
       +
         const [input, setInput] = createSignal<string>();

     

       63
       +
         const [search] = createResource(createDebouncedValue(input, 300), fetchTypeahead);

     

       64
       +
       

     

       65
        
         const processInput = (input: string) => {

     

       66
        
           input = input.trim().replace(/^@/, "");

     

       67
        
           if (!input.length) return;

     
···

       73
        
             (input.startsWith("https://") || input.startsWith("http://"))

     

       74
        
           ) {

     

       75
        
             navigate(`/${input.replace("https://", "").replace("http://", "").replace("/", "")}`);

     

       76
       +
           } else if (search()?.length) {

     

       77
       +
             navigate(`/at://${search()![0].did}`);

     

       78
        
           } else {

     

       79
        
             const uri = input

     

       80
        
               .replace("at://", "")

     
···

       85
        
               `/at://${uriParts[0]}${uriParts.length > 1 ? `/${uriParts.slice(1).join("/")}` : ""}`,

     

       86
        
             );

     

       87
        
           }

     

       88
       +
           setShowSearch(false);

     

       89
        
         };

     

       90
        
       

     

       91
        
         return (

     

       92
        
           <form

     

       93
       +
             class="relative w-[22rem] sm:w-[24rem]"

     

       94
        
             onsubmit={(e) => {

     

       95
        
               e.preventDefault();

     

       96
        
               processInput(searchInput.value);

     
···

       107
        
                 ref={searchInput}

     

       108
        
                 id="input"

     

       109
        
                 class="grow select-none placeholder:text-sm focus:outline-none"

     

       110
       +
                 value={input() ?? ""}

     

       111
       +
                 onInput={(e) => setInput(e.currentTarget.value)}

     

       112
        
               />

     

       113
       +
               <Show when={input()}>

     

       114
       +
                 <button

     

       115
       +
                   type="button"

     

       116
       +
                   class="flex items-center rounded-lg p-0.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"

     

       117
       +
                   onClick={() => setInput(undefined)}

     

       118
       +
                 >

     

       119
       +
                   <span class="iconify lucide--x text-lg"></span>

     

       120
       +
                 </button>

     

       121
       +
               </Show>

     

       122
        
             </div>

     

       123
       +
             <Show when={search()?.length && input()}>

     

       124
       +
               <div class="dark:bg-dark-300 absolute z-30 mt-2 flex w-full flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-1 dark:border-neutral-700">

     

       125
       +
                 <Suspense fallback={<div class="p-1">Loading...</div>}>

     

       126
       +
                   <For each={search()}>

     

       127
       +
                     {(actor) => (

     

       128
       +
                       <A

     

       129
       +
                         class="flex items-center gap-2 rounded-lg p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700"

     

       130
       +
                         href={`/at://${actor.did}`}

     

       131
       +
                         onClick={() => setShowSearch(false)}

     

       132
       +
                       >

     

       133
       +
                         <img src={actor.avatar} class="size-6 rounded-full" />

     

       134
       +
                         <span>{actor.handle}</span>

     

       135
       +
                       </A>

     

       136
       +
                     )}

     

       137
       +
                   </For>

     

       138
       +
                 </Suspense>

     

       139
       +
               </div>

     

       140
       +
             </Show>

     

       141
        
           </form>

     

       142
        
         );

     

       143
        
       };

+23

src/utils/hooks/debounced.ts

···

       1
       +
       import { type Accessor, createEffect, createSignal, onCleanup } from 'solid-js';

     

       2
       +
       

     

       3
       +
       export const createDebouncedValue = <T>(

     

       4
       +
       	accessor: Accessor<T>,

     

       5
       +
       	delay: number,

     

       6
       +
       	equals?: false | ((prev: T, next: T) => boolean),

     

       7
       +
       ): Accessor<T> => {

     

       8
       +
       	const initial = accessor();

     

       9
       +
       	const [state, setState] = createSignal(initial, { equals });

     

       10
       +
       

     

       11
       +
       	createEffect((prev: T) => {

     

       12
       +
       		const next = accessor();

     

       13
       +
       

     

       14
       +
       		if (prev !== next) {

     

       15
       +
       			const timeout = setTimeout(() => setState(() => next), delay);

     

       16
       +
       			onCleanup(() => clearTimeout(timeout));

     

       17
       +
       		}

     

       18
       +
       

     

       19
       +
       		return next;

     

       20
       +
       	}, initial);

     

       21
       +
       

     

       22
       +
       	return state;

     

       23
       +
       };