empty identifier, did input, watch pds

index.html

···
             this.pds = null;
             this.did = null;
             this.handle = null;
-            if (this.identifier.startsWith('https://')) {
+            this.identifier = this.identifier.trim();
+            if (this.identifier === '') {
+              // do nothing
+            } else if (this.identifier.startsWith('https://')) {
               this.pds = this.identifier;
             } else {
               if (this.identifier.startsWith('at://')) {
···
               }
               if (this.identifier.startsWith('did:')) {
                 this.did = this.identifier;
+                let data;
+                try {
+                  data = await window.slingshot('com.bad-example.identity.resolveMiniDoc', {
+                    params: { identifier: this.identifier },
+                  });
+                  this.pds = data.pds;
+                  this.handle = data.handle;
+                } catch (e) {
+                  if (window.isXrpcErr(e)) {
+                    this.identifierError = e.error;
+                    if (e.message) this.description += ` ${e.description}`;
+                  } else {
+                    this.identifierError = 'Failed to resolve identifier, see console for error.';
+                    console.error(e);
+                  }
+                }
               } else {
                 this.handle = this.identifier;
                 let data;
···
         }));
 
         Alpine.data('pdsCheck', pds => ({
-          loading: false,
+          loadingDesc: false,
           error: null,
           description: null,
 
           async init() {
-            this.loading = true;
+            await this.update(pds);
+          },
+
+          async update(pds) {
+            this.loadingDesc = true;
             this.error = null;
             this.description = null;
             let query = window.SimpleQuery(pds);
···
                 console.error(e);
               }
             }
-            this.loading = false;
-          }
+            this.loadingDesc = false;
+          },
         }));
 
         Alpine.data('relayCheckHost', (pds, relay) => ({
···
           reqCrawlError: null,
 
           async init() {
-            await this.check();
+            await this.check(pds, relay);
           },
 
-          async check() {
+          async check(pds, relay) {
             this.loading = true;
             this.error = null;
             this.status = null;
···
             this.reqCrawlError = null;
           },
 
-          async requestCrawl() {
+          async requestCrawl(pds, relay) {
             this.reqCrawlStatus = "loading";
             const proc = window.SimpleProc(`https://${relay.hostname}`);
             const hostname = pds.split('://')[1];
···
                  <span x-text="pds"></span>
               </h2>
 
-              <div x-data="pdsCheck(pds)">
+              <div
+                x-data="pdsCheck(pds)"
+                x-init="$watch('pds', v => update(v))"
+              >
                 <h3 class="text-lg">
                   Server
                   <span
···
                     class="badge badge-sm badge-soft badge-success"
                   >online</span>
                 </h3>
+                <p x-show="loadingDesc">Loading&hellip;</p>
+                <p x-show="error" class="text-warning" x-text="error"></p>
                 <template x-if="description !== null">
                   <div class="overflow-x-auto">
                     <table class="table table-xs">
···
                 <table class="table table-xs">
                   <tbody>
                     <template x-for="relay in window.relays">
-                      <tr x-data="relayCheckHost(pds, relay)">
+                      <tr
+                        x-data="relayCheckHost(pds, relay)"
+                        x-init="$watch('pds', pds => check(pds, relay))"
+                      >
                         <td x-text="relay.name" class="text-sm"></td>
                         <td>
                           <template x-if="loading">
···
                               x-show="reqCrawlStatus !== 'done'"
                               class="btn btn-xs btn-ghost whitespace-nowrap"
                               :disabled="reqCrawlStatus === 'loading'"
-                              @click="requestCrawl"
+                              @click="requestCrawl(pds, relay)"
                             >
                               request crawl
                             </button>