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

package/src/modules/domains.svelte.ts

@@ -1,91 +0,0 @@
-import { logger } from "@logger";
-
-import { CollectionItem } from "@/types/pocketbase";
-import { CollectionModule } from "./collection.svelte";
-
-import type { ProjectType } from "./project.svelte";
-
-export interface DomainType extends CollectionItem {
-	name: string;
-	project: ProjectType;
-	origin: string;
-}
-
-const log = logger("domains");
-
-export class Domains extends CollectionModule<DomainType> {
-	url = $state<URL | null>(null);
-	current = $derived.by(() => {
-		const origin = this.url?.origin;
-		if (!origin) return null;
-		return this.data.find((d) => d.origin === origin) || null;
-	});
-
-	start() {
-		this.initCollection({
-			name: "domains",
-			filters: `project = "${this.modules.project.id}"`,
-			sort: "-updated",
-			query: { project: this.modules.project.id }, // project param is required in API rules
-			onFinish: () => this.check(),
-		});
-
-		this.getUrl();
-
-		this.fetch();
-		//this.testBadRegistration();
-	}
-
-	async check() {
-		if (this.current) {
-			log.info(`Domain already registered: ${this.current.origin}`);
-			return;
-		}
-
-		try {
-			const newDomain = await this.collection.create({
-				project: this.modules.project.id,
-				origin,
-			});
-			this.current = newDomain;
-			this.track("ok", `Domain registered`, { domain: newDomain });
-		} catch (err: any) {
-			this.track("error", "Failed to register domain", { error: err.message, origin });
-		}
-	}
-
-	async verify() {
-		if (!this.current) {
-			log.error("No current domain to verify");
-			return;
-		}
-
-		if (!this.modules.auth.user) return;
-
-		if (this.current.verified) {
-			log.info("Domain already verified:", this.current.origin);
-			return;
-		}
-
-		// Here you would implement actual verification logic, e.g., checking DNS records or a verification file.
-		await this.collection.update(this.current.id, { verified: true });
-		this.current.verified = true;
-		log.ok("Domain verified:", this.current.origin);
-	}
-
-	getUrl() {
-		this.url = new URL(window.location.href);
-	}
-
-	async testBadRegistration() {
-		try {
-			await this.collection.create({
-				origin: "https://evil-site.com",
-				project: this.modules.project.id,
-			});
-			log.warn("BAD: Registered fake origin - API rule not working!");
-		} catch (err: any) {
-			log.info("GOOD: Fake origin blocked:", err.message);
-		}
-	}
-}

package/src/modules/environment.svelte.ts

@@ -1,10 +0,0 @@
-import { Module } from "./module.svelte";
-
-export class Environment extends Module {
-	touch = $state(false);
-
-	constructor() {
-		super();
-		this.touch = window.matchMedia("(pointer: coarse)").matches;
-	}
-}

package/src/modules/events.svelte.ts

@@ -1,23 +0,0 @@
-import { Module } from "./module.svelte";
-
-export class Events extends Module {
-	listeners = $state(new Map()) as Map<string, any>;
-
-	add(
-		type: string,
-		handler: (e: any) => void,
-		options?: {
-			target?: EventTarget;
-			capture?: boolean;
-		},
-	) {
-		const { target = document, capture = false } = options || {};
-
-		if (!this.listeners.has(type)) {
-			this.listeners.set(type, []);
-		}
-
-		this.listeners.get(type).push({ handler, target });
-		target.addEventListener(type, handler, capture);
-	}
-}

package/src/modules/folders.svelte.ts

@@ -1,64 +0,0 @@
-import { logger } from "@logger";
-import { CollectionItem } from "@/types/pocketbase";
-import { CollectionModule } from "./collection.svelte";
-
-export interface FolderType extends CollectionItem {
-	name: string;
-	locked: boolean;
-}
-
-const log = logger("folders");
-
-export class Folders extends CollectionModule<FolderType> {
-	unlockedCount = $derived(this.data.filter((f) => !f.locked).length);
-	declare current: FolderType;
-
-	constructor() {
-		super();
-		this.storage<FolderType>("current", "fubi-folders-current", {} as FolderType);
-	}
-
-	async start() {
-		this.initCollection({
-			name: "folders",
-			filters: `project = "${this.modules.project.id}"`,
-			expand: "users,project.team",
-			sort: "-updated",
-			transform: (record, authUser) => {
-				const isAdmin = record.expand?.project?.expand?.team?.admin === authUser?.id;
-				const isAuthorizedUser = record.expand?.users?.some((u: { id: string }) => u.id === authUser?.id);
-
-				return {
-					...record,
-					locked: !(isAdmin || isAuthorizedUser),
-				};
-			},
-			query: { project: this.modules.project.id },
-			onChange: () => this.checkAccess(),
-			onFinish: () => {
-				this.checkAccess();
-			},
-		});
-	}
-
-	checkAccess() {
-		if (this.current.locked) {
-			log.warn("current locked");
-			this.modules.router.goto("folders");
-			this.current = {} as FolderType;
-			return;
-		}
-		if (this.unlockedCount < 2 && this.modules.router.current === "folders") {
-			log.warn("only one or no unlocked folder, redirect to pages");
-			this.modules.router.goto("pages");
-			return;
-		}
-	}
-
-	select(folder: FolderType) {
-		if (this.current.name === folder.name) return;
-		this.modules.pages.data = [];
-		this.current = folder;
-		this.checkAccess();
-	}
-}

package/src/modules/home.svelte.ts

@@ -1,29 +0,0 @@
-import { ScrollState } from "runed";
-import { logger } from "@logger";
-
-import { Module } from "./module.svelte";
-
-const log = logger("home");
-
-export class Home extends Module {
-	scroll = new ScrollState({
-		element: () => this.scrollContainer,
-	});
-
-	manualActiveState = $state<boolean>(false);
-	manualActiveTab = $state<"Pages" | "Comments">("Pages");
-
-	activeTab = $derived(
-		this.manualActiveState ? this.manualActiveTab : this.scroll.progress.x > 50 ? "Comments" : "Pages",
-	);
-
-	scrollContainer = $state<HTMLElement>();
-
-	scrollTo(tab: "Pages" | "Comments") {
-		console.log("scrollTo", tab);
-		this.manualActiveState = true;
-		this.manualActiveTab = tab;
-
-		this.scroll.x = tab === "Pages" ? 0 : (this.scrollContainer?.scrollWidth ?? 0);
-	}
-}

package/src/modules/hover.svelte.ts

@@ -1,3 +0,0 @@
-import { Module } from "./module.svelte";
-
-export class Hover extends Module {}

package/src/modules/index.ts

@@ -1,28 +0,0 @@
-import { getContext } from "svelte";
-
-import type { App } from "./app.svelte";
-
-export { Auth } from "./auth.svelte";
-export { Events } from "./events.svelte";
-export { Toolbar } from "./toolbar.svelte";
-export { Keys } from "./keys.svelte";
-export { Project } from "./project.svelte";
-export { Folders } from "./folders.svelte";
-export { Pages } from "./pages.svelte";
-export { Dom } from "./dom.svelte";
-export { Win } from "./win.svelte";
-export { Navbar } from "./navbar.svelte";
-export { Tabbar } from "./tabbar.svelte";
-export { Environment } from "./environment.svelte";
-export { Router } from "./router.svelte";
-export { Hover } from "./hover.svelte";
-export { Comments } from "./comments.svelte";
-export { Domains } from "./domains.svelte";
-export { Home } from "./home.svelte";
-
-export { watch } from "./watch.svelte";
-
-export function getModules(): App["modules"] {
-	const context = getContext("app") as App;
-	return context.modules;
-}

package/src/modules/keys.svelte.ts

@@ -1,72 +0,0 @@
-import { untrack } from "svelte";
-import { Module } from "./module.svelte";
-import { watch } from ".";
-
-type KeyEventType = {
-	key: string | null;
-	code: string | null;
-	ctrlKey: boolean;
-	metaKey: boolean;
-	altKey: boolean;
-};
-
-export class Keys extends Module {
-	handlers = new Map<string, Set<() => void>>();
-
-	active = $state<KeyEventType>({
-		key: null,
-		code: null,
-		ctrlKey: false,
-		metaKey: false,
-		altKey: false,
-	});
-
-	start() {
-		this.modules.events.add("keydown", (e: KeyboardEvent) => this.handleKeydown(e));
-		this.modules.events.add("keyup", (e: KeyboardEvent) => this.handleKeyup(e));
-	}
-
-	on(key: string, handler: () => void) {
-		if (!this.handlers.has(key)) this.handlers.set(key, new Set());
-		this.handlers.get(key)!.add(handler);
-
-		// cleanup
-		return () => {
-			this.handlers.get(key)?.delete(handler);
-		};
-	}
-
-	handleKeydown = (e: KeyboardEvent) => {
-		const { key, code, ctrlKey, metaKey, altKey } = e;
-		this.active = { key, code, ctrlKey, metaKey, altKey };
-
-		const keyHandlers = this.handlers.get(key);
-		if (keyHandlers) keyHandlers.forEach((handler) => handler());
-	};
-
-	handleKeyup = (e: KeyboardEvent) => {
-		this.reset();
-	};
-
-	hasFocus(): boolean {
-		const activeEl = document.activeElement as HTMLElement | null;
-		const shadowActiveEl = this.modules.win.el?.shadowRoot?.activeElement as HTMLElement | null;
-
-		const elementsToCheck = [activeEl, shadowActiveEl].filter(Boolean) as HTMLElement[];
-
-		for (const el of elementsToCheck) {
-			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") return true;
-			if (el.contentEditable === "true") return true;
-		}
-
-		return false;
-	}
-
-	reset() {
-		this.active.key = null;
-		this.active.code = null;
-		this.active.ctrlKey = false;
-		this.active.metaKey = false;
-		this.active.altKey = false;
-	}
-}

package/src/modules/module.svelte.ts

@@ -1,47 +0,0 @@
-import { App } from "./app.svelte";
-import { logger } from "@logger";
-import { PersistedState } from "runed";
-
-const log = logger("telemetry");
-export abstract class Module {
-	modules!: App["modules"];
-
-	init = (modules: App["modules"]) => (this.modules = modules);
-
-	start?(): void;
-
-	destroy?(): void;
-
-	track = async (type: "info" | "error" | "warn" | "ok" = "info", message: string, data?: any) => {
-		try {
-			await this.modules.pb.collection("logs").create({
-				project: this.modules.project.id,
-				user: this.modules.pb.authStore.record?.id || null,
-				type,
-				message,
-				meta: {
-					domain: this.modules.domains?.current || null,
-					folder: this.modules.folders?.current || null,
-					route: this.modules.router.current,
-				},
-				data: data ? data : null,
-			});
-
-			log[type](message, ...(data ? [data] : []));
-		} catch (e) {
-			log[type](message, ...(data ? [data] : []));
-		}
-	};
-
-	public storage<T>(propertyKey: string, key: string, initial: T) {
-		const state = new PersistedState(key, initial);
-		Object.defineProperty(this, propertyKey, {
-			get: () => state.current,
-			set: (value: T) => {
-				state.current = value;
-			},
-			enumerable: true,
-			configurable: true,
-		});
-	}
-}

package/src/modules/navbar.svelte.ts

@@ -1,11 +0,0 @@
-import { Module } from "./module.svelte";
-
-export class Navbar extends Module {
-	visible = $state(false);
-	declare title: string;
-
-	constructor() {
-		super();
-		this.storage<string>("title", "fubi-navbar-title", "" as string);
-	}
-}

package/src/modules/pages.svelte.ts

@@ -1,126 +0,0 @@
-import { CollectionItem } from "@/types/pocketbase";
-import { CollectionModule } from "./collection.svelte";
-
-import { logger } from "@logger";
-import { CommentType } from "./comments.svelte";
-export interface PageType extends CollectionItem {
-	name: string;
-}
-
-export type PageURL = {
-	origin: string;
-	protocol: string;
-	username: string;
-	password: string;
-	host: string;
-	hostname: string;
-	href: string;
-	pathname: string;
-	port: string;
-	search: string;
-	searchParams: URLSearchParams;
-};
-
-const log = logger("pages");
-
-export class Pages extends CollectionModule<PageType> {
-	url = $state<URL | null>(null);
-	filters = $derived(
-		this.modules.folders.current && this.modules.domains.current
-			? `folder = "${this.modules.folders.current?.id}" && domain = "${this.modules.domains.current?.id}"`
-			: undefined,
-	);
-	current = $state<PageType | undefined>(undefined);
-	isNew = $derived(this.current?.id === "");
-
-	async start() {
-		this.initCollection({
-			name: "pages",
-			filters: this.filters,
-			sort: "-updated",
-			expand: "comments_via_page",
-			transform: (record, authUser) => {
-				const comments = record.expand?.comments_via_page || [];
-				const total = comments.length;
-				const done = comments.filter((c: CommentType) => c.done === true).length;
-				const progress = total > 0 ? Math.round((done / total) * 100) : 0;
-
-				return {
-					...record,
-					comments: comments,
-					totalComments: total,
-					doneComments: done,
-					progress,
-				};
-			},
-			onFinish: () => {
-				this.checkCurrent();
-			},
-		});
-
-		this.trackNavigation();
-
-		$effect(() => {
-			if (this.filters) this.fetch();
-			else this.data = [];
-		});
-
-		//this.modules.router.goto("error");
-	}
-
-	checkCurrent() {
-		const current = this.data.find((page) => page.pathname === this.modules.domains.url?.pathname);
-
-		if (current) {
-			this.current = current;
-		} else {
-			this.current = {
-				id: "",
-				collectionId: "",
-				collectionName: "pages",
-				created: "",
-				updated: "",
-				name: this.getCurrentName(),
-				pathname: this.modules.domains.url?.pathname,
-			} as PageType;
-		}
-	}
-
-	getCurrentName(): string {
-		if (!this.modules.domains.url) return "";
-
-		const path = this.modules.domains.url?.pathname || "";
-		const pageTitle = document?.querySelector('meta[name="page-title"]') as HTMLMetaElement;
-		const ogTitle = document?.querySelector('meta[property="og:title"]') as HTMLMetaElement;
-		const title = document?.title as string;
-
-		const name = path === "/" ? "Homepage" : pageTitle?.content || ogTitle?.content || title || path;
-
-		return name;
-	}
-
-	handleRouteChange(): void {
-		this.fetch(); // TODO: make sure this is right
-		this.modules.domains.getUrl();
-		log.info("Route changed to", this.modules.domains.url?.pathname);
-	}
-
-	trackNavigation(): void {
-		// Intercept pushState/replaceState
-		const originalPush = history.pushState;
-		const originalReplace = history.replaceState;
-
-		history.pushState = (...args) => {
-			originalPush.apply(history, args);
-			this.handleRouteChange();
-		};
-
-		history.replaceState = (...args) => {
-			originalReplace.apply(history, args);
-			this.handleRouteChange();
-		};
-
-		// Browser back/forward
-		this.modules.events.add("popstate", () => this.handleRouteChange(), { target: window });
-	}
-}

package/src/modules/project.svelte.ts

@@ -1,70 +0,0 @@
-import { RecordModel } from "pocketbase";
-
-import { CollectionModule } from "./collection.svelte";
-import { CollectionItem } from "@/types/pocketbase";
-
-import { logger } from "@logger";
-const log = logger("project");
-
-import { UserType } from "@/types/user";
-
-export interface ProjectType extends CollectionItem {
-	name: string;
-	origin: string;
-}
-
-export class Project extends CollectionModule<ProjectType> {
-	id: string = $state("");
-	current = $state({} as ProjectType | null);
-	isTeamMember = $state<boolean | null>(null);
-
-	constructor(projectId: string) {
-		super();
-		this.id = projectId;
-	}
-
-	start() {
-		this.initCollection({
-			name: "projects",
-			filters: `id = "${this.id}"`,
-			sort: "-updated",
-			perPage: 1,
-		});
-	}
-
-	/** Checks if the user is a team member or admin of the current project
-	 * @param userId - ID of the user to check
-	 * @returns boolean - true if user is a team member or admin, false otherwise
-	 */
-	async checkTeamMembership(userId: string): Promise<boolean> {
-		try {
-			const result = await this.modules.pb.collection("projects").getList(1, 1, {
-				filter: `id = "${this.id}" && (team.users.id = "${userId}" || team.admin.id = "${userId}")`,
-				query: { project: this.id },
-			});
-
-			this.isTeamMember = result.items.length > 0;
-			log.info(this.isTeamMember ? "User is a team member" : "User is an external user");
-
-			return this.isTeamMember;
-		} catch (err) {
-			this.track("error", "Team check failed:", err);
-			this.isTeamMember = false;
-			return false;
-		}
-	}
-
-	async fetchProject() {
-		log.info(`Fetching project with id = ${this.id}`);
-
-		try {
-			const record = await this.modules.pb.collection("projects").getOne<RecordModel>(this.id);
-			this.current = record as ProjectType;
-			return record as ProjectType;
-		} catch (err) {
-			log.error("Invalid or no projectId found:", err);
-			this.current = null;
-			return null;
-		}
-	}
-}

package/src/modules/router.svelte.ts

@@ -1,99 +0,0 @@
-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);
-	}
-}