radicle-explorer/src/views/projects/Header.svelte

<script lang="ts">
  import type { BaseUrl } from "@httpd-client";
  import type { ProjectLoadedView } from "@app/views/projects/router";

  import { config } from "@app/lib/config";
  import { isLocal } from "@app/lib/utils";
  import { pluralize } from "@app/lib/pluralize";

  import CloneButton from "@app/views/projects/CloneButton.svelte";
  import Icon from "@app/components/Icon.svelte";
  import Link from "@app/components/Link.svelte";
  import ProjectLink from "@app/components/ProjectLink.svelte";
  import SquareButton from "@app/components/SquareButton.svelte";

  export let view: ProjectLoadedView;
  export let baseUrl: BaseUrl;

  export let projectId: string;
  export let projectName: string;

  export let openPatchCount: number;
  export let openIssueCount: number;
  export let trackings: number;
</script>

<style>
  .header {
    font-size: var(--font-size-tiny);
    padding: 0 2rem 0 8rem;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  @media (max-width: 960px) {
    .header {
      padding-left: 2rem;
    }
    .header {
      margin-bottom: 1.5rem;
    }
  }
</style>

<div class="header">
  <ProjectLink
    projectParams={{
      view: { resource: "tree" },
      path: "/",
      peer: undefined,
      route: undefined,
      revision: undefined,
    }}>
    <SquareButton
      active={view.resource === "tree" ||
        view.resource === "history" ||
        view.resource === "commits"}>
      Source
    </SquareButton>
  </ProjectLink>
  <ProjectLink
    projectParams={{
      id: projectId,
      view: {
        resource: "issues",
      },
      peer: undefined,
      search: undefined,
      revision: undefined,
      path: undefined,
    }}>
    <SquareButton
      active={view.resource === "issues" || view.resource === "issue"}>
      <svelte:fragment slot="icon">
        <Icon size="small" name="exclamation-circle" />
      </svelte:fragment>
      <span class="txt-bold">{openIssueCount}</span>
      {pluralize("issue", openIssueCount)}
    </SquareButton>
  </ProjectLink>

  <ProjectLink
    projectParams={{
      id: projectId,
      view: {
        resource: "patches",
      },
      peer: undefined,
      search: undefined,
      revision: undefined,
      path: undefined,
    }}>
    <SquareButton
      active={view.resource === "patches" || view.resource === "patch"}>
      <svelte:fragment slot="icon">
        <Icon size="small" name="patch" />
      </svelte:fragment>
      <span class="txt-bold">{openPatchCount}</span>
      {pluralize("patch", openPatchCount)}
    </SquareButton>
  </ProjectLink>
  <CloneButton {baseUrl} id={projectId} name={projectName} />

  <Link
    route={{
      resource: "seeds",
      params: {
        hostnamePort:
          baseUrl.port === config.seeds.defaultHttpdPort
            ? baseUrl.hostname
            : `${baseUrl.hostname}:${baseUrl.port}`,
        projectPageIndex: 0,
      },
    }}>
    <SquareButton>
      {isLocal(baseUrl.hostname) ? "radicle.local" : baseUrl.hostname}
    </SquareButton>
  </Link>
  <SquareButton hoverable={false} title="Tracked by {trackings} nodes">
    <svelte:fragment slot="icon">
      <Icon size="small" name="network" />
    </svelte:fragment>
    <span class="txt-bold">{trackings}</span>
    nodes
  </SquareButton>
</div>