feat(web): filter envelope search

Author: ItsNotGoodName

web/icons/icons.templ

@@ -117,3 +117,8 @@ templ ErrorWarning(class any) {
 templ Alert(class any) {
   <svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.4091 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72191 12.7772 2.84815 12.865 3.00017ZM4.20471 19.0002H19.7932L11.9989 5.50017L4.20471 19.0002ZM10.9989 16.0002H12.9989V18.0002H10.9989V16.0002ZM10.9989 9.00017H12.9989V14.0002H10.9989V9.00017Z"></path></svg>
 }
+
+// https://remixicon.com/icon/filter-3-line
+templ Filter(class any) {
+  <svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 18H14V16H10V18ZM3 6V8H21V6H3ZM6 13H18V11H6V13Z"></path></svg>
+}

web/icons/icons_templ.go

@@ -11,6 +11,7 @@ import (
   "github.com/ItsNotGoodName/smtpbridge/internal/models"
   "github.com/ItsNotGoodName/smtpbridge/web/helpers"
   "github.com/ItsNotGoodName/smtpbridge/web/icons"
+	"strings"
 )
 
 type envelopeViewProps struct {
@@ -94,14 +95,41 @@ templ envelopeListView(m meta.Meta, props envelopeListViewProps) {
     </div>
     <div class="flex flex-col gap-4 p-4">
       <div class="flex flex-col-reverse justify-between gap-4 sm:flex-row">
-        <form class="join flex" action={ routes.EnvelopeList().URLString() }>
+        <form class="flex gap-2" action={ routes.EnvelopeList().URLString() }>
           for k := range props.Query {
-            if k != "search" {
+            if !strings.HasPrefix(k, "search") {
               <input type="hidden" name={ k } value={ props.Query.Get(k) } /> 
             }
           }
-          <input name="search" type="text" placeholder="Search" class="input input-sm input-bordered join-item w-full max-w-xs" value={ props.EnvelopeRequestRequest.Search } />
-          <button title="Search" type="submit" class="btn btn-sm btn-primary join-item">@icons.Search("w-5 h-5")</button>
+          <div class="join">
+          <div class="dropdown join-item">
+            <label tabindex="0" class="btn btn-sm join-item">
+              @icons.Filter("w-5 h-5")
+            </label>
+            <ul tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow-lg">
+              <li>
+                <div class="form-control">
+                  <label class="label cursor-pointer">
+                    <span class="label-text">Subject</span> 
+                    <input type="hidden" value="0" name="-search-subject" />
+                    <input name="search-subject" type="checkbox" class="checkbox" checked?={ props.EnvelopeRequestRequest.SearchSubject } />
+                  </label>
+                </div>
+              </li>
+              <li>
+                <div class="form-control">
+                  <label class="label cursor-pointer">
+                    <span class="label-text">Text</span> 
+                    <input type="hidden" value="0" name="-search-text" />
+                    <input name="search-text" type="checkbox" class="checkbox" checked?={ props.EnvelopeRequestRequest.SearchText } />
+                  </label>
+                </div>
+              </li>
+            </ul>
+          </div>
+            <input name="search" type="text" placeholder="Search" class="input input-sm input-bordered join-item w-full max-w-xs" value={ props.EnvelopeRequestRequest.Search } />
+            <button title="Search" type="submit" class="btn btn-sm btn-primary join-item">@icons.Search("w-5 h-5")</button>
+          </div>
         </form>
         <div class="join flex items-center justify-end" data-loading-states>
           <a title="Add" class="btn btn-sm join-item btn-success" href={ routes.EnvelopeCreate().URL() } data-loading-states>