feat: show contact details modal on click

src/_locales/en-US/messages.json

@@ -118,6 +118,27 @@
     "popup.input.title": {
         "message": "Please enter a (sub)category"
     },
+    "popup.detail.nickname": {
+        "message": "Nickname"
+    },
+    "popup.detail.timezone": {
+        "message": "Timezone"
+    },
+    "popup.detail.emails": {
+        "message": "Emails"
+    },
+    "popup.detail.websites": {
+        "message": "Websites"
+    },
+    "popup.detail.addresses": {
+        "message": "Addresses"
+    },
+    "popup.detail.phone-numbers": {
+        "message": "Phone Numbers"
+    },
+    "popup.detail.notes": {
+        "message": "Notes"
+    },
     "tree.category.all": {
         "message": "All contacts"
     },

src/_locales/es-AR/messages.json

@@ -118,6 +118,27 @@
     "popup.input.title": {
         "message": "Please enter a (sub)category"
     },
+    "popup.detail.nickname": {
+        "message": "Nickname"
+    },
+    "popup.detail.timezone": {
+        "message": "Timezone"
+    },
+    "popup.detail.emails": {
+        "message": "Emails"
+    },
+    "popup.detail.websites": {
+        "message": "Websites"
+    },
+    "popup.detail.addresses": {
+        "message": "Addresses"
+    },
+    "popup.detail.phone-numbers": {
+        "message": "Phone Numbers"
+    },
+    "popup.detail.notes": {
+        "message": "Notes"
+    },
     "tree.category.all": {
         "message": "Todos los contactos"
     },

src/_locales/es-ES/messages.json

@@ -118,6 +118,27 @@
     "popup.input.title": {
         "message": "Please enter a (sub)category"
     },
+    "popup.detail.nickname": {
+        "message": "Nickname"
+    },
+    "popup.detail.timezone": {
+        "message": "Timezone"
+    },
+    "popup.detail.emails": {
+        "message": "Emails"
+    },
+    "popup.detail.websites": {
+        "message": "Websites"
+    },
+    "popup.detail.addresses": {
+        "message": "Addresses"
+    },
+    "popup.detail.phone-numbers": {
+        "message": "Phone Numbers"
+    },
+    "popup.detail.notes": {
+        "message": "Notes"
+    },
     "tree.category.all": {
         "message": "Todos los contactos"
     },

src/_locales/fr/messages.json

@@ -118,6 +118,27 @@
     "popup.input.title": {
         "message": "Please enter a (sub)category"
     },
+    "popup.detail.nickname": {
+        "message": "Nickname"
+    },
+    "popup.detail.timezone": {
+        "message": "Timezone"
+    },
+    "popup.detail.emails": {
+        "message": "Emails"
+    },
+    "popup.detail.websites": {
+        "message": "Websites"
+    },
+    "popup.detail.addresses": {
+        "message": "Addresses"
+    },
+    "popup.detail.phone-numbers": {
+        "message": "Phone Numbers"
+    },
+    "popup.detail.notes": {
+        "message": "Notes"
+    },
     "tree.category.all": {
         "message": "Tous les contacts"
     },

src/_locales/nl/messages.json

@@ -118,6 +118,27 @@
     "popup.input.title": {
         "message": "Please enter a (sub)category"
     },
+    "popup.detail.nickname": {
+        "message": "Nickname"
+    },
+    "popup.detail.timezone": {
+        "message": "Timezone"
+    },
+    "popup.detail.emails": {
+        "message": "Emails"
+    },
+    "popup.detail.websites": {
+        "message": "Websites"
+    },
+    "popup.detail.addresses": {
+        "message": "Addresses"
+    },
+    "popup.detail.phone-numbers": {
+        "message": "Phone Numbers"
+    },
+    "popup.detail.notes": {
+        "message": "Notes"
+    },
     "tree.category.all": {
         "message": "Alle contacten"
     },

src/_locales/pt-BR/messages.json

@@ -118,6 +118,27 @@
     "popup.input.title": {
         "message": "Please enter a (sub)category"
     },
+    "popup.detail.nickname": {
+        "message": "Nickname"
+    },
+    "popup.detail.timezone": {
+        "message": "Timezone"
+    },
+    "popup.detail.emails": {
+        "message": "Emails"
+    },
+    "popup.detail.websites": {
+        "message": "Websites"
+    },
+    "popup.detail.addresses": {
+        "message": "Addresses"
+    },
+    "popup.detail.phone-numbers": {
+        "message": "Phone Numbers"
+    },
+    "popup.detail.notes": {
+        "message": "Notes"
+    },
     "tree.category.all": {
         "message": "Todos os contatos"
     },

src/_locales/ru/messages.json

@@ -118,6 +118,27 @@
     "popup.input.title": {
         "message": "Please enter a (sub)category"
     },
+    "popup.detail.nickname": {
+        "message": "Nickname"
+    },
+    "popup.detail.timezone": {
+        "message": "Timezone"
+    },
+    "popup.detail.emails": {
+        "message": "Emails"
+    },
+    "popup.detail.websites": {
+        "message": "Websites"
+    },
+    "popup.detail.addresses": {
+        "message": "Addresses"
+    },
+    "popup.detail.phone-numbers": {
+        "message": "Phone Numbers"
+    },
+    "popup.detail.notes": {
+        "message": "Notes"
+    },
     "tree.category.all": {
         "message": "Все контакты"
     },

src/_locales/zh-CN/messages.json

@@ -27,16 +27,16 @@
     "message": "正在更新..."
   },
   "manifest_action_title": {
-    "message": "Categories"
+    "message": "类别管理器"
   },
   "manifest_description": {
     "message": "联系人类别管理器。你可以一次向整个类别的联系人发送邮件（基于类别的联系人群组）。"
   },
   "menu.category.add_members_to_current_message": {
-    "message": "Add category members to ..."
+    "message": "添加类别成员到 ..."
   },
   "menu.category.add_members_to_new_message": {
-    "message": "Compose new message with category members in ..."
+    "message": "编辑新消息并将此类别成员添加到 ..."
   },
   "menu.category.add_to_bcc": {
     "message": "Bcc"
@@ -51,7 +51,7 @@
     "message": "删除此类别"
   },
   "menu.category.rename": {
-      "message": "Rename or move this category"
+    "message": "重命名或移动此类别"
   },
   "menu.contact.context.add_to_category": {
     "message": "添加到 '$CATEGORY$'",
@@ -118,6 +118,27 @@
   "popup.input.title": {
     "message": "请输入(子)类别"
   },
+  "popup.detail.nickname": {
+    "message": "昵称"
+  },
+  "popup.detail.timezone": {
+    "message": "时区"
+  },
+  "popup.detail.emails": {
+    "message": "电子邮箱"
+  },
+  "popup.detail.websites": {
+    "message": "网站"
+  },
+  "popup.detail.addresses": {
+    "message": "地址"
+  },
+  "popup.detail.phone-numbers": {
+    "message": "电话号码"
+  },
+  "popup.detail.notes": {
+    "message": "备注"
+  },
   "tree.category.none": {
     "message": "未分类"
   },

src/popup/contact-list.mjs

@@ -3,6 +3,7 @@ import {
   escapeHtmlContent,
   escapeHtmlAttr,
 } from "../modules/ui/ui.mjs";
+import { showDetailModal } from "./modal.mjs";
 
 export function createContactList(data) {
   let component = new Component({
@@ -34,7 +35,7 @@ export function createContactList(data) {
               </p>
             </li>`
           );
-        })
+        });
       }
       return `<ul> ${html.join("\n")} </ul>`;
     },
@@ -50,5 +51,15 @@ export function createContactList(data) {
       e.target.dataset.addressbook + "\n" + e.target.dataset.id
     );
   });
+  component.element.addEventListener("click", (e) => {
+    let target = e.target;
+    if (target.dataset.id == null)
+      // Possibly click on children elements
+      target = target.parentElement;
+    if (target.dataset.id == null)
+      // Not a click on a contact
+      return;
+    showDetailModal(target.dataset.id);
+  });
   return component;
 }

src/popup/modal.css

@@ -49,6 +49,8 @@
   line-height: 1.25;
   color: #00449e;
   box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
 }
 
 .modal__close {
@@ -183,11 +185,69 @@
 
 #modal-error-title {
   color: red;
-  display: inline-flex;
-  align-items: center;
   font-size: 2rem;
 }
 
-#modal-error-title i {
+.modal__title > i {
   margin-right: 1rem;
 }
+
+.details__header-container {
+  display: flex;
+  align-items: center;
+}
+
+.details__photo {
+  width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+  background-size: contain !important;
+  background-color: lightgray;
+  border-radius: 50%;
+  text-align: center;
+  color: orangered;
+  font-weight: bold;
+}
+
+.details__header {
+  margin-left: 1.2rem;
+}
+
+.details__name {
+  font-size: 1.3rem;
+  font-weight: bold;
+}
+
+.details__email {
+  font-size: 1rem;
+}
+
+.details__grid {
+  display: grid;
+  grid-template-columns: auto auto;
+  column-gap: 1rem;
+  align-items: center;
+  overflow: scroll;
+  max-height: 24rem;
+}
+
+.details__grid > div:nth-child(2n + 1) {
+  font-weight: bold;
+  text-align: center;
+}
+
+.details__grid > p {
+  font-weight: normal;
+  margin-block: 0.5rem;
+  word-break: break-all;
+  hyphens: auto;
+}
+
+#modal-details .modal__container {
+  max-height: 80vh;
+  max-width: 80vw;
+}
+
+#modal-details-content {
+  margin-bottom: 0;
+}