feat: Add minimal guided upgrade flag (collapsed by default) (#3653)

Add minimal guided upgrade flag (collapsed by default).

To use this new feature flag, the app would need to set, e.g.: 

```javascript
identityProvider: "https://id.ai/authorize?feature_flag_min_guided_upgrade=true"
```

# Changes

- Add `MIN_GUIDED_UPGRADE` feature flag.
- Show guided upgrade when flag is enabled.
- Make sure the guided upgrade is collapsed in case this flag is
enabled.

Author: sea-snake

src/frontend/src/lib/state/featureFlags.ts

@@ -104,10 +104,16 @@ export const GUIDED_UPGRADE = createFeatureFlagStore(
   },
 );
 
+export const MIN_GUIDED_UPGRADE = createFeatureFlagStore(
+  "MIN_GUIDED_UPGRADE",
+  false,
+);
+
 export default {
   DOMAIN_COMPATIBILITY,
   HARDWARE_KEY_TEST,
   DISCOVERABLE_PASSKEY_FLOW,
   ENABLE_ALL_LOCALES,
   GUIDED_UPGRADE,
+  MIN_GUIDED_UPGRADE,
 } as Record<string, FeatureFlagStore>;

src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/+layout.svelte

@@ -13,14 +13,15 @@
   import { MigrationWizard } from "$lib/components/wizards/migration";
   import { handleError } from "$lib/components/utils/error";
   import Dialog from "$lib/components/ui/Dialog.svelte";
-  import { GUIDED_UPGRADE } from "$lib/state/featureFlags";
+  import { GUIDED_UPGRADE, MIN_GUIDED_UPGRADE } from "$lib/state/featureFlags";
   import { goto } from "$app/navigation";
 
   const { children }: LayoutProps = $props();
 
   let animationWrapperRef = $state<HTMLElement>();
   let isUpgradeCollapsed = $state(
-    localStorage.getItem("ii-guided-upgrade-collapsed") === "true",
+    localStorage.getItem("ii-guided-upgrade-collapsed") === "true" ||
+      $MIN_GUIDED_UPGRADE,
   );
   let upgradePanelHeight = $state<number>(224);
   let isUpgrading = $state(false);
@@ -147,7 +148,7 @@
         onoutrostart={() =>
           animationWrapperRef?.setAttribute("aria-hidden", "true")}
       >
-        {#if $GUIDED_UPGRADE}
+        {#if $GUIDED_UPGRADE || $MIN_GUIDED_UPGRADE}
           {@render upgradePanel()}
         {/if}
         <AuthPanel
@@ -162,13 +163,15 @@
     {/key}
   {:else}
     <div class="relative col-start-1 row-start-1 flex flex-col gap-5">
-      {#if $GUIDED_UPGRADE}
+      {#if $GUIDED_UPGRADE || $MIN_GUIDED_UPGRADE}
         {@render upgradePanel()}
       {/if}
       <AuthPanel
         class={[
           "z-1",
-          $GUIDED_UPGRADE && isUpgradeCollapsed && "rounded-t-none",
+          ($GUIDED_UPGRADE || $MIN_GUIDED_UPGRADE) &&
+            isUpgradeCollapsed &&
+            "rounded-t-none",
         ]}
       >
         {@render children()}