Add some hints and improve UI design

assets/icons/material-symbols/info-outline.svg

@@ -0,0 +1 @@
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>

templates/home.html

@@ -96,7 +96,7 @@
 
             <div class="field mt-4 is-align-self-stretch">
                 <p class="control">
-                    <button class="button is-dark is-rounded is-fullwidth" type="submit">
+                    <button class="button is-info is-inverted is-rounded is-fullwidth" type="submit">
                         <div class="icon-text">
                             <span class="icon is-aligned m-0">#icon("map/search")</span>
                             <span>Search</span>
@@ -110,11 +110,17 @@
     <div x-cloak x-data="{tags: []}" x-transition:enter x-show="activeTab == 'tags'" class="columns">
         <div class="column is-half is-offset-one-quarter has-text-centered">
             <form action="/search/tags" x-ref="tagsForm">
+                <template x-if="tags.length == 0">
+                    <div class="has-text-centered">
+                        <p class="is-size-5">Tags you add will appear here...</p>
+                    </div>
+                </template>
+                
                 <div class="field is-grouped is-grouped-multiline">
                     <template x-for="(tag, idx) in tags">
                         <div>
                             <div class="tags has-addons">
-                                <span class="tag is-dark has-background-info-dark has-text-info-light" x-text="tag[0]"></span><span class="tag is-dark" x-text="tag[1]"></span><a class="tag is-delete m-0" @click.prevent="tags.splice(idx, 1)"></a>
+                                <span class="tag is-dark has-background-info-dark has-text-info-light" x-text="tag[0]"></span><span class="tag is-dark" x-text="tag[1]"></span><a class="tag is-dark is-delete m-0" @click.prevent="tags.splice(idx, 1)"></a>
                             </div>
                             <input class="is-hidden" name="tag" :value="tag.join('=')">
                         </div>
@@ -122,7 +128,17 @@
                     <span></span>
                 </div>
                 
-                <div class="mt-5 field has-addons">
+                <div class="icon-text mt-5 has-text-grey">
+                    <span class="icon is-aligned">#icon("material-symbols/info-outline")</span>
+                    <p class="is-size-7 has-text-grey">
+                        Try searching for
+                        <code class="is-clickable" @click="tags.push(['lib', 'pcre2-8'])">lib=pcre2-8</code>,
+                        <code class="is-clickable" @click="tags.push(['lib', 'libaudit.so.1'])">lib=libaudit.so.1</code>,
+                        <code class="is-clickable" @click="tags.push(['bin', 'firefox'])">bin=firefox</code>,
+                        etc.
+                    </p>
+                </div>
+                <div class="mt-0 field has-addons">
                     <div class="control is-expanded">
                         <input @keydown.comma.prevent="pushTag(tags, $refs.newTagInput)" class="input" x-ref="newTagInput" placeholder="bin=nano">
                     </div>
@@ -149,7 +165,7 @@
                     </p>
                 </div>
                 
-                <button class="button is-dark is-rounded is-fullwidth" type="submit">
+                <button class="button is-info is-inverted is-rounded is-fullwidth" type="submit">
                     <div class="icon-text">
                         <span class="icon is-aligned m-0">#icon("map/search")</span>
                         <span>Search</span>