Add #5's List all supported URLs tooltip #9

merged

opened by

aylac.top 2 months ago targeting main from aylac.top/pdsls: appviewhint

when there's no text on the search bar, a little ? button is shown and when clicked a modal with all the urls of apps that can just be pasted and handled are shown

don't have an experience with tailwind, idk how exactly stuff should look, so it was mostly copypasted or gemini organising it. if it could look better tell me and i will do it

options

unified split

Changed files

+60 -2

src

components

search.tsx

utils

app-urls.ts

+51 -2

src/components/search.tsx

···

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

     

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

     

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

     

       5
       5
       -
       import { appHandleLink, appList, AppUrl } from "../utils/app-urls";

     

       5
       5
       +
       import { appHandleLink, appList, appName, AppUrl } from "../utils/app-urls";

     

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

     

       7
       7
       +
       import { Modal } from "./modal";

     

       7
       8
        
       

     

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

     

       9
       10
        
       

     
···

       113
       114
        
                 value={input() ?? ""}

     

       114
       115
        
                 onInput={(e) => setInput(e.currentTarget.value)}

     

       115
       116
        
               />

     

       116
       116
       -
               <Show when={input()}>

     

       117
       117
       +
               <Show when={input()} fallback={ListUrlsTooltip()}>

     

       117
       118
        
                 <button

     

       118
       119
        
                   type="button"

     

       119
       120
        
                   class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"

     
···

       146
       147
        
         );

     

       147
       148
        
       };

     

       148
       149
        
       

     

       150
       150
       +
       const ListUrlsTooltip = () => {

     

       151
       151
       +
         const [openList, setOpenList] = createSignal(false);

     

       152
       152
       +
       

     

       153
       153
       +
         let urls: Record<string, AppUrl[]> = {};

     

       154
       154
       +
         for (const [appUrl, appView] of Object.entries(appList)) {

     

       155
       155
       +
           if (!urls[appView]) urls[appView] = [appUrl as AppUrl];

     

       156
       156
       +
           else urls[appView].push(appUrl as AppUrl);

     

       157
       157
       +
         }

     

       158
       158
       +
       

     

       159
       159
       +
         return (

     

       160
       160
       +
           <>

     

       161
       161
       +
             <Modal open={openList()} onClose={() => setOpenList(false)}>

     

       162
       162
       +
               <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-16 left-[50%] w-[26rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       163
       163
       +
                 <div class="mb-2 flex items-center gap-1 font-semibold">

     

       164
       164
       +
                   <span class="iconify lucide--link"></span>

     

       165
       165
       +
                   <span>Supported URLs</span>

     

       166
       166
       +
                 </div>

     

       167
       167
       +
                 <div class="mb-2 text-sm text-neutral-500 dark:text-neutral-400">

     

       168
       168
       +
                   Links that will be parsed automatically, as long as all the data necessary is on the

     

       169
       169
       +
                   URL.

     

       170
       170
       +
                 </div>

     

       171
       171
       +
                 <div class="flex flex-col gap-2 text-sm">

     

       172
       172
       +
                   <For each={Object.entries(appName)}>

     

       173
       173
       +
                     {([appView, name]) => {

     

       174
       174
       +
                       return (

     

       175
       175
       +
                         <div>

     

       176
       176
       +
                           <p class="font-semibold">{name}</p>

     

       177
       177
       +
                           <div class="grid grid-cols-2 gap-x-4 text-neutral-600 dark:text-neutral-400">

     

       178
       178
       +
                             <For each={urls[appView]}>{(url) => <span>{url}</span>}</For>

     

       179
       179
       +
                           </div>

     

       180
       180
       +
                         </div>

     

       181
       181
       +
                       );

     

       182
       182
       +
                     }}

     

       183
       183
       +
                   </For>

     

       184
       184
       +
                 </div>

     

       185
       185
       +
               </div>

     

       186
       186
       +
             </Modal>

     

       187
       187
       +
             <button

     

       188
       188
       +
               type="button"

     

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

     

       190
       190
       +
               onClick={() => setOpenList(true)}

     

       191
       191
       +
             >

     

       192
       192
       +
               <span class="iconify lucide--help-circle"></span>

     

       193
       193
       +
             </button>

     

       194
       194
       +
           </>

     

       195
       195
       +
         );

     

       196
       196
       +
       };

     

       197
       197
       +
       

     

       149
       198
        
       export { Search, SearchButton };

src/utils/app-urls.ts

···

       9
       9
        
         Linkat,

     

       10
       10
        
       }

     

       11
       11
        
       

     

       12
       12
       +
       export const appName = {

     

       13
       13
       +
         [App.Bluesky]: "Bluesky",

     

       14
       14
       +
         [App.Tangled]: "Tangled",

     

       15
       15
       +
         [App.Whitewind]: "Whitewind",

     

       16
       16
       +
         [App.Frontpage]: "Frontpage",

     

       17
       17
       +
         [App.Pinksea]: "Pinksea",

     

       18
       18
       +
         [App.Linkat]: "Linkat",

     

       19
       19
       +
       };

     

       20
       20
       +
       

     

       12
       21
        
       export const appList: Record<AppUrl, App> = {

     

       13
       22
        
         "localhost:19006": App.Bluesky,

     

       14
       23
        
         "blacksky.community": App.Bluesky,