flatLeft?: boolean;

    flatRight?: boolean;

    title?: string;

  }

  const {

    flatLeft = false,

    flatRight = false,

    title,

  }: Props = $props();

  const style = $derived(

    color: var(--text-color);

    column-gap: 0;

    row-gap: 0;

    display: grid;

<div

  class="container active"

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

  class:disabled

  class:active

  class:flat-right={flatRight}

    hoverable

    styleCursor="text"

    variant="float"

    styleWidth="100%"

    onclick={e => {

      e.preventDefault();

    onclick: () => void;

    disabled?: boolean;

    title?: string;

  }

  const {

    selected,

    disabled = false,

    title,

  }: Props = $props();

</script>

    align-items: center;

    flex-direction: row;

    min-height: 2rem;

    white-space: nowrap;

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

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

  class="item"

  class:selected

  class:disabled

  {title}

  onclick={() => {

    if (disabled) {

<div class="container">

  <div>

      {#if activeTab.type === "inbox"}

        <Border

          styleCursor="pointer"

  .container {

    display: flex;

    align-items: center;

  }

  .issue-list {

    display: flex;

    flex-direction: column;

    gap: 2px;

<div class="container">

  <div

    style:gap="4px"

    style:white-space="nowrap">

    {title}

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

    <NakedButton

      keyShortcuts="ctrl+f"

      variant="ghost"

      active={showFilters}

      onclick={() => {

        if (showFilters) {

{#if showFilters}

  <div class="global-flex" style:margin="1rem 0">

      {#snippet toggle(onclick)}

          {@render icons(status)}

          {capitalize(status)}

          {@render counters(status)}

          <DropdownList items={["all", "open", "closed"] as IssueStatus[]}>

            {#snippet item(state)}

              <DropdownListItem

                selected={status === state}

                onclick={() => {

                  changeFilter(state);

<div class="main">

  <Button

    variant="secondary"

    flatRight

    onclick={() => void save($state.snapshot(selectedAction["state"]))}>

  <Popover

    popoverPadding="0"

    popoverPositionRight="0">

    {#snippet toggle(onclick)}

        <Icon name="chevron-down" />

      </Button>

    {/snippet}

          items={actions.filter(a => !isEqual(a.state, issueState))}>

          {#snippet item(action)}

            <DropdownListItem

              selected={isEqual(selectedAction, action)}

              onclick={() => {

                selectedAction = action;

<div class="container">

  <div>

      <RepoTeaser name={project.data.name} seeding={repo.seeding} />

    </div>

    disabled?: boolean;

    variant: "primary" | "secondary" | "ghost";

    onclick?: (e: MouseEvent) => void;

    stylePadding?: string;

    active?: boolean;

    keyShortcuts?: string;

<div class="main">

  <Button

    variant="secondary"

    flatRight

    onclick={() =>

  <Popover

    popoverPadding="0"

    popoverPositionRight="0">

    {#snippet toggle(onclick)}

        <Icon name="chevron-down" />

      </Button>

    {/snippet}

          items={actions.filter(a => !isEqual(a.state, patchState))}>

          {#snippet item(action)}

            <DropdownListItem

              selected={isEqual(selectedAction, action)}

              onclick={() => {

                selectedAction = action;

<div class="container">

  <div>

      <RepoTeaser name={project.data.name} seeding={repo.seeding} />

    </div>

<style>

  .teaser {

    align-items: center;

  }

  .seeding {

    display: flex;

    align-items: center;

    white-space: nowrap;

  }

  .metadata-divider {

    width: 2px;

</style>

<div class="content">

    <div class="title">

      <NakedButton

        variant="ghost"

        <Icon name="arrow-left" />

      </NakedButton>

      <span class="global-flex" style:gap="0">

  interface Props {

    compact?: boolean;

    popoverProps: Partial<ComponentProps<typeof Popover>>;

  }

  const {

    compact = true,

    popoverProps,

  }: Props = $props();

</script>

    cursor: pointer;

    border: 0;

    background: none;

    clip-path: var(--2px-corner-fill);

    margin: 0;

    display: flex;

</style>

<div class="global-flex" style:flex-direction="column" style:gap="0.5rem">

    <Icon name="repo" />

  </div>

  {#if activeTab === "issues"}

        });

      }}

      variant="ghost"

      styleJustifyContent="center">

      <Icon name="issue" />

    </Border>

        });

      }}

      variant="ghost"

      styleJustifyContent="center">

      <Icon name="patch" />

    </Border>

<div>

  <NakedButton

    variant="ghost"

    onclick={() => {

      if (getLayout()) {

    justify-content: space-between;

    padding-right: 1.5rem;

    align-items: center;

  }

</style>

    justify-content: space-between;

    padding-right: 1.5rem;

    align-items: center;

  }

</style>

      {notificationCount} />

  {/snippet}

  <div class="container">

      <div class="header">Repositories</div>

      {#if repos.length > 0}

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

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

    -webkit-user-select: text;

    user-select: text;

    margin-bottom: 1rem;

  }

  .content {

    align-items: center;

    justify-content: space-between;

    word-break: break-word;

  }

  .status {

    padding: 0;

    margin-right: 0.75rem;

  }

  .issue-body {

    margin: 1rem 0;

  {/snippet}

  <div class="content">

      {#if editingTitle}

        <div class="title">

          <div

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

    display: flex;

    align-items: center;

  }

</style>

  <div class="container">

    <div class="header">

      <div>Issues</div>

        {#if issues.length > 0}

          <TextInput

            onSubmit={async () => {

        {/if}

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

          <Button

            variant="secondary"

            onclick={() => {

              void router.push({

    align-items: center;

    justify-content: space-between;

    word-break: break-word;

  }

  .title-icons {

    display: flex;

  .status {

    padding: 0;

    margin-right: 0.75rem;

  }

  .patch-list {

    display: flex;

    flex-direction: column;

    gap: 2px;

  {/snippet}

  {#snippet secondColumn()}

      <div class="global-flex" style:gap="4px">

        {project.data.name}

        <Icon name="chevron-right" />

      </div>

      <div style:margin-left="auto">

        <NakedButton

          keyShortcuts="ctrl+f"

          variant="ghost"

          active={showFilters}

          onclick={() => {

            if (showFilters) {

    </div>

    {#if showFilters}

      <div class="global-flex" style:margin="1rem 0">

          {#snippet toggle(onclick)}

              {@render icons(status)}

              {status ? capitalize(status) : "All"}

              {@render counters(status)}

                ] as const}>

                {#snippet item(state)}

                  <DropdownListItem

                    selected={status === state}

                    onclick={async () => {

                      await loadPatches(state);

      }} />

  {:else}

    <div class="content">

        {#if editingTitle}

          <div class="title">

            <div

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

    display: flex;

    align-items: center;

  }

</style>