rspace-online/lib/folk-bookmark.ts

import { FolkShape } from "./folk-shape";
import { css, html } from "./tags";

const styles = css`
	:host {
		background: var(--rs-bg-surface, #fff);
		color: var(--rs-text-primary, #1e293b);
		border-radius: 10px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		min-width: 240px;
		min-height: 100px;
		cursor: pointer;
		overflow: hidden;
	}

	.card {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border-radius: 10px;
	}

	.card-image {
		width: 100%;
		height: 160px;
		object-fit: cover;
		display: block;
		flex-shrink: 0;
	}

	.card-body {
		padding: 12px 14px;
		display: flex;
		flex-direction: column;
		gap: 6px;
		flex: 1;
		min-height: 0;
	}

	.card-title {
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--rs-text-primary, #1e293b);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.card-description {
		font-size: 12px;
		color: #64748b;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.card-domain {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 11px;
		color: #94a3b8;
		margin-top: auto;
		padding-top: 4px;
	}

	.card-favicon {
		width: 14px;
		height: 14px;
		border-radius: 2px;
	}

	.url-input-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 24px;
		gap: 12px;
	}

	.url-input-icon {
		font-size: 28px;
	}

	.url-input-label {
		font-size: 13px;
		color: #94a3b8;
	}

	.url-input {
		width: 100%;
		max-width: 280px;
		padding: 10px 14px;
		border: 2px solid var(--rs-input-border, #e2e8f0);
		border-radius: 8px;
		font-size: 13px;
		outline: none;
		background: var(--rs-input-bg, #fff);
		color: var(--rs-input-text, inherit);
	}

	.url-input:focus {
		border-color: #6366f1;
	}

	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: #94a3b8;
		font-size: 13px;
	}
`;

declare global {
	interface HTMLElementTagNameMap {
		"folk-bookmark": FolkBookmark;
	}
}

export class FolkBookmark extends FolkShape {
	static override tagName = "folk-bookmark";

	static {
		const sheet = new CSSStyleSheet();
		const parentRules = Array.from(FolkShape.styles.cssRules)
			.map((r) => r.cssText)
			.join("\n");
		const childRules = Array.from(styles.cssRules)
			.map((r) => r.cssText)
			.join("\n");
		sheet.replaceSync(`${parentRules}\n${childRules}`);
		this.styles = sheet;
	}

	#url: string | null = null;
	#title: string = "";
	#description: string = "";
	#image: string | null = null;
	#domain: string = "";

	get url() { return this.#url; }
	set url(value: string | null) {
		this.#url = value;
		this.requestUpdate("url");
		this.dispatchEvent(new CustomEvent("url-change", { detail: { url: value } }));
	}

	get bookmarkTitle() { return this.#title; }
	set bookmarkTitle(v: string) { this.#title = v; }

	get description() { return this.#description; }
	set description(v: string) { this.#description = v; }

	get image() { return this.#image; }
	set image(v: string | null) { this.#image = v; }

	get domain() { return this.#domain; }
	set domain(v: string) { this.#domain = v; }

	override createRenderRoot() {
		const root = super.createRenderRoot();

		this.#url = this.getAttribute("url") || null;

		const wrapper = document.createElement("div");
		wrapper.innerHTML = html`
			<div class="url-input-container">
				<span class="url-input-icon">🔖</span>
				<span class="url-input-label">Enter a URL to create a bookmark card</span>
				<input
					type="text"
					class="url-input"
					placeholder="https://example.com"
				/>
			</div>
		`;

		const slot = root.querySelector("slot");
		const containerDiv = slot?.parentElement as HTMLElement;
		if (containerDiv) {
			containerDiv.replaceWith(wrapper);
		}

		const urlInputContainer = wrapper.querySelector(".url-input-container") as HTMLElement;
		const urlInput = wrapper.querySelector(".url-input") as HTMLInputElement;

		const handleUrlSubmit = () => {
			let inputUrl = urlInput.value.trim();
			if (!inputUrl) return;
			if (!inputUrl.startsWith("http://") && !inputUrl.startsWith("https://")) {
				inputUrl = `https://${inputUrl}`;
			}
			this.url = inputUrl;
			this.#fetchAndRender(wrapper, urlInputContainer);
		};

		urlInput.addEventListener("keydown", (e) => {
			if (e.key === "Enter") {
				e.preventDefault();
				handleUrlSubmit();
			}
		});

		urlInput.addEventListener("blur", () => {
			if (urlInput.value.trim()) handleUrlSubmit();
		});

		// If URL is already set with cached data, render card directly
		if (this.#url && this.#title) {
			this.#renderCard(wrapper, urlInputContainer);
		} else if (this.#url) {
			this.#fetchAndRender(wrapper, urlInputContainer);
		}

		// Click to open URL in new tab
		wrapper.addEventListener("click", (e) => {
			if ((e.target as HTMLElement).tagName === "INPUT") return;
			if (this.#url) {
				window.open(this.#url, "_blank", "noopener,noreferrer");
			}
		});

		return root;
	}

	async #fetchAndRender(wrapper: HTMLElement, urlInputContainer: HTMLElement) {
		if (!this.#url) return;

		// Show loading state
		urlInputContainer.innerHTML = `<div class="loading">Loading preview…</div>`;

		try {
			const res = await fetch(`/api/link-preview?url=${encodeURIComponent(this.#url)}`);
			if (res.ok) {
				const data = await res.json();
				this.#title = data.title || "";
				this.#description = data.description || "";
				this.#image = data.image || null;
				this.#domain = data.domain || "";
			}
		} catch {
			// Fallback: derive domain from URL
		}

		// Ensure we have at least domain
		if (!this.#domain && this.#url) {
			try {
				this.#domain = new URL(this.#url).hostname.replace("www.", "");
			} catch {}
		}
		if (!this.#title) {
			this.#title = this.#domain || this.#url || "Link";
		}

		this.#renderCard(wrapper, urlInputContainer);
	}

	#renderCard(wrapper: HTMLElement, urlInputContainer: HTMLElement) {
		urlInputContainer.remove();

		const card = document.createElement("div");
		card.className = "card";

		let cardHtml = "";

		if (this.#image) {
			cardHtml += `<img class="card-image" src="${this.#escapeAttr(this.#image)}" alt="" draggable="false" />`;
		}

		const faviconUrl = this.#url
			? `https://www.google.com/s2/favicons?domain=${new URL(this.#url).hostname}&sz=32`
			: "";

		cardHtml += `
			<div class="card-body">
				<div class="card-title">${this.#escapeHtml(this.#title)}</div>
				${this.#description ? `<div class="card-description">${this.#escapeHtml(this.#description)}</div>` : ""}
				<div class="card-domain">
					${faviconUrl ? `<img class="card-favicon" src="${this.#escapeAttr(faviconUrl)}" onerror="this.style.display='none'" />` : ""}
					<span>${this.#escapeHtml(this.#domain)}</span>
				</div>
			</div>
		`;

		card.innerHTML = cardHtml;

		// Handle image load error — hide image area
		const img = card.querySelector(".card-image") as HTMLImageElement;
		if (img) {
			img.onerror = () => img.remove();
		}

		wrapper.appendChild(card);
	}

	#escapeHtml(str: string): string {
		return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
	}

	#escapeAttr(str: string): string {
		return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
	}

	static override fromData(data: Record<string, any>): FolkBookmark {
		const shape = FolkShape.fromData(data) as FolkBookmark;
		if (data.url) shape.url = data.url;
		if (data.title) shape.bookmarkTitle = data.title;
		if (data.description) shape.description = data.description;
		if (data.image) shape.image = data.image;
		if (data.domain) shape.domain = data.domain;
		return shape;
	}

	override toJSON() {
		return {
			...super.toJSON(),
			type: "folk-bookmark",
			url: this.url,
			title: this.#title,
			description: this.#description,
			image: this.#image,
			domain: this.#domain,
		};
	}

	override applyData(data: Record<string, any>): void {
		super.applyData(data);
		if ("url" in data && this.url !== data.url) {
			this.url = data.url;
		}
		if ("title" in data) this.#title = data.title;
		if ("description" in data) this.#description = data.description;
		if ("image" in data) this.#image = data.image;
		if ("domain" in data) this.#domain = data.domain;
	}
}