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.

packages/ui/src/base/copy-button/copy-button.svelte

@@ -0,0 +1,74 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<script lang="ts">
+  import { Button } from '../button';
+  import { UseClipboard } from '../../hooks/use-clipboard.svelte';
+  import { cn } from '../../tools';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import CopyIcon from '@lucide/svelte/icons/copy';
+  import XIcon from '@lucide/svelte/icons/x';
+  import { scale } from 'svelte/transition';
+  import type { CopyButtonProps } from './types';
+
+  let {
+    ref = $bindable(null),
+    text,
+    icon,
+    animationDuration = 500,
+    variant = 'ghost',
+    size = 'icon',
+    onCopy,
+    class: className,
+    tabindex = -1,
+    children,
+    ...rest
+  }: CopyButtonProps = $props();
+
+  // this way if the user passes text then the button will be the default size
+  if (size === 'icon' && children) {
+    size = 'default';
+  }
+
+  const clipboard = new UseClipboard();
+</script>
+
+<Button
+  {...rest}
+  bind:ref
+  {variant}
+  {size}
+  {tabindex}
+  class={cn('ui:flex ui:items-center ui:gap-2', className)}
+  type="button"
+  name="copy"
+  onclick={async () => {
+    // text prop is reactive, so it will use the latest value when clicked
+    const status = await clipboard.copy(text);
+
+    onCopy?.(status);
+  }}
+>
+  {#if clipboard.status === 'success'}
+    <div in:scale={{ duration: animationDuration, start: 0.85 }}>
+      <CheckIcon tabindex={-1} />
+      <span class="ui:sr-only">Copied</span>
+    </div>
+  {:else if clipboard.status === 'failure'}
+    <div in:scale={{ duration: animationDuration, start: 0.85 }}>
+      <XIcon tabindex={-1} />
+      <span class="sr-only">Failed to copy</span>
+    </div>
+  {:else}
+    <div in:scale={{ duration: animationDuration, start: 0.85 }}>
+      {#if icon}
+        {@render icon()}
+      {:else}
+        <CopyIcon tabindex={-1} />
+      {/if}
+      <span class="sr-only">Copy</span>
+    </div>
+  {/if}
+  {@render children?.()}
+</Button>

packages/ui/src/base/copy-button/index.ts

@@ -0,0 +1,7 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import CopyButton from './copy-button.svelte';
+
+export { CopyButton };

packages/ui/src/base/copy-button/types.ts

@@ -0,0 +1,22 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import type { WithChildren, WithoutChildren } from 'bits-ui';
+
+import type { ButtonPropsWithoutHTML } from '../button';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { UseClipboard } from '../../hooks/use-clipboard.svelte';
+
+export type CopyButtonPropsWithoutHTML = WithChildren<
+  Pick<ButtonPropsWithoutHTML, 'size' | 'variant'> & {
+    ref?: HTMLButtonElement | null;
+    text: string;
+    icon?: Snippet<[]>;
+    animationDuration?: number;
+    onCopy?: (status: UseClipboard['status']) => void;
+  }
+>;
+
+export type CopyButtonProps = CopyButtonPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLButtonElement>>;