Revoke feature

repl-sessions/revoke.clj

@@ -0,0 +1,51 @@
+(ns repl-sessions.revoke
+  "Prepare some testing data for revoke contacts feature
+
+   How to use:
+   1. You first login by Discord
+   2. Run this revoke namespace to create another 10 temp users
+   3. Go to the /profile page to do the revoke testing
+  "
+  (:require
+   [co.gaiwan.compass.db :as db]
+   [co.gaiwan.compass.model.assets :as assets]
+   [datomic.api :as d]))
+
+(defn test-user-eid
+  "Query the database to find out a certain login by discord user"
+  [user-name]
+  (db/q
+   '[:find ?e .
+     :in $ ?u
+     :where
+     [?e :public-profile/name ?u]]
+   (db/db) user-name))
+
+;; Avatar source URL https://github.com/alohe/avatars
+(defn temp-user-tx
+  " Create the user txes
+
+    1. Download some testing avatar image from remote URL
+    2. Create 10 testing users with temp name adn temp avatar
+    3. Build contacts relationship with user: `eid`"
+  [eid]
+  (let [avatar-url-part "https://cdn.jsdelivr.net/gh/alohe/avatars/png/vibrent_"]
+    (concat
+     (mapv
+      (fn [x]
+        {:db/id (str "temp-" x)
+         :user/contacts eid
+         :public-profile/name (str "temp-user-" x)
+         :public-profile/avatar-url (assets/download-image (str avatar-url-part x ".png"))})
+      (range 1 11))
+     (mapv
+      (fn [x]
+        {:db/id eid
+         :user/contacts (str "temp-" x)})
+      (range 1 11)))))
+
+(def tx (temp-user-tx
+         (test-user-eid "Laurence")))
+
+(db/transact tx)
+

src/co/gaiwan/compass/html/graphics.clj

@@ -14,7 +14,6 @@
     [:path.triangle {:d "m 27.014067,26.404815 14.950042,-8.631421 -0.0025,-0.0028 -11.790743,-3.159345 -3.159301,11.790767 z"}]
     [:path.leg {:d "M 39.334691,86.310778 C 37.137742,85.592591 35.93936,83.229026 36.658422,81.032361 l 9.585531,-31.540687 5.276789,-2.675454 2.675453,5.276791 -9.584714,31.542313 c -1.000278,2.14767 -3.166747,3.329559 -5.27679,2.675454 z"}]]))
 
-
 (o/defstyled hamburger :svg
   {:stroke-width "13%"
    :stroke-linecap "round"
@@ -24,6 +23,16 @@
     (for [x [1 7.5 14]]
       [:path {:d (str "M 2," x " H 18")}])]))
 
+(o/defstyled person-remove :svg
+  {:--_remove-color "#ff4d4d"}
+  [:path {:fill "var(--_remove-color)"}]
+  ([]
+   [:<> {:viewBox "0 0 24 24"}
+    [:rect {:fill "none", :height "24", :width "24"}]
+    [:path
+     {:d
+      "M14,8c0-2.21-1.79-4-4-4S6,5.79,6,8s1.79,4,4,4S14,10.21,14,8z M17,10v2h6v-2H17z M2,18v2h16v-2c0-2.66-5.33-4-8-4 S2,15.34,2,18z"}]]))
+
 (o/defstyled cross :svg
   {:stroke-width "13%"
    :stroke-linecap "round"

src/co/gaiwan/compass/html/profiles.clj

@@ -2,6 +2,7 @@
   "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.http.routing :refer [url-for]]
@@ -57,10 +58,15 @@
 
 (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}]
    [:<>
-    [image-frame {:profile/image (user/avatar-css-value user)}]
+    [:div [image-frame {:profile/image (user/avatar-css-value user)}]]
     [:div.details
      [:h3.title name]]
     (if hidden?
@@ -71,14 +77,17 @@
        [:label "Another Name:"]
        [:label (:private-profile/name user)]])
     [:div
-     [:label "Contacts"]
-     [:ul
+     [:h3 "Contacts"]
+     [:div.contact-list
       (for [c (:user/contacts user)]
-        [:li (:public-profile/name c)])]]
+        [:div.contact
+         [image-frame {:profile/image (user/avatar-css-value c)}]
+         [:button.remove-btn [graphics/person-remove]]])]]
 
     #_[:div (pr-str user)]
-    [:div.actions
-     [edit-profile-btn user]]]))
+    ;; Disable Edit Profile before we can show profile details pretty
+    #_[:div.actions
+       [edit-profile-btn user]]]))
 
 (o/defstyled private-name :div
   ([user {:keys [private-name-switch] :as params}]
@@ -123,6 +132,7 @@
     [row link params]]))
 
 (o/defstyled profile-form :div#form
+  [image-frame :w-100px {--arc-thickness "7%"}]
   [#{:label :input} :block]
   [:label
    :mb-1 :mt-2