commit c68dca704f6d8c3c171fafbc30ae2f705f1ed21d · ptr.pet/at-fronter

+60 -25
src/entrypoints/popup/App.svelte
···

       6
       6
        
           import FronterList from "@/components/FronterList.svelte";

     

       7
       7
        
       

     

       8
       8
        
           let recordAtUri = $state("");

     

       9
       9
       -
           let queryResult = $state("");

     

       9
       9
       +
           let queryResult = $state<{

     

       10
       10
       +
               handle: string;

     

       11
       11
       +
               fronters: { name: string; uri?: string }[];

     

       12
       12
       +
           } | null>(null);

     

       13
       13
       +
           let queryError = $state("");

     

       10
       14
        
           let isQuerying = $state(false);

     

       11
       15
        
           let fronters = $state<string[]>([]);

     

       12
       16
        
           let pkFronters = $state<string[]>([]);

     
···

       14
       18
        
           let isFromCurrentTab = $state(false);

     

       15
       19
        
       

     

       16
       20
        
           const makeOutput = (record: any) => {

     

       17
       17
       -
               const fronters = record.members

     

       18
       18
       -
                   .map((f: any) => {

     

       19
       19
       -
                       if (!f.uri) return f.name;

     

       20
       20
       -
                       const publicUri = getMemberPublicUri(f.uri);

     

       21
       21
       -
                       if (!publicUri) return f.name;

     

       22
       22
       -
                       return `<a href="${publicUri}">${f.name}</a>`;

     

       23
       23
       -
                   })

     

       24
       24
       -
                   .join(", ");

     

       25
       25
       -
               return [

     

       26
       26
       -
                   `HANDLE: ${record.handle ?? `handle.invalid (${record.did})`}`,

     

       27
       27
       -
                   `FRONTER(S): ${fronters}`,

     

       28
       28
       -
               ].join("<br>");

     

       21
       21
       +
               const fronters = record.members.map((f: any) => ({

     

       22
       22
       +
                   name: f.name,

     

       23
       23
       +
                   uri: f.uri ? getMemberPublicUri(f.uri) : undefined,

     

       24
       24
       +
               }));

     

       25
       25
       +
               return {

     

       26
       26
       +
                   handle: record.handle ?? `handle.invalid (${record.did})`,

     

       27
       27
       +
                   fronters,

     

       28
       28
       +
               };

     

       29
       29
        
           };

     

       30
       30
        
       

     

       31
       31
        
           const queryRecord = async (recordUri: ResourceUri) => {

     

       32
       32
        
               if (!recordAtUri.trim()) return;

     

       33
       33
        
       

     

       34
       34
        
               isQuerying = true;

     

       35
       35
       -
               queryResult = "";

     

       35
       35
       +
               queryResult = null;

     

       36
       36
        
       

     

       37
       37
        
               try {

     

       38
       38
        
                   if (!isResourceUri(recordUri)) throw "INVALID_RESOURCE_URI";

     

       39
       39
        
                   const result = expect(await getFronter(recordUri));

     

       40
       40
       -
                   queryResult = makeOutput(result) || "NO_FRONTER_FOUND";

     

       40
       40
       +
                   queryResult = makeOutput(result);

     

       41
       41
        
               } catch (error) {

     

       42
       42
       -
                   queryResult = `ERROR: ${error}`;

     

       42
       42
       +
                   queryResult = null;

     

       43
       43
       +
                   queryError = `ERROR: ${error}`;

     

       43
       44
        
               } finally {

     

       44
       45
        
                   isQuerying = false;

     

       45
       46
        
               }

     
···

       67
       68
        
           };

     

       68
       69
        
       

     

       69
       70
        
           const clearResult = () => {

     

       70
       70
       -
               queryResult = "";

     

       71
       71
       +
               queryResult = null;

     

       72
       72
       +
               queryError = "";

     

       71
       73
        
               recordAtUri = "";

     

       72
       74
        
               isFromCurrentTab = false;

     

       73
       75
        
           };

     
···

       151
       153
        
                                   {/if}

     

       152
       154
        
                               </div>

     

       153
       155
        
                               <div class="clear-button-container">

     

       154
       154
       -
                                   {#if queryResult && !isQuerying}

     

       156
       156
       +
                                   {#if (queryResult || queryError) && !isQuerying}

     

       155
       157
        
                                       <button

     

       156
       158
        
                                           class="clear-button"

     

       157
       159
        
                                           onclick={clearResult}

     
···

       170
       172
        
                                           >

     

       171
       173
        
                                           <div class="loading-bar"></div>

     

       172
       174
        
                                       </div>

     

       175
       175
       +
                                   {:else if queryError}

     

       176
       176
       +
                                       <div class="result-text error">

     

       177
       177
       +
                                           {queryError}

     

       178
       178
       +
                                       </div>

     

       173
       179
        
                                   {:else if queryResult}

     

       174
       174
       -
                                       <div

     

       175
       175
       -
                                           class="result-text"

     

       176
       176
       -
                                           class:error={queryResult.startsWith(

     

       177
       177
       -
                                               "ERROR:",

     

       178
       178
       -
                                           )}

     

       179
       179
       -
                                       >

     

       180
       180
       -
                                           {@html queryResult}

     

       180
       180
       +
                                       <div class="result-text">

     

       181
       181
       +
                                           <div>HANDLE: {queryResult.handle}</div>

     

       182
       182
       +
                                           <div>

     

       183
       183
       +
                                               FRONTER(S):

     

       184
       184
       +
                                               {#each queryResult.fronters as fronter, i}

     

       185
       185
       +
                                                   {#if fronter.uri}

     

       186
       186
       +
                                                       <a

     

       187
       187
       +
                                                           href={fronter.uri}

     

       188
       188
       +
                                                           class="fronter-link"

     

       189
       189
       +
                                                           >{fronter.name}</a

     

       190
       190
       +
                                                       >

     

       191
       191
       +
                                                   {:else}

     

       192
       192
       +
                                                       {fronter.name}

     

       193
       193
       +
                                                   {/if}

     

       194
       194
       +
                                                   {#if i < queryResult.fronters.length - 1},

     

       195
       195
       +
                                                   {/if}

     

       196
       196
       +
                                               {/each}

     

       197
       197
       +
                                           </div>

     

       181
       198
        
                                       </div>

     

       182
       199
        
                                   {:else}

     

       183
       200
        
                                       <div class="placeholder-text">

     
···

       571
       588
        
       

     

       572
       589
        
           .result-text.error {

     

       573
       590
        
               color: #ff4444;

     

       591
       591
       +
           }

     

       592
       592
       +
       

     

       593
       593
       +
           .fronter-link {

     

       594
       594
       +
               color: #00ff41;

     

       595
       595
       +
               text-decoration: none;

     

       596
       596
       +
               font-weight: 700;

     

       597
       597
       +
               transition: all 0.2s ease;

     

       598
       598
       +
               position: relative;

     

       599
       599
       +
               border-bottom: 1px solid transparent;

     

       600
       600
       +
           }

     

       601
       601
       +
       

     

       602
       602
       +
           .fronter-link:hover {

     

       603
       603
       +
               color: #33ff66;

     

       604
       604
       +
               border-bottom-color: #00ff41;

     

       605
       605
       +
           }

     

       606
       606
       +
       

     

       607
       607
       +
           .fronter-link:active {

     

       608
       608
       +
               color: #ffffff;

     

       574
       609
        
           }

     

       575
       610
        
       

     

       576
       611
        
           .placeholder-text {