fubi 1.0.0-beta.3 → 1.0.0-beta.5

package/src/modules/tabbar.svelte.ts

@@ -1,21 +0,0 @@
-import { Module } from "./module.svelte";
-
-export class Tabbar extends Module {
-	visible = $state(false);
-
-	tabActive = $derived(
-		(this.modules.router.navigating
-			? this.modules.router.direction === "forward"
-				? this.modules.router.next
-				: this.modules.router.previous
-			: this.modules.router.current) === "comments"
-			? "comments"
-			: (this.modules.router.navigating
-						? this.modules.router.direction === "forward"
-							? this.modules.router.next
-							: this.modules.router.previous
-						: this.modules.router.current) === "folders"
-				? "folders"
-				: "pages",
-	);
-}

package/src/modules/toolbar.svelte.ts

@@ -1,34 +0,0 @@
-import type { App } from "./app.svelte";
-import { hasFocus } from "@utils";
-import { Module } from "./module.svelte";
-
-export class Toolbar extends Module {
-	wrapper!: HTMLElement;
-	hovering = $state(false);
-	focusWithin = $state(false);
-
-	visible = $state(false);
-	minimized = $state(true);
-
-	logo = $state(true);
-
-	constructor(wrapper: HTMLElement) {
-		super();
-		this.wrapper = wrapper;
-	}
-
-	start() {
-		this.modules.keys.on("c", () => {
-			if (hasFocus()) return;
-			console.log("you pressed c, should enable comment mode");
-		});
-	}
-
-	handlePointerEnter() {
-		this.hovering = true;
-	}
-
-	handlePointerLeave() {
-		this.hovering = false;
-	}
-}

package/src/modules/watch.svelte.ts

@@ -1,8 +0,0 @@
-import { untrack } from "svelte";
-
-export function watch(fn: () => void, deps: () => any[]) {
-	$effect(() => {
-		deps();
-		untrack(fn);
-	});
-}

package/src/modules/win.svelte.ts

@@ -1,273 +0,0 @@
-// modules
-import { Spring } from "svelte/motion";
-
-import { hasFocus } from "@utils";
-import { Module } from "./module.svelte.js";
-import { haptics } from "@lib/haptics.js";
-
-const MIDDLE_TO_TOP_TRESHOLD = 50; // px distance from middle to top to trigger open
-const MIDDLE_TO_BOTTOM_TRESHOLD = 250; // px distance from middle to bottom to trigger close
-
-const BREAKPOINT_TRESHOLD = 30;
-
-export class Win extends Module {
-	el = $state(null as HTMLDivElement | null);
-
-	declare opened: boolean;
-
-	contentScroll = $state<number>(0);
-
-	height = new Spring(0, { stiffness: 0.2, damping: 0.4 });
-
-	breakpoints = $state({
-		bottom: 0,
-		middle: this.calculateBreakpoint(),
-		// get client height
-		top: this.calculateBreakpoint(0.99),
-	});
-	currentBreakpoint = $state<number>(this.breakpoints.middle);
-	nextBreakpoint = $state<number>(this.breakpoints.middle);
-
-	dragging = $state({
-		active: false,
-		start: 0,
-		current: 0,
-		difference: 0,
-		startHeight: 0,
-		height: 0,
-		direction: null as "up" | "down" | null,
-		hasMoved: false,
-	});
-
-	constructor() {
-		super();
-		this.storage<boolean>("opened", "fubi-win-opened", true);
-	}
-
-	start() {
-		this.modules.keys.on("m", () => {
-			if (!hasFocus()) this.toggle();
-		});
-
-		this.modules.keys.on("Escape", () => {
-			if (!hasFocus()) this.close();
-		});
-
-		// check if the window is opened
-		if (this.opened) {
-			this.modules.dom.scroll.disable({ touchOnly: true });
-		}
-
-		// Setup touch handling
-		this.setupTouchHandling();
-	}
-
-	setupTouchHandling() {
-		// Wait for element
-		if (!this.el) {
-			requestAnimationFrame(() => this.setupTouchHandling());
-			return;
-		}
-
-		let touchStartY = 0;
-		let startScrollTop = 0;
-		let deciding = true;
-
-		// Use native touch events for better control
-		this.el.addEventListener(
-			"touchstart",
-			(e) => {
-				if (!this.opened) return;
-
-				touchStartY = e.touches[0].clientY;
-				startScrollTop = this.contentScroll;
-				deciding = true;
-			},
-			{ passive: true },
-		);
-
-		this.el.addEventListener(
-			"touchmove",
-			(e) => {
-				if (!this.opened || !deciding) return;
-
-				const touchY = e.touches[0].clientY;
-				const diff = touchY - touchStartY;
-
-				// After 5px of movement, decide what to do
-				if (Math.abs(diff) > 5) {
-					const scrollable = this.el?.querySelector(
-						".page-content, .content, [data-scrollable]",
-					) as HTMLElement;
-					const isAtBottom = scrollable
-						? this.contentScroll >= scrollable.scrollHeight - scrollable.clientHeight - 1
-						: false;
-
-					const shouldPreventScroll =
-						(this.contentScroll <= 0 && diff > 0) || // At top, dragging down
-						(isAtBottom && diff < 0 && this.currentBreakpoint !== this.breakpoints.top); // At bottom, dragging up
-
-					if (shouldPreventScroll) {
-						e.preventDefault(); // This will prevent the scroll
-						deciding = false; // Decision made
-					} else {
-						deciding = false; // Let it scroll
-					}
-				}
-			},
-			{ passive: false },
-		);
-	}
-
-	open() {
-		this.currentBreakpoint = this.breakpoints.middle;
-		this.opened = true;
-		this.modules.dom.scroll.disable({ touchOnly: true });
-
-		// focus element
-		this.focusPageContent();
-	}
-	close() {
-		this.currentBreakpoint = this.breakpoints.bottom;
-		this.opened = false;
-		this.modules.dom.scroll.enable();
-	}
-	toggle() {
-		this[this.opened ? "close" : "open"]();
-	}
-
-	getCurrentHeight(max: boolean = false): number {
-		if (!this.el) return 0;
-
-		const style = getComputedStyle(this.el);
-		const height = style[max ? "maxHeight" : "height"];
-
-		if (!height || height === "none") return 0;
-
-		return parseFloat(height) || 0;
-	}
-
-	calculateBreakpoint(fragment: number = 0.55): number {
-		const deviceHeight = window.innerHeight;
-		const calculated = deviceHeight * fragment;
-		return Math.max(200, Math.min(1000, calculated));
-	}
-
-	focusPageContent() {
-		const currentPageName = this.modules.router.current;
-		const page = this.el?.querySelectorAll(`[data-fubi-page="${currentPageName}"]`);
-		const pageContent = page?.[0]?.querySelector(".page-content") as HTMLDivElement | null;
-
-		if (pageContent) pageContent.focus();
-	}
-
-	drag = {
-		start: (e: PointerEvent) => {
-			if (!this.modules.environment.touch) return;
-
-			// DON'T stop propagation here - we don't know if it's a drag yet!
-			// Check if the target is an interactive element
-			const target = e.target as HTMLElement;
-			if (target.closest("button, a, input, label, textarea, select")) {
-				return; // Don't start drag on interactive elements
-			}
-
-			this.dragging.hasMoved = false;
-			this.dragging.active = true;
-			this.dragging.start = e.y;
-			this.dragging.startHeight = this.getCurrentHeight();
-			this.dragging.height = this.dragging.startHeight;
-		},
-
-		move: (e: PointerEvent) => {
-			if (!this.dragging.active || !this.modules.environment.touch) return;
-
-			this.dragging.current = e.y;
-			this.dragging.difference = this.dragging.current - this.dragging.start;
-
-			// Only process if we're actually dragging (not scrolling)
-			// The touch handler above should have prevented scroll if needed
-			if (Math.abs(this.dragging.difference) > 2) {
-				this.dragging.hasMoved = true;
-
-				const isAtTop = this.contentScroll <= 0;
-				const isDraggingDown = this.dragging.difference > 0;
-
-				// Only actually drag if we're in a drag scenario
-				// (at top dragging down, or at bottom dragging up)
-				if (!(isAtTop && isDraggingDown)) {
-					// Check if at bottom
-					const scrollable = this.el?.querySelector(
-						".page-content, .content, [data-scrollable]",
-					) as HTMLElement;
-					const isAtBottom = scrollable
-						? this.contentScroll >= scrollable.scrollHeight - scrollable.clientHeight - 1
-						: false;
-					const isDraggingUp = this.dragging.difference < 0;
-
-					if (!(isAtBottom && isDraggingUp && this.currentBreakpoint !== this.breakpoints.top)) {
-						// We shouldn't be dragging, bail out
-						this.dragging.active = false;
-						return;
-					}
-				}
-			}
-
-			if (this.currentBreakpoint === this.breakpoints.middle) {
-				if (
-					this.dragging.direction === "up" &&
-					this.dragging.height > this.breakpoints.middle + BREAKPOINT_TRESHOLD
-				) {
-					this.nextBreakpoint = this.breakpoints.top;
-				} else if (
-					this.dragging.direction === "down" &&
-					this.dragging.height < this.breakpoints.middle - BREAKPOINT_TRESHOLD
-				) {
-					this.nextBreakpoint = this.breakpoints.bottom;
-				} else {
-					this.nextBreakpoint = this.breakpoints.middle;
-				}
-			}
-
-			if (this.currentBreakpoint === this.breakpoints.top) {
-				if (
-					this.dragging.direction === "down" &&
-					this.dragging.height < this.breakpoints.top - MIDDLE_TO_TOP_TRESHOLD
-				) {
-					this.nextBreakpoint = this.breakpoints.middle;
-				} else {
-					this.nextBreakpoint = this.breakpoints.top;
-				}
-			}
-
-			this.dragging.height = this.dragging.startHeight - this.dragging.difference;
-			this.dragging.direction = this.dragging.difference < 0 ? "up" : "down";
-		},
-
-		end: (e: PointerEvent) => {
-			// Always prevent event propagation if we were in drag mode
-			// This stops the click from reaching the backdrop button
-			if (this.dragging.active || this.dragging.hasMoved) {
-				e.preventDefault();
-				e.stopPropagation();
-				e.stopImmediatePropagation();
-			}
-
-			if (!this.dragging.active) return;
-
-			if (this.dragging.hasMoved) {
-				this.currentBreakpoint = this.nextBreakpoint;
-				if (this.currentBreakpoint === this.breakpoints.bottom) this.close();
-			}
-
-			// Reset all drag state
-			this.dragging.active = false;
-			this.dragging.current = 0;
-			this.dragging.startHeight = 0;
-			this.dragging.height = 0;
-			this.dragging.difference = 0;
-			this.dragging.direction = null;
-			this.dragging.hasMoved = false;
-		},
-	};
-}

package/src/pages/Comments.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { getModules } from "@modules";
-
-	// components
-	import Page from "@ui/Page.svelte";
-
-	import Navbar from "@components/ui/Navbar.svelte";
-	import CommentCard from "@components/comment/CommentCard.svelte";
-
-	// icons
-	import { SquareLock02Icon } from "@hugeicons-pro/core-solid-rounded";
-	import ListLoader from "@components/ui/ListLoader.svelte";
-
-	const { comments, pages } = getModules();
-</script>
-
-
-<Page name="comments" title={pages?.current?.name}>
-	<div class="flex flex-col gap-8">
-		{#each comments?.data ?? [] as comment, index }
-			<CommentCard {...comment} />
-		{:else}
-			{#if comments?.loading}
-				<ListLoader spinner />
-			{:else if comments?.error}
-				<p>Error loading</p>
-			{:else if comments?.empty}
-				<p class="p-4 text-center text-sm text-gray-500">No comments</p>
-			{/if}
-		{/each}
-	</div>
-</Page>

package/src/pages/Error.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import { getModules } from "@modules";
-
-	// components
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-
-	import Page from "@ui/Page.svelte";
-	import ButtonSmall from "@components/ui/ButtonSmall.svelte";
-
-	// icons
-	import { AlertDiamondIcon } from "@hugeicons-pro/core-solid-rounded";
-	import Button from "@components/ui/Button.svelte";
-
-</script>
-<Page name="error" title="Error">
-	<div class="h-full flex-center flex-col gap-16">
-		<div class="flex-center flex-col gap-8 text-center bg-red-500/20 glass w-full p-16 rounded-[16px]">
-			<HugeiconsIcon icon={AlertDiamondIcon} className="size-32 text-red-400" />
-			<p class="text-sm text-red-200">An unexpected error has occurred. Please try again later.</p>
-			<div class="flex-center w-full mt-4">
-				<ButtonSmall onclick={() => window.location.reload()}>Refresh</ButtonSmall>
-			</div>
-		</div>
-	</div>
-</Page>

package/src/pages/Folders.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-	import { getModules } from "@modules";
-	const { router, folders } = getModules();
-
-	import type { FolderType } from "@modules/folders.svelte";
-	
-	// components
-	import Page from "@ui/Page.svelte";
-	import List from "@ui/List.svelte";
-	import ListItem from "@ui/ListItem.svelte";
-	import ListLoader from "@ui/ListLoader.svelte";
-	import Chip from "@ui/Chip.svelte";
-	
-	// icons
-	import {
-		Folder01Icon,
-		FolderLockedIcon,
-		User02Icon
-	} from "@hugeicons-pro/core-solid-rounded";
-
-	const handleFolderSelection = (folder: FolderType) => {
-		folders.select(folder);
-		router.goto("pages");
-	}
-</script>
-
-<Page name="folders" title="Folders">
-	<List>
-		{#each folders?.data ?? [] as folder, index }
-			<ListItem
-				title={folder.name}
-				subtitle={folder.locked && "You don't have access"}
-				icon={folder.locked ? FolderLockedIcon : Folder01Icon}
-				disabled={folder.locked ?? null}
-				{index}
-				active={folders.current?.id === folder.id}
-				onclick={() => folder ? handleFolderSelection(folder) : null}
-			>
-				{#snippet after()}
-					{#if !folder.locked}<Chip theme="sky" icon={User02Icon}>{folder.users.length}</Chip>{/if}
-				{/snippet}
-			</ListItem>
-		{:else}
-			{#if folders?.loading}
-				<ListLoader spinner />
-			{:else if folders?.error}
-				<p>Error loading</p>
-			{:else if folders?.empty}
-				<p class="p-4 text-center text-sm text-gray-500">No folders</p>
-			{/if}
-		{/each}
-	</List> 
-</Page>

package/src/pages/Login.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { getModules } from "@modules";
-
-	// components
-	import Page from "@ui/Page.svelte";
-	import List from "@ui/List.svelte";
-	import Input from "@ui/Input.svelte";
-	import Button from "@ui/Button.svelte";
-	import Msg from "@ui/Msg.svelte";
-
-
-
-	// icons
-	import { SquareLock02Icon } from "@hugeicons-pro/core-solid-rounded";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import Logo from "@components/ui/Logo.svelte";
-
-	const { auth, router } = getModules();
-
-	let email = $state("");
-	let password = $state("");
-
-	const handleLogin = (e: Event) => {
-		e.preventDefault();
-		auth.login(email, password);
-		// password = "";
-	}
-</script>
-
-
-<Page name="login" navbar={false} tabbar={false}>
-	<form class="flex flex-col gap-8 px-8 w-full" onsubmit={(e) => handleLogin(e)}>
-		<div class="flex-center flex-col pt-16">
-			<HugeiconsIcon icon={SquareLock02Icon} className="size-32 text-sky-500" />
-			<p class="text-[18px]/none">Sign In to fubi</p>
-		</div>
-		<List>
-			<Input name="email" type="email" label="E-mail" autocomplete="email" required bind:value={email} />
-			<Input name="password" type="password" label="Password" autocomplete="password" required bind:value={password} />
-		</List>
-		<Msg msg={auth.msg} />
-		<Button loading={auth.loading} disabled={auth.loading || router.navigating}>Login</Button>
-	</form>
-</Page>

package/src/pages/Pages.svelte

@@ -1,75 +0,0 @@
-<script lang="ts">
-	import { getModules } from "@modules";
-	const { win, folders, router, domains, pages } = getModules();
-
-	// components
-	import List from "@ui/List.svelte";
-	import ListItem from "@ui/ListItem.svelte";
-	import ListLoader from "@ui/ListLoader.svelte";
-	import Page from "@ui/Page.svelte";
-	import Chip from "@ui/Chip.svelte";
-	import Navbar from "@ui/Navbar.svelte";
-	import Loader from "@ui/Loader.svelte";
-
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-
-	// icons
-	import {
-		FileEmpty02Icon,
-		File02Icon,
-		AiFileIcon
-	} from "@hugeicons-pro/core-solid-rounded";
-	import Icon from "@components/ui/Icon.svelte";
-</script>
-
-<Page name="pages" title={folders.current.name}>
-	<List>
-		{#if pages.isNew}
-			<ListItem
-				classIcon="text-white"
-				title={pages.current?.name}
-				subtitle="No Comments"
-				active
-				onclick={() => router.goto("comments")}
-			>
-				{#snippet start()}
-						<Loader progress={0} />
-				{/snippet}
-				{#snippet after()}
-					<Chip theme="sky">Current</Chip>
-				{/snippet}
-			</ListItem>
-		{/if}
-		{#each pages?.data as { comments, totalComments, doneComments, progress, pathname, name }, index}
-			<a href={pathname === domains?.url?.pathname ? "#" : pathname}>
-				<ListItem
-					class={comments.length > 0 ? "text-white" : pathname === domains?.url?.pathname ? "text-white" : "text-neutral-400"}
-					classIcon={pathname === domains?.url?.pathname ? "text-slate-500" : ""}
-					title={name}
-					subtitle={comments.length > 0 ? `${doneComments}/${totalComments} Done` : "No Comments"}
-					active={pathname === domains?.url?.pathname}
-					{index}
-					onclick={pathname === domains?.url?.pathname ? () => router.goto("comments") : null}
-				>
-					{#snippet start()}
-						{#if progress === 100}
-							<Icon name="check-circle" class="size-22 text-sky-500" />
-						{:else}
-							<Loader progress={progress} />
-						{/if}
-					{/snippet}
-
-					{#snippet after()}
-						{#if pathname === domains?.url?.pathname}<Chip theme="sky">Current</Chip>{/if}
-					{/snippet}
-				</ListItem>
-			</a>
-		{:else}
-			{#if pages?.loading}
-				<ListLoader spinner />
-			{:else if pages?.error}
-				<p>Error loading</p>
-			{/if}
-		{/each}
-	</List>
-</Page>

package/src/pages/Thread.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { getModules } from "@modules";
-
-	// components
-	import Page from "@ui/Page.svelte";
-</script>
-
-
-<Page name="thread" tabbar={false} navbar={false}>
-	<p>Thread</p>
-</Page>

package/src/styles/global.css

@@ -1,16 +0,0 @@
-.fubi-scroll-disabled {
-	overflow: hidden !important;
-	touch-action: none;
-}
-
-@media (pointer: coarse) {
-	.fubi-scroll-touch-disabled,
-	.fubi-scroll-touch-disabled body {
-		overflow: hidden !important;
-		touch-action: none;
-	}
-}
-
-html {
-	touch-action: pan-y;
-}

package/src/styles/router.css

@@ -1,79 +0,0 @@
-.page {
-	transform: translateX(calc(100% + var(--fubi-window-right))) rotateY(var(--fubi-rotate-to));
-	position: absolute;
-	transition: box-shadow 300ms ease-out;
-}
-
-.page.page-current {
-	transform: translateX(0%);
-	position: relative;
-}
-
-.window {
-	perspective: 1200px;
-}
-
-/* Router animations */
-
-/* forward, next */
-.router-transition-forward .page-next {
-	animation: next-to-current var(--fubi-router-duration-forward) forwards;
-	animation-timing-function: var(--ease-out-cubic);
-	z-index: 2;
-}
-
-/* forward, current */
-.router-transition-forward .page-current {
-	animation: current-to-prev var(--fubi-router-duration-forward) forwards;
-	animation-timing-function: var(--ease-in-out);
-	z-index: 1;
-}
-
-/* back, previous */
-.router-transition-back .page-current {
-	animation: current-to-next var(--fubi-router-duration-back) forwards;
-	animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
-}
-
-/* back, current */
-.router-transition-back .page-previous {
-	animation: prev-to-current var(--fubi-router-duration-forward) forwards;
-	animation-timing-function: var(--ease-out);
-}
-
-@keyframes next-to-current {
-	from {
-		transform: translateX(calc(100% + var(--fubi-window-right))) rotateY(var(--fubi-rotate-to));
-	}
-	to {
-		transform: translateX(0%) rotateY(0deg);
-	}
-}
-
-@keyframes current-to-next {
-	from {
-		transform: translateX(0%) rotateY(0deg);
-	}
-	to {
-		transform: translateX(calc(100% + var(--fubi-window-right))) rotateY(var(--fubi-rotate-to));
-	}
-}
-
-@keyframes current-to-prev {
-	from {
-		transform: translateX(0%) translateZ(0) rotateY(0deg);
-	}
-	to {
-		transform: translateX(var(--fubi-translate-x-difference)) translateZ(var(--fubi-translate-z-difference))
-			rotateY(0deg);
-	}
-}
-@keyframes prev-to-current {
-	from {
-		transform: translateX(var(--fubi-translate-x-difference)) translateZ(var(--fubi-translate-z-difference))
-			rotateY(0deg);
-	}
-	to {
-		transform: translateX(0%) translateZ(0) rotateY(0deg);
-	}
-}