fix: add go-to-top button

apps/console-fb/package.json

@@ -5,26 +5,29 @@
 	"type": "module",
 	"scripts": {
 		"//FIXME": "https://github.com/HoudiniGraphql/houdini/issues/1246",
+		"build": "dotenv-run -vf .env,.secrets -- vite build",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"dev": "dotenv-run -vf .env,.secrets -- vite dev",
 		"dev:debug": "DEBUG=* vite dev",
 		"dev:sw": "SW_DEV=true vite dev",
-		"build": "dotenv-run -vf .env,.secrets -- vite build",
+		"format": "prettier --write . && eslint --fix .",
+		"generate": "concurrently pnpm:generate:*",
+		"generate:pull-schema": "dotenv-run -vf .env,.secrets -- houdini pull-schema",
+		"generate:svelte": "svelte-kit sync",
+		"lint": "concurrently pnpm:lint:*",
+		"lint:js": "eslint .",
+		"lint:markup": "markuplint --config ../../.markuplintrc.cjs \"**\"",
+		"lint:prettier": "prettier --check .",
 		"preview": "NEXTAUTH_URL=http://localhost:4173 AUTH_REDIRECT_PROXY_URL=http://localhost:4173/auth dotenv-run -vf .env,.secrets -- vite preview",
 		"test": "pnpm run test:integration && pnpm run test:unit",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write . && eslint --fix .",
+		"test:integration": "playwright test",
 		"test:unit": "vitest",
-		"test:unit:ui": "vitest --ui",
 		"test:unit:coverage": "vitest run --coverage",
-		"test:integration": "playwright test",
-		"lint:markup": "markuplint --config ../../.markuplintrc.cjs \"**\"",
-		"lint:js": "eslint .",
-		"lint:prettier": "prettier --check .",
-		"lint": "concurrently pnpm:lint:*",
-		"generate:svelte": "svelte-kit sync",
-		"generate:pull-schema": "dotenv-run -vf .env,.secrets -- houdini pull-schema",
-		"generate": "concurrently pnpm:generate:*"
+		"test:unit:ui": "vitest --ui"
+	},
+	"dependencies": {
+		"cookie": "0.6.0"
 	},
 	"devDependencies": {
 		"@auth/core": "0.23.0",
@@ -112,8 +115,5 @@
 	"optionalDependencies": {
 		"@playwright/test": "1.41.1",
 		"@vitest/ui": "1.2.1"
-	},
-	"dependencies": {
-		"cookie": "0.6.0"
 	}
 }

apps/console/src/lib/components/layout/go-to-top.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { derived } from 'svelte/store';
+	import { ArrowUp } from 'lucide-svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from '@spectacular/skeleton/utils';
+	import { scroll } from '$lib/stores';
+	import { browser } from '$app/environment';
+
+	interface $$Props extends HTMLButtonAttributes {
+			showAtPixel: number
+	}
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+	export let showAtPixel: $$Props['showAtPixel'] = 2000;
+
+	const elemPage = browser ? document.querySelector('#page') : null;
+
+	const gotoTop = () => {
+		if (elemPage !== null) {
+			elemPage.scrollTop = 0;
+			// elemPage.scrollIntoView({ behavior: 'smooth' });
+		}
+	};
+
+	// $: showGotoTop = $scroll.y  > showAtPixel;
+	const showGotoTop = derived(scroll, ($scroll) => {
+		return $scroll.y > showAtPixel;
+	});
+</script>
+
+{#if $showGotoTop}
+	<button
+		type="button"
+		on:click={gotoTop}
+		title="Go To Top"
+		class={cn(
+			'fixed bottom-10 right-10 z-50 text-white',
+			'transform transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none',
+			'variant-filled-secondary btn-icon btn-icon-lg',
+			className
+		)}
+	>
+		<ArrowUp />
+		<span class="sr-only">Go to top</span>
+	</button>
+{/if}

apps/console/src/lib/components/layout/header.svelte

@@ -25,7 +25,7 @@
 	import LoadingIndicatorBar from '$lib/components/layout/loading-indicator-bar.svelte';
 	import { browser } from '$app/environment';
 	import { enhance } from '$app/forms';
-	import { storeTheme } from '$lib/stores/stores';
+	import { storeTheme } from '$lib/stores';
 	import LangSwitch from '$lib/components/layout/lang-switch.svelte';
 	import * as m from '$i18n/messages';
 	import Avatar from './avatar.svelte';

apps/console/src/lib/schema/user.ts

@@ -17,7 +17,7 @@ export const userSchema = z.object({
 	receiveEmail: z.boolean().default(true),
 	createdAt: z.date().optional(),
 	updatedAt: z.date().optional(),
-	organization: z.nativeEnum(organization_enum)
+	organization: z.nativeEnum(organization_enum).default('chinthagunta')
 });
 
 export const userUpdatePasswordSchema = userSchema

apps/console/src/lib/stores/index.ts

@@ -0,0 +1,2 @@
+export { scroll, lang, storeTheme, storeVercelProductionMode } from './stores';
+export { isLoadingForm, isLoadingPage } from './loading';

apps/console/src/lib/stores/stores.ts

@@ -20,3 +20,8 @@ export const storeOnboardMethod: Writable<string> = localStorageStore('storeOnbo
  * Narrowing reactivity scope.
  */
 export const lang = derived(page, ($page) => $page.data.lang);
+
+/**
+ * current scrollLeft and scrollTop values
+ */
+export const scroll = writable<{ x: number; y: number }>({ x: 0, y: 0 });

apps/console/src/routes/+layout.svelte

@@ -7,14 +7,16 @@
 		initializeStores,
 		prefersReducedMotionStore
 	} from '@skeletonlabs/skeleton';
+	import type { ComponentEvents } from 'svelte';
 	import type { ModalComponent } from '@skeletonlabs/skeleton';
 	import { setupViewTransition } from 'sveltekit-view-transition';
 	import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
 	import { inject } from '@vercel/analytics';
 	import { ParaglideJS } from '@inlang/paraglide-js-adapter-sveltekit';
+	import GotoTop from '$lib/components/layout/go-to-top.svelte';
 	import { i18n } from '$lib/i18n';
+	import { scroll, storeTheme, storeVercelProductionMode } from '$lib/stores';
 	import Search from '$lib/modals/Search.svelte';
-	import { storeTheme, storeVercelProductionMode } from '$lib/stores/stores';
 	import { dev, browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import Header from '$lib/components/layout/header.svelte';
@@ -63,6 +65,16 @@
 	// View Transitions
 	setupViewTransition();
 
+	/**
+	 * bind current scrollX scrollY value to store
+	 */
+	function scrollHandler(event: ComponentEvents<AppShell>['scroll']) {
+		scroll.set({
+			x: event.currentTarget.scrollLeft,
+			y: event.currentTarget.scrollTop
+		});
+	}
+
 	// Reactive
 	// Disable left sidebar on homepage
 	$: slotSidebarLeft = matchPathWhitelist($page.url.pathname)
@@ -79,7 +91,12 @@
 
 <ParaglideJS {i18n}>
 	<!-- App Shell -->
-	<AppShell {slotSidebarLeft} regionPage={allyPageSmoothScroll} slotFooter="bg-black p-4">
+	<AppShell
+		{slotSidebarLeft}
+		regionPage={allyPageSmoothScroll}
+		slotFooter="bg-black p-4"
+		on:scroll={scrollHandler}
+	>
 		<!-- Header -->
 		<svelte:fragment slot="header">
 			<Header user={data?.user} />
@@ -105,3 +122,5 @@
 		</svelte:fragment>
 	</AppShell>
 </ParaglideJS>
+<!-- Change showAtPixel to 0 to show the button right after scroll -->
+<GotoTop class="bottom-10 right-10" showAtPixel={300} />

apps/docs/package.json

@@ -1,19 +1,19 @@
 {
 	"name": "docs",
-	"type": "module",
 	"version": "0.0.1",
+	"type": "module",
 	"scripts": {
-		"dev": "astro dev",
-		"start": "astro dev",
+		"astro": "astro",
 		"build": "astro check && astro build",
-		"preview": "astro preview",
-		"lint:js": "eslint .",
-		"lint:prettier": "prettier --check --plugin=prettier-plugin-astro .",
-		"lint": "concurrently pnpm:lint:*",
+		"dev": "astro dev",
+		"format": "concurrently pnpm:format:*",
 		"format:js": "eslint --fix .",
 		"format:prettier": "prettier --write .",
-		"format": "concurrently pnpm:format:*",
-		"astro": "astro"
+		"lint": "concurrently pnpm:lint:*",
+		"lint:js": "eslint .",
+		"lint:prettier": "prettier --check --plugin=prettier-plugin-astro .",
+		"preview": "astro preview",
+		"start": "astro dev"
 	},
 	"dependencies": {
 		"@astrojs/check": "0.4.1",

apps/playground/package.json

@@ -4,23 +4,23 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
+		"build": "pnpm run generate:i18n && dotenv-run -vf .env,.secrets -- vite build",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"dev": "concurrently \"typesafe-i18n\" \"dotenv-run -vf .env,.secrets -- vite dev\"",
 		"dev:debug": "DEBUG=* vite dev",
 		"dev:sw": "SW_DEV=true vite dev",
-		"build": "pnpm run generate:i18n && dotenv-run -vf .env,.secrets -- vite build",
+		"format": "prettier --write . && eslint --fix .",
+		"generate": "concurrently pnpm:generate:*",
+		"generate:i18n": "typesafe-i18n --no-watch",
+		"generate:svelte": "svelte-kit sync",
+		"lint": "prettier --check . && eslint .",
 		"preview": "dotenv-run -vf .env,.secrets -- vite preview",
 		"test": "pnpm run test:integration && pnpm run test:unit",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write . && eslint --fix .",
+		"test:integration": "playwright test",
 		"test:unit": "vitest",
-		"test:unit:ui": "vitest --ui",
 		"test:unit:coverage": "vitest run --coverage",
-		"test:integration": "playwright test",
-		"generate:svelte": "svelte-kit sync",
-		"generate:i18n": "typesafe-i18n --no-watch",
-		"generate": "concurrently pnpm:generate:*"
+		"test:unit:ui": "vitest --ui"
 	},
 	"devDependencies": {
 		"@floating-ui/dom": "1.5.4",

apps/playground/src/lib/components/layout/app-bar.svelte

@@ -24,7 +24,7 @@
 	import LogoIcon from '@spectacular/skeleton/components/logos/LogoIcon.svelte';
 	import { browser } from '$app/environment';
 	import { enhance } from '$app/forms';
-	import { storeTheme } from '$lib/stores/stores';
+	import { storeTheme } from '$lib/stores';
 	import LocaleSwitcher from '$lib/components/layout/locale-switcher.svelte';
 	const drawerStore = getDrawerStore();
 

apps/playground/src/lib/stores/index.ts

@@ -0,0 +1 @@
+export { storeTheme, storeVercelProductionMode } from './stores';

apps/playground/src/routes/(auth)/sign-out/+page.server.ts

@@ -1,18 +1,13 @@
 import { Logger } from '@spectacular/utils';
 import { redirect } from '@sveltejs/kit';
-import { getNhost, NHOST_SESSION_KEY } from '$lib/nhost';
 import type { Actions } from './$types';
 
 const log = new Logger('server:auth:logout');
 
 export const actions = {
-	default: async ({ cookies, locals: { LL } }) => {
-		const nhost = await getNhost(cookies);
+	default: async ({ locals: { LL } }) => {
 		log.debug('in logout', LL.log({ fileName: 'api/+server.ts' }));
 
-		await nhost.auth.signOut();
-		cookies.set(NHOST_SESSION_KEY, '', { httpOnly: true, path: '/', maxAge: 0 });
-
 		throw redirect(303, '/');
 		// throw redirect(303, '/sign-in')
 	}

apps/playground/src/routes/+layout.svelte

@@ -12,7 +12,7 @@
 		prefersReducedMotionStore
 	} from '@skeletonlabs/skeleton';
 	import { inject } from '@vercel/analytics';
-	import { storeTheme, storeVercelProductionMode } from '$lib/stores/stores';
+	import { storeTheme, storeVercelProductionMode } from '$lib/stores';
 	import { dev, browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { afterNavigate } from '$app/navigation';

apps/web/package.json

@@ -1,19 +1,19 @@
 {
 	"name": "web",
-	"type": "module",
 	"version": "0.0.1",
+	"type": "module",
 	"scripts": {
-		"dev": "astro dev",
-		"start": "astro dev",
+		"astro": "astro",
 		"build": "astro check && astro build",
-		"preview": "astro preview",
-		"lint:js": "eslint .",
-		"lint:prettier": "prettier --check --plugin=prettier-plugin-astro --plugin=prettier-plugin-svelte .",
-		"lint": "concurrently pnpm:lint:*",
+		"dev": "astro dev",
+		"format": "concurrently pnpm:format:*",
 		"format:js": "eslint --fix .",
 		"format:prettier": "prettier --write .",
-		"format": "concurrently pnpm:format:*",
-		"astro": "astro",
+		"lint": "concurrently pnpm:lint:*",
+		"lint:js": "eslint .",
+		"lint:prettier": "prettier --check --plugin=prettier-plugin-astro --plugin=prettier-plugin-svelte .",
+		"preview": "astro preview",
+		"start": "astro dev",
 		"test": "vitest"
 	},
 	"dependencies": {

packages/skeleton-ui/package.json

@@ -1,11 +1,8 @@
 {
 	"name": "@spectacular/skeleton",
 	"description": "Shared skeleton UI components",
-	"type": "module",
-	"module": "./components/index.ts",
-	"main": "./components/index.ts",
-	"svelte": "./components/index.ts",
 	"sideEffects": false,
+	"type": "module",
 	"exports": {
 		".": {
 			"svelte": "./components/index.ts"
@@ -29,16 +26,15 @@
 			"default": "./tailwind.config.ts"
 		}
 	},
+	"main": "./components/index.ts",
+	"svelte": "./components/index.ts",
+	"module": "./components/index.ts",
 	"scripts": {
-		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write . && eslint --fix .",
+		"lint": "prettier --check . && eslint .",
 		"test": "vitest run",
 		"test:watch": "vitest"
 	},
-	"peerDependencies": {
-		"@sveltejs/kit": "^2.0.0",
-		"svelte": "^4.0.0"
-	},
 	"devDependencies": {
 		"@floating-ui/dom": "1.5.4",
 		"@fontsource-variable/inter": "5.0.16",
@@ -73,5 +69,9 @@
 		"vite": "5.0.12",
 		"vitest": "1.2.1",
 		"zod": "3.22.4"
+	},
+	"peerDependencies": {
+		"@sveltejs/kit": "^2.0.0",
+		"svelte": "^4.0.0"
 	}
 }