From da232f0c450bb154ed041afefdb473ecae446093 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Wed, 14 Jun 2023 19:45:02 +0200
Subject: [PATCH] feat: address bar button states

---
 src/components/AddressBar.astro | 28 +++++++++++++++++++++++++---
 src/components/Library.astro    |  2 +-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index b8fbf83..576839a 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -12,7 +12,7 @@ const { url } = Astro.props;
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.51 3.87L15.73 2.1L5.84 12l9.9 9.9l1.77-1.77L9.38 12l8.13-8.13z"/></svg>
     </button>
     <input type="text" id="app-url" name="url" value={url} placeholder="Type a URL here" />
-    <button aria-label="Submit" title="Submit" class="right-button" type="submit" id="submit">
+    <button aria-label="Submit" title="Submit" class="right-button primary-button" type="submit" id="submit">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6.23 20.23L8 22l10-10L8 2L6.23 3.77L14.46 12z"/></svg>
     </button>
     <button aria-label="GitHub" title="GitHub" class="right-button" type="button" id="gh-link" onclick="window.location.href = 'https://github.com/ayoayco/cozy'">
@@ -24,8 +24,20 @@ const { url } = Astro.props;
 <script>
   const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
   const urlInput = document.getElementById('app-url') as HTMLInputElement;
-  if (urlInput.value === '')
-    homeBtn.setAttribute('style', 'display: none');
+  const submitBtn = document.getElementById('submit') as HTMLButtonElement;
+  if (urlInput.value === '') {
+    homeBtn.setAttribute('disabled', 'true');
+    submitBtn.setAttribute('disabled', 'true');
+  }
+
+  urlInput.addEventListener('input', (e) => {
+    const target = e.target as HTMLInputElement;
+    if (target.value === '') {
+      submitBtn.setAttribute('disabled', 'true');
+    } else {
+      submitBtn.removeAttribute('disabled');
+    }
+  });
 </script>
 
 <style lang="scss">
@@ -76,5 +88,15 @@ const { url } = Astro.props;
     :global(.right-button) {
       margin-left: 0.5rem;
     }
+
+    :global(.primary-button:not([disabled="true"])) {
+      color: blue !important;
+    }
+
+    :global(button[disabled="true"]) {
+      color: #eee !important;
+    }
+
+
   }
 </style>
diff --git a/src/components/Library.astro b/src/components/Library.astro
index 8c280f5..a2a414e 100644
--- a/src/components/Library.astro
+++ b/src/components/Library.astro
@@ -72,7 +72,7 @@ const {postDivSelector, skipSave = false} = Astro.props;
             if (postDiv && newPost?.innerHTML) {
               postDiv.innerHTML = newPost.innerHTML
               const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
-              homeBtn.setAttribute('style', 'display: block');
+              homeBtn.removeAttribute('disabled');
             }
         }
         const item = document.createElement('li');