fubi 0.4.8 → 1.0.0-beta.1

package/src/modules/router.svelte.ts

@@ -0,0 +1,99 @@
+import { mount } from "svelte";
+import { routes } from "../lib/routes";
+import { logger } from "../lib/logger";
+import { Module } from "./module.svelte";
+
+import { UserType } from "../types/user";
+
+const NAVIGATION_DURATION = 400;
+
+const log = logger("router");
+
+export class Router extends Module {
+	routes = $state(routes);
+	navigating = $state(false);
+	direction = $state<"forward" | "back">("forward");
+
+	previous = $state(null as string | null);
+	declare current: string;
+	next = $state(null as string | null);
+
+	constructor() {
+		super();
+		this.storage<string>("current", "fubi-router-current", "login");
+	}
+
+	start() {
+		$effect(() => {
+			if (this.modules.win.el) this.mountPages();
+		});
+
+		console.log(routes);
+	}
+
+	mountPages() {
+		Object.entries(this.routes).forEach(([name, route]) => {
+			log.info("Mounting page:", name);
+			if (!this.modules.win.el) return;
+			mount(route.component, { target: this.modules.win.el });
+		});
+	}
+
+	determineRoute(user: UserType | null, isAllowed: boolean) {
+		if (!user) return ["login", "back"];
+		if (!isAllowed) return ["login", "back"];
+
+		if (this.current === "login") {
+			const accessibleFolders = this.modules.folders.data.filter((f) => f.unlocked);
+			if (accessibleFolders.length === 1) return ["home", "forward"];
+			else return ["folders", "forward"];
+		}
+
+		if (this.current === "pages") return ["comments"];
+
+		return [this.current || "home"];
+	}
+
+	hasRoute(name: string) {
+		return name in this.routes;
+	}
+
+	goto(name: string, direction: "forward" | "back" = "forward") {
+		if (!this.hasRoute(name) || this.current === name) {
+			log.error("Invalid or same route, cannot navigate to:", name);
+			return;
+		}
+		if (!this.modules.auth.user) {
+			log.warn("No users module, cannot navigate.");
+			this.transition("login", "back");
+			return;
+		}
+
+		const nextRoute = this.modules.auth.user ? name : "login";
+		this.transition(nextRoute, direction);
+	}
+
+	private transition(pageName: string, direction: "forward" | "back") {
+		if (this.navigating) {
+			log.warn("Already navigating, ignoring.");
+			return;
+		}
+
+		this.navigating = true;
+		this.direction = direction;
+
+		if (direction === "forward") this.next = pageName;
+		else this.previous = pageName;
+
+		this.modules.win.el?.classList.add(`router-transition-${direction}`);
+
+		setTimeout(() => {
+			this.navigating = false;
+			this.previous = this.current;
+			this.current = pageName;
+			this.next = null;
+			this.modules.win.el?.classList.remove(`router-transition-${direction}`);
+			this.modules.win.focusPageContent();
+		}, NAVIGATION_DURATION);
+	}
+}

package/src/modules/tabbar.svelte.ts

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,34 @@
+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

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

package/src/modules/win.svelte.ts

@@ -0,0 +1,273 @@
+// 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

@@ -0,0 +1,32 @@
+<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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,53 @@
+<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

@@ -0,0 +1,44 @@
+<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

@@ -0,0 +1,75 @@
+<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

@@ -0,0 +1,11 @@
+<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>