commit 2a971fb39adb33936ffeccfa67e44381cbf0d1da · aylac.top/matted

+1 -1

src/index.tsx

···

       39
       39
        
       					preload={preloadRepoCommit}

     

       40
       40
        
       				/>

     

       41
       41
        
       				<Route

     

       42
       42
       -
       					path="/compare/:rev2/:rev1"

     

       42
       42
       +
       					path="/compare/:base/:compare"

     

       43
       43
        
       					component={RepoCompare}

     

       44
       44
        
       					preload={preloadRepoCompare}

     

       45
       45
        
       				/>

+43 -6

src/routes/repo/blob.tsx

···

       4
       4
        
       	useNavigate,

     

       5
       5
        
       	useParams,

     

       6
       6
        
       } from "@solidjs/router";

     

       7
       7
       -
       import { createMemo, createResource } from "solid-js";

     

       7
       7
       +
       import { createMemo, createResource, onMount, Show } from "solid-js";

     

       8
       8
        
       import { CodeBlock } from "../../elements/code_block";

     

       9
       9
       +
       import { formatBytes } from "../../util/bytes";

     

       9
       10
        
       import { getLanguage } from "../../util/get_language";

     

       10
       11
        
       import { figureOutDid } from "../../util/handle";

     

       12
       12
       +
       import { Header } from "./components/header";

     

       13
       13
       +
       import { PathBar } from "./components/pathbar";

     

       11
       14
        
       import { useDid } from "./context";

     

       12
       12
       -
       import { PathBar } from "./generic";

     

       13
       13
       -
       import { Header } from "./main";

     

       14
       14
       -
       import { getRepoBlob, getRepoDefaultBranch } from "./main.data";

     

       15
       15
       +
       import { getRepoBlob, getRepoBlobUrl, getRepoDefaultBranch } from "./main.data";

     

       15
       16
        
       

     

       16
       17
        
       export async function preloadRepoBlob({ params }: { params: Params }) {

     

       17
       18
        
       	const did = await figureOutDid(params.user!);

     
···

       44
       45
        
       		})(),

     

       45
       46
        
       	);

     

       46
       47
        
       

     

       48
       48
       +
       	const blobUrl = createAsync(async () => {

     

       49
       49
       +
       		const d = did();

     

       50
       50
       +
       		if (!d) return;

     

       51
       51
       +
       		return await getRepoBlobUrl(d, params.repo, params.ref, params.path);

     

       52
       52
       +
       	});

     

       53
       53
       +
       

     

       47
       54
        
       	const codeBlock = createMemo(() => {

     

       48
       55
        
       		if (!blob()?.content) return;

     

       49
       56
        
       		return (

     
···

       62
       69
        
       

     

       63
       70
        
       	const ref = () => params.ref || defaultBranch();

     

       64
       71
        
       

     

       72
       72
       +
       	onMount(() => {

     

       73
       73
       +
       		if (window.location.hash) {

     

       74
       74
       +
       			const element = document.getElementById(window.location.hash.slice(1));

     

       75
       75
       +
       			if (element)

     

       76
       76
       +
       				element.scrollIntoView({ behavior: "instant", block: "start" });

     

       77
       77
       +
       		}

     

       78
       78
       +
       	});

     

       79
       79
       +
       

     

       65
       80
        
       	return (

     

       66
       81
        
       		<div class="mx-auto max-w-5xl">

     

       67
       82
        
       			<Header user={params.user} repo={params.repo} />

     

       68
       68
       -
       			<div class="flex flex-col rounded bg-white pt-1 pb-2 dark:bg-gray-800">

     

       69
       69
       -
       				<div class="mx-4 flex flex-row border-gray-300 border-b py-2 dark:border-gray-700">

     

       83
       83
       +
       			<div class="flex flex-col rounded bg-white py-2 dark:bg-gray-800">

     

       84
       84
       +
       				<div class="mx-5 flex flex-col justify-between gap-1 border-gray-300 border-b py-2 md:flex-row md:items-center dark:border-gray-700">

     

       70
       85
        
       					<PathBar

     

       71
       86
        
       						user={params.user}

     

       72
       87
        
       						repo={params.repo}

     
···

       74
       89
        
       						path={params.path}

     

       75
       90
        
       						is_file={true}

     

       76
       91
        
       					/>

     

       92
       92
       +
       					<div class="text-gray-500 text-xs dark:text-gray-400">

     

       93
       93
       +
       						<Show when={blobUrl() && ref() && blob()}>

     

       94
       94
       +
       							<span>

     

       95
       95
       +
       								{"at "}

     

       96
       96
       +
       								<a

     

       97
       97
       +
       									href={`/${params.user}/${params.repo}/tree/${ref()!}`}

     

       98
       98
       +
       									class="text-black hover:text-gray-700 hover:underline dark:text-white hover:dark:text-gray-300"

     

       99
       99
       +
       								>

     

       100
       100
       +
       									{ref()!}

     

       101
       101
       +
       								</a>

     

       102
       102
       +
       							</span>

     

       103
       103
       +
       							<span class="select-none px-1 before:content-['\00B7']" />

     

       104
       104
       +
       							<span>{formatBytes(blob()!.size!)}</span>

     

       105
       105
       +
       							<span class="select-none px-1 before:content-['\00B7']" />

     

       106
       106
       +
       							<a

     

       107
       107
       +
       								href={blobUrl()}

     

       108
       108
       +
       								class="text-black hover:text-gray-700 hover:underline dark:text-white hover:dark:text-gray-300"

     

       109
       109
       +
       							>

     

       110
       110
       +
       								view raw

     

       111
       111
       +
       							</a>

     

       112
       112
       +
       						</Show>

     

       113
       113
       +
       					</div>

     

       77
       114
        
       				</div>

     

       78
       115
        
       				<div class="flex flex-col p-4">{codeBlock()}</div>

     

       79
       116
        
       			</div>

+19 -6

src/routes/repo/diff/commit.tsx

···

       3
       3
        
       import { figureOutDid } from "../../../util/handle";

     

       4
       4
        
       import { toRelativeTime } from "../../../util/time";

     

       5
       5
        
       import type { Commit, DID } from "../../../util/types";

     

       6
       6
       +
       import { Header } from "../components/header";

     

       6
       7
        
       import { useDid } from "../context";

     

       7
       7
       -
       import { Header } from "../main";

     

       8
       8
        
       import { getRepoCommit } from "../main.data";

     

       9
       9
        
       import { buildTree, type TreeNode } from "./data";

     

       10
       10
        
       import { DiffView, Sidebar } from "./generic";

     
···

       32
       32
        
       		},

     

       33
       33
        
       	);

     

       34
       34
        
       

     

       35
       35
       +
       	const commitDiffViewInput = createMemo(() => {

     

       36
       36
       +
       		if (!commit()?.diff) return;

     

       37
       37
       +
       		return commit()!.diff.diff.map((diff) => ({

     

       38
       38
       +
       			oldName: diff.name.old,

     

       39
       39
       +
       			newName: diff.name.new,

     

       40
       40
       +
       			textFragments: diff.text_fragments,

     

       41
       41
       +
       		}));

     

       42
       42
       +
       	});

     

       43
       43
       +
       

     

       35
       44
        
       	const sidebar = createMemo(() => {

     

       36
       45
        
       		if (!commit()?.diff.diff)

     

       37
       46
        
       			return { name: "", fullPath: "", type: "directory" } as TreeNode;

     
···

       67
       76
        
       					commit={commit()!}

     

       68
       77
        
       				/>

     

       69
       78
        
       			</Show>

     

       70
       70
       -
       			<Show when={sidebar()?.children && commit()}>

     

       71
       71
       -
       				<div class="flex flex-row gap-1">

     

       72
       72
       -
       					<Sidebar sidebar={sidebar()} commit={commit()!} />

     

       73
       73
       -
       					<div class="min-w-0 flex-1 flex-col gap-1 p-1 pl-0">

     

       74
       74
       -
       						<DiffView commit={commit()!} />

     

       79
       79
       +
       			<Show when={sidebar()?.children && commit() && commitDiffViewInput()}>

     

       80
       80
       +
       				<div class="flex flex-col gap-1 md:flex-row">

     

       81
       81
       +
       					<Sidebar

     

       82
       82
       +
       						sidebar={sidebar()}

     

       83
       83
       +
       						insertions={commit()!.diff.stat.insertions}

     

       84
       84
       +
       						deletions={commit()!.diff.stat.deletions}

     

       85
       85
       +
       					/>

     

       86
       86
       +
       					<div class="min-w-0 flex-1 flex-col gap-1 p-1 max-md:pt-0 md:pl-0">

     

       87
       87
       +
       						<DiffView diff={commitDiffViewInput()!} />

     

       75
       88
        
       					</div>

     

       76
       89
        
       				</div>

     

       77
       90
        
       			</Show>

+65 -53

src/routes/repo/diff/compare.tsx

···

       1
       1
        
       import { type Params, useParams } from "@solidjs/router";

     

       2
       2
        
       import { createMemo, createResource, onMount, Show } from "solid-js";

     

       3
       3
        
       import { figureOutDid } from "../../../util/handle";

     

       4
       4
       -
       import type { DID } from "../../../util/types";

     

       4
       4
       +
       import type { Compare, DID } from "../../../util/types";

     

       5
       5
       +
       import { Header } from "../components/header";

     

       5
       6
        
       import { useDid } from "../context";

     

       6
       6
       -
       import { Header } from "../main";

     

       7
       7
       -
       import { getRepoCompare } from "../main.data";

     

       7
       7
       +
       import { getRepoCommit, getRepoCompare } from "../main.data";

     

       8
       8
        
       import { buildTree, type TreeNode } from "./data";

     

       9
       9
       -
       import { DiffView, RenderTree } from "./generic";

     

       9
       9
       +
       import { DiffView, Sidebar } from "./generic";

     

       10
       10
        
       

     

       11
       11
        
       export async function preloadRepoCompare({ params }: { params: Params }) {

     

       12
       12
       -
       	const did = await figureOutDid(params.user);

     

       12
       12
       +
       	const did = await figureOutDid(params.user!);

     

       13
       13
        
       	if (!did) return;

     

       14
       14
       -
       	getRepoCompare(did, params.repo, params.rev1, params.rev2);

     

       15
       15
       -
       }

     

       16
       16
       -
       

     

       17
       17
       -
       function ComparisonHeader(props: {

     

       18
       18
       -
       	user: string;

     

       19
       19
       -
       	repo: string;

     

       20
       20
       -
       	message: { title: string; content: string };

     

       21
       21
       -
       	commit: Commit;

     

       22
       22
       -
       }) {

     

       23
       23
       -
       	return (

     

       24
       24
       -
       		<div>

     

       25
       25
       -
       			<Header user={props.user} repo={props.repo} />

     

       26
       26
       -
       			<div class="mx-1 flex flex-col gap-2 rounded bg-white p-4 dark:bg-gray-800">

     

       27
       27
       -
       				<div>{props.message.title}</div>

     

       28
       28
       -
       				<Show when={props.message.content}>

     

       29
       29
       -
       					<div class="text-xs">{props.message.content}</div>

     

       30
       30
       -
       				</Show>

     

       31
       31
       -
       			</div>

     

       32
       32
       -
       		</div>

     

       33
       33
       -
       	);

     

       14
       14
       +
       	getRepoCommit(did, params.repo!, params.ref!);

     

       34
       15
        
       }

     

       35
       16
        
       

     

       36
       17
        
       export default function RepoCompare() {

     

       37
       37
       -
       	const params = useParams();

     

       18
       18
       +
       	const params = useParams() as {

     

       19
       19
       +
       		user: string;

     

       20
       20
       +
       		repo: string;

     

       21
       21
       +
       		base: string;

     

       22
       22
       +
       		compare: string;

     

       23
       23
       +
       	};

     

       38
       24
        
       	const did = useDid();

     

       39
       25
        
       

     

       40
       40
       -
       	const [commit] = createResource(

     

       26
       26
       +
       	const [compare] = createResource(

     

       41
       27
        
       		() => {

     

       42
       28
        
       			const d = did();

     

       43
       29
        
       			if (!d) return;

     

       44
       44
       -
       			return [d, params.repo, params.ref] as const;

     

       30
       30
       +
       			return [d, params.repo, params.base, params.compare] as const;

     

       45
       31
        
       		},

     

       46
       46
       -
       		async ([did, repo, ref]) => {

     

       47
       47
       -
       			const res = await getRepoCompare(did as DID, repo, ref);

     

       32
       32
       +
       		async ([did, repo, base, compare]) => {

     

       33
       33
       +
       			const res = await getRepoCompare(did as DID, repo, base, compare);

     

       48
       34
        
       			if (!res.ok) return;

     

       49
       49
       -
       			return res.data as Commit;

     

       35
       35
       +
       			return res.data as Compare;

     

       50
       36
        
       		},

     

       51
       37
        
       	);

     

       52
       38
        
       

     

       39
       39
       +
       	const compareDiffViewInput = createMemo(() => {

     

       40
       40
       +
       		if (!compare()?.combined_patch) return;

     

       41
       41
       +
       		return compare()!.combined_patch!.map((diff) => ({

     

       42
       42
       +
       			oldName: diff.OldName,

     

       43
       43
       +
       			newName: diff.NewName,

     

       44
       44
       +
       			textFragments: diff.TextFragments || [],

     

       45
       45
       +
       		}));

     

       46
       46
       +
       	});

     

       47
       47
       +
       

     

       53
       48
        
       	const sidebar = createMemo(() => {

     

       54
       54
       -
       		if (!commit()?.diff.diff)

     

       49
       49
       +
       		if (!compare()?.combined_patch)

     

       55
       50
        
       			return { name: "", fullPath: "", type: "directory" } as TreeNode;

     

       56
       56
       -
       		return buildTree(commit()!.diff.diff.map((v) => v.name.new));

     

       51
       51
       +
       		const set = new Set(

     

       52
       52
       +
       			compare()!.combined_patch!.flatMap((file) => [

     

       53
       53
       +
       				file.NewName,

     

       54
       54
       +
       				file.OldName,

     

       55
       55
       +
       			]),

     

       56
       56
       +
       		);

     

       57
       57
       +
       		set.delete("");

     

       58
       58
       +
       		return buildTree(set);

     

       57
       59
        
       	});

     

       58
       60
        
       

     

       59
       59
       -
       	const message = createMemo(() => {

     

       60
       60
       -
       		const c = commit();

     

       61
       61
       -
       		if (!c) return;

     

       62
       62
       -
       

     

       63
       63
       -
       		const titleEnd = c.diff.commit.message.indexOf("\n");

     

       64
       64
       -
       		return {

     

       65
       65
       -
       			title: c.diff.commit.message.slice(0, titleEnd),

     

       66
       66
       -
       			content: c.diff.commit.message.slice(titleEnd + 1),

     

       67
       67
       -
       		};

     

       61
       61
       +
       	const compareNumbers = createMemo(() => {

     

       62
       62
       +
       		if (!compare()?.combined_patch) return { insertions: 0, deletions: 0 };

     

       63
       63
       +
       		let [insertions, deletions] = [0, 0];

     

       64
       64
       +
       		compare()!.combined_patch!.forEach((file) => {

     

       65
       65
       +
       			if (!file.TextFragments) return;

     

       66
       66
       +
       			file.TextFragments.forEach((fragment) => {

     

       67
       67
       +
       				insertions += fragment.LinesAdded;

     

       68
       68
       +
       				deletions += fragment.LinesDeleted;

     

       69
       69
       +
       			});

     

       70
       70
       +
       		});

     

       71
       71
       +
       		return { insertions, deletions };

     

       68
       72
        
       	});

     

       69
       73
        
       

     

       70
       74
        
       	onMount(() => {

     
···

       77
       81
        
       

     

       78
       82
        
       	return (

     

       79
       83
        
       		<div class="mx-auto max-w-10xl">

     

       80
       80
       -
       			<Show when={commit() && message()}>

     

       81
       81
       -
       				<CommitHeader

     

       82
       82
       -
       					user={params.user}

     

       83
       83
       -
       					repo={params.repo}

     

       84
       84
       -
       					message={message()!}

     

       85
       85
       -
       					commit={commit()!}

     

       86
       86
       -
       				/>

     

       84
       84
       +
       			<Show when={compare()}>

     

       85
       85
       +
       				<CommitHeader user={params.user} repo={params.repo} />

     

       87
       86
        
       			</Show>

     

       88
       88
       -
       			<Show when={sidebar()?.children && commit()}>

     

       89
       89
       -
       				<div class="flex flex-row gap-1">

     

       90
       90
       -
       					<div class="min-w-0 flex-1 flex-col gap-1 p-1 pl-0">

     

       91
       91
       -
       						<DiffView commit={commit()!} />

     

       87
       87
       +
       			<Show when={sidebar()?.children && compare() && compareDiffViewInput()}>

     

       88
       88
       +
       				<div class="flex flex-col gap-1 md:flex-row">

     

       89
       89
       +
       					<Sidebar

     

       90
       90
       +
       						sidebar={sidebar()}

     

       91
       91
       +
       						insertions={compareNumbers().insertions}

     

       92
       92
       +
       						deletions={compareNumbers().deletions}

     

       93
       93
       +
       					/>

     

       94
       94
       +
       					<div class="min-w-0 flex-1 flex-col gap-1 p-1 max-md:pt-0 md:pl-0">

     

       95
       95
       +
       						<DiffView diff={compareDiffViewInput()!} />

     

       92
       96
        
       					</div>

     

       93
       97
        
       				</div>

     

       94
       98
        
       			</Show>

     

       95
       99
        
       		</div>

     

       96
       100
        
       	);

     

       97
       101
        
       }

     

       102
       102
       +
       

     

       103
       103
       +
       function CommitHeader(props: { user: string; repo: string }) {

     

       104
       104
       +
       	return (

     

       105
       105
       +
       		<div>

     

       106
       106
       +
       			<Header user={props.user} repo={props.repo} />

     

       107
       107
       +
       		</div>

     

       108
       108
       +
       	);

     

       109
       109
       +
       }

+1 -1

src/routes/repo/diff/data.ts

···

       9
       9
        
       	children: { [key: string]: BuildNode };

     

       10
       10
        
       };

     

       11
       11
        
       

     

       12
       12
       -
       export function buildTree(paths: string[]): TreeNode {

     

       12
       12
       +
       export function buildTree(paths: string[] | Set<string>): TreeNode {

     

       13
       13
        
       	// sorry i used claude for this

     

       14
       14
        
       	const root: { [key: string]: BuildNode } = {};

     

       15
       15

+33 -25

src/routes/repo/diff/generic.tsx

···

       1
       1
        
       import { createSignal, For, Match, Show, Switch } from "solid-js";

     

       2
       2
       -
       import type { Commit, DiffTextFragment } from "../../../util/types";

     

       2
       2
       +
       import type { DiffTextFragment } from "../../../util/types";

     

       3
       3
        
       import type { TreeNode } from "./data";

     

       4
       4
        
       

     

       5
       5
        
       export function RenderTree(props: { tree: TreeNode; skip?: boolean }) {

     
···

       168
       168
        
       	);

     

       169
       169
        
       }

     

       170
       170
        
       

     

       171
       171
       -
       export function DiffView(props: { commit: Commit }) {

     

       171
       171
       +
       export function DiffView(props: {

     

       172
       172
       +
       	diff: {

     

       173
       173
       +
       		oldName: string;

     

       174
       174
       +
       		newName: string;

     

       175
       175
       +
       		textFragments: DiffTextFragment[];

     

       176
       176
       +
       	}[];

     

       177
       177
       +
       }) {

     

       172
       178
        
       	return (

     

       173
       173
       -
       		<For each={props.commit.diff.diff}>

     

       179
       179
       +
       		<For each={props.diff}>

     

       174
       180
        
       			{(diff) => {

     

       175
       181
        
       				const [show, setShow] = createSignal(true);

     

       176
       182
        
       

     

       177
       177
       -
       				const [addedLines, removedLines] = diff.text_fragments

     

       178
       178
       -
       					? diff.text_fragments.reduce(

     

       183
       183
       +
       				const [addedLines, removedLines] = diff.textFragments

     

       184
       184
       +
       					? diff.textFragments.reduce(

     

       179
       185
        
       							(acc, v) => [acc[0] + v.NewLines, acc[1] + v.LinesDeleted],

     

       180
       186
        
       							[0, 0],

     

       181
       187
        
       						)

     
···

       198
       204
        
       								<div class="bg-red-100 text-red-700 dark:bg-red-700/30 dark:text-red-400">{`-${removedLines}`}</div>

     

       199
       205
        
       							</Show>

     

       200
       206
        
       						</div>

     

       201
       201
       -
       						<Show

     

       202
       202
       -
       							when={diff.name.old !== "" && diff.name.new !== diff.name.old}

     

       203
       203
       -
       						>

     

       204
       204
       -
       							<div class="select-text">{diff.name.old}</div>

     

       207
       207
       +
       						<Show when={diff.oldName !== "" && diff.newName !== diff.oldName}>

     

       208
       208
       +
       							<div class="select-text">{diff.oldName}</div>

     

       205
       209
        
       							<div class="iconify gravity-ui--arrow-right" />

     

       206
       210
        
       						</Show>

     

       207
       207
       -
       						<div class="select-text">{diff.name.new}</div>

     

       211
       211
       +
       						<div class="select-text">{diff.newName}</div>

     

       208
       212
        
       					</button>

     

       209
       213
        
       				);

     

       210
       214
        
       

     

       211
       211
       -
       				if (!diff.text_fragments)

     

       215
       215
       +
       				if (!diff.textFragments)

     

       212
       216
        
       					return (

     

       213
       217
        
       						<div

     

       214
       214
       -
       							id={`file-${encodeURI(diff.name.new)}`}

     

       218
       218
       +
       							id={`file-${encodeURI(diff.newName)}`}

     

       215
       219
        
       							class="not-last:mb-1 flex w-full flex-col rounded border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"

     

       216
       220
        
       						>

     

       217
       221
        
       							{header}

     
···

       223
       227
        
       						</div>

     

       224
       228
        
       					);

     

       225
       229
        
       

     

       226
       226
       -
       				const lastFrag = diff.text_fragments[diff.text_fragments.length - 1];

     

       230
       230
       +
       				const lastFrag = diff.textFragments[diff.textFragments.length - 1];

     

       227
       231
        
       				const numberSize = Math.max(

     

       228
       232
        
       					2,

     

       229
       233
        
       					(

     
···

       234
       238
        
       

     

       235
       239
        
       				return (

     

       236
       240
        
       					<div

     

       237
       237
       -
       						id={`file-${diff.name.new}`}

     

       241
       241
       +
       						id={`file-${diff.newName}`}

     

       238
       242
        
       						class="not-last:mb-1 flex w-full flex-col rounded border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"

     

       239
       243
        
       					>

     

       240
       244
        
       						{header}

     
···

       242
       246
        
       							class={`select-text overflow-x-auto rounded-b bg-white dark:bg-gray-800 ${show() ? "" : "hidden"}`}

     

       243
       247
        
       						>

     

       244
       248
        
       							<div class="min-w-max">

     

       245
       245
       -
       								<For each={diff.text_fragments}>

     

       249
       249
       +
       								<For each={diff.textFragments}>

     

       246
       250
        
       									{(frag, i) => (

     

       247
       251
        
       										<Fragment

     

       248
       248
       -
       											file={diff.name.new}

     

       252
       252
       +
       											file={diff.newName}

     

       249
       253
        
       											data={frag}

     

       250
       254
        
       											index={i()}

     

       251
       255
        
       											numberSize={numberSize}

     
···

       261
       265
        
       	);

     

       262
       266
        
       }

     

       263
       267
        
       

     

       264
       264
       -
       export function Sidebar(props: { commit: Commit; sidebar: TreeNode }) {

     

       268
       268
       +
       export function Sidebar(props: {

     

       269
       269
       +
       	insertions: number;

     

       270
       270
       +
       	deletions: number;

     

       271
       271
       +
       	sidebar: TreeNode;

     

       272
       272
       +
       }) {

     

       265
       273
        
       	return (

     

       266
       266
       -
       		<div class="sticky top-0 flex max-h-screen w-50 overflow-y-auto p-1 pr-0">

     

       274
       274
       +
       		<div class="flex overflow-y-auto p-1 max-md:pb-0 md:sticky md:top-0 md:max-h-screen md:w-50 md:pr-0">

     

       267
       275
        
       			<div class="flex min-h-max w-full grow cursor-default flex-col rounded border border-gray-200 bg-white p-1 dark:border-gray-700 dark:bg-gray-800">

     

       268
       268
       -
       				<div class="flex flex-row items-center justify-between gap-1 p-1">

     

       276
       276
       +
       				<div class="flex flex-row items-center justify-between p-1">

     

       269
       277
        
       					<div class="font-bold">CHANGED FILES</div>

     

       270
       270
       -
       					<div class="flex h-6 select-text flex-row items-center overflow-hidden rounded font-mono text-xs *:h-full *:content-center *:px-1">

     

       271
       271
       -
       						<Show when={props.commit.diff.stat.insertions > 0}>

     

       272
       272
       -
       							<div class="bg-green-100 text-green-700 dark:bg-green-800/30 dark:text-green-400">{`+${props.commit.diff.stat.insertions}`}</div>

     

       278
       278
       +
       					<div class="flex h-6 select-text flex-row items-center overflow-clip rounded font-mono text-xs *:h-full *:content-center *:px-1">

     

       279
       279
       +
       						<Show when={props.insertions > 0}>

     

       280
       280
       +
       							<div class="bg-green-100 text-green-700 dark:bg-green-800/30 dark:text-green-400">{`+${props.insertions}`}</div>

     

       273
       281
        
       						</Show>

     

       274
       274
       -
       						<Show when={props.commit.diff.stat.deletions > 0}>

     

       275
       275
       -
       							<div class="bg-red-100 text-red-700 dark:bg-red-700/30 dark:text-red-400">{`-${props.commit.diff.stat.deletions}`}</div>

     

       282
       282
       +
       						<Show when={props.deletions > 0}>

     

       283
       283
       +
       							<div class="bg-red-100 text-red-700 dark:bg-red-700/30 dark:text-red-400">{`-${props.deletions}`}</div>

     

       276
       284
        
       						</Show>

     

       277
       285
        
       					</div>

     

       278
       286
        
       				</div>

     

       279
       279
       -
       				<div class="max-w-full overflow-x-auto text-nowrap">

     

       287
       287
       +
       				<div class="flex max-w-full flex-col overflow-x-auto text-nowrap">

     

       280
       288
        
       					<RenderTree tree={props.sidebar} skip={true} />

     

       281
       289
        
       				</div>

     

       282
       290
        
       			</div>

+1 -1

src/routes/repo/generic.tsx src/routes/repo/components/pathbar.tsx

···

       19
       19
        
       	});

     

       20
       20
        
       

     

       21
       21
        
       	return (

     

       22
       22
       -
       		<div class="flex flex-row gap-1">

     

       22
       22
       +
       		<div class="flex flex-row gap-1 overflow-x-auto">

     

       23
       23
        
       			<a

     

       24
       24
        
       				href={`/${props.user}/${props.repo}/tree/${props.gitref}`}

     

       25
       25
        
       				class="text-gray-600 hover:text-gray-700 hover:underline dark:text-gray-400 hover:dark:text-gray-300"

+11 -2

src/routes/repo/main.data.ts

···

       30
       30
        
       }, "RepoDefaultBranch");

     

       31
       31
        
       

     

       32
       32
        
       export const getRepoTree = query(

     

       33
       33
       -
       	async (user: DID, repo: string, ref: string, path?: string) => {

     

       33
       33
       +
       	async (user: DID, repo: string, ref: string, path: string) => {

     

       34
       34
        
       		const rpc = await getKnotRpc(user, repo);

     

       35
       35
        
       

     

       36
       36
        
       		return await rpc.get("sh.tangled.repo.tree", {

     
···

       51
       51
        
       		return await rpc.get("sh.tangled.repo.blob", {

     

       52
       52
        
       			params: {

     

       53
       53
        
       				repo: `${user}/${repo}`,

     

       54
       54
       -
       				ref: ref,

     

       54
       54
       +
       				ref,

     

       55
       55
        
       				path,

     

       56
       56
        
       			},

     

       57
       57
        
       		});

     

       58
       58
        
       	},

     

       59
       59
        
       	"RepoBlob",

     

       60
       60
       +
       );

     

       61
       61
       +
       

     

       62
       62
       +
       export const getRepoBlobUrl = query(

     

       63
       63
       +
       	async (user: DID, repo: string, ref: string, path: string) => {

     

       64
       64
       +
       		const knot = await getRepoKnot(user, repo);

     

       65
       65
       +
       

     

       66
       66
       +
       		return `${knot}/xrpc/sh.tangled.repo.blob?repo=${user}/${repo}&ref=${ref}&path=${path}&raw=true`;

     

       67
       67
       +
       	},

     

       68
       68
       +
       	"RepoBlobUrl",

     

       60
       69
        
       );

     

       61
       70
        
       

     

       62
       71
        
       export const getRepoLog = query(

+4 -4

src/routes/repo/main.tsx src/routes/repo/components/header.tsx

···

       1
       1
        
       import { type Accessor, createMemo, createResource, Show } from "solid-js";

     

       2
       2
       -
       import { getUserRepoByRkey } from "../../util/get_repo";

     

       3
       3
       -
       import { figureOutHandle } from "../../util/handle";

     

       4
       4
       -
       import type { DID } from "../../util/types";

     

       5
       5
       -
       import { useRepoInfo } from "./context";

     

       2
       2
       +
       import { getUserRepoByRkey } from "../../../util/get_repo";

     

       3
       3
       +
       import { figureOutHandle } from "../../../util/handle";

     

       4
       4
       +
       import type { DID } from "../../../util/types";

     

       5
       5
       +
       import { useRepoInfo } from "../context";

     

       6
       6
        
       

     

       7
       7
        
       function HeaderItem(props: {

     

       8
       8
        
       	path: string;

+12 -12

src/routes/repo/tree.tsx

···

       15
       15
        
       import { SolidMarkdown } from "solid-markdown";

     

       16
       16
        
       import { languageColors } from "../../util/get_language";

     

       17
       17
        
       import type { Branches, RepoLog, Tags } from "../../util/types";

     

       18
       18
       +
       import { Header } from "./components/header";

     

       18
       19
        
       import { useDid } from "./context";

     

       19
       19
       -
       import { Header } from "./main";

     

       20
       20
        
       import {

     

       21
       21
        
       	getRepoBranches,

     

       22
       22
        
       	getRepoDefaultBranch,

     
···

       28
       28
        
       import "../../styles/markdown.css";

     

       29
       29
        
       import { figureOutDid } from "../../util/handle";

     

       30
       30
        
       import { toRelativeTime } from "../../util/time";

     

       31
       31
       -
       import { PathBar } from "./generic";

     

       31
       31
       +
       import { PathBar } from "./components/pathbar";

     

       32
       32
        
       

     

       33
       33
        
       export async function preloadRepoTree({ params }: { params: Params }) {

     

       34
       34
        
       	const did = await figureOutDid(params.user!);

     

       35
       35
        
       	if (!did) return;

     

       36
       36
       -
       	getRepoTree(did, params.repo!, params.ref!, params.path);

     

       36
       36
       +
       	getRepoTree(did, params.repo!, params.ref!, params.path!);

     

       37
       37
        
       }

     

       38
       38
        
       

     

       39
       39
        
       export default function RepoTree() {

     
···

       159
       159
        
       							<Show when={languages()} fallback={<div class="h-4" />}>

     

       160
       160
        
       								<LanguageLine languages={languages()!} />

     

       161
       161
        
       							</Show>

     

       162
       162
       -
       							<div class="flex flex-row px-4 py-2">

     

       162
       162
       +
       							<div class="flex flex-row px-5 py-2">

     

       163
       163
        
       								<Show when={branches() && tags() && ref() && defaultBranch()}>

     

       164
       164
        
       									<select

     

       165
       165
       -
       										class="w-40 border border-gray-200 p-1 dark:border-gray-700"

     

       165
       165
       +
       										class="w-40 border border-gray-200 bg-white p-1 dark:border-gray-700 dark:bg-gray-800"

     

       166
       166
        
       										onInput={(e) =>

     

       167
       167
        
       											navigate(

     

       168
       168
        
       												`/${params.user}/${params.repo}/tree/${e.target.value}`,

     
···

       204
       204
        
       								</Show>

     

       205
       205
        
       							</div>

     

       206
       206
        
       							<div class="flex flex-row py-2">

     

       207
       207
       -
       								<div class="mr-1 flex w-1/2 flex-col border-gray-300 border-r pr-2 pl-4 dark:border-gray-700">

     

       207
       207
       +
       								<div class="flex flex-1 flex-col border-gray-300 px-5 md:mr-1 md:w-1/2 md:border-r md:pr-3 dark:border-gray-700">

     

       208
       208
        
       									<Show when={defaultBranch() && tree() && sortedFiles()}>

     

       209
       209
        
       										<FileDirectory

     

       210
       210
        
       											user={params.user}

     
···

       215
       215
        
       										/>

     

       216
       216
        
       									</Show>

     

       217
       217
        
       								</div>

     

       218
       218
       -
       								<div class="ml-1 flex w-1/2 flex-col pr-4 pl-2">

     

       218
       218
       +
       								<div class="flex w-1/2 flex-col pr-5 pl-2 max-md:hidden">

     

       219
       219
        
       									<Show when={defaultBranch() && sortedFiles() && logs()}>

     

       220
       220
        
       										<LogData

     

       221
       221
        
       											user={params.user}

     
···

       229
       229
        
       							</div>

     

       230
       230
        
       						</Match>

     

       231
       231
        
       						<Match when={params.path && ref()}>

     

       232
       232
       -
       							<div class="mx-4 flex flex-row overflow-x-auto border-gray-300 border-b pt-3 pb-2 dark:border-gray-700">

     

       232
       232
       +
       							<div class="mx-5 flex flex-row border-gray-300 border-b pt-4 pb-2 md:items-center dark:border-gray-700">

     

       233
       233
        
       								<PathBar

     

       234
       234
        
       									user={params.user}

     

       235
       235
        
       									repo={params.repo}

     
···

       238
       238
        
       									is_file={false}

     

       239
       239
        
       								/>

     

       240
       240
        
       							</div>

     

       241
       241
       -
       							<div class="flex flex-row px-4 py-2">

     

       241
       241
       +
       							<div class="flex flex-row px-5 py-2">

     

       242
       242
        
       								<Show when={defaultBranch() && tree() && sortedFiles()}>

     

       243
       243
        
       									<FileDirectory

     

       244
       244
        
       										user={params.user}

     
···

       354
       354
        
       						<div class="flex flex-row justify-between">

     

       355
       355
        
       							<a

     

       356
       356
        
       								href={`/${props.user}/${props.repo}/${is_file ? "blob" : "tree"}/${props.tree.ref || props.defaultBranch}/${props.tree.parent ? `${props.tree.parent}/` : ""}${file.name}`}

     

       357
       357
       -
       								class="flex min-w-1/3 flex-row items-center gap-1.5 truncate p-1 hover:underline"

     

       357
       357
       +
       								class="flex flex-1 @max-xl:grow flex-row items-center gap-1.5 truncate p-1 hover:underline"

     

       358
       358
        
       							>

     

       359
       359
        
       								<div

     

       360
       360
        
       									class={`iconify ${is_file ? "gravity-ui--file" : "gravity-ui--folder-fill"}`}

     
···

       364
       364
        
       							<Show when={last_commit_date}>

     

       365
       365
        
       								<a

     

       366
       366
        
       									href={`/${props.user}/${props.repo}/commit/${file.last_commit!.hash}`}

     

       367
       367
       -
       									class="mr-2 @max-xl:hidden min-w-0 flex-1 grow truncate text-ellipsis text-left text-gray-500 hover:text-gray-700 hover:underline dark:text-gray-500 hover:dark:text-gray-200"

     

       367
       367
       +
       									class="mr-2 @max-xl:hidden min-w-0 flex-1 grow truncate text-ellipsis text-left text-gray-500 hover:text-gray-700 hover:underline dark:text-gray-400 hover:dark:text-gray-200"

     

       368
       368
        
       								>

     

       369
       369
        
       									{file.last_commit!.message}

     

       370
       370
        
       								</a>

     
···

       374
       374
        
       										dateStyle: "full",

     

       375
       375
        
       										timeStyle: "short",

     

       376
       376
        
       									})}

     

       377
       377
       -
       									class="shrink-0 whitespace-nowrap text-gray-500 text-xs hover:text-gray-700 hover:underline dark:text-gray-500 hover:dark:text-gray-200"

     

       377
       377
       +
       									class="shrink-0 whitespace-nowrap text-gray-500 text-xs hover:text-gray-700 hover:underline dark:text-gray-400 hover:dark:text-gray-200"

     

       378
       378
        
       								>

     

       379
       379
        
       									{toRelativeTime(last_commit_date!)}

     

       380
       380
        
       								</a>

+16

src/util/bytes.ts

···

       1
       1
       +
       export function formatBytes(bytes: number): string {

     

       2
       2
       +
       	if (bytes === 0) return "0 B";

     

       3
       3
       +
       

     

       4
       4
       +
       	const k = 1000; // Use 1000 for "kB", use 1024 if you want "KiB" math

     

       5
       5
       +
       	const sizes = ["B", "kB", "MB", "GB", "TB", "PB"];

     

       6
       6
       +
       

     

       7
       7
       +
       	const i = Math.floor(Math.log(bytes) / Math.log(k));

     

       8
       8
       +
       	const value = bytes / k ** i;

     

       9
       9
       +
       

     

       10
       10
       +
       	// 1. toFixed(1) ensures we don't have crazy long decimals (1.33333 -> "1.3")

     

       11
       11
       +
       	// 2. parseFloat() strips useless zeros ("1.0" -> 1, "1.5" -> 1.5)

     

       12
       12
       +
       	// 3. i === 0 check ensures simple Bytes are always integers

     

       13
       13
       +
       	const formattedValue = i === 0 ? value : parseFloat(value.toFixed(1));

     

       14
       14
       +
       

     

       15
       15
       +
       	return `${formattedValue} ${sizes[i]}`;

     

       16
       16
       +
       }

+48

src/util/types.ts

···

       58
       58
        
       	};

     

       59
       59
        
       };

     

       60
       60
        
       

     

       61
       61
       +
       export type Compare = {

     

       62
       62
       +
       	rev1: string;

     

       63
       63
       +
       	rev2: string;

     

       64
       64
       +
       	format_patch?: {

     

       65
       65
       +
       		Files?: {

     

       66
       66
       +
       			OldName: string;

     

       67
       67
       +
       			NewName: string;

     

       68
       68
       +
       			IsNew: boolean;

     

       69
       69
       +
       			IsDelete: boolean;

     

       70
       70
       +
       			IsCopy: boolean;

     

       71
       71
       +
       			IsRename: boolean;

     

       72
       72
       +
       			OldMode: number;

     

       73
       73
       +
       			NewMode: number;

     

       74
       74
       +
       			OldOIDPrefix: string;

     

       75
       75
       +
       			NewOIDPrefix: string;

     

       76
       76
       +
       			Score: number;

     

       77
       77
       +
       			TextFragments?: DiffTextFragment[];

     

       78
       78
       +
       		}[];

     

       79
       79
       +
       		SHA: string;

     

       80
       80
       +
       		Author: { Name: string; Email: string };

     

       81
       81
       +
       		AuthorDate: string;

     

       82
       82
       +
       		Commiter: string | null;

     

       83
       83
       +
       		CommiterDate: string;

     

       84
       84
       +
       		Title: string;

     

       85
       85
       +
       		Body: string;

     

       86
       86
       +
       		SubjectPrefix: string;

     

       87
       87
       +
       		BodyAppendix: string;

     

       88
       88
       +
       	}[];

     

       89
       89
       +
       	combined_patch?: {

     

       90
       90
       +
       		OldName: string;

     

       91
       91
       +
       		NewName: string;

     

       92
       92
       +
       		IsNew: boolean;

     

       93
       93
       +
       		IsDelete: boolean;

     

       94
       94
       +
       		IsCopy: boolean;

     

       95
       95
       +
       		IsRename: boolean;

     

       96
       96
       +
       		OldMode: number;

     

       97
       97
       +
       		NewMode: number;

     

       98
       98
       +
       		OldOIDPrefix: string;

     

       99
       99
       +
       		NewOIDPrefix: string;

     

       100
       100
       +
       		Score: number;

     

       101
       101
       +
       		TextFragments?: DiffTextFragment[];

     

       102
       102
       +
       		IsBinary: boolean;

     

       103
       103
       +
       		BinaryFragment: string | null;

     

       104
       104
       +
       		ReverseBinaryFragment: string | null;

     

       105
       105
       +
       	}[];

     

       106
       106
       +
       	combined_patch_raw: string;

     

       107
       107
       +
       };

     

       108
       108
       +
       

     

       61
       109
        
       export type Branches = {

     

       62
       110
        
       	branches: {

     

       63
       111
        
       		reference: {