UI update

fixed search suggestion highlighting

css/main.css

@@ -383,7 +383,7 @@ ul {
 }
 
 .page {
-  padding-bottom: 2rem;
+  padding-bottom: 3rem;
 }
 
 .page__title {
@@ -444,7 +444,7 @@ ul {
   padding: 0.5rem 0;
 }
 
-a.search-suggestion {
+.search-suggestion {
   display: flex;
   cursor: pointer;
   font-weight: 700;
@@ -453,16 +453,19 @@ a.search-suggestion {
   color: rgba(var(--text-color), 0.8);
   outline: none;
 }
-a.search-suggestion:focus, a.search-suggestion:active {
+.search-suggestion:focus, .search-suggestion:active {
   outline: none;
   border: 0;
 }
-a.search-suggestion:focus-visible {
+.search-suggestion:focus-visible {
   outline: transparent;
   background-color: rgba(var(--text-color), 0.1);
 }
-a.search-suggestion span {
-  font-weight: 500;
+.search-suggestion span {
+  font-weight: 450;
+}
+.search-suggestion pre {
+  white-space: pre-wrap;
 }
 
 .torrent-container {

css/main.scss

@@ -329,7 +329,7 @@ ul{
 }
 
 .page{
-    padding-bottom: 2rem;
+    padding-bottom: 3rem;
 }
 .page__title{
     font-size: 2rem;
@@ -382,7 +382,7 @@ ul{
         padding: 0.5rem 0;
     }
 }
-a.search-suggestion{
+.search-suggestion{
     display: flex;
     cursor: pointer;
     font-weight: 700;
@@ -400,7 +400,10 @@ a.search-suggestion{
         background-color: rgba(var(--text-color), 0.1);
     }
     span{
-        font-weight: 500;
+        font-weight: 450;
+    }
+    pre{
+        white-space: pre-wrap;
     }
 }
 

index.html

@@ -908,7 +908,14 @@
             return torrentsFrag
         }
         async function showLatestTorrents() {
-            let allTorrents = await getTorrents()
+            // load data from IDB first
+            let allTorrents = await getDataFromIDB()
+            allTorrents = allTorrents.reverse().slice(0, 8)
+            getRef('torrent_container').innerHTML = ``
+            getRef('torrent_container').append(renderTorrents(allTorrents))
+            
+            // render latest torrent when available
+            allTorrents = await getTorrents()
             allTorrents = allTorrents.reverse().slice(0, 8)
             getRef('torrent_container').innerHTML = ``
             getRef('torrent_container').append(renderTorrents(allTorrents))
@@ -945,8 +952,10 @@
             }
         })
         getRef('search_torrent').addEventListener('input', async e => {
-            const searchKey = getRef('search_torrent').value.trim()
-            renderSearchSuggestions(searchKey)
+            throttle(() => {
+                const searchKey = getRef('search_torrent').value.trim()
+                renderSearchSuggestions(searchKey)
+            }, 100)
         })
         getRef('advance_torrent_search').addEventListener('keyup', async e => {
             if (e.target.value.trim() !== '' && e.key === 'Enter') {
@@ -1046,6 +1055,7 @@
                     break;
                 default:
                     page = 'homepage'
+                    history.replaceState(null, null, ' ')
                     showLatestTorrents()
             }
             document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely')
@@ -1153,8 +1163,11 @@
                     const regEx = new RegExp(`(${searchKey})`, 'gi')
                     const suggestion = create('a', {
                         className: 'search-suggestion',
-                        innerHTML: elem.name.replace(regEx, `<span>${searchKey}</span>`),
                     })
+                    const pre = create('pre', {
+                        innerHTML: elem.name.replace(regEx, `<span>$&</span>`),
+                    })
+                    suggestion.append(pre)
                     suggestion.href = `?id=${elem.id}#torrent`
                     suggestionsFrag.append(suggestion)
                 })