import Layout from "./Layout.svelte";

  export let blobResult: BlobResult;

<Layout {baseUrl} {project} {peer} activeTab="source">

  <SourceBrowsingHeader

    node={baseUrl}

    {project}

    peers={peersWithRoute}

    branches={branchesWithRoute}

    {revision}

    {tree}

    historyLinkActive={false} />

  <main>

    <!-- Mobile navigation -->

      <nav class="layout-mobile">

        <Button

          style="width: 100%;"

          variant="secondary"

          on:click={() => {

            mobileFileTree = !mobileFileTree;

          }}>

          Browse

        </Button>

      </nav>

    {/if}

    <div class="container center-content">

      {#if tree.entries.length > 0}

        <div class="column-left" class:column-left-visible={mobileFileTree}>

          <div class="source-tree sticky">

            <TreeComponent

              projectId={project.id}

              {revision}

              {baseUrl}

              {fetchTree}

              {path}

              {peer}

              {tree}

              on:select={() => {

                // Close mobile tree if user navigates to other file.

                mobileFileTree = false;

              }} />

          </div>

        <div class="column-right">

          {#if blobResult.ok}

            <BlobComponent

              {baseUrl}

              projectId={project.id}

              {peer}

              {revision}

              {path}

              blob={blobResult.blob}

              highlighted={blobResult.highlighted}

              rawPath={utils.getRawBasePath(

                project.id,

                baseUrl,

                tree.lastCommit.id,

              )} />

          {:else}

            <Placeholder emoji="🍂">

              <span slot="title">

                <div class="txt-monospace">{blobResult.error.path}</div>

              </span>

              <span slot="body">

                {blobResult.error.message}

              </span>

            </Placeholder>

          {/if}

        </div>

      {:else}

        <div class="placeholder">

          <Placeholder emoji="👀">

            <span slot="title">Nothing to show</span>

              We couldn't find any files at this revision.

        </div>

      {/if}

    </div>

  </main>

</Layout>

  import Layout from "./Layout.svelte";

<Layout {baseUrl} {project}>

  <div class="commit">

    <div class="header">

      <div class="summary">

        <div class="txt-medium txt-bold">

          <InlineMarkdown fontSize="medium" content={header.summary} />

        </div>

        <div class="layout-desktop-flex txt-monospace sha1">

          <span>{header.id}</span>

          <Clipboard small text={header.id} />

        </div>

        <div class="layout-mobile-flex txt-monospace sha1 txt-small">

          {formatCommit(header.id)}

          <Clipboard small text={header.id} />

        </div>

      <pre class="description txt-small">{header.description}</pre>

      <CommitAuthorship {header} />

    <Changeset

      projectId={project.id}

      {baseUrl}

      diff={commit.diff}

      revision={commit.commit.id} />

</Layout>

<script lang="ts" context="module">

  export type ActiveTab = "source" | "issues" | "patches" | undefined;

</script>

  export let activeTab: ActiveTab = undefined;

    <SquareButton active={activeTab === "source"}>

    <SquareButton active={activeTab === "issues"}>

    <SquareButton active={activeTab === "patches"}>

  import Layout from "./Layout.svelte";

<Layout {baseUrl} {project} {peer} activeTab="source">

  <SourceBrowsingHeader

    node={baseUrl}

    {project}

    peers={peersWithRoute}

    branches={branchesWithRoute}

    {revision}

    {tree}

    historyLinkActive={true} />

  <div class="history">

    {#each groupCommits(allCommitHeaders) as group (group.time)}

      <p style:color="var(--color-foreground-6)">{group.date}</p>

      <div class="group">

        {#each group.commits as commit (commit.id)}

          <div class="teaser-wrapper">

            <CommitTeaser projectId={project.id} {baseUrl} {commit} />

          </div>

        {/each}

      </div>

    {/each}

    <div class="more">

      {#if loading}

        <Loading small={page !== 0} center />

      {:else if allCommitHeaders.length < totalCommitCount}

        <Button variant="foreground" on:click={loadMore}>More</Button>

      {/if}

  {#if error}

    <div class="message">

      <ErrorMessage message="Couldn't load commits." stackTrace={error} />

    </div>

  {/if}

</Layout>

  import Layout from "./Layout.svelte";

  import Markdown from "@app/components/Markdown.svelte";

  export let issue: Issue;

<Layout {baseUrl} {project} activeTab="issues">

  <div class="issue">

    <div>

      <CobHeader

        {action}

        id={issue.id}

        title={issue.title}

        on:editTitle={editTitle}>

        <svelte:fragment slot="icon">

          <div

            class="state"

            class:closed={issue.state.status === "closed"}

            class:open={issue.state.status === "open"}>

            <Icon name="exclamation-circle" />

        </svelte:fragment>

        <svelte:fragment slot="state">

          {#if issue.state.status === "open"}

            <Badge variant="positive">

              {issue.state.status}

            </Badge>

          {:else}

            <Badge variant="negative">

              {issue.state.status} as

              {issue.state.reason}

            </Badge>

          {/if}

        </svelte:fragment>

        <div slot="description">

          <Markdown

            content={issue.discussion[0].body}

            rawPath={utils.getRawBasePath(project.id, baseUrl, project.head)} />

          {#if issue.discussion[0].reactions}

            <div class="reactions txt-tiny">

              {#each groupedReactions as [reaction, nids], key}

                <Chip {key}>

                  <div class="reaction">

                    <span>{reaction}</span>

                    <span title={nids.join("\n")}>{nids.length}</span>

                  </div>

                </Chip>

              {/each}

            </div>

          {/if}

        </div>

        <div class="author" slot="author">

          opened by <Authorship

            authorId={issue.author.id}

            authorAlias={issue.author.alias} />

          {utils.formatTimestamp(issue.discussion[0].timestamp)}

        </div>

      </CobHeader>

      {#each threads as thread (thread.root.id)}

        <div class="thread">

          <ThreadComponent {thread} {rawPath} on:reply={createReply} />

        </div>

      {/each}

      {#if $httpdStore.state === "authenticated"}

        <div style:margin-top="1rem">

          <Textarea

            resizable

            on:submit={async () => {

            }}

            bind:value={commentBody}

            placeholder="Leave your comment" />

          <div class="actions txt-small">

            <CobStateButton

              items={items.filter(([, state]) => !isEqual(state, issue.state))}

              {selectedItem}

              state={issue.state}

              on:saveStatus={saveStatus} />

            <Button

              variant="secondary"

              size="small"

              disabled={!commentBody}

              on:click={async () => {

                await createComment(commentBody);

                commentBody = "";

              }}>

              Comment

            </Button>

          </div>

      {/if}

    </div>

    <div class="metadata">

      <AssigneeInput

        {action}

        assignees={issue.assignees}

        on:save={saveAssignees} />

      <LabelInput {action} labels={issue.labels} on:save={saveLabels} />

    </div>

</Layout>

  import ErrorMessage from "@app/components/ErrorMessage.svelte";

  import Layout from "@app/views/projects/Layout.svelte";

  import Markdown from "@app/components/Markdown.svelte";

  export let project: Project;

<Layout {baseUrl} {project} activeTab="issues">

  <main>

    {#if $httpdStore.state === "authenticated"}

      {@const session = $httpdStore.session}

      <div class="form">

        <div class="editor">

          <CobHeader {action} bind:title={issueTitle}>

            <svelte:fragment slot="state">

              {#if action === "view"}

                <Badge variant="positive">open</Badge>

              {/if}

            </svelte:fragment>

            <svelte:fragment slot="description">

              {#if action === "create"}

                <Textarea

                  resizable

                  bind:value={issueText}

                  on:submit={() => {

                    void createIssue(session.id);

                  }}

                  placeholder="Write a description" />

              {:else if !issueText}

                <p class="txt-missing">No description</p>

              {:else}

                <Markdown

                  content={issueText}

                  rawPath={utils.getRawBasePath(

                    project.id,

                    baseUrl,

                    project.head,

                  )} />

              {/if}

            </svelte:fragment>

            <div class="author" slot="author">

              {#if action === "view"}

                opened by <Authorship

                  authorId={$httpdStore.session.publicKey} /> now

              {/if}

            </div>

          </CobHeader>

          <div class="actions">

            <Button

              size="small"

              variant="text"

              on:click={() => (preview = !preview)}>

              {#if preview}

                Resume editing

              {:else}

                Preview

              {/if}

            </Button>

            <Button

              disabled={!issueTitle || !issueText}

              size="small"

              variant="secondary"

              on:click={() => void createIssue(session.id)}>

              Submit

            </Button>

        </div>

        <div class="metadata">

          <AssigneeInput

            {action}

            on:save={({ detail: updatedAssignees }) =>

              (assignees = updatedAssignees)} />

          <LabelInput

            {action}

            on:save={({ detail: updatedLabels }) => (labels = updatedLabels)} />

    {:else}

      <ErrorMessage

        message="Couldn't access issue creation. Make sure you're still logged in." />

    {/if}

  </main>

</Layout>

  import Layout from "./Layout.svelte";

  export let project: Project;

<Layout {baseUrl} {project} activeTab="issues">

  <div class="issues">

    <div class="section-header">

      <div style="margin-bottom: 2rem;">

        <div style="display: flex; gap: 0.5rem;">

          {#each options as option}

            {#if !option.disabled}

              <Link

                route={{

                  resource: "project.issues",

                  project: project.id,

                  node: baseUrl,

                  state: option.value,

                }}>

                <SquareButton

                  clickable={option.disabled}

                  active={option.value === state}

                  disabled={option.disabled}>

                  {option.title}

                </SquareButton>

              </Link>

            {:else}

            {/if}

          {/each}

        </div>

      {#if $httpdStore.state === "authenticated" && utils.isLocal(baseUrl.hostname)}

        <Link

          route={{

            resource: "project.newIssue",

            project: project.id,

            node: baseUrl,

          }}>

          <SquareButton>New issue</SquareButton>

        </Link>

      {/if}

    <div class="issues-list">

      {#each allIssues as issue (issue.id)}

        <div class="teaser">

          <IssueTeaser projectId={project.id} {baseUrl} {issue} />

        </div>

        {#if error}

          <ErrorMessage message="Couldn't load issues." stackTrace={error} />

        {:else if loading}

          <!-- We already show a loader below. -->

        {:else}

          <Placeholder emoji="🍂">

            <div slot="title">{capitalize(state)} issues</div>

            <div slot="body">No issues matched the current filter</div>

          </Placeholder>

        {/if}

      {/each}

    </div>

    <div class="more">

      {#if loading}

        <Loading small={page !== 0} center />

      {#if showMoreButton}

        <Button variant="foreground" on:click={() => loadIssues(state)}>

          More

        </Button>

      {/if}

    </div>

</Layout>

<script lang="ts">

  import type { ActiveTab } from "./Header.svelte";

  import type { BaseUrl, Project } from "@httpd-client";

  import Header from "./Header.svelte";

  import ProjectMeta from "./ProjectMeta.svelte";

  export let baseUrl: BaseUrl;

  export let project: Project;

  export let peer: string | undefined = undefined;

  export let activeTab: ActiveTab = undefined;

</script>

<style>

  .header {

    width: 100%;

    max-width: var(--content-max-width);

    min-width: var(--content-min-width);

    padding-top: 4rem;

  }

  main {

    width: 100%;

    max-width: var(--content-max-width);

    min-width: var(--content-min-width);

    padding-bottom: 4rem;

  }

</style>

<div class="header">

  <ProjectMeta

    nodeId={peer}

    projectDescription={project.description}

    projectId={project.id}

    projectName={project.name}

    {baseUrl} />

  <Header

    openIssueCount={project.issues.open}

    openPatchCount={project.patches.open}

    projectId={project.id}

    projectName={project.name}

    trackings={project.trackings}

    {activeTab}

    {baseUrl} />

</div>

<main>

  <slot />

</main>

  import type { Route } from "@app/lib/router";

  import type { Variant } from "@app/components/Badge.svelte";

  import LabelInput from "@app/views/projects/Cob/LabelInput.svelte";

  import Layout from "./Layout.svelte";

  export let project: Project;

<Layout {baseUrl} {project} activeTab="patches">

  <div class="patch">

    <div>

      <CobHeader id={patch.id} title={patch.title}>

        <svelte:fragment slot="icon">

          <div

            class="state"

            class:draft={patch.state.status === "draft"}

            class:open={patch.state.status === "open"}

            class:merged={patch.state.status === "merged"}

            class:archived={patch.state.status === "archived"}>

            <Icon name="patch" />

          </div>

        </svelte:fragment>

        <svelte:fragment slot="state">

          <Badge variant={badgeColor(patch.state.status)}>

            {patch.state.status}

          </Badge>

        </svelte:fragment>

        <svelte:fragment slot="description">

          {#if patch.revisions[0].description}

            <Markdown

              content={patch.revisions[0].description}

              rawPath={utils.getRawBasePath(

                project.id,

                baseUrl,

                patch.revisions[0].id,

              )} />

          {:else}

            <span class="txt-missing">No description available</span>

          {/if}

        </svelte:fragment>

        <div class="author" slot="author">

          opened by <Authorship

            authorId={patch.author.id}

            authorAlias={patch.author.alias} />

          {utils.formatTimestamp(patch.revisions[0].timestamp)}

        </div>

      </CobHeader>

      <div class="tab-line">

        <div style="display: flex; gap: 0.5rem;">

          {#each Object.entries(tabs) as [name, route]}

            <Link {route}>

              <SquareButton size="small" active={name === view.name}>

                {capitalize(name)}

              </SquareButton>

            </Link>

          {/each}

          {#if view.name === "diff"}

            <Link

              route={{

                resource: "project.patch",

                project: project.id,

                node: baseUrl,

                patch: patch.id,

                view: {

                  name: "diff",

                  fromCommit: view.fromCommit,

                  toCommit: view.toCommit,

                },

              }}>

              <SquareButton size="small" active={true}>

                Diff {view.fromCommit.substring(

                  0,

                  6,

                )}..{view.toCommit.substring(0, 6)}

              </SquareButton>

            </Link>

          {/if}

        {#if view.name === "commits" || view.name === "files"}

          <Floating disabled={patch.revisions.length === 1}>

            <svelte:fragment slot="toggle">

              <SquareButton

                size="small"

                clickable={patch.revisions.length > 1}

                disabled={patch.revisions.length === 1}>

                Revision {utils.formatObjectId(view.revision)}

              </SquareButton>

            </svelte:fragment>

            <svelte:fragment slot="modal">

              <Dropdown items={patch.revisions}>

                <svelte:fragment slot="item" let:item>

                  <Link

                    on:afterNavigate={closeFocused}

                    route={{

                      resource: "project.patch",

                      project: project.id,

                      node: baseUrl,

                      patch: patch.id,

                      view: {

                        name: view.name,

                        revision: item.id,

                      },

                    }}>

                    <DropdownItem

                      selected={item.id === view.revision}

                      size="tiny">

                      Revision {utils.formatObjectId(item.id)}

                    </DropdownItem>

                  </Link>

                </svelte:fragment>

              </Dropdown>

            </svelte:fragment>

          </Floating>

      {#if view.name === "diff"}

        <div style:margin-top="1rem">

          <Changeset

            projectId={project.id}

            {baseUrl}

            revision={view.toCommit}

            diff={view.diff} />

        </div>

      {:else if view.name === "activity"}

        {#each timelineTuple as [revision, timelines], index}

          {@const previousRevision =

            index > 0 ? patch.revisions[index - 1] : undefined}

          <RevisionComponent

            {baseUrl}

            projectId={project.id}

            {timelines}

            projectDefaultBranch={project.defaultBranch}

            projectHead={project.head}

            {...revision}

            first={index === 0}

            on:reply={createReply}

            patchId={patch.id}

            expanded={index === patch.revisions.length - 1}

            previousRevId={previousRevision?.id}

            previousRevOid={previousRevision?.oid} />

        {:else}

          <Placeholder emoji="🍂">

            <div slot="title">No activity</div>

            <div slot="body">No activity on this patch yet</div>

          </Placeholder>

        {/each}

      {:else if view.name === "commits"}

        <div class="commit-list">

          {#each view.commits as commit}

            <CommitTeaser projectId={project.id} {baseUrl} {commit} />

          {/each}

        </div>

      {:else if view.name === "files"}

        <div style:margin-top="1rem">

          <Changeset

            projectId={project.id}

            {baseUrl}

            revision={view.revision}

            diff={view.diff} />

        </div>

      {:else}

        {utils.unreachable(view.name)}

    <div class="metadata">

      <div>

        <div class="metadata-section-header">Reviews</div>

        <div class="metadata-section-body">

          {#each Object.values(patchReviews) as { latest, review }}

            <div class="review" class:txt-missing={!latest}>

              <span

                class:review-accept={review.verdict === "accept"}

                class:review-reject={review.verdict === "reject"}>

                {#if review.verdict === "accept"}

                  <Icon size="small" name="checkmark" />

                {:else if review.verdict === "reject"}

                  <Icon size="small" name="cross" />

                {:else}

                  <Icon size="small" name="chat" />

                {/if}

              </span>

              <Authorship

                authorId={review.author.id}

                authorAlias={review.author.alias} />

            </div>

          {:else}

            <div class="txt-missing">No reviews</div>

          {/each}

        </div>

      <LabelInput {action} labels={patch.labels} on:save={saveLabels} />

</Layout>

  import Layout from "./Layout.svelte";

  export let project: Project;

<Layout {baseUrl} {project} activeTab="patches">

  <div class="patches">

    <div style="margin-bottom: 2rem;">

      <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">

        {#each options as option}

          {#if option.disabled}

          {:else}

            <Link

              route={{

                resource: "project.patches",

                project: project.id,

                node: baseUrl,

                search: `state=${option.value}`,

              }}>

              <SquareButton

                clickable={option.disabled}

                active={option.value === state}

                disabled={option.disabled}>

                {option.title}

              </SquareButton>

            </Link>

          {/if}

        {/each}

      </div>

    </div>

    <div class="patches-list">

      {#each allPatches as patch (patch.id)}

        <div class="teaser">

          <PatchTeaser {baseUrl} projectId={project.id} {patch} />

        </div>

      {:else}

        {#if error}

          <ErrorMessage message="Couldn't load patches." stackTrace={error} />

        {:else if loading}

          <!-- We already show a loader below. -->

        {:else}

          <Placeholder emoji="🍂">

            <div slot="title">{capitalize(state)} patches</div>

            <div slot="body">No patches matched the current filter</div>

          </Placeholder>

    <div class="more">

      {#if loading}

        <div style:margin-top={page === 0 ? "8rem" : ""}>

          <Loading small={page !== 0} center />

        </div>

      {#if showMoreButton}

        <Button variant="foreground" on:click={() => loadMore(state)}>

          More

        </Button>

      {/if}

    </div>

</Layout>

{#if view.resource === "tree"}

  <Browser {...view} {baseUrl} {project} />

{:else if view.resource === "history"}

  <History {...view} {baseUrl} {project} />

{:else if view.resource === "commit"}

  <Commit {...view} {baseUrl} {project} />

{:else if view.resource === "issues"}

  <Issues {...view} {baseUrl} {project} />

{:else if view.resource === "newIssue"}

  <NewIssue {...view} {baseUrl} {project} />

{:else if view.resource === "issue"}

  <Issue {...view} {baseUrl} {project} />

{:else if view.resource === "patches"}

  <Patches {...view} {baseUrl} {project} />

{:else if view.resource === "patch"}

  <Patch {...view} {baseUrl} {project} />

{:else}

  {unreachable(view)}

{/if}