feat: redo settings and all org pages. (#601)

* feat: new components, deploy storybook

* refactor: simplify component field definitions and enhance button loading state

- Removed unnecessary type imports and simplified the FIELDS array definitions across multiple components in Storybook.
- Updated button component to use a loading state instead of isLoading, improving clarity and consistency in props.
- Adjusted button stories to reflect the new loading prop and enhanced the button's loading visual feedback.
- Minor CSS adjustments for better layout and styling consistency.

* chore: add field, card, password components

* feat: improve page component & update AuthUI path

* chore: update bits-ui to version 2.14.4 and all org related UI's

- Updated bits-ui dependency in pnpm-lock.yaml and package.json to version 2.14.4.
- Refactored imports for RoleBasedSecurity and UpgradeBanner components to use the new ui feature directory.
- Removed unused Course components and related files to clean up the codebase.
- Enhanced various components to improve consistency and maintainability.

* chore: move all setting buttons to the top and update auth ui styles

* chore: remove svelte-loading-spinners and replace with @cio/ui/base/spinner

- Removed all instances of svelte-loading-spinners from the project.
- Updated components to use the new Spinner from @cio/ui/base/spinner.
- Cleaned up pnpm-lock.yaml and package.json to reflect the removal of svelte-loading-spinners.
- Added new CSS animations for rocket launch effects in app.css.
- Enhanced email change flow with updated verification messages in translations.

* chore: remove supabase file upload from dashboard and move to r2

* chore: update organization API and UI components

- Added new API methods for organization plan operations and team management.
- Introduced middleware for API key authentication and organization admin checks.
- Refactored organization-related components to utilize the new API structure.
- Updated various UI components to improve consistency and maintainability.
- Enhanced error handling and validation for organization-related actions.
- Removed deprecated services and streamlined the codebase.

apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/nav-main.svelte

@@ -44,7 +44,7 @@
                 <Sidebar.MenuSub>
                   {#each item.items ?? [] as subItem (subItem.title)}
                     <Sidebar.MenuSubItem>
-                      <Sidebar.MenuSubButton isActive={isActive(pathWithQuery, subItem.url, true)}>
+                      <Sidebar.MenuSubButton isActive={isActive(pathWithQuery, subItem.url, undefined, true)}>
                         {#snippet child({ props })}
                           <a href={subItem.url} {...props}>
                             <span>{subItem.title}</span>

apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/org-sidebar.svelte

@@ -22,10 +22,10 @@
 
     <Sidebar.Content>
       <NavMain />
-      <UpgradeTrigger />
     </Sidebar.Content>
 
-    <Sidebar.Footer>
+    <Sidebar.Footer class="gap-4!">
+      <UpgradeTrigger />
       <SidebarFooterMenu />
     </Sidebar.Footer>
 

apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/upgrade-trigger.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import * as Sidebar from '@cio/ui/base/sidebar';
-  import { Button } from '$src/base/button';
-  import SparklesIcon from '@lucide/svelte/icons/sparkles';
+  import { Button } from '@cio/ui/base/button';
+  import RocketIcon from '@lucide/svelte/icons/rocket';
   import { t } from '$lib/utils/functions/translations';
   import { openUpgradeModal } from '$lib/utils/functions/org';
   import { isFreePlan } from '$lib/utils/store/org';
@@ -11,24 +10,18 @@
 </script>
 
 {#if $isFreePlan}
-  <Sidebar.Content>
+  <div class="animate-icon">
     {#if sidebar.open || sidebar.isMobile}
       <div
-        class="mx-4 mt-2 flex flex-col items-center justify-center gap-4 rounded-md border border-blue-600 px-2 py-6 text-center transition-all ease-in-out hover:border-blue-800"
+        class="animate-gradient-border mx-2 flex flex-col items-center justify-center gap-4 rounded-md px-2 py-6 text-center transition-all ease-in-out"
       >
-        <SparklesIcon class="my-3 size-6" />
+        <RocketIcon class="rocket-launch my-3 size-6" />
         <span class="flex flex-col gap-1">
           <p class="text-base font-semibold">{$t('org_navigation.early_adopter')}</p>
           <p class="text-xs">{$t('org_navigation.unlock')}</p>
         </span>
-        <Button
-          data-sidebar="upgrade-trigger"
-          data-slot="upgrade-trigger"
-          class="font-normal"
-          type="button"
-          onclick={openUpgradeModal}
-        >
-          <SparklesIcon class="custom size-4" />
+        <Button data-sidebar="upgrade-trigger" data-slot="upgrade-trigger" type="button" onclick={openUpgradeModal}>
+          <RocketIcon class="rocket-launch custom size-4" />
           {$t('org_navigation.upgrade')}
         </Button>
       </div>
@@ -38,13 +31,13 @@
         data-slot="upgrade-trigger"
         variant="ghost"
         size="icon"
-        class="mx-1 flex w-full items-center justify-center"
+        class="rocket-launch"
         type="button"
         onclick={openUpgradeModal}
       >
-        <SparklesIcon class="custom size-4" />
+        <RocketIcon class="custom size-4" />
         <span class="sr-only">{$t('org_navigation.upgrade')}</span>
       </Button>
     {/if}
-  </Sidebar.Content>
+  </div>
 {/if}