diff --git a/bluesky-community-verifications.user.js b/bluesky-community-verifications.user.js index 37c09d2..d54e821 100644 --- a/bluesky-community-verifications.user.js +++ b/bluesky-community-verifications.user.js @@ -23,6 +23,50 @@ const TRUSTED_USERS_STORAGE_KEY = "bsky_trusted_users"; const VERIFICATION_CACHE_STORAGE_KEY = "bsky_verification_cache"; const CACHE_EXPIRY_TIME = 24 * 60 * 60 * 1000; // 24 hours + const BADGE_TYPE_STORAGE_KEY = "bsky_verification_badge_type"; + const BADGE_COLOR_STORAGE_KEY = "bsky_verification_badge_color"; + + // Default badge configuration + const DEFAULT_BADGE_TYPE = "checkmark"; + const DEFAULT_BADGE_COLOR = "#0070ff"; + + // Functions to get/set badge configuration + const getBadgeType = () => { + return localStorage.getItem(BADGE_TYPE_STORAGE_KEY) || DEFAULT_BADGE_TYPE; + }; + + const getBadgeColor = () => { + return localStorage.getItem(BADGE_COLOR_STORAGE_KEY) || DEFAULT_BADGE_COLOR; + }; + + const saveBadgeType = (type) => { + localStorage.setItem(BADGE_TYPE_STORAGE_KEY, type); + }; + + const saveBadgeColor = (color) => { + localStorage.setItem(BADGE_COLOR_STORAGE_KEY, color); + }; + + const getBadgeContent = (type) => { + switch (type) { + case "checkmark": + return "✓"; + case "star": + return "★"; + case "heart": + return "♥"; + case "shield": + return "🛡️"; + case "lock": + return "🔒"; + case "verified": + return ` + + `; + default: + return "✓"; + } + }; // Function to get trusted users from local storage const getTrustedUsers = () => { @@ -225,7 +269,13 @@ const badge = document.createElement("span"); badge.id = "user-trusted-verification-badge"; - badge.innerHTML = "✓"; + + // Get user badge preferences + const badgeType = getBadgeType(); + const badgeColor = getBadgeColor(); + + // Set badge content based on type + badge.innerHTML = getBadgeContent(badgeType); // Create tooltip text with all verifiers const verifiersText = @@ -235,7 +285,7 @@ badge.title = verifiersText; badge.style.cssText = ` - background-color: #0070ff; + background-color: ${badgeColor}; color: white; border-radius: 50%; width: 18px; @@ -717,6 +767,127 @@ const modalHeader = document.createElement("div"); modalHeader.innerHTML = `

Trusted Bluesky Users

`; + const badgeCustomization = document.createElement("div"); + badgeCustomization.style.cssText = ` + margin-top: 15px; + padding-top: 15px; + border-top: 1px solid #eee; + `; + + badgeCustomization.innerHTML = ` +

Badge Customization

+ +
+

Badge Type:

+
+ + + + + + +
+
+ +
+

Badge Color:

+
+ + + +
+
+ +
+

Preview:

+
+ User Name + ${getBadgeContent(getBadgeType())} +
+
+ `; + + // Add the badge customization section to the modal content + modalContent.appendChild(badgeCustomization); + + // Add event listeners for the badge customization controls + setTimeout(() => { + // Badge type selection + const badgeTypeRadios = document.querySelectorAll( + 'input[name="badgeType"]', + ); + for (const radio of badgeTypeRadios) { + radio.addEventListener("change", (e) => { + const selectedType = e.target.value; + saveBadgeType(selectedType); + updateBadgePreview(); + }); + } + + // Badge color picker + const colorPicker = document.getElementById("badgeColorPicker"); + const colorPreview = document.getElementById("badgeColorPreview"); + + colorPicker.addEventListener("input", (e) => { + const selectedColor = e.target.value; + colorPreview.style.backgroundColor = selectedColor; + saveBadgeColor(selectedColor); + updateBadgePreview(); + }); + + // Reset color button + const resetColorBtn = document.getElementById("resetBadgeColor"); + resetColorBtn.addEventListener("click", () => { + colorPicker.value = DEFAULT_BADGE_COLOR; + colorPreview.style.backgroundColor = DEFAULT_BADGE_COLOR; + saveBadgeColor(DEFAULT_BADGE_COLOR); + updateBadgePreview(); + }); + + // Function to update the badge preview + function updateBadgePreview() { + const badgePreview = document.getElementById("badgePreview"); + const selectedType = getBadgeType(); + const selectedColor = getBadgeColor(); + + badgePreview.innerHTML = getBadgeContent(selectedType); + badgePreview.style.backgroundColor = selectedColor; + } + + // Initialize preview + updateBadgePreview(); + }, 100); + // Create input form const form = document.createElement("div"); form.innerHTML = ` @@ -1012,7 +1183,12 @@ // Create a badge element const smallBadge = document.createElement("span"); smallBadge.className = "trusted-user-inline-badge"; - smallBadge.innerHTML = "✓"; + + // Get user badge preferences + const badgeType = getBadgeType(); + const badgeColor = getBadgeColor(); + + smallBadge.innerHTML = getBadgeContent(badgeType); // Create tooltip text with all verifiers const verifiersText = @@ -1022,7 +1198,7 @@ smallBadge.title = verifiersText; smallBadge.style.cssText = ` - background-color: #0070ff; + background-color: ${badgeColor}; color: white; border-radius: 50%; width: 14px;