Show warning for profiles when user is not logged in

Main use case for these flags is to notify when something they're trying
to use will not be usable due to authorization or their role on the
site. Specifically, it will be also used later to detect when user
is a part of staff and show them staff-specific features.

manifest.json

@@ -28,7 +28,8 @@
                 "*://*.furbooru.org/*"
             ],
             "js": [
-                "src/content/deps/amd.ts"
+                "src/content/deps/amd.ts",
+                "src/content/user-details.ts"
             ]
         },
         {

src/content/user-details.ts

@@ -0,0 +1,14 @@
+import { UserDetails } from "$lib/extension/preferences/UserDetails";
+
+(async () => {
+  const userDetails = new UserDetails();
+  const userDataStore = document.querySelector<HTMLElement>('.js-datastore');
+
+  if (!userDataStore) {
+    return;
+  }
+
+  await userDetails.isAuthorized.set(userDataStore.dataset.userIsSignedIn === 'true');
+})();
+
+

src/lib/extension/preferences/UserDetails.ts

@@ -0,0 +1,16 @@
+import CacheablePreferences, { PreferenceField, type WithFields } from "$lib/extension/base/CacheablePreferences";
+
+export interface UserDetailsFields {
+  isAuthorized: boolean;
+}
+
+export class UserDetails extends CacheablePreferences<UserDetailsFields> implements WithFields<UserDetailsFields> {
+  constructor() {
+    super('userDetails');
+  }
+
+  isAuthorized = new PreferenceField(this, {
+    field: 'isAuthorized',
+    defaultValue: false,
+  });
+}

src/routes/features/profiles/+page.svelte

@@ -5,6 +5,8 @@
   import { activeTaggingProfile, taggingProfiles } from "$stores/entities/tagging-profiles";
   import TaggingProfile from "$entities/TaggingProfile";
   import { popupTitle } from "$stores/popup";
+  import { user } from "$stores/preferences/user";
+  import Notice from "$components/ui/Notice.svelte";
 
   $popupTitle = 'Tagging Profiles';
 
@@ -28,6 +30,18 @@
 <Menu>
   <MenuItem href="/" icon="arrow-left">Back</MenuItem>
   <MenuItem href="/features/profiles/new/edit" icon="plus">Create New</MenuItem>
+</Menu>
+{#if $user?.isAuthorized === false}
+  <Menu>
+    <hr>
+  </Menu>
+  <Notice level="warning">
+    <strong>Tagging profiles will only work when you're signed in!</strong>
+    <br><br>
+    Unauthorized users have to solve the captcha before sending any submissions to the site.
+  </Notice>
+{/if}
+<Menu>
   {#if profiles.length}
     <hr>
   {/if}

src/stores/preferences/user.ts

@@ -0,0 +1,18 @@
+import { UserDetails, type UserDetailsFields } from "$lib/extension/preferences/UserDetails";
+import { readable } from "svelte/store";
+
+const userDetails = new UserDetails();
+
+export const user = readable<UserDetailsFields | null>(null, set => {
+  userDetails.subscribe(settings => {
+    set({
+      isAuthorized: Boolean(settings.isAuthorized)
+    });
+  });
+
+  userDetails.isAuthorized.get().then(isAuthorized => {
+    set({
+      isAuthorized
+    });
+  });
+});