@@ -0,0 +1,639 @@ +import { A, useParams, useNavigate } from '@solidjs/router'; +import { createQuery, useQueryClient } from '@tanstack/solid-query'; +import { Show, Switch, Match, type Component, createSignal, createMemo, createEffect, onCleanup } from 'solid-js'; +import type { ResourceUri } from '@atcute/lexicons/syntax'; +import { Avatar, ErrorState, LoadingState, inputStyles, textareaStyles } from '../components/common'; +import { CodeView, CommentComposer, CommentThreadsSection } from '../components/repo'; +import { + getString, + deleteString, + updateString, + createString, + listStringComments, + createStringComment, + getStringStarSummary, + createStringStar, + deleteStringStar, + type StringComment, +} from '../lib/api/strings'; +import { formatRelativeTime, getErrorMessage } from '../lib/repo-utils'; +import { useAuth } from '../lib/auth'; +import { Pencil, Trash2, Star, LoaderCircle, ArrowUp, X } from 'lucide-solid'; +import clsx from 'clsx'; + +interface StringCommentThread { + item: StringComment; + replies: StringComment[]; +} + +const buildStringCommentThreads = (comments: StringComment[]): StringCommentThread[] => { + const byUri = new Map(comments.map((comment) => [comment.uri, comment])); + const topLevel: StringComment[] = []; + const repliesByRoot = new Map(); + + const findRoot = (comment: StringComment): StringComment | null => { + let current = comment; + const visited = new Set([comment.uri]); + while (true) { + const replyToUri = typeof current.value.replyTo === 'string' + ? current.value.replyTo + : (current.value.replyTo as { uri?: string } | undefined)?.uri; + if (!replyToUri) { + return current; + } + const parent = byUri.get(replyToUri as ResourceUri); + if (!parent) { + return current; + } + if (visited.has(parent.uri)) { + return current === comment ? null : current; + } + visited.add(parent.uri); + current = parent; + } + }; + + for (const comment of comments) { + const root = findRoot(comment); + if (!root || root.uri === comment.uri) { + topLevel.push(comment); + } else { + repliesByRoot.set(root.uri, [...(repliesByRoot.get(root.uri) ?? []), comment]); + } + } + + return topLevel.map((item) => ({ + item, + replies: repliesByRoot.get(item.uri) ?? [], + })); +}; + +export const StringPage: Component = () => { + const params = useParams<{ actor: string; rkey: string }>(); + const auth = useAuth(); + const navigate = useNavigate(); + const queryClient = useQueryClient(); + + // Deleting Signal + const [deleting, setDeleting] = createSignal(false); + + // Star working Signal + const [starWorking, setStarWorking] = createSignal(false); + + // Comment signals + const [commentBody, setCommentBody] = createSignal(''); + const [commentWorking, setCommentWorking] = createSignal(false); + const [commentError, setCommentError] = createSignal(null); + + const stringQuery = createQuery(() => ({ + queryKey: ['string-detail', params.actor, params.rkey], + queryFn: () => getString(params.actor, params.rkey), + })); + + const starSummaryQuery = createQuery(() => ({ + queryKey: ['string-star-summary', stringQuery.data?.record.uri], + enabled: !!stringQuery.data?.record.uri, + queryFn: () => getStringStarSummary(stringQuery.data!.record.uri, auth.currentDid()), + })); + + const commentsQuery = createQuery(() => ({ + queryKey: ['string-comments', stringQuery.data?.record.uri], + enabled: !!stringQuery.data?.record.uri, + queryFn: () => listStringComments(stringQuery.data!.record.uri), + })); + + const commentThreads = createMemo(() => { + const comments = commentsQuery.data ?? []; + return buildStringCommentThreads(comments); + }); + + const handleDelete = async () => { + const agent = auth.agent(); + const data = stringQuery.data; + if (!agent || !data) return; + + if (!confirm(`are you sure you want to delete the string "${data.record.value.filename}"?`)) { + return; + } + + setDeleting(true); + try { + await deleteString(agent, params.rkey); + const ownerId = data.owner.handle || data.owner.did; + navigate(`/${ownerId}?tab=strings`); + } catch (err) { + alert(getErrorMessage(err)); + } finally { + setDeleting(false); + } + }; + + const handleStarToggle = async () => { + const agent = auth.agent(); + const summary = starSummaryQuery.data; + const record = stringQuery.data?.record; + if (!agent || !summary || !record || starWorking()) return; + + setStarWorking(true); + try { + if (summary.isStarred && summary.currentUserStarRkey) { + await deleteStringStar(agent, summary.currentUserStarRkey); + } else { + await createStringStar(agent, record.uri); + } + await queryClient.invalidateQueries({ queryKey: ['string-star-summary', record.uri] }); + } catch (err) { + console.error('failed to toggle star', err); + } finally { + setStarWorking(false); + } + }; + + const handleCommentSubmit = async (e: SubmitEvent) => { + e.preventDefault(); + const agent = auth.agent(); + const record = stringQuery.data?.record; + if (!agent || !record || !commentBody().trim() || commentWorking()) return; + + setCommentWorking(true); + setCommentError(null); + try { + await createStringComment(agent, record.uri, record.cid, commentBody()); + setCommentBody(''); + await queryClient.invalidateQueries({ queryKey: ['string-comments', record.uri] }); + } catch (err) { + setCommentError(getErrorMessage(err)); + } finally { + setCommentWorking(false); + } + }; + + const starBusy = () => starWorking() || starSummaryQuery.isLoading; + + return ( + + + + + +

+ +

+ + + {(data) => { + const { owner, record } = data(); + const lineCount = () => record.value.contents.split('\n').length; + const byteCount = () => new TextEncoder().encode(record.value.contents).length; + const formattedSize = () => { + const bytes = byteCount(); + if (bytes < 1024) return `${bytes} B`; + const kb = bytes / 1024; + if (kb < 1024) return `${kb.toFixed(1)} KB`; + return `${(kb / 1024).toFixed(1)} MB`; + }; + const timeAgo = () => formatRelativeTime(record.value.createdAt); + + const [rawUrl, setRawUrl] = createSignal(); + createEffect(() => { + const webBlob = new Blob([record.value.contents], { type: 'text/plain;charset=utf-8' }); + const url = URL.createObjectURL(webBlob); + setRawUrl(url); + onCleanup(() => URL.revokeObjectURL(url)); + }); + + return ( +

+ + + {owner.handle || owner.did} + + / + + {record.value.filename} + +

+ + this string has no description}> + {record.value.description} + + +

+ +

+ + + + edit + + + + +

+ + + {starSummaryQuery.data?.count ?? 0} + +

+ +

+ + {record.value.filename} + + + {timeAgo()} + + +

+ {lineCount()} lines + + {formattedSize()} + + + view raw + +

+ +

+ + {/* Comments section */} +

+ + + + + + + +

+ ); + }} + + + ); +}; + +export const NewStringPage: Component = () => { + const auth = useAuth(); + const navigate = useNavigate(); + const queryClient = useQueryClient(); + + const [filename, setFilename] = createSignal(''); + const [description, setDescription] = createSignal(''); + const [contents, setContents] = createSignal(''); + const [saving, setSaving] = createSignal(false); + const [saveError, setSaveError] = createSignal(null); + + const lines = () => { + const val = contents(); + return val === '' ? 0 : val.split('\n').length; + }; + const bytes = () => { + return new TextEncoder().encode(contents()).length; + }; + + const handlePublish = async (e: SubmitEvent) => { + e.preventDefault(); + const agent = auth.agent(); + if (!agent) return; + + setSaving(true); + setSaveError(null); + try { + const result = await createString(agent, { + filename: filename(), + description: description(), + contents: contents(), + }); + await queryClient.invalidateQueries({ queryKey: ['profile-strings', auth.currentDid()] }); + const ownerId = auth.currentDid(); + navigate(`/strings/${ownerId}/${result.rkey}`); + } catch (err) { + setSaveError(getErrorMessage(err)); + } finally { + setSaving(false); + } + }; + + return ( + + please log in to create a new string. + + } + > +

create a new string

store and share code snippets with ease.

+ +

+ {saveError() &&

{saveError()}

} +

+ setFilename(e.currentTarget.value)} + class={clsx(inputStyles(), 'md:max-w-64')} + /> + setDescription(e.currentTarget.value)} + placeholder="description ..." + class={clsx(inputStyles(), 'flex-1')} + /> +

setContents(e.currentTarget.value)}
+					required
+				/>
+				<div class="flex justify-between items-center">
+					<div id="content-stats" class="text-sm text-gray-500 dark:text-gray-400">
+						<span id="line-count">{lines()} line{lines() !== 1 ? 's' : ''}</span>
+						<span class="select-none px-1 [&:before]:content-['·']"></span>
+						<span id="byte-count">{bytes()} byte{bytes() !== 1 ? 's' : ''}</span>
+					</div>
+					<div id="actions" class="flex gap-2 items-center">
+						<button
+							type="submit"
+							id="new-button"
+							class="w-fit btn-create group inline-flex items-center gap-2 text-white"
+							disabled={saving()}
+						>
+							<span class="inline-flex items-center gap-2">
+								<ArrowUp class="w-4 h-4" />
+								publish
+							</span>
+							<Show when={saving()}>
+								<span class="pl-2 inline-block">
+									<LoaderCircle class="w-4 h-4 animate-spin" />
+								</span>
+							</Show>
+						</button>
+					</div>
+				</div>
+			</form>
+		</Show>
+	);
+};
+
+export const EditStringPage: Component = () => {
+	const params = useParams<{ actor: string; rkey: string }>();
+	const auth = useAuth();
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+
+	const [filename, setFilename] = createSignal('');
+	const [description, setDescription] = createSignal('');
+	const [contents, setContents] = createSignal('');
+	const [saving, setSaving] = createSignal(false);
+	const [saveError, setSaveError] = createSignal<string | null>(null);
+
+	const stringQuery = createQuery(() => ({
+		queryKey: ['string-detail', params.actor, params.rkey],
+		queryFn: () => getString(params.actor, params.rkey),
+	}));
+
+	createEffect(() => {
+		const data = stringQuery.data;
+		if (data) {
+			setFilename(data.record.value.filename);
+			setDescription(data.record.value.description ?? '');
+			setContents(data.record.value.contents);
+		}
+	});
+
+	const isOwner = () => {
+		const data = stringQuery.data;
+		return data && auth.currentDid() === data.owner.did;
+	};
+
+	const lines = () => {
+		const val = contents();
+		return val === '' ? 0 : val.split('\n').length;
+	};
+	const bytes = () => {
+		return new TextEncoder().encode(contents()).length;
+	};
+
+	const handleSave = async (e: SubmitEvent) => {
+		e.preventDefault();
+		const agent = auth.agent();
+		const data = stringQuery.data;
+		if (!agent || !data) return;
+
+		setSaving(true);
+		setSaveError(null);
+		try {
+			await updateString(
+				agent,
+				params.rkey,
+				{
+					filename: filename(),
+					description: description(),
+					contents: contents(),
+				},
+				data.record.cid,
+			);
+			await queryClient.invalidateQueries({ queryKey: ['string-detail', params.actor, params.rkey] });
+			navigate(`/strings/${params.actor}/${params.rkey}`);
+		} catch (err) {
+			setSaveError(getErrorMessage(err));
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	return (
+		<Switch>
+			<Match when={stringQuery.isLoading}>
+				<LoadingState label="loading string..." />
+			</Match>
+			<Match when={stringQuery.error}>
+				<div class="p-6 bg-white dark:bg-gray-800 rounded shadow-sm">
+					<ErrorState message={getErrorMessage(stringQuery.error).toLowerCase()} />
+				</div>
+			</Match>
+			<Match when={stringQuery.data && !isOwner()}>
+				<div class="p-6 bg-white dark:bg-gray-800 rounded shadow-sm">
+					<ErrorState message="you are not authorized to edit this string." />
+				</div>
+			</Match>
+			<Match when={stringQuery.data && isOwner()}>
+				<div>
+					<div class="px-6 py-2 mb-4">
+						<p class="text-xl font-bold dark:text-white">edit string</p>
+					</div>
+
+					<form
+						onSubmit={handleSave}
+						class="p-6 pb-4 dark:text-white flex flex-col gap-2 bg-white dark:bg-gray-800 drop-shadow-sm rounded border border-gray-200 dark:border-gray-700"
+					>
+						{saveError() && <p class="text-red-500 dark:text-red-400 text-sm mb-2">{saveError()}</p>}
+						<div class="flex flex-col md:flex-row md:items-center gap-2">
+							<input
+								type="text"
+								id="filename"
+								name="filename"
+								placeholder="filename"
+								required
+								value={filename()}
+								onInput={(e) => setFilename(e.currentTarget.value)}
+								class={clsx(inputStyles(), 'md:max-w-64')}
+							/>
+							<input
+								type="text"
+								id="description"
+								name="description"
+								value={description()}
+								onInput={(e) => setDescription(e.currentTarget.value)}
+								placeholder="description ..."
+								class={clsx(inputStyles(), 'flex-1')}
+							/>
+						</div>
+						<textarea
+							name="content"
+							id="content-textarea"
+							wrap="off"
+							class={clsx(textareaStyles(), 'font-mono text-sm')}
+							rows={20}
+							spellcheck={false}
+							placeholder="paste your string here!"
+							value={contents()}
+							onInput={(e) => setContents(e.currentTarget.value)}
+							required
+						/>
+						<div class="flex justify-between items-center">
+							<div id="content-stats" class="text-sm text-gray-500 dark:text-gray-400">
+								<span id="line-count">{lines()} line{lines() !== 1 ? 's' : ''}</span>
+								<span class="select-none px-1 [&:before]:content-['·']"></span>
+								<span id="byte-count">{bytes()} byte{bytes() !== 1 ? 's' : ''}</span>
+							</div>
+							<div id="actions" class="flex gap-2 items-center">
+								<A
+									class="btn flex items-center gap-2 no-underline hover:no-underline p-2 group text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+									href={`/strings/${params.actor}/${params.rkey}`}
+								>
+									<X class="size-4" />
+									<span class="hidden md:inline">cancel</span>
+								</A>
+								<button
+									type="submit"
+									id="new-button"
+									class="w-fit btn-create group inline-flex items-center gap-2 text-white"
+									disabled={saving()}
+								>
+									<span class="inline-flex items-center gap-2">
+										<ArrowUp class="w-4 h-4" />
+										publish
+									</span>
+									<Show when={saving()}>
+										<span class="pl-2 inline-block">
+											<LoaderCircle class="w-4 h-4 animate-spin" />
+										</span>
+									</Show>
+								</button>
+							</div>
+						</div>
+					</form>
+				</div>
+			</Match>
+		</Switch>
+	);
+};
+
+export const RawStringPage: Component = () => {
+	const params = useParams<{ actor: string; rkey: string }>();
+
+	const stringQuery = createQuery(() => ({
+		queryKey: ['string-detail', params.actor, params.rkey],
+		queryFn: () => getString(params.actor, params.rkey),
+	}));
+
+	return (
+		<Switch>
+			<Match when={stringQuery.isLoading}>
+				<div class="p-4 font-mono text-sm">loading raw content...</div>
+			</Match>
+			<Match when={stringQuery.error}>
+				<div class="p-4 font-mono text-sm text-red-500">
+					failed to load: {getErrorMessage(stringQuery.error).toLowerCase()}
+				</div>
+			</Match>
+			<Match when={stringQuery.data}>
+				{(data) => (
+					<pre style="white-space: pre-wrap; word-wrap: break-word; font-family: monospace;" class="p-4 bg-white dark:bg-gray-950 dark:text-white">
+						{data().record.value.contents}
+					</pre>
+				)}
+			</Match>
+		</Switch>
+	);
+};
</article></body></html>