From 4e26302101d6d56f6248ec2d9165003c1014805d Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 19 Jun 2023 16:43:50 +0200
Subject: [PATCH] feat: address bar improvements

---
 src/components/AddressBar.astro |  7 ++++---
 src/utils/library.ts            | 15 +++++++++------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index c4af5b3..0f4c500 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -11,9 +11,6 @@ const placeholder = 'Type the article URL here';
 
 <div class="address-bar">
   <form>
-    <button aria-label="Home" class="left-buttons" type="button" id="app-home" name="app-home" onclick="window.location.href='/'; return false;" hidden>
-      <Icon name="ic:round-library-books" />
-    </button>
     <button aria-label="Back" class="left-buttons" type="button" id="app-back" name="app-back" onclick="history.go(-1); return false;" hidden>
       <Icon name="ic:round-arrow-back-ios" />
     </button>
@@ -21,6 +18,9 @@ const placeholder = 'Type the article URL here';
     <button aria-label="Submit" class="right-buttons" type="submit" id="submit">
       <Icon name="ri:ai-generate" />
     </button>
+    <button aria-label="Home" class="right-buttons" type="button" id="app-home" name="app-home" onclick="window.location.href='/'; return false;" hidden>
+      <Icon name="ic:round-library-books" />
+    </button>
     <button aria-label="GitHub" class="right-buttons" type="button" id="gh-link" onclick="window.open('https://github.com/ayoayco/cozy', '_blank');" hidden>
       <Icon name="mdi:github" />
     </button>
@@ -42,6 +42,7 @@ const placeholder = 'Type the article URL here';
   if (urlInput.value === '') {
     backLink.setAttribute('disabled', 'true');
     submitBtn.setAttribute('disabled', 'true');
+    homeLink.setAttribute('disabled', 'true');
   }
 
   urlInput.addEventListener('input', (e) => {
diff --git a/src/utils/library.ts b/src/utils/library.ts
index 8040475..b5b5fde 100644
--- a/src/utils/library.ts
+++ b/src/utils/library.ts
@@ -73,8 +73,9 @@ export function renderPost(responseText, url, postDivSelector: string, preventPu
               postDiv.innerHTML = newPost.innerHTML
               const appUrl = document.getElementById('app-url') as HTMLInputElement;
               const cozyUrl = html.querySelector('meta[property="cozy:url"]')?.getAttribute('content');
-              const backBtn = document.getElementById('app-back') as HTMLButtonElement;
-              const submitBtn = document.getElementById('submit') as HTMLButtonElement;
+              const homeBtn = document.querySelector<HTMLButtonElement>('#app-home');
+              const backBtn = document.querySelector<HTMLButtonElement>('#app-back');
+              const submitBtn = document.querySelector<HTMLButtonElement>('#app-submit');
 
 
               const title = html.querySelector('meta[property="cozy:title"]')?.getAttribute('content');
@@ -82,12 +83,14 @@ export function renderPost(responseText, url, postDivSelector: string, preventPu
 
               if(cozyUrl !== '/') {
                 appUrl.value = cozyUrl || '';
-                backBtn.removeAttribute('disabled');
-                submitBtn.removeAttribute('disabled');
+                backBtn?.removeAttribute('disabled');
+                submitBtn?.removeAttribute('disabled');
+                homeBtn?.removeAttribute('disabled');
               } else {
                 appUrl.value = '';
-                backBtn.setAttribute('disabled', 'true');
-                submitBtn.setAttribute('disabled', 'true');
+                backBtn?.setAttribute('disabled', 'true');
+                submitBtn?.setAttribute('disabled', 'true');
+                homeBtn?.setAttribute('disabled', 'true');
               }
 
               if(!preventPushState) {