feat: bs cloud header in settings, cloud pfp as local pfp option & doc updates

updates to docs and also profile

src/plugins/built-in/profilePicture/index.ts

@@ -1,11 +1,22 @@
 import type { Plugin } from "@/plugins/core/types";
-import { componentSetting, defineSettings } from "@/plugins/core/settingsHelpers";
+import {
+  booleanSetting,
+  componentSetting,
+  defineSettings,
+} from "@/plugins/core/settingsHelpers";
 import ProfilePictureSetting from "./ProfilePictureSetting.svelte";
 import { waitForElm } from "@/seqta/utils/waitForElm";
+import { cloudAuth } from "@/seqta/utils/CloudAuth";
 import styles from "./styles.css?inline";
 import localforage from "localforage";
 
 const settings = defineSettings({
+  useCloudPfp: booleanSetting({
+    default: false,
+    title: "Use BetterSEQTA Cloud profile picture",
+    description:
+      "When enabled, uses the avatar from your BetterSEQTA Cloud account (sign in from the extension store). Otherwise uses the uploaded image below.",
+  }),
   picture: componentSetting({
     title: "Profile Picture",
     description: "Upload or remove your custom profile image",
@@ -17,7 +28,7 @@ const profilePicturePlugin: Plugin<typeof settings> = {
   id: "profile-picture",
   name: "Custom Profile Picture",
   description: "Use your own image in place of the profile icon",
-  version: "1.1.0",
+  version: "1.2.0",
   settings: settings,
   disableToggle: true,
   defaultEnabled: false,
@@ -36,14 +47,12 @@ const profilePicturePlugin: Plugin<typeof settings> = {
     let img: HTMLImageElement | null = null;
     let currentBlobUrl: string | undefined;
 
-    // Setup localforage instance
     const store = localforage.createInstance({
       name: "profile-picture-store",
       storeName: "profilePicture",
     });
 
-    async function updateImageFromStore() {
-      // Remove old image if present
+    async function applyProfileImage() {
       if (img) {
         img.remove();
         img = null;
@@ -52,6 +61,19 @@ const profilePicturePlugin: Plugin<typeof settings> = {
         URL.revokeObjectURL(currentBlobUrl);
         currentBlobUrl = undefined;
       }
+
+      const useCloud = api.settings.useCloudPfp;
+      const pfpUrl = cloudAuth.state.user?.pfpUrl;
+
+      if (useCloud && pfpUrl) {
+        img = document.createElement("img");
+        img.className = "userInfoImg";
+        img.src = pfpUrl;
+        if (svg) svg.style.display = "none";
+        container.appendChild(img);
+        return;
+      }
+
       const blob = await store.getItem<Blob>("profile-picture");
       if (blob && blob instanceof Blob) {
         currentBlobUrl = URL.createObjectURL(blob);
@@ -65,15 +87,25 @@ const profilePicturePlugin: Plugin<typeof settings> = {
       }
     }
 
-    // Initial load
-    await updateImageFromStore();
+    await applyProfileImage();
 
-    // Listen for profile picture updates
-    const handler = () => { updateImageFromStore(); };
-    window.addEventListener('profile-picture-updated', handler);
+    const onLocalPictureUpdated = () => {
+      void applyProfileImage();
+    };
+    window.addEventListener("profile-picture-updated", onLocalPictureUpdated);
+
+    const cloudUnsub = cloudAuth.subscribe(() => {
+      void applyProfileImage();
+    });
+
+    const useCloudUnreg = api.settings.onChange("useCloudPfp", () => {
+      void applyProfileImage();
+    });
 
     return () => {
-      window.removeEventListener("profile-picture-updated", handler);
+      useCloudUnreg.unregister();
+      cloudUnsub();
+      window.removeEventListener("profile-picture-updated", onLocalPictureUpdated);
       if (img) img.remove();
       if (svg) svg.style.display = "";
       if (currentBlobUrl) URL.revokeObjectURL(currentBlobUrl);