1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script lang="ts">
import { resolve } from "$app/paths";
import BookMarked from "$icon/book-marked";
import GitBranch from "$icon/git-branch";
import Star from "$icon/star";
import type { FileResult } from "#lib/api/lexicons/types/org/tangled/temp/search/searchCode.ts";
import { profileIdentifier } from "#lib/api/identity.ts";
import { formatCount } from "#lib/format.ts";
import Card from "#lib/components/ui/Card.svelte";
import Tag from "#lib/components/ui/Tag.svelte";
import FileMatch from "#lib/components/search/FileMatch.svelte";
interface Props {
result: FileResult;
}
let { result }: Props = $props();
const owner = $derived(profileIdentifier(result.repo.owner.handle, result.repo.owner.did));
const repoHref = $derived(resolve(`/${owner}/${result.repo.slug}` as "/"));
const branches = $derived([...new Set(result.branches ?? [])]);
</script>
<Card
padding="none"
border={false}
class="flex flex-col gap-xs p-sm text-foreground-default edge-ring-inset"
>
<div class="flex items-center gap-2xs px-2xs">
<div class="flex min-w-0 items-center gap-1.5 font-medium">
<BookMarked class="size-3.5 shrink-0 text-foreground-subtle" aria-hidden="true" />
<!-- prettier-ignore -->
<a href={repoHref} class="min-w-0 truncate text-foreground-default no-underline hover:underline"
>{owner}/{result.repo.slug}</a
>
</div>
<div class="flex min-w-0 flex-wrap gap-2xs">
{#each branches as branch (branch)}
<Tag
color="inset"
icon={GitBranch}
title={branch}
truncate
class="mr-sm max-w-48 typography-monospace-small font-normal">{branch}</Tag
>
{/each}
</div>
{#if result.repo.starCount !== undefined}
<div
class="order-last ml-auto flex shrink-0 items-center gap-2xs text-foreground-muted"
>
<Star class="size-3.5" aria-hidden="true" />
<span>{formatCount(result.repo.starCount)}</span>
</div>
{/if}
</div>
<FileMatch {result} />
</Card>