import CreateIssue from "@app/views/repo/CreateIssue.svelte";

{:else if $activeRouteStore.resource === "repo.createIssue"}

  <CreateIssue {...$activeRouteStore.params} />

  tabindex={onclick !== undefined ? 0 : -1}

  export let disabled: boolean = false;

  .container:hover:not(.disabled) .p1-3 {

  .container:hover:not(.disabled) .p2-2 {

  .container:hover:not(.disabled) .p2-3 {

  .container:hover:not(.disabled) .p2-4 {

  .container:hover:not(.disabled) .p3-1 {

  .container:hover:not(.disabled) .p3-2 {

  .container:hover:not(.disabled) .p3-3 {

  .container:hover:not(.disabled) .p3-4 {

  .container:hover:not(.disabled) .p3-5 {

  .container:hover:not(.disabled) .p4-2 {

  .container:hover:not(.disabled) .p4-3 {

  .container:hover:not(.disabled) .p4-4 {

  .container:hover:not(.disabled) .p5-3 {

  .container:active:not(.disabled) .p1-3 {

  .container:active:not(.disabled) .p2-2 {

  .container:active:not(.disabled) .p2-3 {

  .container:active:not(.disabled) .p2-4 {

  .container:active:not(.disabled) .p3-1 {

  .container:active:not(.disabled) .p3-2 {

  .container:active:not(.disabled) .p3-3 {

  .container:active:not(.disabled) .p3-4 {

  .container:active:not(.disabled) .p3-5 {

  .container:active:not(.disabled) .p4-2 {

  .container:active:not(.disabled) .p4-3 {

  .container:active:not(.disabled) .p4-4 {

  .container:active:not(.disabled) .p5-3 {

  .container.disabled {

    color: var(--color-foreground-disabled);

  }

  .disabled .p1-3,

  .disabled .p2-2,

  .disabled .p2-3,

  .disabled .p2-4,

  .disabled .p3-1,

  .disabled .p3-2,

  .disabled .p3-3,

  .disabled .p3-4,

  .disabled .p3-5,

  .disabled .p4-2,

  .disabled .p4-3,

  .disabled .p4-4,

  .disabled .p5-3 {

    background-color: var(--color-fill-ghost);

  }

<div

  class="container"

  style:cursor={!disabled ? "pointer" : "default"}

  class:disabled

  onclick={!disabled ? onclick : undefined}

  role="button"

  tabindex="0"

  {style}>

<script lang="ts">

  import { onMount } from "svelte";

  import Border from "./Border.svelte";

  export let name: string | undefined = undefined;

  export let placeholder: string | undefined = undefined;

  export let value: string | undefined = undefined;

  export let autofocus: boolean = false;

  export let autoselect: boolean = false;

  export let disabled: boolean = false;

  let inputElement: HTMLInputElement | undefined = undefined;

  let focussed = false;

  onMount(() => {

    if (inputElement === undefined) {

      return;

    }

    if (autofocus) {

      // We set preventScroll to true for Svelte animations to work.

      inputElement.focus({ preventScroll: true });

    }

    if (autoselect) {

      inputElement.select();

    }

  });

</script>

<style>

  input {

    background: var(--color-background-dip);

    font-family: inherit;

    font-size: var(--font-size-small);

    color: var(--color-foreground-contrast);

    line-height: 1.6;

    outline: none;

    text-overflow: ellipsis;

    width: 100%;

    height: 100%;

    margin: 0;

    height: 32px;

    padding: 0.25rem 0.75rem;

  }

  input::placeholder {

    font-family: var(--font-family-sans-serif);

    color: var(--color-foreground-dim);

    opacity: 1 !important;

  }

  input[disabled] {

    cursor: not-allowed;

  }

</style>

<Border variant={focussed ? "secondary" : "ghost"} styleWidth="100%">

  <input

    on:focus={() => {

      focussed = true;

    }}

    on:blur={() => {

      focussed = false;

    }}

    bind:this={inputElement}

    type="text"

    {name}

    {placeholder}

    {disabled}

    bind:value

    autocomplete="off"

    spellcheck="false"

    on:input

    on:click

    on:change />

</Border>

<script lang="ts">

  import { afterUpdate, beforeUpdate } from "svelte";

  import Border from "./Border.svelte";

  export let value: string | undefined = undefined;

  export let placeholder: string | undefined = undefined;

  export let focus: boolean = false;

  // If `false` we automatically grow the textarea height.

  // If `true` we show a resize handle on the lower right-hand side of the

  // textarea to allow resizing the textarea manually.

  export let resizable: boolean = false;

  // Defaulting selectionStart and selectionEnd to 0, since no full support yet.

  export let selectionStart: number = 0;

  export let selectionEnd: number = 0;

  let textareaElement: HTMLTextAreaElement | undefined = undefined;

  let focussed = false;

  // We either auto-grow the textarea, or allow the user to resize it. These

  // options are mutually exclusive because a user resized textarea would

  // automatically shrink upon text input otherwise.

  $: if (textareaElement && !resizable) {

    // React to changes to the textarea content.

    // eslint-disable-next-line @typescript-eslint/no-unused-expressions

    value;

    // Reset height to 0px on every value change so that the textarea

    // immediately shrinks when all text is deleted.

    textareaElement.style.height = `0px`;

    textareaElement.style.height = `${textareaElement.scrollHeight}px`;

  }

  $: if (textareaElement && focus) {

    textareaElement.focus();

    focus = false;

  }

  beforeUpdate(() => {

    if (textareaElement) {

      ({ selectionStart, selectionEnd } = textareaElement);

    }

  });

  afterUpdate(() => {

    if (textareaElement && focus) {

      textareaElement.setSelectionRange(selectionStart, selectionEnd);

      textareaElement.focus();

    }

  });

</script>

<style>

  textarea {

    background-color: var(--color-background-dip);

    border: 0;

    color: var(--color-foreground-default);

    font-family: inherit;

    height: 5rem;

    padding: 0.75rem;

    width: 100%;

    min-height: 6.375rem;

    resize: none;

    overflow: hidden;

    outline: none;

  }

  .resizable {

    resize: vertical;

    overflow: scroll;

  }

  textarea::-webkit-scrollbar-corner {

    background-color: transparent;

  }

  textarea::-webkit-resizer {

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAD9QTFRFAAAAZWZmZmZmZmVmZWVmwsLBwsLCZ2ZmwsPCZmdlZWZnwcLBZmZkYGJjw8LDwsPBZmZnZWZkZ2ZkwMDBWFtcNbXb2AAAABV0Uk5TAP///////////////////////1H/YDRrSAAAAFBJREFUeJxVjUESgCAMA2mqAoqK6P/f6kzjIXIos5NumpI8g5LbpJnNQvDl52mWUYTquqnXwstshpHaTi+o+hHXccoKmHVW9yvIxv218ntivmOYAWpLfqaRAAAAAElFTkSuQmCC);

    background-size: 7px;

    background-repeat: no-repeat;

    background-position: bottom 1px right 1px;

  }

  textarea::placeholder {

    color: var(--color-foreground-dim);

  }

</style>

<Border variant={focussed ? "secondary" : "ghost"} styleWidth="100%">

  <textarea

    tabindex="0"

    bind:this={textareaElement}

    bind:value

    aria-label="textarea-comment"

    class="txt-small"

    class:resizable

    {placeholder}

    on:change

    on:click

    on:input

    on:focus={() => (focussed = true)}

    on:blur={() => (focussed = false)}

    on:paste

    on:keypress>

  </textarea>

</Border>

    route.resource === "repo.createIssue" ||

import type { LoadedRepoRoute, RepoRoute } from "@app/views/repo/router";

  loadCreateIssue,

  | RepoRoute;

  | LoadedRepoRoute;

  } else if (route.resource === "repo.createIssue") {

    return loadCreateIssue(route);

<script lang="ts">

  import type { Author } from "@bindings/Author";

  import type { Config } from "@bindings/Config";

  import type { Issue } from "@bindings/Issue";

  import type { RepoInfo } from "@bindings/RepoInfo";

  import { invoke } from "@tauri-apps/api/core";

  import { issueStatusColor } from "@app/lib/utils";

  import * as router from "@app/lib/router";

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

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

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

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

  import Layout from "./Layout.svelte";

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

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

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

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

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

  export let repo: RepoInfo;

  export let issues: Issue[];

  export let config: Config;

  let title: string = "";

  let description: string = "";

  const labels: string[] = [];

  const assignees: Author[] = [];

  const embeds: { name: string; content: string }[] = [];

  async function createIssue() {

    const response: Issue = await invoke("create_issue", {

      rid: repo.rid,

      new: { title, description, labels, assignees, embeds },

    });

    void router.push({

      resource: "repo.issue",

      rid: repo.rid,

      issue: response.id,

    });

  }

  $: project = repo.payloads["xyz.radicle.project"]!;

</script>

<style>

  .title {

    font-size: var(--font-size-medium);

    font-weight: var(--font-weight-medium);

    -webkit-user-select: text;

    user-select: text;

    margin-bottom: 1rem;

    margin-top: 0.35rem;

  }

  .issue-teaser {

    max-width: 11rem;

    white-space: nowrap;

  }

  .issue-list {

    margin-top: 0.5rem;

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    padding-bottom: 1rem;

  }

  .content {

    padding: 0 1rem 1rem 1rem;

  }

</style>

<Layout>

  <svelte:fragment slot="breadcrumbs">

    <Link route={{ resource: "home" }}>

      <NodeId

        nodeId={config.publicKey}

        alias={config.alias}

        styleFontFamily="var(--font-family-sans-serif)"

        styleFontSize="var(--font-size-tiny)" />

    </Link>

    <Link route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}>

      <div class="global-flex">

        <Icon name="chevron-right" />

        {project.data.name}

      </div>

    </Link>

    <Icon name="chevron-right" />

    <Link route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}>

      Issues

    </Link>

    <Icon name="chevron-right" />

    New Issue

  </svelte:fragment>

  <svelte:fragment slot="sidebar">

    <Border

      hoverable={false}

      variant="ghost"

      styleWidth="100%"

      styleHeight="32px">

      <div style:margin-left="0.5rem">

        <Icon name="issue" />

      </div>

      <span class="txt-small txt-semibold">Issues</span>

      <div class="global-flex txt-small" style:margin-left="auto">

        <div

          class="global-counter"

          style:padding="0 6px"

          style:background-color="var(--color-fill-ghost)"

          style:gap="4px">

          {project.meta.issues.open + project.meta.issues.closed}

        </div>

      </div>

    </Border>

    <div class="issue-list">

      {#each issues as sidebarIssue}

        <Link

          variant="tab"

          route={{

            resource: "repo.issue",

            rid: repo.rid,

            issue: sidebarIssue.id,

          }}>

          <div class="global-flex">

            <div

              style:color={issueStatusColor[sidebarIssue.state.status]}

              style:margin-left="2px">

              <Icon name="issue" />

            </div>

            <span class="txt-small issue-teaser txt-overflow">

              <InlineTitle content={sidebarIssue.title} fontSize="small" />

            </span>

          </div>

        </Link>

      {/each}

    </div>

  </svelte:fragment>

  <div class="content">

    <div class="title">

      <TextInput placeholder="Title" autofocus bind:value={title} />

    </div>

    <Textarea placeholder="Description" bind:value={description} />

    <div

      class="global-flex"

      style:justify-content="flex-end"

      style:margin-top="1.5rem">

      <OutlineButton

        variant="ghost"

        onclick={() => {

          window.history.back();

        }}>

        Cancel

      </OutlineButton>

      <Button

        variant="ghost"

        disabled={title.length === 0}

        onclick={createIssue}>

        Save

      </Button>

    </div>

  </div>

</Layout>

  import * as router from "@app/lib/router";

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

  .header {

    font-weight: var(--font-weight-medium);

    font-size: var(--font-size-medium);

    display: flex;

    padding: 0 1rem 1rem 1rem;

    align-items: center;

    justify-content: space-between;

  }

  <div class="header">

    <div>Issues</div>

    <div class="txt-regular txt-semibold">

      <Button

        variant="secondary"

        onclick={() => {

          void router.push({

            resource: "repo.createIssue",

            rid: repo.rid,

          });

        }}>

        <Icon name="plus" />New

      </Button>

    </div>

  </div>

export interface RepoCreateIssueRoute {

  resource: "repo.createIssue";

  rid: string;

}

export interface LoadedRepoCreateIssueRoute {

  resource: "repo.createIssue";

  params: {

    repo: RepoInfo;

    config: Config;

    issues: Issue[];

  };

}

  | RepoCreateIssueRoute

  | LoadedRepoCreateIssueRoute

export async function loadCreateIssue(

  route: RepoCreateIssueRoute,

): Promise<LoadedRepoCreateIssueRoute> {

  const repo: RepoInfo = await invoke("repo_by_id", {

    rid: route.rid,

  });

  const config: Config = await invoke("config");

  const issues: Issue[] = await invoke("list_issues", {

    rid: route.rid,

    status: "all",

  });

  return {

    resource: "repo.createIssue",

    params: { repo, config, issues },

  };

}

  } else if (route.resource === "repo.createIssue") {

    const url = [...pathSegments, "issues", "create"].join("/");

    return url;

      const idOrAction = segments.shift();

      if (idOrAction) {

        if (idOrAction === "create") {

          return { resource: "repo.createIssue", rid };

        } else {

          return {

            resource: "repo.issue",

            rid,

            issue: idOrAction,

          };

        }