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/hooks/is-mobile.svelte.ts

@@ -7,3 +7,5 @@ export class IsMobile extends MediaQuery {
     super(`max-width: ${breakpoint - 1}px`);
   }
 }
+
+export const isMobileStore = new IsMobile();

packages/ui/src/hooks/use-clipboard.svelte.ts

@@ -0,0 +1,83 @@
+type Options = {
+	/** The time before the copied status is reset. */
+	delay: number;
+};
+
+/** Use this hook to copy text to the clipboard and show a copied state.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ * 		import { UseClipboard } from "$lib/hooks/use-clipboard.svelte";
+ *
+ * 		const clipboard = new UseClipboard();
+ * </script>
+ *
+ * <button onclick={clipboard.copy('Hello, World!')}>
+ *     {#if clipboard.copied === 'success'}
+ *         Copied!
+ *     {:else if clipboard.copied === 'failure'}
+ *         Failed to copy!
+ *     {:else}
+ *         Copy
+ *     {/if}
+ * </button>
+ * ```
+ *
+ */
+export class UseClipboard {
+	#copiedStatus = $state<'success' | 'failure'>();
+	private delay: number;
+	private timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+
+	constructor({ delay = 500 }: Partial<Options> = {}) {
+		this.delay = delay;
+	}
+
+	/** Copies the given text to the users clipboard.
+	 *
+	 * ## Usage
+	 * ```ts
+	 * clipboard.copy('Hello, World!');
+	 * ```
+	 *
+	 * @param text
+	 * @returns
+	 */
+	async copy(text: string) {
+		if (this.timeout) {
+			this.#copiedStatus = undefined;
+			clearTimeout(this.timeout);
+		}
+
+		try {
+			await navigator.clipboard.writeText(text);
+
+			this.#copiedStatus = 'success';
+
+			this.timeout = setTimeout(() => {
+				this.#copiedStatus = undefined;
+			}, this.delay);
+		} catch {
+			// an error can occur when not in the browser or if the user hasn't given clipboard access
+			this.#copiedStatus = 'failure';
+
+			this.timeout = setTimeout(() => {
+				this.#copiedStatus = undefined;
+			}, this.delay);
+		}
+
+		return this.#copiedStatus;
+	}
+
+	/** true when the user has just copied to the clipboard. */
+	get copied() {
+		return this.#copiedStatus === 'success';
+	}
+
+	/**	Indicates whether a copy has occurred
+	 * and gives a status of either `success` or `failure`. */
+	get status() {
+		return this.#copiedStatus;
+	}
+}