feat(settings): add emoji suppoprt for profile icon

abhishekmishragithub · abhishekmishragithub · commit 35bd41e63ef7 · 2025-04-03T02:24:42.000+05:30
diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
-  "name": "Quick Social Links",
-  "version": "1.0",
-  "description": "Quickly copy your social media profile URLs. Set your links in the options.",
+  "name": "ClipLinks",
+  "version": "1.0.1",
+  "description": "Instantly copy your social media and website links with a single click.",
   "permissions": ["storage"],
   "action": {
     "default_popup": "popup.html",
diff --git a/options.css b/options.css
@@ -280,3 +280,56 @@ h1 {
     padding: 30px 0;
     font-style: italic;
 }
+
+#profile-form .radio-group {
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+
+#profile-form .radio-group label {
+    margin-right: 20px;
+    font-weight: normal;
+    cursor: pointer;
+}
+
+#profile-form .radio-group input[type="radio"] {
+    margin-right: 5px;
+    vertical-align: middle;
+}
+
+#emoji-input-group {
+    margin-top: -5px;
+}
+#emoji-input {
+    max-width: 150px;
+    font-size: 1.2em;
+    text-align: center;
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+
+.profile-emoji-icon {
+    font-size: 1.5em;
+    line-height: 1;
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+}
+
+.profile-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+
+    height: 24px;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+
+.profile-icon img {
+    max-width: 100%;
+    max-height: 100%;
+    display: block;
+    object-fit: contain;
+}
diff --git a/options.html b/options.html
@@ -61,6 +61,49 @@ <h2 id="modal-title">Add Social Profile</h2>
                         </select>
                     </div>
 
+                    <div class="form-group">
+                        <label>Icon Choice</label>
+                        <div class="radio-group">
+                            <label>
+                                <input
+                                    type="radio"
+                                    name="iconChoice"
+                                    value="platform"
+                                    id="iconChoicePlatform"
+                                    checked
+                                />
+                                Use Platform Icon
+                            </label>
+                            <label>
+                                <input
+                                    type="radio"
+                                    name="iconChoice"
+                                    value="emoji"
+                                    id="iconChoiceEmoji"
+                                />
+                                Use Emoji
+                            </label>
+                        </div>
+                    </div>
+
+                    <div
+                        class="form-group"
+                        id="emoji-input-group"
+                        style="display: none"
+                    >
+                        <label for="emoji-input">Emoji</label>
+                        <input
+                            type="text"
+                            id="emoji-input"
+                            placeholder="Enter a single emoji (e.g., 🔗)"
+                            maxlength="2"
+                        />
+                        <small
+                            >Enter one or two characters. Display may
+                            vary.</small
+                        >
+                    </div>
+
                     <div
                         class="form-group"
                         id="custom-platform-group"
diff --git a/options.js b/options.js
@@ -16,6 +16,10 @@ document.addEventListener("DOMContentLoaded", () => {
   const customPlatformNameInput = document.getElementById(
     "custom-platform-name",
   );
+  const iconChoicePlatform = document.getElementById("iconChoicePlatform");
+  const iconChoiceEmoji = document.getElementById("iconChoiceEmoji");
+  const emojiInputGroup = document.getElementById("emoji-input-group");
+  const emojiInput = document.getElementById("emoji-input");
   const usernameInput = document.getElementById("username");
   const urlInput = document.getElementById("url");
   const saveProfileBtn = document.getElementById("save-profile-btn");
@@ -49,7 +53,6 @@ document.addEventListener("DOMContentLoaded", () => {
       urlPrefix: "https://youtube.com/@",
     },
     custom: { name: "Custom", icon: "icons/custom.png", urlPrefix: "" },
-    // TODO: let user choose the icon or emoji for custom fields
   };
 
   function showStatus(message, isError = false, duration = 3000) {
@@ -77,6 +80,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
   function openModal(profile = null) {
     profileForm.reset();
+    iconChoicePlatform.checked = true; // default to platform icon
+    emojiInputGroup.style.display = "none"; // hide emoji input initially
+    emojiInput.required = false;
     customPlatformGroup.style.display = "none";
     profileIdInput.value = "";
 
@@ -91,6 +97,23 @@ document.addEventListener("DOMContentLoaded", () => {
       if (profile.platform === "custom") {
         customPlatformGroup.style.display = "block";
         customPlatformNameInput.value = profile.customPlatformName || "";
+        customPlatformNameInput.required = true;
+      } else {
+        customPlatformGroup.style.display = "none"; // ensure hidden if not custom
+        customPlatformNameInput.required = false;
+      }
+      const iconValue = profile.displayIcon || profile.platform;
+      if (platformDetails[iconValue]) {
+        // it's a platform key, check platform radio
+        iconChoicePlatform.checked = true;
+        emojiInputGroup.style.display = "none";
+        emojiInput.required = false;
+      } else {
+        // assume it's an emoji
+        iconChoiceEmoji.checked = true;
+        emojiInput.value = iconValue;
+        emojiInputGroup.style.display = "block";
+        emojiInput.required = true;
       }
     } else {
       modalTitle.textContent = "Add Social Profile";
@@ -119,43 +142,61 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   }
 
+  function createIconElement(profile) {
+    const iconValue = profile.displayIcon || profile.platform;
+
+    if (platformDetails[iconValue]) {
+      const iconPath = getIconPath(iconValue, profile.customPlatformName);
+      const platformName = getPlatformDisplayName(
+        iconValue,
+        profile.customPlatformName,
+      );
+      const img = document.createElement("img");
+      img.src = iconPath;
+      img.alt = platformName;
+      // note: icon size is set by CSS .profile-icon
+      return img;
+    } else {
+      const span = document.createElement("span");
+      span.classList.add("profile-emoji-icon");
+      span.textContent = iconValue;
+      span.setAttribute("aria-label", "Emoji icon");
+      return span;
+    }
+  }
+
   // profile section
   function renderProfileItem(profile) {
     const div = document.createElement("div");
     div.classList.add("profile-item");
     div.dataset.id = profile.id;
 
-    const iconPath = getIconPath(profile.platform, profile.customPlatformName);
+    const iconContainer = document.createElement("div");
+    iconContainer.classList.add("profile-icon");
+    const iconElement = createIconElement(profile);
+    iconContainer.appendChild(iconElement);
+
     const platformDisplayName = getPlatformDisplayName(
       profile.platform,
       profile.customPlatformName,
     );
 
     div.innerHTML = `
-            <div class="profile-icon">
-                <img src="${iconPath}" alt="${platformDisplayName}">
-                <!-- Or use: <span class="icon-placeholder">L</span> -->
-            </div>
-            <div class="profile-info">
-                <span class="platform-name">${platformDisplayName}</span>
-                <span class="username">${profile.username}</span>
-            </div>
-            <div class="profile-actions">
-                <button class="action-icon copy-btn" title="Copy URL">
-                      <img src="icons/copy.png" alt="Delete" width="16" height="16">
-                </button>
-                <button class="action-icon edit-btn" title="Edit Profile">
-                      <img src="icons/edit.png" alt="Delete" width="16" height="16">
-                </button>
-                <button class="action-icon delete-btn" title="Delete Profile">
-                      <img src="icons/delete.png" alt="Delete" width="16" height="16">
-                </button>
-            </div>
-        `;
-
-    // event listener for actions
+          <div class="profile-info">
+              <span class="platform-name">${platformDisplayName}</span>
+              <span class="username">${profile.username}</span>
+          </div>
+          <div class="profile-actions">
+              <button class="action-icon copy-btn" title="Copy URL"><img src="icons/copy.png" alt="Copy" width="16" height="16"></button>
+              <button class="action-icon edit-btn" title="Edit Profile"><img src="icons/edit.png" alt="Edit" width="16" height="16"></button>
+              <button class="action-icon delete-btn" title="Delete Profile"><img src="icons/delete.png" alt="Delete" width="16" height="16"></button>
+          </div>
+      `;
+
+    div.prepend(iconContainer);
+
     div.querySelector(".copy-btn").addEventListener("click", (e) => {
-      e.stopPropagation(); // prevent triggering other listeners if nested
+      e.stopPropagation();
       navigator.clipboard
         .writeText(profile.url)
         .then(() => {
@@ -297,10 +338,51 @@ document.addEventListener("DOMContentLoaded", () => {
   // update URL prefix when platform changes
   platformSelect.addEventListener("change", handlePlatformChange);
 
-  // handle form (add or edit)
+  iconChoicePlatform.addEventListener("change", () => {
+    if (iconChoicePlatform.checked) {
+      emojiInputGroup.style.display = "none";
+      emojiInput.required = false;
+    }
+  });
+  iconChoiceEmoji.addEventListener("change", () => {
+    if (iconChoiceEmoji.checked) {
+      emojiInputGroup.style.display = "block";
+      emojiInput.required = true;
+      emojiInput.focus();
+    }
+  });
+
   profileForm.addEventListener("submit", async (e) => {
     e.preventDefault();
 
+    let chosenDisplayIcon;
+    if (iconChoicePlatform.checked) {
+      chosenDisplayIcon = platformSelect.value;
+    } else {
+      // emoji radio is checked
+      const emojiValue = emojiInput.value.trim();
+      if (!emojiValue) {
+        showStatus(
+          'Please enter an emoji or select "Use Platform Icon".',
+          true,
+          4000,
+        );
+        emojiInput.focus();
+        return;
+      }
+
+      if (emojiValue.length > 2) {
+        showStatus(
+          "Please enter only one or two characters for the emoji.",
+          true,
+          4000,
+        );
+        emojiInput.focus();
+        return;
+      }
+      chosenDisplayIcon = emojiValue; // use the entered emoji
+    }
+
     const profileData = {
       id: profileIdInput.value || null,
       platform: platformSelect.value,
@@ -310,6 +392,7 @@ document.addEventListener("DOMContentLoaded", () => {
         platformSelect.value === "custom"
           ? customPlatformNameInput.value.trim()
           : null,
+      displayIcon: chosenDisplayIcon,
     };
 
     if (profileData.platform === "custom" && !profileData.customPlatformName) {
diff --git a/popup.css b/popup.css
@@ -156,3 +156,28 @@ body {
     font-size: 0.95em;
     line-height: 1.4;
 }
+
+.profile-emoji-icon {
+    font-size: 1.3em;
+    line-height: 1;
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+}
+
+.profile-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+
+.profile-icon img {
+     max-width: 100%;
+     max-height: 100%;
+     display: block;
+     object-fit: contain;
+}
diff --git a/popup.js b/popup.js
