commit bc15042a6b6c1761a438b065138ebdbe377d05bd · dunkirk.sh/serif

+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
       26
       +
         const BADGE_TYPE_STORAGE_KEY = "bsky_verification_badge_type";

     

       27
       27
       +
         const BADGE_COLOR_STORAGE_KEY = "bsky_verification_badge_color";

     

       28
       28
       +
       

     

       29
       29
       +
         // Default badge configuration

     

       30
       30
       +
         const DEFAULT_BADGE_TYPE = "checkmark";

     

       31
       31
       +
         const DEFAULT_BADGE_COLOR = "#0070ff";

     

       32
       32
       +
       

     

       33
       33
       +
         // Functions to get/set badge configuration

     

       34
       34
       +
         const getBadgeType = () => {

     

       35
       35
       +
           return localStorage.getItem(BADGE_TYPE_STORAGE_KEY) || DEFAULT_BADGE_TYPE;

     

       36
       36
       +
         };

     

       37
       37
       +
       

     

       38
       38
       +
         const getBadgeColor = () => {

     

       39
       39
       +
           return localStorage.getItem(BADGE_COLOR_STORAGE_KEY) || DEFAULT_BADGE_COLOR;

     

       40
       40
       +
         };

     

       41
       41
       +
       

     

       42
       42
       +
         const saveBadgeType = (type) => {

     

       43
       43
       +
           localStorage.setItem(BADGE_TYPE_STORAGE_KEY, type);

     

       44
       44
       +
         };

     

       45
       45
       +
       

     

       46
       46
       +
         const saveBadgeColor = (color) => {

     

       47
       47
       +
           localStorage.setItem(BADGE_COLOR_STORAGE_KEY, color);

     

       48
       48
       +
         };

     

       49
       49
       +
       

     

       50
       50
       +
         const getBadgeContent = (type) => {

     

       51
       51
       +
           switch (type) {

     

       52
       52
       +
             case "checkmark":

     

       53
       53
       +
               return "✓";

     

       54
       54
       +
             case "star":

     

       55
       55
       +
               return "★";

     

       56
       56
       +
             case "heart":

     

       57
       57
       +
               return "♥";

     

       58
       58
       +
             case "shield":

     

       59
       59
       +
               return "🛡️";

     

       60
       60
       +
             case "lock":

     

       61
       61
       +
               return "🔒";

     

       62
       62
       +
             case "verified":

     

       63
       63
       +
               return `<svg viewBox="0 0 24 24" width="16" height="16">

     

       64
       64
       +
                         <path fill="white" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>

     

       65
       65
       +
                       </svg>`;

     

       66
       66
       +
             default:

     

       67
       67
       +
               return "✓";

     

       68
       68
       +
           }

     

       69
       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
       228
       -
             badge.innerHTML = "✓";

     

       272
       272
       +
       

     

       273
       273
       +
             // Get user badge preferences

     

       274
       274
       +
             const badgeType = getBadgeType();

     

       275
       275
       +
             const badgeColor = getBadgeColor();

     

       276
       276
       +
       

     

       277
       277
       +
             // Set badge content based on type

     

       278
       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
       238
       -
               background-color: #0070ff;

     

       288
       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
       770
       +
           const badgeCustomization = document.createElement("div");

     

       771
       771
       +
           badgeCustomization.style.cssText = `

     

       772
       772
       +
             margin-top: 15px;

     

       773
       773
       +
             padding-top: 15px;

     

       774
       774
       +
             border-top: 1px solid #eee;

     

       775
       775
       +
           `;

     

       776
       776
       +
       

     

       777
       777
       +
           badgeCustomization.innerHTML = `

     

       778
       778
       +
             <h3 style="margin-top: 0; color: white;">Badge Customization</h3>

     

       779
       779
       +
       

     

       780
       780
       +
             <div style="margin-bottom: 15px;">

     

       781
       781
       +
               <p style="margin-bottom: 8px; color: white;">Badge Type:</p>

     

       782
       782
       +
               <div style="display: flex; flex-wrap: wrap; gap: 10px;">

     

       783
       783
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       784
       784
       +
                   <input type="radio" name="badgeType" value="checkmark" ${getBadgeType() === "checkmark" ? "checked" : ""}>

     

       785
       785
       +
                   <span style="margin-left: 5px;">Checkmark (✓)</span>

     

       786
       786
       +
                 </label>

     

       787
       787
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       788
       788
       +
                   <input type="radio" name="badgeType" value="star" ${getBadgeType() === "star" ? "checked" : ""}>

     

       789
       789
       +
                   <span style="margin-left: 5px;">Star (★)</span>

     

       790
       790
       +
                 </label>

     

       791
       791
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       792
       792
       +
                   <input type="radio" name="badgeType" value="heart" ${getBadgeType() === "heart" ? "checked" : ""}>

     

       793
       793
       +
                   <span style="margin-left: 5px;">Heart (♥)</span>

     

       794
       794
       +
                 </label>

     

       795
       795
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       796
       796
       +
                   <input type="radio" name="badgeType" value="shield" ${getBadgeType() === "shield" ? "checked" : ""}>

     

       797
       797
       +
                   <span style="margin-left: 5px;">Shield (🛡️)</span>

     

       798
       798
       +
                 </label>

     

       799
       799
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       800
       800
       +
                   <input type="radio" name="badgeType" value="lock" ${getBadgeType() === "lock" ? "checked" : ""}>

     

       801
       801
       +
                   <span style="margin-left: 5px;">Lock (🔒)</span>

     

       802
       802
       +
                 </label>

     

       803
       803
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       804
       804
       +
                   <input type="radio" name="badgeType" value="verified" ${getBadgeType() === "verified" ? "checked" : ""}>

     

       805
       805
       +
                   <span style="margin-left: 5px;">Verified</span>

     

       806
       806
       +
                 </label>

     

       807
       807
       +
               </div>

     

       808
       808
       +
             </div>

     

       809
       809
       +
       

     

       810
       810
       +
             <div>

     

       811
       811
       +
               <p style="margin-bottom: 8px; color: white;">Badge Color:</p>

     

       812
       812
       +
               <div style="display: flex; align-items: center;">

     

       813
       813
       +
                 <input type="color" id="badgeColorPicker" value="${getBadgeColor()}" style="margin-right: 10px;">

     

       814
       814
       +
                 <span id="badgeColorPreview" style="display: inline-block; width: 24px; height: 24px; background-color: ${getBadgeColor()}; border-radius: 50%; margin-right: 10px;"></span>

     

       815
       815
       +
                 <button id="resetBadgeColor" style="padding: 5px 10px; background: #473A3A; color: white; border: none; border-radius: 4px; cursor: pointer;">Reset to Default</button>

     

       816
       816
       +
               </div>

     

       817
       817
       +
             </div>

     

       818
       818
       +
       

     

       819
       819
       +
             <div style="margin-top: 20px;">

     

       820
       820
       +
               <p style="color: white;">Preview:</p>

     

       821
       821
       +
               <div style="display: flex; align-items: center; margin-top: 8px;">

     

       822
       822
       +
                 <span style="color: white; font-weight: bold;">User Name</span>

     

       823
       823
       +
                 <span id="badgePreview" style="

     

       824
       824
       +
                   background-color: ${getBadgeColor()};

     

       825
       825
       +
                   color: white;

     

       826
       826
       +
                   border-radius: 50%;

     

       827
       827
       +
                   width: 18px;

     

       828
       828
       +
                   height: 18px;

     

       829
       829
       +
                   margin-left: 8px;

     

       830
       830
       +
                   font-size: 12px;

     

       831
       831
       +
                   font-weight: bold;

     

       832
       832
       +
                   display: inline-flex;

     

       833
       833
       +
                   align-items: center;

     

       834
       834
       +
                   justify-content: center;

     

       835
       835
       +
                 ">${getBadgeContent(getBadgeType())}</span>

     

       836
       836
       +
               </div>

     

       837
       837
       +
             </div>

     

       838
       838
       +
           `;

     

       839
       839
       +
       

     

       840
       840
       +
           // Add the badge customization section to the modal content

     

       841
       841
       +
           modalContent.appendChild(badgeCustomization);

     

       842
       842
       +
       

     

       843
       843
       +
           // Add event listeners for the badge customization controls

     

       844
       844
       +
           setTimeout(() => {

     

       845
       845
       +
             // Badge type selection

     

       846
       846
       +
             const badgeTypeRadios = document.querySelectorAll(

     

       847
       847
       +
               'input[name="badgeType"]',

     

       848
       848
       +
             );

     

       849
       849
       +
             for (const radio of badgeTypeRadios) {

     

       850
       850
       +
               radio.addEventListener("change", (e) => {

     

       851
       851
       +
                 const selectedType = e.target.value;

     

       852
       852
       +
                 saveBadgeType(selectedType);

     

       853
       853
       +
                 updateBadgePreview();

     

       854
       854
       +
               });

     

       855
       855
       +
             }

     

       856
       856
       +
       

     

       857
       857
       +
             // Badge color picker

     

       858
       858
       +
             const colorPicker = document.getElementById("badgeColorPicker");

     

       859
       859
       +
             const colorPreview = document.getElementById("badgeColorPreview");

     

       860
       860
       +
       

     

       861
       861
       +
             colorPicker.addEventListener("input", (e) => {

     

       862
       862
       +
               const selectedColor = e.target.value;

     

       863
       863
       +
               colorPreview.style.backgroundColor = selectedColor;

     

       864
       864
       +
               saveBadgeColor(selectedColor);

     

       865
       865
       +
               updateBadgePreview();

     

       866
       866
       +
             });

     

       867
       867
       +
       

     

       868
       868
       +
             // Reset color button

     

       869
       869
       +
             const resetColorBtn = document.getElementById("resetBadgeColor");

     

       870
       870
       +
             resetColorBtn.addEventListener("click", () => {

     

       871
       871
       +
               colorPicker.value = DEFAULT_BADGE_COLOR;

     

       872
       872
       +
               colorPreview.style.backgroundColor = DEFAULT_BADGE_COLOR;

     

       873
       873
       +
               saveBadgeColor(DEFAULT_BADGE_COLOR);

     

       874
       874
       +
               updateBadgePreview();

     

       875
       875
       +
             });

     

       876
       876
       +
       

     

       877
       877
       +
             // Function to update the badge preview

     

       878
       878
       +
             function updateBadgePreview() {

     

       879
       879
       +
               const badgePreview = document.getElementById("badgePreview");

     

       880
       880
       +
               const selectedType = getBadgeType();

     

       881
       881
       +
               const selectedColor = getBadgeColor();

     

       882
       882
       +
       

     

       883
       883
       +
               badgePreview.innerHTML = getBadgeContent(selectedType);

     

       884
       884
       +
               badgePreview.style.backgroundColor = selectedColor;

     

       885
       885
       +
             }

     

       886
       886
       +
       

     

       887
       887
       +
             // Initialize preview

     

       888
       888
       +
             updateBadgePreview();

     

       889
       889
       +
           }, 100);

     

       890
       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
       1015
       -
                     smallBadge.innerHTML = "✓";

     

       1186
       1186
       +
       

     

       1187
       1187
       +
                     // Get user badge preferences

     

       1188
       1188
       +
                     const badgeType = getBadgeType();

     

       1189
       1189
       +
                     const badgeColor = getBadgeColor();

     

       1190
       1190
       +
       

     

       1191
       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
       1025
       -
                       background-color: #0070ff;

     

       1201
       1201
       +
                       background-color: ${badgeColor};

     

       1026
       1202
        
                       color: white;

     

       1027
       1203
        
                       border-radius: 50%;

     

       1028
       1204
        
                       width: 14px;