updates to docs and also profile

src/interface/components/store/CloudHeader.svelte

@@ -3,6 +3,11 @@
   import { cloudAuth } from "@/seqta/utils/CloudAuth";
   import CloudLoginForm from "./CloudLoginForm.svelte";
 
+  let { alwaysShowUserName = false } = $props<{
+    /** When true (e.g. narrow extension popup), show display name below sm breakpoint */
+    alwaysShowUserName?: boolean;
+  }>();
+
   let cloudState = $state(cloudAuth.state);
   let open = $state(false);
   let dropdownEl: HTMLElement;
@@ -65,7 +70,11 @@
           {getInitials()}
         </div>
       {/if}
-      <span class="hidden max-w-24 truncate sm:inline text-base">
+      <span
+        class={alwaysShowUserName
+          ? "inline max-w-[10rem] truncate text-sm"
+          : "hidden max-w-24 truncate sm:inline text-base"}
+      >
         {cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
       </span>
     {:else}

src/interface/components/store/ThemeGrid.svelte

@@ -29,7 +29,7 @@
     {/each}
   
     {#if filteredThemes.length !== 0}
-      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class="block relative z-0 hover:z-20 w-full cursor-pointer">
+      <a href="https://docs.betterseqta.org/theme-creation/" class="block relative z-0 hover:z-20 w-full cursor-pointer">
         <div class="bg-zinc-50 h-48 w-full transition-all duration-500 ease-out relative overflow-clip rounded-xl border group group/card flex flex-col justify-center items-center hover:scale-105 hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1]">
           <div class="text-2xl font-IconFamily">{'\uecb3'}</div>
           <div class="text-xl font-bold text-center transition-all duration-500 dark:text-white">
@@ -45,7 +45,7 @@
     <div class="absolute top-0 flex flex-col items-center justify-center w-full text-center h-96">
       <h1 class="mt-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl">That doesn't exist! 😭😭😭</h1>
       <p class="mt-6 text-lg leading-7 text-zinc-600 dark:text-zinc-300">Sorry, we couldn't find the theme you're looking for. Maybe... you could create it?</p>
-      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
+      <a href="https://docs.betterseqta.org/theme-creation/" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
         Show me how!
       </a>
     </div>