alps theme: add contact details page

plugins/carddav/routes.go

@@ -23,6 +23,7 @@ type AddressBookRenderData struct {
 
 type AddressObjectRenderData struct {
 	alps.BaseRenderData
+	AddressBook   *carddav.AddressBook
 	AddressObject AddressObject
 }
 
@@ -95,7 +96,7 @@ func registerRoutes(p *plugin) {
 			return err
 		}
 
-		c, err := p.client(ctx.Session)
+		c, addressBook, err := p.clientWithAddressBook(ctx.Session)
 		if err != nil {
 			return err
 		}
@@ -120,6 +121,7 @@ func registerRoutes(p *plugin) {
 
 		return ctx.Render(http.StatusOK, "address-object.html", &AddressObjectRenderData{
 			BaseRenderData: *alps.NewBaseRenderData(ctx),
+			AddressBook:    addressBook,
 			AddressObject:  AddressObject{ao},
 		})
 	})

themes/alps/address-object.html

@@ -0,0 +1,50 @@
+{{template "head.html" .}}
+{{template "nav.html" .}}
+
+<div class="page-wrap">
+  <aside>
+    <a href="/contacts/create" class="new">New contact</a>
+    <!-- TODO: fetch list of address books -->
+    <a href="#" class="active">{{.AddressBook.Name}}</a>
+    <a href="#">Personal</a>
+  </aside>
+
+  <div class="container">
+    <main class="contact">
+      <section class="actions">
+        <div class="actions-wrap">
+          <div class="actions-message">
+            <div class="action-group">
+              <a href="/contacts" class="button-link">« Back</a>
+            </div>
+            <div class="action-group">
+              <a href="{{.AddressObject.URL}}/edit" class="button-link">
+                Edit
+              </a>
+            </div>
+            <form
+              class="action-group"
+              action="{{.AddressObject.URL}}/delete"
+              method="post"
+            >
+              <button type="submit">Delete</button>
+            </form>
+          </div>
+        </div>
+      </section>
+
+      <section class="details">
+        {{$fn := .AddressObject.Card.Value "FN"}}
+        <h1>{{$fn}}</h1>
+        <dl>
+          {{range .AddressObject.Card.Values "EMAIL"}}
+          <dt>Email address</dt>
+          <dd><a href="/compose?to={{.}}">{{.}}</a></dd>
+          {{end}}
+        </dl>
+      </section>
+    </main>
+  </div>
+</div>
+
+{{template "foot.html"}}

themes/alps/assets/style.css

@@ -184,7 +184,8 @@ main.message th { width: 5%;}
 main.message h1 { font-size: 1.2rem; padding: 0.5rem;}
 
 main.message pre,
-main.message iframe {
+main.message iframe,
+main.contact .details {
   flex: 1 auto;
   padding: 1rem;
   margin: 0.3rem 0 0 0;
@@ -214,6 +215,13 @@ main.message .message-header .parts ul {
   margin-left: 1rem;
 }
 
+main.contact dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 1rem;
+}
+
 main.compose .actions {
   display: flex;
   flex-direction: row;