refactor(web): attachment card component

ItsNotGoodName · Sep 14, 2023 · 98b990a · 98b990a
1 parent c691d9b
commit 98b990a
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 26 deletions.
diff --git a/web/components/attachment_card.templ b/web/components/attachment_card.templ
@@ -3,23 +3,34 @@ package components
 import (
   "github.com/ItsNotGoodName/smtpbridge/web/routes"
   "github.com/ItsNotGoodName/smtpbridge/internal/models"
+  "github.com/ItsNotGoodName/smtpbridge/web/icons"
 )
 
 type AttachmentCardProps struct {
   Attachment models.Attachment
 }
 
 templ AttachmentCard(props AttachmentCardProps) {
-	<div class="card card-compact bg-base-100 border-base-200 w-full border sm:w-80">
-		if props.Attachment.IsImage() {
-			<figure><img src={ routes.AttachmentFile(props.Attachment.FileName()).URLString() } alt={ props.Attachment.Name }/></figure>
-		}
-		<div class="card-body">
-			<h2 class="card-title break-all">{ props.Attachment.Name }</h2>
-			<div class="card-actions justify-end">
-        <a hx-boost="false" href={ routes.AttachmentFile(props.Attachment.FileName()).URLQuery("download=1") } class="btn btn-primary">Download</a>
+  <div class="w-full sm:w-80">
+    <div class="card card-compact bg-base-100 border-base-200 border">
+      if props.Attachment.IsImage() {
+        <figure class="bg-base-content"><img src={ routes.AttachmentFile(props.Attachment.FileName()).URLString() } alt={ props.Attachment.Name }/></figure>
+      }
+      <div class="flex-1 p-2 flex flex-col justify-end gap-2">
+        <p class="break-all font-bold">{ props.Attachment.Name }</p>
+        <div class="join flex justify-end">
+          <a class="join-item btn tooltip flex items-center" data-tip="Envelope" href={ routes.Envelope(props.Attachment.MessageID).URLQuery("tab=" + routes.EnvelopeTabAttachments.String()) }>
+            @icons.Mail("h-5 w-5")
+          </a>
+          <a class="join-item btn tooltip flex items-center" data-tip="View" hx-boost="false" href={ routes.AttachmentFile(props.Attachment.FileName()).URL() }>
+            @icons.Eye("h-5 w-5")
+          </a>
+          <a class="join-item btn tooltip flex items-center" data-tip="Download" hx-boost="false" href={ routes.AttachmentFile(props.Attachment.FileName()).URLQuery("download=1") }>
+            @icons.Download("h-5 w-5")
+          </a>
+        </div>
       </div>
-		</div>
+    </div>
 	</div>
 }
 
diff --git a/web/components/attachment_card_templ.go b/web/components/attachment_card_templ.go
diff --git a/web/components/envelope_tab.templ b/web/components/envelope_tab.templ
@@ -13,20 +13,20 @@ type EnvelopeTabProps struct {
 }
 
 templ EnvelopeTab(props EnvelopeTabProps) {
-  <div id="tabs" hx-target="#tabs" hx-swap="innerHTML">
+  <div id="tabs">
     <div class="flex">
       <div class="border-base-200 w-4 border-b"></div>
       <div class="tabs" role="tablist">
-        <a class={ "tab tab-lifted", templ.KV("tab-active", props.Tab == routes.EnvelopeTabText) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabText).URLString() } aria-controls="tab-content" role="tab">
+        <a class={ "tab tab-lifted", templ.KV("tab-active", props.Tab == routes.EnvelopeTabText) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabText).URLString() } aria-controls="tab-content" role="tab" hx-target="#tabs" hx-swap="innerHTML">
           Text
         </a> 
         if props.Envelope.Message.HTML != "" {
-          <a class={ "tab tab-lifted", templ.KV("tab-active", props.Tab == routes.EnvelopeTabHTML) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabHTML).URLString() } aria-controls="tab-content" role="tab">
+          <a class={ "tab tab-lifted", templ.KV("tab-active", props.Tab == routes.EnvelopeTabHTML) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabHTML).URLString() } aria-controls="tab-content" role="tab" hx-target="#tabs" hx-swap="innerHTML">
             HTML
           </a> 
         }
         if len(props.Envelope.Attachments) != 0 {
-          <a class={ "tab tab-lifted flex gap-2", templ.KV("tab-active", props.Tab == routes.EnvelopeTabAttachments) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabAttachments).URLString() } aria-controls="tab-content" role="tab">
+          <a class={ "tab tab-lifted flex gap-2", templ.KV("tab-active", props.Tab == routes.EnvelopeTabAttachments) } hx-get={ routes.EnvelopeTabComponent(props.Envelope.Message.ID, routes.EnvelopeTabAttachments).URLString() } aria-controls="tab-content" role="tab" hx-target="#tabs" hx-swap="innerHTML">
             Attachments
             <div class="badge badge-primary">
               <td>{ strconv.Itoa(len(props.Envelope.Attachments)) }</td>

diff --git a/web/components/envelope_tab_templ.go b/web/components/envelope_tab_templ.go
diff --git a/web/icons/icons.templ b/web/icons/icons.templ
@@ -88,3 +88,8 @@ templ ArrowDownS(class any) {
   <svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z"></path></svg>
 }
 
+// https://remixicon.com/icon/download-line
+templ Download(class any) {
+  <svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z"></path></svg>
+}
+
diff --git a/web/icons/icons_templ.go b/web/icons/icons_templ.go