From 50debe9aa166da342f268ae0b19ca0a099c8425d Mon Sep 17 00:00:00 2001
From: Laurence Chen <humorless@gmail.com>
Date: Fri, 6 Sep 2024 19:09:43 +0800
Subject: [PATCH 01/10] create a contact link & contact-detail html component

---
 src/co/gaiwan/compass/html/navigation.clj |  3 ++-
 src/co/gaiwan/compass/html/profiles.clj   | 22 ++++++++++++++++------
 src/co/gaiwan/compass/routes/profiles.clj |  9 +++++++++
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/co/gaiwan/compass/html/navigation.clj b/src/co/gaiwan/compass/html/navigation.clj
index 8a02bef..c230f70 100644
--- a/src/co/gaiwan/compass/html/navigation.clj
+++ b/src/co/gaiwan/compass/html/navigation.clj
@@ -98,7 +98,8 @@
      (for [[href caption] {(url-for :sessions/index)        "Sessions & Activities"
                            ;; (url-for :attendees/index)    "Attendees"
                            ;; (url-for :profile/index)      "Profile & Settings"
-                           (url-for :session/new) "Create Activity"}]
+                           (url-for :session/new) "Create Activity"
+                           (url-for :contact/index)  "Contact List"}]
        [:li [:a {:href href
                  :on-click "document.body.classList.toggle('menu-open')"}
              caption]])
diff --git a/src/co/gaiwan/compass/html/profiles.clj b/src/co/gaiwan/compass/html/profiles.clj
index 5f3e0a2..fe1ed23 100644
--- a/src/co/gaiwan/compass/html/profiles.clj
+++ b/src/co/gaiwan/compass/html/profiles.clj
@@ -76,18 +76,28 @@
       [:div
        [:label "Another Name:"]
        [:label (:private-profile/name user)]])
+
+    #_[:div (pr-str user)]
+    ;; Disable Edit Profile before we can show profile details pretty
+    #_[:div.actions
+       [edit-profile-btn user]]]))
+
+(o/defstyled contact-detail :div
+  ;; [image-frame :w-100px {--arc-thickness "7%"}]
+  [:.contact-list :flex :flex-wrap :gap-4]
+  [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
+  [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
+  [:.contact :flex :items-center
+   [image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
+  ([{:user/keys [uuid] :as user}]
+   [:<>
     [:div
      [:h3 "Contacts"]
      [:div.contact-list
       (for [c (:user/contacts user)]
         [:div.contact
          [image-frame {:profile/image (user/avatar-css-value c)}]
-         [:button.remove-btn [graphics/person-remove]]])]]
-
-    #_[:div (pr-str user)]
-    ;; Disable Edit Profile before we can show profile details pretty
-    #_[:div.actions
-       [edit-profile-btn user]]]))
+         [:button.remove-btn [graphics/person-remove]]])]]]))
 
 (o/defstyled private-name :div
   ([user {:keys [private-name-switch] :as params}]
diff --git a/src/co/gaiwan/compass/routes/profiles.clj b/src/co/gaiwan/compass/routes/profiles.clj
index 9520f18..1fbc6f4 100644
--- a/src/co/gaiwan/compass/routes/profiles.clj
+++ b/src/co/gaiwan/compass/routes/profiles.clj
@@ -128,6 +128,13 @@
       (ring-response/file-response (.getPath file))
       (ring-response/not-found "File not found"))))
 
+(defn GET-contact-list
+  "Show the private contact list of the user. 
+    - Users can revoke their contacts in this page"
+  [req]
+  {:html/body [h/contact-detail
+               (:identity req)]})
+
 (defn eid->qr-hash
   "create an uuid as the hash for eid to prevent guessing
    store this uuid in the user"
@@ -225,6 +232,8 @@
      :get        {:handler file-handler}}]
    ["/contact"
     {:middleware [[response/wrap-requires-auth]]}
+    ["/" {:name :contact/index
+          :get {:handler GET-contact-list}}]
     ["/qr" {:name :contact/qr
             :get {:handler GET-qr-html}}]
     ["/qr.png" {:name :contact/qr-png

From 61fdcc41b51be83ec1dca6dc4feaf72314481b96 Mon Sep 17 00:00:00 2001
From: Laurence Chen <humorless@gmail.com>
Date: Fri, 6 Sep 2024 20:47:19 +0800
Subject: [PATCH 02/10] little change on /contacts

---
 src/co/gaiwan/compass/html/navigation.clj | 2 +-
 src/co/gaiwan/compass/routes/profiles.clj | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/co/gaiwan/compass/html/navigation.clj b/src/co/gaiwan/compass/html/navigation.clj
index c230f70..87db363 100644
--- a/src/co/gaiwan/compass/html/navigation.clj
+++ b/src/co/gaiwan/compass/html/navigation.clj
@@ -99,7 +99,7 @@
                            ;; (url-for :attendees/index)    "Attendees"
                            ;; (url-for :profile/index)      "Profile & Settings"
                            (url-for :session/new) "Create Activity"
-                           (url-for :contact/index)  "Contact List"}]
+                           (url-for :contacts/index)  "Contacts"}]
        [:li [:a {:href href
                  :on-click "document.body.classList.toggle('menu-open')"}
              caption]])
diff --git a/src/co/gaiwan/compass/routes/profiles.clj b/src/co/gaiwan/compass/routes/profiles.clj
index 1fbc6f4..bcad9a9 100644
--- a/src/co/gaiwan/compass/routes/profiles.clj
+++ b/src/co/gaiwan/compass/routes/profiles.clj
@@ -232,8 +232,6 @@
      :get        {:handler file-handler}}]
    ["/contact"
     {:middleware [[response/wrap-requires-auth]]}
-    ["/" {:name :contact/index
-          :get {:handler GET-contact-list}}]
     ["/qr" {:name :contact/qr
             :get {:handler GET-qr-html}}]
     ["/qr.png" {:name :contact/qr-png
@@ -242,6 +240,10 @@
      {:name :contact/add
       :post       {:handler POST-contact}
       :get        {:handler GET-contact}}]]
+   ["/contacts"
+    {:middleware [[response/wrap-requires-auth]]}
+    ["/" {:name :contacts/index
+          :get {:handler GET-contact-list}}]]
    ["/attendees"
     [""
      {:name :attendees/index

From c25f0317b110b76a74cf0b93c645d7891f973b58 Mon Sep 17 00:00:00 2001
From: Laurence Chen <humorless@gmail.com>
Date: Fri, 6 Sep 2024 23:04:23 +0800
Subject: [PATCH 03/10] add contact button into the contact list page

---
 src/co/gaiwan/compass/html/profiles.clj | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/co/gaiwan/compass/html/profiles.clj b/src/co/gaiwan/compass/html/profiles.clj
index fe1ed23..7dafdbb 100644
--- a/src/co/gaiwan/compass/html/profiles.clj
+++ b/src/co/gaiwan/compass/html/profiles.clj
@@ -91,6 +91,9 @@
    [image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
   ([{:user/keys [uuid] :as user}]
    [:<>
+    [:button {:hx-target "#modal"
+              :hx-get (url-for :contact/qr)}
+     "Add Contact"]
     [:div
      [:h3 "Contacts"]
      [:div.contact-list

From e16a09049b17ad2e51c0af9a6c8a9a7873094fdb Mon Sep 17 00:00:00 2001
From: Laurence Chen <humorless@gmail.com>
Date: Fri, 6 Sep 2024 23:32:56 +0800
Subject: [PATCH 04/10] click the button to remove connection

---
 src/co/gaiwan/compass/html/profiles.clj   |  7 ++++++-
 src/co/gaiwan/compass/routes/profiles.clj | 14 +++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/co/gaiwan/compass/html/profiles.clj b/src/co/gaiwan/compass/html/profiles.clj
index 7dafdbb..6711e22 100644
--- a/src/co/gaiwan/compass/html/profiles.clj
+++ b/src/co/gaiwan/compass/html/profiles.clj
@@ -95,12 +95,17 @@
               :hx-get (url-for :contact/qr)}
      "Add Contact"]
     [:div
+     [:a
+      {:href (url-for :contacts/index)
+       :style {:display "none"}
+       :hx-trigger "contact-deleted from:body"}]
      [:h3 "Contacts"]
      [:div.contact-list
       (for [c (:user/contacts user)]
         [:div.contact
          [image-frame {:profile/image (user/avatar-css-value c)}]
-         [:button.remove-btn [graphics/person-remove]]])]]]))
+         [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
+          [graphics/person-remove]]])]]]))
 
 (o/defstyled private-name :div
   ([user {:keys [private-name-switch] :as params}]
diff --git a/src/co/gaiwan/compass/routes/profiles.clj b/src/co/gaiwan/compass/routes/profiles.clj
index bcad9a9..f68eb7b 100644
--- a/src/co/gaiwan/compass/routes/profiles.clj
+++ b/src/co/gaiwan/compass/routes/profiles.clj
@@ -191,6 +191,15 @@
      {:hx-post (url-for :contact/add {:qr-hash (get-in req [:path-params :qr-hash])})}
      (str "Accept invite")]]})
 
+(defn DELETE-contact
+  [req]
+  (let [me-id (:db/id (:identity req))
+        contact-id (parse-long (get-in req [:path-params :id]))]
+    @(db/transact [[:db/retract me-id :user/contacts contact-id]
+                   [:db/retract contact-id :user/contacts me-id]])
+    {:location :contacts/index
+     :hx/trigger "contact-deleted"}))
+
 (defn POST-contact
   "Part of the url is hash of the contact's user eid
    Decode it and add that contact"
@@ -239,7 +248,10 @@
     ["/:qr-hash"
      {:name :contact/add
       :post       {:handler POST-contact}
-      :get        {:handler GET-contact}}]]
+      :get        {:handler GET-contact}}]
+    ["/link/:id"
+     {:name :contact/link
+      :delete     {:handler DELETE-contact}}]]
    ["/contacts"
     {:middleware [[response/wrap-requires-auth]]}
     ["/" {:name :contacts/index

From 6f4b6eeea6c6bece45fecd43aed47a938357f497 Mon Sep 17 00:00:00 2001
From: Laurence Chen <humorless@gmail.com>
Date: Fri, 6 Sep 2024 23:44:19 +0800
Subject: [PATCH 05/10] use reference design of mastodon

---
 src/co/gaiwan/compass/html/profiles.clj | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/co/gaiwan/compass/html/profiles.clj b/src/co/gaiwan/compass/html/profiles.clj
index 6711e22..3bb7f41 100644
--- a/src/co/gaiwan/compass/html/profiles.clj
+++ b/src/co/gaiwan/compass/html/profiles.clj
@@ -83,14 +83,19 @@
        [edit-profile-btn user]]]))
 
 (o/defstyled contact-detail :div
-  ;; [image-frame :w-100px {--arc-thickness "7%"}]
-  [:.contact-list :flex :flex-wrap :gap-4]
+  [image-frame :w-100px {--arc-thickness "7%"}]
+  ;;[:.contact-list :flex :flex-wrap :gap-4]
   [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
   [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
   [:.contact :flex :items-center
+   [:div :mr-2]
    [image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
-  ([{:user/keys [uuid] :as user}]
+  ([{:public-profile/keys [name]
+     :user/keys [uuid] :as user}]
    [:<>
+    [:div [image-frame {:profile/image (user/avatar-css-value user)}]]
+    [:div.details
+     [:h3.title name]]
     [:button {:hx-target "#modal"
               :hx-get (url-for :contact/qr)}
      "Add Contact"]
@@ -101,11 +106,14 @@
        :hx-trigger "contact-deleted from:body"}]
      [:h3 "Contacts"]
      [:div.contact-list
-      (for [c (:user/contacts user)]
-        [:div.contact
-         [image-frame {:profile/image (user/avatar-css-value c)}]
-         [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
-          [graphics/person-remove]]])]]]))
+      [:ul
+       (for [c (:user/contacts user)]
+         [:li.contact
+          [image-frame {:profile/image (user/avatar-css-value c)}]
+          [:div [:label (:public-profile/name c)]
+           [:label (:discord/email c)]]
+          [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
+           [graphics/person-remove] "Remove Contact"]])]]]]))
 
 (o/defstyled private-name :div
   ([user {:keys [private-name-switch] :as params}]

From 0fee4f0298f592c7689f93923df0ba35a940c233 Mon Sep 17 00:00:00 2001
From: Laurence Chen <humorless@gmail.com>
Date: Fri, 6 Sep 2024 23:54:08 +0800
Subject: [PATCH 06/10] update repl-sessions/revoke.clj

---
 repl-sessions/revoke.clj | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/repl-sessions/revoke.clj b/repl-sessions/revoke.clj
index b8eac77..a9d5f08 100644
--- a/repl-sessions/revoke.clj
+++ b/repl-sessions/revoke.clj
@@ -35,6 +35,7 @@
       (fn [x]
         {:db/id (str "temp-" x)
          :user/contacts eid
+         :discord/email (str "temp-email-" x "@gaiwan.co")
          :public-profile/name (str "temp-user-" x)
          :public-profile/avatar-url (assets/download-image (str avatar-url-part x ".png"))})
       (range 1 11))
@@ -45,6 +46,6 @@
       (range 1 11)))))
 
 (def tx (temp-user-tx
-         (test-user-eid "Arne")))
+         (test-user-eid "Laurence")))
 
 (db/transact tx)

From e800f0cff7e665fe11eb368cb4f41434bc5ec34b Mon Sep 17 00:00:00 2001
From: Laurence Chen <humorless@gmail.com>
Date: Sat, 7 Sep 2024 00:07:26 +0800
Subject: [PATCH 07/10] try to make the layout close to mastondon

---
 src/co/gaiwan/compass/html/profiles.clj | 29 ++++++++++---------------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/co/gaiwan/compass/html/profiles.clj b/src/co/gaiwan/compass/html/profiles.clj
index 3bb7f41..af2c75f 100644
--- a/src/co/gaiwan/compass/html/profiles.clj
+++ b/src/co/gaiwan/compass/html/profiles.clj
@@ -58,11 +58,6 @@
 
 (o/defstyled profile-detail :div#detail
   [image-frame :w-100px {--arc-thickness "7%"}]
-  [:.contact-list :flex :flex-wrap :gap-4]
-  [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
-  [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
-  [:.contact :flex :items-center
-   [image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
   ([{:public-profile/keys [name hidden?]
      :user/keys [uuid] :as user}]
    [:<>
@@ -79,15 +74,15 @@
 
     #_[:div (pr-str user)]
     ;; Disable Edit Profile before we can show profile details pretty
-    #_[:div.actions
-       [edit-profile-btn user]]]))
+    [:div.actions
+     [edit-profile-btn user]]]))
 
 (o/defstyled contact-detail :div
   [image-frame :w-100px {--arc-thickness "7%"}]
-  ;;[:.contact-list :flex :flex-wrap :gap-4]
+  [:.contact-list :w-full :ga-4]
   [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
   [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
-  [:.contact :flex :items-center
+  [:.contact :flex :items-center :justify-between
    [:div :mr-2]
    [image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
   ([{:public-profile/keys [name]
@@ -106,14 +101,14 @@
        :hx-trigger "contact-deleted from:body"}]
      [:h3 "Contacts"]
      [:div.contact-list
-      [:ul
-       (for [c (:user/contacts user)]
-         [:li.contact
-          [image-frame {:profile/image (user/avatar-css-value c)}]
-          [:div [:label (:public-profile/name c)]
-           [:label (:discord/email c)]]
-          [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
-           [graphics/person-remove] "Remove Contact"]])]]]]))
+      (for [c (:user/contacts user)]
+        [:div.contact
+         [image-frame {:profile/image (user/avatar-css-value c)}]
+         [:div
+          [:div (:public-profile/name c)]
+          [:div (:discord/email c)]]
+         [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
+          [graphics/person-remove] "Remove Contact"]])]]]))
 
 (o/defstyled private-name :div
   ([user {:keys [private-name-switch] :as params}]

From 6c0cdb3d515aabd0c7c3560933480d7d852e7781 Mon Sep 17 00:00:00 2001
From: Arne Brasseur <arne@arnebrasseur.net>
Date: Mon, 9 Sep 2024 10:07:04 +0200
Subject: [PATCH 08/10] Extract contacts to its own routes/views namespaces

---
 repl-sessions/revoke.clj                  |   2 +-
 resources/public/css/styles.css           |  97 ++++++++--------
 src/co/gaiwan/compass/css/tokens.clj      |   2 +
 src/co/gaiwan/compass/html/components.clj |  13 +++
 src/co/gaiwan/compass/html/contacts.clj   |  64 +++++++++++
 src/co/gaiwan/compass/html/profiles.clj   |  81 +-------------
 src/co/gaiwan/compass/html/sessions.clj   |   7 +-
 src/co/gaiwan/compass/http/routes.clj     |   2 +
 src/co/gaiwan/compass/routes/contacts.clj | 130 ++++++++++++++++++++++
 src/co/gaiwan/compass/routes/profiles.clj | 113 +------------------
 10 files changed, 274 insertions(+), 237 deletions(-)
 create mode 100644 src/co/gaiwan/compass/html/contacts.clj
 create mode 100644 src/co/gaiwan/compass/routes/contacts.clj

diff --git a/repl-sessions/revoke.clj b/repl-sessions/revoke.clj
index a9d5f08..435fc55 100644
--- a/repl-sessions/revoke.clj
+++ b/repl-sessions/revoke.clj
@@ -46,6 +46,6 @@
       (range 1 11)))))
 
 (def tx (temp-user-tx
-         (test-user-eid "Laurence")))
+         (test-user-eid "Arne")))
 
 (db/transact tx)
diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
index f7561e5..f094d74 100644
--- a/resources/public/css/styles.css
+++ b/resources/public/css/styles.css
@@ -6,9 +6,8 @@
   --hoc-pink-3: var(--hoc-pink);
   --hoc-green: #99db70;
   --sessions-arc-degrees: 240deg;
-  --profiles-arc-thickness: 30px;
-  --sessions-arc-thickness: 30px;
   --hoc-pink-1: #e7879d;
+  --arc-thickness: 30px;
   --hoc-pink-2: #cd4e6a;
   --hoc-pink-4: #c0415b;
   --co-gaiwan-compass-html-components--toggle-radius-right: var(--radius-2);
@@ -305,6 +304,19 @@ ol li {
   background-size: cover;
 }
 
+.co_gaiwan_compass_html_components__image_frame .img {
+  width: 100%;
+  padding: var(--arc-thickness);
+}
+
+.co_gaiwan_compass_html_components__image_frame .img >* {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 9999px;
+  background-size: cover;
+  background-position: 50% 50%;
+}
+
 .co_gaiwan_compass_html_navigation__nav_bar {
   display: flex;
   align-items: center;
@@ -431,70 +443,65 @@ ol li {
   opacity: 0.5;
 }
 
-.filters-filter_section {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--size-1);
-  margin-top: var(--size-3);
-  margin-bottom: var(--size-3);
-}
-
-.filters-filter_section button, .filters-filter_section .co_gaiwan_compass_html_components__toggle_button, .filters-filter_section .btn {
-  font-weight: 400;
-  flex-grow: 1;
-}
-
-.profiles-image_frame .img {
-  width: 100%;
-  padding: var(--profiles-arc-thickness);
-}
-
-.profiles-image_frame .img >* {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  border-radius: 9999px;
-  background-size: cover;
-  background-position: 50% 50%;
-}
-
-.profiles-attendee_card .profiles-image_frame {
+.contacts-attendee_card .co_gaiwan_compass_html_components__image_frame {
   width: 100px;
 }
 
-.profiles-profile_detail .profiles-image_frame {
+.contacts-contact_detail .co_gaiwan_compass_html_components__image_frame {
   width: 100px;
-  --profiles-arc-thickness: 7%;
+  --arc-thickness: 7%;
 }
 
-.profiles-profile_detail .contact-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--size-4);
+.contacts-contact_detail .contact-list {
+  width: 100%;
 }
 
-.profiles-profile_detail .remove-btn, .profiles-profile_detail cursor-pointer {
+.contacts-contact_detail .remove-btn, .contacts-contact_detail cursor-pointer {
   border-style: none;
   background-color: var(--surface-3);
 }
 
-.profiles-profile_detail .remove-btn:hover {
+.contacts-contact_detail .remove-btn:hover {
   background-color: var(--surface-4);
 }
 
-.profiles-profile_detail .contact {
+.contacts-contact_detail .contact {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
-.profiles-profile_detail .contact .profiles-image_frame {
+.contacts-contact_detail .contact div {
+  margin-right: var(--size-2);
+}
+
+.contacts-contact_detail .contact .co_gaiwan_compass_html_components__image_frame {
   width: 50px;
-  --profiles-arc-thickness: 7%;
+  --arc-thickness: 7%;
   margin-right: var(--size-2);
 }
 
-.profiles-profile_form .profiles-image_frame {
+.filters-filter_section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-1);
+  margin-top: var(--size-3);
+  margin-bottom: var(--size-3);
+}
+
+.filters-filter_section button, .filters-filter_section .co_gaiwan_compass_html_components__toggle_button, .filters-filter_section .btn {
+  font-weight: 400;
+  flex-grow: 1;
+}
+
+.profiles-profile_detail .co_gaiwan_compass_html_components__image_frame {
+  width: 100px;
+  --arc-thickness: 7%;
+}
+
+.profiles-profile_form .co_gaiwan_compass_html_components__image_frame {
   width: 100px;
-  --profiles-arc-thickness: 7%;
+  --arc-thickness: 7%;
 }
 
 .profiles-profile_form label, .profiles-profile_form input {
@@ -529,7 +536,7 @@ ol li {
 
 .sessions-arc {
   aspect-ratio: var(--ratio-square);
-  padding: var(--sessions-arc-thickness);
+  padding: var(--arc-thickness);
   border-radius: var(--radius-round);
   background: var(--sessions-arc-color);
   mask: linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 var(--sessions-arc-degrees), #0000 0);
@@ -538,7 +545,7 @@ ol li {
 .sessions-capacity_gauge {
   aspect-ratio: 1 / 1;
   position: relative;
-  --sessions-arc-thickness: 7%;
+  --arc-thickness: 7%;
 }
 
 .sessions-capacity_gauge >* {
@@ -570,7 +577,7 @@ ol li {
 
 .sessions-capacity_gauge .img {
   width: 100%;
-  padding: var(--sessions-arc-thickness);
+  padding: var(--arc-thickness);
 }
 
 .sessions-capacity_gauge .img >* {
diff --git a/src/co/gaiwan/compass/css/tokens.clj b/src/co/gaiwan/compass/css/tokens.clj
index 6b82f6f..782f735 100644
--- a/src/co/gaiwan/compass/css/tokens.clj
+++ b/src/co/gaiwan/compass/css/tokens.clj
@@ -36,6 +36,8 @@
 (o/defprop --highlight)
 (o/defprop --highlight-yellow)
 
+(o/defprop --arc-thickness "30px")
+
 (o/defrules session-colors
   [":where(html)"
    {--talk-color         --blue-2
diff --git a/src/co/gaiwan/compass/html/components.clj b/src/co/gaiwan/compass/html/components.clj
index d1cde2d..d9b9622 100644
--- a/src/co/gaiwan/compass/html/components.clj
+++ b/src/co/gaiwan/compass/html/components.clj
@@ -66,3 +66,16 @@
    :background-size "cover"}
   ([image]
    [:<> {:style {:background-image image}}]))
+
+(o/defstyled image-frame :div
+  [:.img :w-full
+   {:padding t/--arc-thickness
+    #_#_:margin-left "-100%"}
+   [:>* :w-full :aspect-square :rounded-full
+    {:background-size "cover"
+     :background-position "50% 50%"}]]
+  ([{:profile/keys [image]}]
+   [:<>
+    [:div.img
+     [:div
+      {:style {:background-image image}}]]]))
diff --git a/src/co/gaiwan/compass/html/contacts.clj b/src/co/gaiwan/compass/html/contacts.clj
new file mode 100644
index 0000000..12a7086
--- /dev/null
+++ b/src/co/gaiwan/compass/html/contacts.clj
@@ -0,0 +1,64 @@
+(ns co.gaiwan.compass.html.contacts
+  "Views and components (hiccup/ornament) related to contacts"
+  {:ornament/prefix "contacts-"}
+  (:require
+   [co.gaiwan.compass.css.tokens :as t :refer :all]
+   [co.gaiwan.compass.html.components :as c]
+   [co.gaiwan.compass.html.graphics :as graphics]
+   [co.gaiwan.compass.http.routing :refer [url-for]]
+   [co.gaiwan.compass.model.user :as user]
+   [lambdaisland.ornament :as o]
+   [markdown-to-hiccup.core :as m]))
+
+;; UI of attendee list
+
+(o/defstyled attendee-card :div
+  [c/image-frame :w-100px]
+  ([{:public-profile/keys [name hidden? bio]
+     :user/keys [uuid] :as user}]
+   [:<>
+    [c/image-frame {:profile/image (user/avatar-css-value user)}]
+    [:div.details
+     [:h3 name]
+     (if hidden?
+       [:label "Hide profile from public listing"]
+       [:label "Show profile from public listing"])
+     (when (:private-profile/name user)
+       [:div
+        [:label "Another Name:"]
+        [:label (:private-profile/name user)]])
+     (when bio
+       [:textarea (m/md->hiccup bio)])]]))
+
+(o/defstyled contact-detail :div
+  [c/image-frame :w-100px {--arc-thickness "7%"}]
+  [:.contact-list :w-full :ga-4]
+  [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
+  [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
+  [:.contact :flex :items-center :justify-between
+   [:div :mr-2]
+   [c/image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
+  ([{:public-profile/keys [name]
+     :user/keys [uuid] :as user}]
+   [:<>
+    [:div [c/image-frame {:profile/image (user/avatar-css-value user)}]]
+    [:div.details
+     [:h3.title name]]
+    [:button {:hx-target "#modal"
+              :hx-get (url-for :contact/qr)}
+     "Add Contact"]
+    [:div
+     [:a
+      {:href (url-for :contacts/index)
+       :style {:display "none"}
+       :hx-trigger "contact-deleted from:body"}]
+     [:h3 "Contacts"]
+     [:div.contact-list
+      (for [c (:user/contacts user)]
+        [:div.contact
+         [c/image-frame {:profile/image (user/avatar-css-value c)}]
+         [:div
+          [:div (:public-profile/name c)]
+          [:div (:discord/email c)]]
+         [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
+          [graphics/person-remove] "Remove Contact"]])]]]))
diff --git a/src/co/gaiwan/compass/html/profiles.clj b/src/co/gaiwan/compass/html/profiles.clj
index af2c75f..d4dbcbb 100644
--- a/src/co/gaiwan/compass/html/profiles.clj
+++ b/src/co/gaiwan/compass/html/profiles.clj
@@ -2,48 +2,12 @@
   "Views and components (hiccup/ornament) related to profiles"
   {:ornament/prefix "profiles-"}
   (:require
-   [co.gaiwan.compass.html.graphics :as graphics]
    [co.gaiwan.compass.css.tokens :as t :refer :all]
    [co.gaiwan.compass.db.queries :as queries]
+   [co.gaiwan.compass.html.components :as c]
    [co.gaiwan.compass.http.routing :refer [url-for]]
    [co.gaiwan.compass.model.user :as user]
-   [lambdaisland.ornament :as o]
-   [markdown-to-hiccup.core :as m]))
-
-(o/defprop --arc-thickness "30px")
-
-(o/defstyled image-frame :div
-  [:.img :w-full
-   {:padding --arc-thickness
-    #_#_:margin-left "-100%"}
-   [:>* :w-full :aspect-square :rounded-full
-    {:background-size "cover"
-     :background-position "50% 50%"}]]
-  ([{:profile/keys [image]}]
-   [:<>
-    [:div.img
-     [:div
-      {:style {:background-image image}}]]]))
-
-;; UI of attendee list
-
-(o/defstyled attendee-card :div
-  [image-frame :w-100px]
-  ([{:public-profile/keys [name hidden? bio]
-     :user/keys [uuid] :as user}]
-   [:<>
-    [image-frame {:profile/image (user/avatar-css-value user)}]
-    [:div.details
-     [:h3 name]
-     (if hidden?
-       [:label "Hide profile from public listing"]
-       [:label "Show profile from public listing"])
-     (when (:private-profile/name user)
-       [:div
-        [:label "Another Name:"]
-        [:label (:private-profile/name user)]])
-     (when bio
-       [:textarea (m/md->hiccup bio)])]]))
+   [lambdaisland.ornament :as o]))
 
 ;; UI of profile detail
 
@@ -57,11 +21,11 @@
     "Edit Profile"]))
 
 (o/defstyled profile-detail :div#detail
-  [image-frame :w-100px {--arc-thickness "7%"}]
+  [c/image-frame :w-100px {t/--arc-thickness "7%"}]
   ([{:public-profile/keys [name hidden?]
      :user/keys [uuid] :as user}]
    [:<>
-    [:div [image-frame {:profile/image (user/avatar-css-value user)}]]
+    [:div [c/image-frame {:profile/image (user/avatar-css-value user)}]]
     [:div.details
      [:h3.title name]]
     (if hidden?
@@ -77,39 +41,6 @@
     [:div.actions
      [edit-profile-btn user]]]))
 
-(o/defstyled contact-detail :div
-  [image-frame :w-100px {--arc-thickness "7%"}]
-  [:.contact-list :w-full :ga-4]
-  [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
-  [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
-  [:.contact :flex :items-center :justify-between
-   [:div :mr-2]
-   [image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
-  ([{:public-profile/keys [name]
-     :user/keys [uuid] :as user}]
-   [:<>
-    [:div [image-frame {:profile/image (user/avatar-css-value user)}]]
-    [:div.details
-     [:h3.title name]]
-    [:button {:hx-target "#modal"
-              :hx-get (url-for :contact/qr)}
-     "Add Contact"]
-    [:div
-     [:a
-      {:href (url-for :contacts/index)
-       :style {:display "none"}
-       :hx-trigger "contact-deleted from:body"}]
-     [:h3 "Contacts"]
-     [:div.contact-list
-      (for [c (:user/contacts user)]
-        [:div.contact
-         [image-frame {:profile/image (user/avatar-css-value c)}]
-         [:div
-          [:div (:public-profile/name c)]
-          [:div (:discord/email c)]]
-         [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
-          [graphics/person-remove] "Remove Contact"]])]]]))
-
 (o/defstyled private-name :div
   ([user {:keys [private-name-switch] :as params}]
    (if (= "on" private-name-switch)
@@ -153,7 +84,7 @@
     [row link params]]))
 
 (o/defstyled profile-form :div#form
-  [image-frame :w-100px {--arc-thickness "7%"}]
+  [c/image-frame :w-100px {t/--arc-thickness "7%"}]
   [#{:label :input} :block]
   [:label
    :mb-1 :mt-2
@@ -191,7 +122,7 @@
      [:div.input-block {:id "private-name-block"}]
      [:div
       (when user
-        [image-frame {:profile/image (user/avatar-css-value user)}])
+        [c/image-frame {:profile/image (user/avatar-css-value user)}])
       [:label {:for "image"} "Avatar"]
       [:input {:id "image" :name "image" :type "file" :accept "image/png, image/jpeg"}]]
      [:div
diff --git a/src/co/gaiwan/compass/html/sessions.clj b/src/co/gaiwan/compass/html/sessions.clj
index e526f87..11ebc23 100644
--- a/src/co/gaiwan/compass/html/sessions.clj
+++ b/src/co/gaiwan/compass/html/sessions.clj
@@ -16,14 +16,13 @@
    [markdown-to-hiccup.core :as m]))
 
 (o/defprop --arc-degrees "240deg")
-(o/defprop --arc-thickness "30px")
 (o/defprop --arc-color --lime-5)
 
 (o/defstyled arc :div
   "Partial circle arc, clockwise. Expects arc (a value in CSS `deg` units) and
   thickness to be passed as props or set as css vars by a parent element."
   {:aspect-ratio  --ratio-square
-   :padding       --arc-thickness
+   :padding       t/--arc-thickness
    :border-radius --radius-round
    :background    --arc-color
    :mask          (str "linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 " --arc-degrees ", #0000 0)")})
@@ -34,14 +33,14 @@
   {:position "relative"}
   [:>* {:position "absolute" :top 0 :left 0}]
   [arc :w-full]
-  {--arc-thickness "7%"}
+  {t/--arc-thickness "7%"}
   [:.checkmark :hidden :w-full :justify-center :h-full :items-center
    {:font-size "5rem"}]
   [:&.checked
    [:.checkmark :flex]
    [:.img {:filter "brightness(50%)"}]]
   [:.img :w-full
-   {:padding --arc-thickness
+   {:padding t/--arc-thickness
     #_#_:margin-left "-100%"}
    [:>* :w-full :aspect-square :rounded-full
     {:background-size "cover"
diff --git a/src/co/gaiwan/compass/http/routes.clj b/src/co/gaiwan/compass/http/routes.clj
index 468577c..5e722cf 100644
--- a/src/co/gaiwan/compass/http/routes.clj
+++ b/src/co/gaiwan/compass/http/routes.clj
@@ -2,6 +2,7 @@
   "Combined HTTP routing table"
   (:require
    [co.gaiwan.compass.routes.admin :as admin]
+   [co.gaiwan.compass.routes.contacts :as contacts]
    [co.gaiwan.compass.routes.filters :as filters]
    [co.gaiwan.compass.routes.meta :as meta]
    [co.gaiwan.compass.routes.oauth :as oauth]
@@ -13,6 +14,7 @@
   [(meta/routes)
    (sessions/routes)
    (profiles/routes)
+   (contacts/routes)
    (oauth/routes)
    (filters/routes)
    (ticket/routes)
diff --git a/src/co/gaiwan/compass/routes/contacts.clj b/src/co/gaiwan/compass/routes/contacts.clj
new file mode 100644
index 0000000..bd67b54
--- /dev/null
+++ b/src/co/gaiwan/compass/routes/contacts.clj
@@ -0,0 +1,130 @@
+(ns co.gaiwan.compass.routes.contacts
+  (:require
+   [clj.qrgen :as qr]
+   [clojure.java.io :as io]
+   [clojure.string :as str]
+   [co.gaiwan.compass.config :as config]
+   [co.gaiwan.compass.db :as db]
+   [co.gaiwan.compass.db.queries :as q]
+   [co.gaiwan.compass.html.contacts :as h]
+   [co.gaiwan.compass.http.response :as response]
+   [co.gaiwan.compass.http.routing :refer [url-for]]
+   [co.gaiwan.compass.model.assets :as assets]
+   [co.gaiwan.compass.model.attendees :as attendees]
+   [ring.util.response :as ring-response]))
+
+(defn GET-contact-list
+  "Show the private contact list of the user.
+    - Users can revoke their contacts in this page"
+  [req]
+  {:html/body [h/contact-detail
+               (:identity req)]})
+
+(defn eid->qr-hash
+  "create an uuid as the hash for eid to prevent guessing
+   store this uuid in the user"
+  [user-eid]
+  (let [qr-hash (random-uuid)]
+    @(db/transact [{:db/id user-eid
+                    :user/hash qr-hash}])
+    qr-hash))
+
+(defn qr-hash->eid
+  "Accept a uuid type's qr-hash, and use it to query the
+   user's eid"
+  [qr-hash]
+  (db/q '[:find ?e .
+          :in $ ?hash
+          :where
+          [?e :user/hash ?hash]]
+        (db/db) qr-hash))
+
+(defn GET-qr-html [req]
+  {:html/body [:div
+               {:style {:margin "var(--size-4)"}}
+               [:h2 "Add Contact"]
+               [:img {:src (url-for :contact/qr-png)}]]
+   :html/layout false})
+
+(defn GET-qr-code
+  [{:keys [identity] :as req}]
+  (let [user-eid (:db/id identity)
+        host (config/value :compass/origin)
+        qr-hash (str (eid->qr-hash user-eid))
+        url (str host (url-for :contact/add {:qr-hash qr-hash}))
+        qr-image (qr/as-bytes (qr/from url :size [400 400]))]
+    (-> (ring-response/response qr-image)
+        (assoc-in [:headers "content-type"] "image/png"))))
+
+(defn GET-attendees [req]
+  (let [attendees (q/all-users)]
+    {:html/body
+     [:<>
+      [:p "The Attendees List"]
+      (for [atd (attendees/user-list attendees)]
+        (h/attendee-card atd))]}))
+
+(defn GET-contact
+  [req]
+  {:html/body
+   [:div
+    [:a
+     {:href (url-for :profile/index)
+      :style {:display "none"}
+      :hx-trigger "contact-added from:body"}]
+    [:button
+     {:hx-post (url-for :contact/add {:qr-hash (get-in req [:path-params :qr-hash])})}
+     (str "Accept invite")]]})
+
+(defn DELETE-contact
+  [req]
+  (let [me-id (:db/id (:identity req))
+        contact-id (parse-long (get-in req [:path-params :id]))]
+    @(db/transact [[:db/retract me-id :user/contacts contact-id]
+                   [:db/retract contact-id :user/contacts me-id]])
+    {:location :contacts/index
+     :hx/trigger "contact-deleted"}))
+
+(defn POST-contact
+  "Part of the url is hash of the contact's user eid
+   Decode it and add that contact"
+  [{:keys [identity] :as req}]
+  (let [user-eid (:db/id identity)
+        qr-hash (parse-uuid (get-in req [:path-params :qr-hash]))
+        contact-eid (qr-hash->eid qr-hash)
+        ;; According to the schema
+        ;; A :u/c B means that user A agrees to show their public profile to user B.
+        ;; contact -> A
+        ;; user -> B
+        _ @(db/transact [{:db/id contact-eid
+                          :user/contacts user-eid}
+                         {:db/id user-eid
+                          :user/contacts contact-eid}])]
+    {:location :contact/add
+     :hx/trigger "contact-added"}))
+
+(defn routes []
+  [
+   ["/contact"
+    {:middleware [[response/wrap-requires-auth]]}
+    ["/qr" {:name :contact/qr
+            :get {:handler GET-qr-html}}]
+    ["/qr.png" {:name :contact/qr-png
+                :get {:handler GET-qr-code}}]
+    ["/:qr-hash"
+     {:name :contact/add
+      :post       {:handler POST-contact}
+      :get        {:handler GET-contact}}]
+    ["/link/:id"
+     {:name :contact/link
+      :delete     {:handler DELETE-contact}}]]
+   ["/contacts"
+    {:middleware [[response/wrap-requires-auth]]}
+    ["/" {:name :contacts/index
+          :get {:handler GET-contact-list}}]]
+   #_
+   ["/attendees"
+    [""
+     {:name :attendees/index
+      :middleware [[response/wrap-requires-auth]]
+      :get        {:handler GET-attendees}}]]])
diff --git a/src/co/gaiwan/compass/routes/profiles.clj b/src/co/gaiwan/compass/routes/profiles.clj
index f68eb7b..c9d76e1 100644
--- a/src/co/gaiwan/compass/routes/profiles.clj
+++ b/src/co/gaiwan/compass/routes/profiles.clj
@@ -128,96 +128,6 @@
       (ring-response/file-response (.getPath file))
       (ring-response/not-found "File not found"))))
 
-(defn GET-contact-list
-  "Show the private contact list of the user. 
-    - Users can revoke their contacts in this page"
-  [req]
-  {:html/body [h/contact-detail
-               (:identity req)]})
-
-(defn eid->qr-hash
-  "create an uuid as the hash for eid to prevent guessing
-   store this uuid in the user"
-  [user-eid]
-  (let [qr-hash (random-uuid)]
-    @(db/transact [{:db/id user-eid
-                    :user/hash qr-hash}])
-    qr-hash))
-
-(defn qr-hash->eid
-  "Accept a uuid type's qr-hash, and use it to query the
-   user's eid"
-  [qr-hash]
-  (db/q '[:find ?e .
-          :in $ ?hash
-          :where
-          [?e :user/hash ?hash]]
-        (db/db) qr-hash))
-
-(defn GET-qr-html [req]
-  {:html/body [:div
-               {:style {:margin "var(--size-4)"}}
-               [:h2 "Add Contact"]
-               [:img {:src (url-for :contact/qr-png)}]]
-   :html/layout false})
-
-(defn GET-qr-code
-  [{:keys [identity] :as req}]
-  (let [user-eid (:db/id identity)
-        host (config/value :compass/origin)
-        qr-hash (str (eid->qr-hash user-eid))
-        url (str host (url-for :contact/add {:qr-hash qr-hash}))
-        qr-image (qr/as-bytes (qr/from url :size [400 400]))]
-    (-> (ring-response/response qr-image)
-        (assoc-in [:headers "content-type"] "image/png"))))
-
-(defn GET-attendees [req]
-  (let [attendees (q/all-users)]
-    {:html/body
-     [:<>
-      [:p "The Attendees List"]
-      (for [atd (attendees/user-list attendees)]
-        (h/attendee-card atd))]}))
-
-(defn GET-contact
-  [req]
-  {:html/body
-   [:div
-    [:a
-     {:href (url-for :profile/index)
-      :style {:display "none"}
-      :hx-trigger "contact-added from:body"}]
-    [:button
-     {:hx-post (url-for :contact/add {:qr-hash (get-in req [:path-params :qr-hash])})}
-     (str "Accept invite")]]})
-
-(defn DELETE-contact
-  [req]
-  (let [me-id (:db/id (:identity req))
-        contact-id (parse-long (get-in req [:path-params :id]))]
-    @(db/transact [[:db/retract me-id :user/contacts contact-id]
-                   [:db/retract contact-id :user/contacts me-id]])
-    {:location :contacts/index
-     :hx/trigger "contact-deleted"}))
-
-(defn POST-contact
-  "Part of the url is hash of the contact's user eid
-   Decode it and add that contact"
-  [{:keys [identity] :as req}]
-  (let [user-eid (:db/id identity)
-        qr-hash (parse-uuid (get-in req [:path-params :qr-hash]))
-        contact-eid (qr-hash->eid qr-hash)
-        ;; According to the schema
-        ;; A :u/c B means that user A agrees to show their public profile to user B.
-        ;; contact -> A
-        ;; user -> B
-        _ @(db/transact [{:db/id contact-eid
-                          :user/contacts user-eid}
-                         {:db/id user-eid
-                          :user/contacts contact-eid}])]
-    {:location :contact/add
-     :hx/trigger "contact-added"}))
-
 (defn routes []
   [["/profile"
     [""
@@ -239,25 +149,4 @@
    ["/uploads/:filename"
     {:middleware [[response/wrap-requires-auth]]
      :get        {:handler file-handler}}]
-   ["/contact"
-    {:middleware [[response/wrap-requires-auth]]}
-    ["/qr" {:name :contact/qr
-            :get {:handler GET-qr-html}}]
-    ["/qr.png" {:name :contact/qr-png
-                :get {:handler GET-qr-code}}]
-    ["/:qr-hash"
-     {:name :contact/add
-      :post       {:handler POST-contact}
-      :get        {:handler GET-contact}}]
-    ["/link/:id"
-     {:name :contact/link
-      :delete     {:handler DELETE-contact}}]]
-   ["/contacts"
-    {:middleware [[response/wrap-requires-auth]]}
-    ["/" {:name :contacts/index
-          :get {:handler GET-contact-list}}]]
-   ["/attendees"
-    [""
-     {:name :attendees/index
-      :middleware [[response/wrap-requires-auth]]
-      :get        {:handler GET-attendees}}]]])
+   ])

From 23dbec93f20fc7d0e0d05d5b00c2ce498754388d Mon Sep 17 00:00:00 2001
From: Arne Brasseur <arne@arnebrasseur.net>
Date: Mon, 9 Sep 2024 10:40:46 +0200
Subject: [PATCH 09/10] Clean up contact page

---
 resources/public/css/styles.css         | 44 +++++++++++++++++++------
 src/co/gaiwan/compass/css/styles.clj    | 10 +++---
 src/co/gaiwan/compass/html/contacts.clj | 40 +++++++++++++---------
 src/co/gaiwan/compass/html/graphics.clj | 14 ++++++++
 4 files changed, 78 insertions(+), 30 deletions(-)

diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
index f094d74..7698fff 100644
--- a/resources/public/css/styles.css
+++ b/resources/public/css/styles.css
@@ -106,6 +106,7 @@ body {
 }
 
 h5, h4, h2, h1, h3 {
+  color: var(--text-1);
   max-inline-size: inherit;
 }
 
@@ -149,24 +150,24 @@ body {
   margin-top: var(--size-1);
 }
 
-ul {
+.site-copy ul {
   padding-top: var(--size-2);
   padding-bottom: var(--size-2);
 }
 
-ul li {
+.site-copy ul li {
   padding-top: var(--size-1);
   padding-bottom: var(--size-1);
   list-style-type: disc;
   list-style-position: inside;
 }
 
-ol {
+.site-copy ol {
   padding-top: var(--size-2);
   padding-bottom: var(--size-2);
 }
 
-ol li {
+.site-copy ol li {
   padding-top: var(--size-1);
   padding-bottom: var(--size-1);
   list-style-type: decimal;
@@ -447,9 +448,10 @@ ol li {
   width: 100px;
 }
 
-.contacts-contact_detail .co_gaiwan_compass_html_components__image_frame {
-  width: 100px;
-  --arc-thickness: 7%;
+.contacts-contact_detail .heading {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--size-3);
 }
 
 .contacts-contact_detail .contact-list {
@@ -461,26 +463,48 @@ ol li {
   background-color: var(--surface-3);
 }
 
-.contacts-contact_detail .remove-btn:hover {
+.contacts-contact_detail .remove-btn {
+  font-weight: 600;
+  color: var(--text-1);
+}
+
+.contacts-contact_detail .remove-btn:active, .contacts-contact_detail .remove-btn:hover {
   background-color: var(--surface-4);
 }
 
 .contacts-contact_detail .contact {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  margin-top: var(--size-2);
+  margin-bottom: var(--size-2);
+  padding-top: var(--size-2);
+  padding-bottom: var(--size-2);
+  box-shadow: var(--shadow-2);
+  font-size: var(--size-3);
+  background-color: var(--surface-2);
 }
 
-.contacts-contact_detail .contact div {
+.contacts-contact_detail .contact .details {
+  flex-grow: 1;
   margin-right: var(--size-2);
 }
 
 .contacts-contact_detail .contact .co_gaiwan_compass_html_components__image_frame {
   width: 50px;
   --arc-thickness: 7%;
+  margin-left: var(--size-2);
   margin-right: var(--size-2);
 }
 
+.contacts-contact_detail .profile-name {
+  font-weight: 600;
+}
+
+.contacts-contact_detail .email {
+  font-size: var(--size-3);
+  color: var(--text-2);
+}
+
 .filters-filter_section {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/co/gaiwan/compass/css/styles.clj b/src/co/gaiwan/compass/css/styles.clj
index 307cda3..3a6b60a 100644
--- a/src/co/gaiwan/compass/css/styles.clj
+++ b/src/co/gaiwan/compass/css/styles.clj
@@ -9,7 +9,9 @@
    [:p {:max-inline-size "inherit"}]
    [#{:ul :ol} :list-none :m-0 :p-0]
    [:body :overflow-x-hidden :w-screen]
-   [#{:h1 :h2 :h3 :h4 :h5} {:max-inline-size "inherit"}]
+   [#{:h1 :h2 :h3 :h4 :h5}
+    {:color t/--text-1
+     :max-inline-size "inherit"}]
 
    ;; override open-props normalize, we like the buttons a bit more rounded
    [#{:button :.btn} {:border-radius t/--radius-2}]
@@ -29,8 +31,8 @@
           :margin-bottom t/--size-2}]
     [:h4 {:margin-top t/--size-2
           :margin-bottom t/--size-1}]
-    [:h5 {:margin-top t/--size-1}]]
+    [:h5 {:margin-top t/--size-1}]
 
-   [:ul :py-2 [:li :py-1 :list-disc :list-inside]]
-   [:ol :py-2 [:li :py-1 :list-decimal :list-inside]]
+    [:ul :py-2 [:li :py-1 :list-disc :list-inside]]
+    [:ol :py-2 [:li :py-1 :list-decimal :list-inside]]]
    ])
diff --git a/src/co/gaiwan/compass/html/contacts.clj b/src/co/gaiwan/compass/html/contacts.clj
index 12a7086..b4859ac 100644
--- a/src/co/gaiwan/compass/html/contacts.clj
+++ b/src/co/gaiwan/compass/html/contacts.clj
@@ -31,34 +31,42 @@
        [:textarea (m/md->hiccup bio)])]]))
 
 (o/defstyled contact-detail :div
-  [c/image-frame :w-100px {--arc-thickness "7%"}]
+  [:.heading :flex :justify-between
+   :mb-3]
   [:.contact-list :w-full :ga-4]
   [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
-  [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
-  [:.contact :flex :items-center :justify-between
-   [:div :mr-2]
-   [c/image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
+  [:.remove-btn
+   :font-semibold
+   {:color t/--text-1}
+   [#{:&:hover :&:active}
+    {:background-color t/--surface-4}]]
+  [:.contact :flex :items-center :my-2 :py-2
+   :shadow-2 :font-size-3
+   {:background-color t/--surface-2}
+   [:.details :flex-grow :mr-2]
+   [c/image-frame :w-50px {--arc-thickness "7%"} :mx-2]]
+  [:.profile-name :font-semibold]
+  [:.email :font-size-3 {:color t/--text-2}]
+
   ([{:public-profile/keys [name]
      :user/keys [uuid] :as user}]
    [:<>
-    [:div [c/image-frame {:profile/image (user/avatar-css-value user)}]]
-    [:div.details
-     [:h3.title name]]
-    [:button {:hx-target "#modal"
-              :hx-get (url-for :contact/qr)}
-     "Add Contact"]
+    [:div.heading
+     [:h2 "Your Contacts"]
+     [:button {:hx-target "#modal"
+               :hx-get (url-for :contact/qr)}
+      [graphics/scan-icon] "Add Contact"]]
     [:div
      [:a
       {:href (url-for :contacts/index)
        :style {:display "none"}
        :hx-trigger "contact-deleted from:body"}]
-     [:h3 "Contacts"]
      [:div.contact-list
       (for [c (:user/contacts user)]
         [:div.contact
          [c/image-frame {:profile/image (user/avatar-css-value c)}]
-         [:div
-          [:div (:public-profile/name c)]
-          [:div (:discord/email c)]]
+         [:div.details
+          [:div.profile-name (:public-profile/name c)]
+          [:div.email (:discord/email c)]]
          [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
-          [graphics/person-remove] "Remove Contact"]])]]]))
+          [graphics/person-remove] "Remove"]])]]]))
diff --git a/src/co/gaiwan/compass/html/graphics.clj b/src/co/gaiwan/compass/html/graphics.clj
index 68ab403..6644037 100644
--- a/src/co/gaiwan/compass/html/graphics.clj
+++ b/src/co/gaiwan/compass/html/graphics.clj
@@ -66,3 +66,17 @@
   (garden.stylesheet/at-keyframes
    :dash
    [:to {:stroke-dashoffset 0}]))
+
+(o/defstyled scan-icon :svg
+  ([]
+   [:<> {:viewbox "0 0 1040 1024"}
+    [:path
+     {:d "M331.312778 27.631314l0-0.002047L200.124923 27.629267c-93.889367 0-170.006975 76.115562-170.006975 170.006975l0 131.107013c0 0.024559 0 0.053212 0 0.080841 0 33.271778 26.970258 60.239989 60.238966 60.239989 33.269731 0 60.239989-26.968212 60.239989-60.239989l0-0.002047 0 0L150.596903 211.858152c0-35.208896 28.54308-63.751976 63.752999-63.751976l116.879987 0c0.024559 0 0.053212 0.002047 0.080841 0.002047 33.268708 0 60.239989-26.968212 60.239989-60.238966C391.549697 54.601572 364.579439 27.631314 331.312778 27.631314z"}]
+    [:path
+     {:d "M993.938334 690.254823c0-33.267685-26.969235-60.236919-60.238966-60.236919s-60.238966 26.969235-60.238966 60.236919l0 0.002047 0 0 0 116.962875c0 35.20992-28.544103 63.752999-63.754023 63.752999L692.743504 870.972744c-33.268708 0-60.241013 26.970258-60.241013 60.237943 0 33.270754 26.972305 60.238966 60.241013 60.238966 0.026606 0 0.054235-0.002047 0.082888-0.002047l131.104967 0c93.892437 0 170.006975-76.116585 170.006975-170.007999L993.938334 690.25687l0 0L993.938334 690.254823z"}]
+    [:path
+     {:d "M331.312778 870.972744 214.349903 870.972744c-35.20992 0-63.752999-28.54308-63.752999-63.752999L150.596903 690.25687l0 0 0-0.002047c0-33.267685-26.970258-60.236919-60.239989-60.236919-33.268708 0-60.238966 26.969235-60.238966 60.236919 0 0.026606 0 0.056282 0 0.080841l0 131.103944c0 93.891414 76.117608 170.007999 170.006975 170.007999l131.104967 0c0.028653 0 0.056282 0.002047 0.082888 0.002047 33.269731 0 60.239989-26.968212 60.239989-60.238966C391.551744 897.943003 364.581486 870.972744 331.312778 870.972744z"}]
+    [:path
+     {:d "M823.931359 27.629267l-131.187855 0 0 0.002047c-33.268708 0-60.241013 26.970258-60.241013 60.237943 0 33.270754 26.972305 60.238966 60.241013 60.238966 0.026606 0 0.054235-0.002047 0.082888-0.002047l116.879987 0c35.20992 0 63.754023 28.54308 63.754023 63.751976l0 116.966968 0 0c0 33.271778 26.969235 60.237943 60.238966 60.237943s60.238966-26.966165 60.238966-60.237943l0 0L993.938334 197.636243C993.938334 103.744829 917.823795 27.629267 823.931359 27.629267z"}]
+    [:path
+     {:d "M963.820386 449.299983c-0.026606 0-0.056282 0.002047-0.080841 0.002047L60.321854 449.302029c-0.028653 0-0.056282-0.002047-0.082888-0.002047-33.270754 0-60.238966 26.970258-60.238966 60.241013 0 33.266661 26.968212 60.237943 60.238966 60.237943l903.579373 0 0 0 0.002047 0c33.267685 0 60.234873-26.970258 60.234873-60.237943C1024.055259 476.270241 997.087047 449.299983 963.820386 449.299983z"}]]))

From a7faf88716d3876ae71060c225dad657cbe66d2f Mon Sep 17 00:00:00 2001
From: Arne Brasseur <arne@arnebrasseur.net>
Date: Mon, 9 Sep 2024 11:09:41 +0200
Subject: [PATCH 10/10] Comment out ticket/published form controls

---
 src/co/gaiwan/compass/html/sessions.clj | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/co/gaiwan/compass/html/sessions.clj b/src/co/gaiwan/compass/html/sessions.clj
index 11ebc23..9596cd5 100644
--- a/src/co/gaiwan/compass/html/sessions.clj
+++ b/src/co/gaiwan/compass/html/sessions.clj
@@ -415,11 +415,13 @@
       (when session
         (:session/description session))]
 
+     #_
      [:label {:for "ticket"}
       [:input {:id "ticket" :name "ticket-required?" :type "checkbox"
                :checked (:session/ticket-required? session)}]
       "Requires Ticket?"]
 
+     #_
      [:label {:for "published"}
       [:input {:id "published" :name "published?" :type "checkbox"
                :checked (:session/published? session)}]