the home of serif.blue
feat: move ui into bsky settings
+106
-3
+106
-3
bluesky-community-verifications.user.js
+106
-3
bluesky-community-verifications.user.js
···
712
712
}
713
713
};
714
714
715
+
const addSettingsButton = () => {
716
+
// Check if we're on the settings page
717
+
if (!window.location.href.includes("bsky.app/settings")) {
718
+
return;
719
+
}
720
+
721
+
// Check if our button already exists to avoid duplicates
722
+
if (document.getElementById("community-verifications-settings-button")) {
723
+
return;
724
+
}
725
+
726
+
// Find the right place to insert our button (after content-and-media link)
727
+
const contentMediaLink = document.querySelector(
728
+
'a[href="/settings/content-and-media"]',
729
+
);
730
+
if (!contentMediaLink) {
731
+
console.log("Could not find content-and-media link to insert after");
732
+
return;
733
+
}
734
+
735
+
// Clone the existing link and modify it
736
+
const verificationButton = contentMediaLink.cloneNode(true);
737
+
verificationButton.id = "community-verifications-settings-button";
738
+
verificationButton.href = "#"; // No actual link, we'll handle click with JS
739
+
verificationButton.setAttribute("aria-label", "Community Verifications");
740
+
741
+
const highlightColor =
742
+
verificationButton.firstChild.style.backgroundColor || "rgb(30,41,54)";
743
+
744
+
// Add hover effect to highlight the button
745
+
verificationButton.addEventListener("mouseover", () => {
746
+
verificationButton.firstChild.style.backgroundColor = highlightColor;
747
+
});
748
+
749
+
verificationButton.addEventListener("mouseout", () => {
750
+
verificationButton.firstChild.style.backgroundColor = null;
751
+
});
752
+
753
+
// Update the text content
754
+
const textDiv = verificationButton.querySelector(".css-146c3p1");
755
+
if (textDiv) {
756
+
textDiv.textContent = "Community Verifications";
757
+
}
758
+
759
+
// Update the icon
760
+
const iconDiv = verificationButton.querySelector(
761
+
".css-175oi2r[style*='width: 28px']",
762
+
);
763
+
if (iconDiv) {
764
+
iconDiv.innerHTML = `
765
+
<svg fill="none" width="28" viewBox="0 0 24 24" height="28" style="color: rgb(241, 243, 245);">
766
+
<path fill="hsl(211, 20%, 95.3%)" d="M21.2,9.3c-0.5-0.5-1.1-0.7-1.8-0.7h-2.3V6.3c0-2.1-1.7-3.7-3.7-3.7h-3c-2.1,0-3.7,1.7-3.7,3.7v2.3H4.6
767
+
c-0.7,0-1.3,0.3-1.8,0.7c-0.5,0.5-0.7,1.1-0.7,1.8v9.3c0,0.7,0.3,1.3,0.7,1.8c0.5,0.5,1.1,0.7,1.8,0.7h14.9c0.7,0,1.3-0.3,1.8-0.7
768
+
c0.5-0.5,0.7-1.1,0.7-1.8v-9.3C22,10.4,21.7,9.8,21.2,9.3z M14.1,15.6l-1.3,1.3c-0.1,0.1-0.3,0.2-0.5,0.2c-0.2,0-0.3-0.1-0.5-0.2l-3.3-3.3
769
+
c-0.1-0.1-0.2-0.3-0.2-0.5c0-0.2,0.1-0.3,0.2-0.5l1.3-1.3c0.1-0.1,0.3-0.2,0.5-0.2c0.2,0,0.3,0.1,0.5,0.2l1.5,1.5l4.2-4.2
770
+
c0.1-0.1,0.3-0.2,0.5-0.2c0.2,0,0.3,0.1,0.5,0.2l1.3,1.3c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2-0.1,0.3-0.2,0.5L14.1,15.6z M9.7,6.3
771
+
c0-0.9,0.7-1.7,1.7-1.7h3c0.9,0,1.7,0.7,1.7,1.7v2.3H9.7V6.3z"/>
772
+
</svg>
773
+
`;
774
+
}
775
+
776
+
// Insert our button after the content-and-media link
777
+
const parentElement = contentMediaLink.parentElement;
778
+
parentElement.insertBefore(
779
+
verificationButton,
780
+
contentMediaLink.nextSibling,
781
+
);
782
+
783
+
// Add click event to open our settings modal
784
+
verificationButton.addEventListener("click", (e) => {
785
+
e.preventDefault();
786
+
if (settingsModal) {
787
+
settingsModal.style.display = "flex";
788
+
updateTrustedUsersList();
789
+
} else {
790
+
createSettingsModal();
791
+
}
792
+
});
793
+
794
+
console.log("Added Community Verifications button to settings page");
795
+
};
796
+
715
797
// Function to create the settings modal
716
798
const createSettingsModal = () => {
717
799
// Create modal container
···
1151
1233
setInterval(debouncedCheck, 5000);
1152
1234
};
1153
1235
1154
-
// Add these calls to the initialization section
1155
-
// Initial check for user links
1156
-
setTimeout(checkUserLinksOnPage, 1000); // Slight delay to ensure page has loaded
1236
+
// Wait for DOM to be fully loaded before initializing
1237
+
document.addEventListener("DOMContentLoaded", () => {
1238
+
// Initial check for user links
1239
+
checkUserLinksOnPage();
1240
+
1241
+
// Add settings button if we're on the settings page
1242
+
if (window.location.href.includes("bsky.app/settings")) {
1243
+
// Wait for the content-and-media link to appear before adding our button
1244
+
const waitForSettingsLink = setInterval(() => {
1245
+
const contentMediaLink = document.querySelector(
1246
+
'a[href="/settings/content-and-media"]',
1247
+
);
1248
+
if (contentMediaLink) {
1249
+
clearInterval(waitForSettingsLink);
1250
+
addSettingsButton();
1251
+
}
1252
+
}, 200);
1253
+
}
1254
+
});
1157
1255
1158
1256
// Start observing for content changes to detect newly loaded posts
1159
1257
observeContentChanges();
···
1189
1287
1190
1288
// Check if we're on a profile page now
1191
1289
setTimeout(checkCurrentProfile, 500); // Small delay to ensure DOM has updated
1290
+
1291
+
if (window.location.href.includes("bsky.app/settings")) {
1292
+
// Give the page a moment to fully load
1293
+
setTimeout(addSettingsButton, 500);
1294
+
}
1192
1295
}
1193
1296
});
1194
1297