the home of serif.blue
feat: add customization
+180
-4
+180
-4
bluesky-community-verifications.user.js
+180
-4
bluesky-community-verifications.user.js
···
23
23
const TRUSTED_USERS_STORAGE_KEY = "bsky_trusted_users";
24
24
const VERIFICATION_CACHE_STORAGE_KEY = "bsky_verification_cache";
25
25
const CACHE_EXPIRY_TIME = 24 * 60 * 60 * 1000; // 24 hours
26
+
const BADGE_TYPE_STORAGE_KEY = "bsky_verification_badge_type";
27
+
const BADGE_COLOR_STORAGE_KEY = "bsky_verification_badge_color";
28
+
29
+
// Default badge configuration
30
+
const DEFAULT_BADGE_TYPE = "checkmark";
31
+
const DEFAULT_BADGE_COLOR = "#0070ff";
32
+
33
+
// Functions to get/set badge configuration
34
+
const getBadgeType = () => {
35
+
return localStorage.getItem(BADGE_TYPE_STORAGE_KEY) || DEFAULT_BADGE_TYPE;
36
+
};
37
+
38
+
const getBadgeColor = () => {
39
+
return localStorage.getItem(BADGE_COLOR_STORAGE_KEY) || DEFAULT_BADGE_COLOR;
40
+
};
41
+
42
+
const saveBadgeType = (type) => {
43
+
localStorage.setItem(BADGE_TYPE_STORAGE_KEY, type);
44
+
};
45
+
46
+
const saveBadgeColor = (color) => {
47
+
localStorage.setItem(BADGE_COLOR_STORAGE_KEY, color);
48
+
};
49
+
50
+
const getBadgeContent = (type) => {
51
+
switch (type) {
52
+
case "checkmark":
53
+
return "✓";
54
+
case "star":
55
+
return "★";
56
+
case "heart":
57
+
return "♥";
58
+
case "shield":
59
+
return "🛡️";
60
+
case "lock":
61
+
return "🔒";
62
+
case "verified":
63
+
return `<svg viewBox="0 0 24 24" width="16" height="16">
64
+
<path fill="white" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
65
+
</svg>`;
66
+
default:
67
+
return "✓";
68
+
}
69
+
};
26
70
27
71
// Function to get trusted users from local storage
28
72
const getTrustedUsers = () => {
···
225
269
226
270
const badge = document.createElement("span");
227
271
badge.id = "user-trusted-verification-badge";
228
-
badge.innerHTML = "✓";
272
+
273
+
// Get user badge preferences
274
+
const badgeType = getBadgeType();
275
+
const badgeColor = getBadgeColor();
276
+
277
+
// Set badge content based on type
278
+
badge.innerHTML = getBadgeContent(badgeType);
229
279
230
280
// Create tooltip text with all verifiers
231
281
const verifiersText =
···
235
285
236
286
badge.title = verifiersText;
237
287
badge.style.cssText = `
238
-
background-color: #0070ff;
288
+
background-color: ${badgeColor};
239
289
color: white;
240
290
border-radius: 50%;
241
291
width: 18px;
···
717
767
const modalHeader = document.createElement("div");
718
768
modalHeader.innerHTML = `<h2 style="margin-top: 0;">Trusted Bluesky Users</h2>`;
719
769
770
+
const badgeCustomization = document.createElement("div");
771
+
badgeCustomization.style.cssText = `
772
+
margin-top: 15px;
773
+
padding-top: 15px;
774
+
border-top: 1px solid #eee;
775
+
`;
776
+
777
+
badgeCustomization.innerHTML = `
778
+
<h3 style="margin-top: 0; color: white;">Badge Customization</h3>
779
+
780
+
<div style="margin-bottom: 15px;">
781
+
<p style="margin-bottom: 8px; color: white;">Badge Type:</p>
782
+
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
783
+
<label style="display: flex; align-items: center; cursor: pointer; color: white;">
784
+
<input type="radio" name="badgeType" value="checkmark" ${getBadgeType() === "checkmark" ? "checked" : ""}>
785
+
<span style="margin-left: 5px;">Checkmark (✓)</span>
786
+
</label>
787
+
<label style="display: flex; align-items: center; cursor: pointer; color: white;">
788
+
<input type="radio" name="badgeType" value="star" ${getBadgeType() === "star" ? "checked" : ""}>
789
+
<span style="margin-left: 5px;">Star (★)</span>
790
+
</label>
791
+
<label style="display: flex; align-items: center; cursor: pointer; color: white;">
792
+
<input type="radio" name="badgeType" value="heart" ${getBadgeType() === "heart" ? "checked" : ""}>
793
+
<span style="margin-left: 5px;">Heart (♥)</span>
794
+
</label>
795
+
<label style="display: flex; align-items: center; cursor: pointer; color: white;">
796
+
<input type="radio" name="badgeType" value="shield" ${getBadgeType() === "shield" ? "checked" : ""}>
797
+
<span style="margin-left: 5px;">Shield (🛡️)</span>
798
+
</label>
799
+
<label style="display: flex; align-items: center; cursor: pointer; color: white;">
800
+
<input type="radio" name="badgeType" value="lock" ${getBadgeType() === "lock" ? "checked" : ""}>
801
+
<span style="margin-left: 5px;">Lock (🔒)</span>
802
+
</label>
803
+
<label style="display: flex; align-items: center; cursor: pointer; color: white;">
804
+
<input type="radio" name="badgeType" value="verified" ${getBadgeType() === "verified" ? "checked" : ""}>
805
+
<span style="margin-left: 5px;">Verified</span>
806
+
</label>
807
+
</div>
808
+
</div>
809
+
810
+
<div>
811
+
<p style="margin-bottom: 8px; color: white;">Badge Color:</p>
812
+
<div style="display: flex; align-items: center;">
813
+
<input type="color" id="badgeColorPicker" value="${getBadgeColor()}" style="margin-right: 10px;">
814
+
<span id="badgeColorPreview" style="display: inline-block; width: 24px; height: 24px; background-color: ${getBadgeColor()}; border-radius: 50%; margin-right: 10px;"></span>
815
+
<button id="resetBadgeColor" style="padding: 5px 10px; background: #473A3A; color: white; border: none; border-radius: 4px; cursor: pointer;">Reset to Default</button>
816
+
</div>
817
+
</div>
818
+
819
+
<div style="margin-top: 20px;">
820
+
<p style="color: white;">Preview:</p>
821
+
<div style="display: flex; align-items: center; margin-top: 8px;">
822
+
<span style="color: white; font-weight: bold;">User Name</span>
823
+
<span id="badgePreview" style="
824
+
background-color: ${getBadgeColor()};
825
+
color: white;
826
+
border-radius: 50%;
827
+
width: 18px;
828
+
height: 18px;
829
+
margin-left: 8px;
830
+
font-size: 12px;
831
+
font-weight: bold;
832
+
display: inline-flex;
833
+
align-items: center;
834
+
justify-content: center;
835
+
">${getBadgeContent(getBadgeType())}</span>
836
+
</div>
837
+
</div>
838
+
`;
839
+
840
+
// Add the badge customization section to the modal content
841
+
modalContent.appendChild(badgeCustomization);
842
+
843
+
// Add event listeners for the badge customization controls
844
+
setTimeout(() => {
845
+
// Badge type selection
846
+
const badgeTypeRadios = document.querySelectorAll(
847
+
'input[name="badgeType"]',
848
+
);
849
+
for (const radio of badgeTypeRadios) {
850
+
radio.addEventListener("change", (e) => {
851
+
const selectedType = e.target.value;
852
+
saveBadgeType(selectedType);
853
+
updateBadgePreview();
854
+
});
855
+
}
856
+
857
+
// Badge color picker
858
+
const colorPicker = document.getElementById("badgeColorPicker");
859
+
const colorPreview = document.getElementById("badgeColorPreview");
860
+
861
+
colorPicker.addEventListener("input", (e) => {
862
+
const selectedColor = e.target.value;
863
+
colorPreview.style.backgroundColor = selectedColor;
864
+
saveBadgeColor(selectedColor);
865
+
updateBadgePreview();
866
+
});
867
+
868
+
// Reset color button
869
+
const resetColorBtn = document.getElementById("resetBadgeColor");
870
+
resetColorBtn.addEventListener("click", () => {
871
+
colorPicker.value = DEFAULT_BADGE_COLOR;
872
+
colorPreview.style.backgroundColor = DEFAULT_BADGE_COLOR;
873
+
saveBadgeColor(DEFAULT_BADGE_COLOR);
874
+
updateBadgePreview();
875
+
});
876
+
877
+
// Function to update the badge preview
878
+
function updateBadgePreview() {
879
+
const badgePreview = document.getElementById("badgePreview");
880
+
const selectedType = getBadgeType();
881
+
const selectedColor = getBadgeColor();
882
+
883
+
badgePreview.innerHTML = getBadgeContent(selectedType);
884
+
badgePreview.style.backgroundColor = selectedColor;
885
+
}
886
+
887
+
// Initialize preview
888
+
updateBadgePreview();
889
+
}, 100);
890
+
720
891
// Create input form
721
892
const form = document.createElement("div");
722
893
form.innerHTML = `
···
1012
1183
// Create a badge element
1013
1184
const smallBadge = document.createElement("span");
1014
1185
smallBadge.className = "trusted-user-inline-badge";
1015
-
smallBadge.innerHTML = "✓";
1186
+
1187
+
// Get user badge preferences
1188
+
const badgeType = getBadgeType();
1189
+
const badgeColor = getBadgeColor();
1190
+
1191
+
smallBadge.innerHTML = getBadgeContent(badgeType);
1016
1192
1017
1193
// Create tooltip text with all verifiers
1018
1194
const verifiersText =
···
1022
1198
1023
1199
smallBadge.title = verifiersText;
1024
1200
smallBadge.style.cssText = `
1025
-
background-color: #0070ff;
1201
+
background-color: ${badgeColor};
1026
1202
color: white;
1027
1203
border-radius: 50%;
1028
1204
width: 14px;