"defaultHttpdHostname": "DEFAULT_HTTPD_HOSTNAME",

    "defaultHttpdScheme": "DEFAULT_HTTPD_SCHEME",

    "defaultNodePort": "DEFAULT_NODE_PORT",

    "pinned": {

      "__name": "PINNED_NODES",

      "__format": "json"

    }

    "defaultHttpdHostname": "seed.radicle.garden",

    "defaultHttpdScheme": "https",

    "defaultNodePort": 8776,

    "pinned": [

      {

        "baseUrl": {

          "hostname": "seed.radicle.xyz",

          "port": 443,

          "scheme": "https"

        }

      }

    ]

    "defaultHttpdHostname": "127.0.0.1",

    "defaultHttpdScheme": "http",

    "pinned": [

      {

        "baseUrl": {

          "hostname": "127.0.0.1",

          "port": 8081,

          "scheme": "http"

        }

      }

    ]

      defaultHttpdHostname: string;

      defaultNodePort: number;

      pinned: { baseUrl: BaseUrl }[];

use crate::axum_extra::Path;

    Ok::<_, Error>(Json(Response::new(

    )))

  import Home from "@app/views/home/Index.svelte";

{:else if $activeRouteStore.resource === "home"}

  <Home />

<script lang="ts">

  import Footer from "@app/App/Footer.svelte";

  import Header from "@app/App/Header.svelte";

  import MobileFooter from "@app/App/MobileFooter.svelte";

</script>

<style>

  .app {

    display: flex;

    flex-direction: column;

    height: 100%;

  }

  .header {

    border-bottom: 1px solid var(--color-fill-separator);

  }

  .content {

    height: 100%;

    overflow-y: scroll;

  }

  @media (max-width: 719.98px) {

    .app {

      display: grid;

      grid-template-rows: 1fr auto;

      height: 100%;

    }

    .content {

      overflow-y: scroll;

    }

  }

</style>

<div class="app">

  <div class="global-hide-on-mobile-down header">

    <Header />

  </div>

  <div class="content">

    <slot />

  </div>

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

    <div class="global-hide-on-mobile-down">

      <Footer />

    </div>

    <div class="global-hide-on-small-desktop-up">

      <MobileFooter />

    </div>

  </div>

</div>

<script lang="ts">

  import Breadcrumbs from "./Header/Breadcrumbs.svelte";

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

</script>

<style>

  header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin: 0;

    padding: 0.5rem 1rem;

    height: 3.5rem;

  }

  .logo {

    height: var(--button-regular-height);

    margin: 0 0.5rem;

  }

</style>

<header>

  <Link

    style="display: flex; align-items: center;"

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

    <img

      width="24"

      height="24"

      class="logo"

      alt="Radicle logo"

      src="/radicle.svg" />

  </Link>

  <Breadcrumbs />

</header>

<script lang="ts">

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

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

  import NodeSegment from "./Breadcrumbs/NodeSegment.svelte";

  import ProjectSegment from "./Breadcrumbs/ProjectSegment.svelte";

  import Separator from "./Breadcrumbs/Separator.svelte";

  const activeRouteStore = router.activeRouteStore;

</script>

<style>

  .breadcrumbs {

    display: flex;

    align-items: center;

    column-gap: 0.25rem;

    line-height: 1rem;

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

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

    white-space: nowrap;

    flex-wrap: wrap;

  }

</style>

{#if $activeRouteStore.resource === "booting" || $activeRouteStore.resource === "home" || $activeRouteStore.resource === "error" || $activeRouteStore.resource === "notFound"}

  <!-- Don't render breadcrumbs for these routes. -->

{:else if $activeRouteStore.resource === "nodes"}

  <div class="breadcrumbs">

    <NodeSegment baseUrl={$activeRouteStore.params.baseUrl} />

  </div>

{:else if $activeRouteStore.resource === "project.source" || $activeRouteStore.resource === "project.history" || $activeRouteStore.resource === "project.commit" || $activeRouteStore.resource === "project.issues" || $activeRouteStore.resource === "project.issue" || $activeRouteStore.resource === "project.patches" || $activeRouteStore.resource === "project.patch"}

  <div class="breadcrumbs">

    <NodeSegment baseUrl={$activeRouteStore.params.baseUrl} />

    <Separator />

    <ProjectSegment activeRoute={$activeRouteStore} />

  </div>

{:else}

  {utils.unreachable($activeRouteStore)}

{/if}

<script lang="ts">

  import type { BaseUrl } from "@http-client";

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

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

  export let baseUrl: BaseUrl;

</script>

<style>

  .segment :global(a:hover) {

    color: var(--color-fill-secondary);

  }

</style>

<span class="segment">

  <Link

    style="display: flex; align-items: center; gap: 0.25rem;"

    route={{

      resource: "nodes",

      params: {

        baseUrl,

        projectPageIndex: 0,

      },

    }}>

    <IconSmall name="seedling" />

    {baseUrl.hostname}

  </Link>

</span>

<script lang="ts">

  import type { ProjectLoadedRoute } from "@app/views/projects/router";

  import { formatObjectId, unreachable } from "@app/lib/utils";

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

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

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

  import Separator from "./Separator.svelte";

  export let activeRoute: ProjectLoadedRoute;

</script>

<style>

  .segment {

    display: flex;

    align-items: center;

    gap: 0.25rem;

  }

  .segment :global(a:hover) {

    color: var(--color-fill-secondary);

  }

  .id {

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

    font-family: var(--font-family-monospace);

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

  }

</style>

<span class="segment">

  <Link

    route={{

      resource: "project.source",

      project: activeRoute.params.project.id,

      node: activeRoute.params.baseUrl,

    }}>

    <div class="segment">

      {#if activeRoute.params.project.visibility?.type === "private"}

        <IconSmall name="lock" />

      {/if}

      {activeRoute.params.project.name}

    </div>

  </Link>

</span>

<span class="segment">

  {#if activeRoute.resource === "project.history"}

    <Separator />

    <Link

      route={{

        resource: "project.history",

        project: activeRoute.params.project.id,

        node: activeRoute.params.baseUrl,

      }}>

      Commits

    </Link>

  {:else if activeRoute.resource === "project.commit"}

    <Separator />

    <Link

      route={{

        resource: "project.history",

        project: activeRoute.params.project.id,

        node: activeRoute.params.baseUrl,

      }}>

      Commits

    </Link>

  {:else if activeRoute.resource === "project.issue" || activeRoute.resource === "project.issues"}

    <Separator />

    <Link

      route={{

        resource: "project.issues",

        project: activeRoute.params.project.id,

        node: activeRoute.params.baseUrl,

      }}>

      Issues

    </Link>

  {:else if activeRoute.resource === "project.patch" || activeRoute.resource === "project.patches"}

    <Separator />

    <Link

      route={{

        resource: "project.patches",

        project: activeRoute.params.project.id,

        node: activeRoute.params.baseUrl,

      }}>

      Patches

    </Link>

  {:else if activeRoute.resource === "project.source"}

    {#if activeRoute.params.path !== "/"}

      <Separator />

      <FilePath filenameWithPath={activeRoute.params.path} />

    {/if}

  {:else}

    {unreachable(activeRoute)}

  {/if}

</span>

{#if activeRoute.resource === "project.commit"}

  <Separator />

  <span class="id">

    <div class="global-hide-on-small-desktop-down">

      {activeRoute.params.commit.commit.id}

    </div>

    <div class="global-hide-on-medium-desktop-up">

      {formatObjectId(activeRoute.params.commit.commit.id)}

    </div>

  </span>

{:else if activeRoute.resource === "project.issue"}

  <Separator />

  <span class="id">

    <div class="global-hide-on-small-desktop-down">

      {activeRoute.params.issue.id}

    </div>

    <div class="global-hide-on-medium-desktop-up">

      {formatObjectId(activeRoute.params.issue.id)}

    </div>

  </span>

{:else if activeRoute.resource === "project.patch"}

  <Separator />

  <span class="id">

    <div class="global-hide-on-small-desktop-down">

      {activeRoute.params.patch.id}

    </div>

    <div class="global-hide-on-medium-desktop-up">

      {formatObjectId(activeRoute.params.patch.id)}

    </div>

  </span>

{/if}

<script lang="ts">

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

</script>

<span style:color="var(--color-foreground-dim)">

  <IconSmall name="chevron-right" />

</span>

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

    bottom: 1.5rem;

    <div style:position="absolute">

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.5rem 0;

  <div class="section">

  <div class="txt-missing">

<div class="section">

  Policy:

  <span class="txt-bold">{capitalize(policy)}</span>

</div>

<div class="txt-missing">

  {#if policy === "allow"}

    All discovered repositories will get seeded.

  {:else if policy === "block"}

    Only repositories marked as such will get seeded.

  {/if}

</div>

  if (loadedRoute.resource === "booting" || loadedRoute.resource === "home") {

      return null;

      return { resource: "home" };

  if (route.resource === "home") {

    return "/";

  } else if (route.resource === "nodes") {

    return nodePath(route.params.baseUrl);

import type { HomeRoute, HomeLoadedRoute } from "@app/views/home/router";

  | HomeRoute

  | HomeLoadedRoute

  } else if (route.resource === "home") {

    return { resource: "home" };

// Removes the first and last character which are always `/`.

export function formatUserAgent(agent: string): string {

  return agent.slice(1, -1);

}

  import AppLayout from "@app/App/AppLayout.svelte";

<AppLayout>

</AppLayout>

  import AppLayout from "@app/App/AppLayout.svelte";

<AppLayout>

</AppLayout>

<script lang="ts">

  import type { ComponentProps } from "svelte";

  import type { ProjectInfo } from "@app/components/ProjectCard";

  import { derived } from "svelte/store";

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

  import { deduplicateStore } from "@app/lib/deduplicateStore";

  import { fetchProjectInfos } from "@app/components/ProjectCard";

  import { handleError } from "@app/views/home/error";

  import { preferredSeeds } from "@app/lib/seeds";

  import AppLayout from "@app/App/AppLayout.svelte";

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

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

  import HomepageSection from "./components/HomepageSection.svelte";

  import PreferredSeedDropdown from "./components/PreferredSeedDropdown.svelte";

  const selectedSeed = deduplicateStore(

    derived(preferredSeeds, $ => $?.selected),

  );

  let preferredSeedProjects:

    | ProjectInfo[]

    | ComponentProps<ErrorMessage>["error"]

    | undefined;

  async function loadPreferredSeedProjects() {

    preferredSeedProjects = undefined;

    if (!$selectedSeed) return;

    preferredSeedProjects = await fetchProjectInfos($selectedSeed, {

      show: "pinned",

    }).catch(error => error);

  }

  $: $selectedSeed && void loadPreferredSeedProjects();

</script>

<style>

  .wrapper {

    padding: 3rem;

    max-width: 78rem;

    margin: 0 auto;

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 3rem;

  }

  .empty-state {

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

  }

  .empty-state .heading {

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

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

  }

  .empty-state .label {

    display: block;

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

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

  }

  .flex-icon-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

  }

  .project-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));

    gap: 1rem;

  }

  @media (max-width: 719.98px) {

    .wrapper {

      width: 100%;

      padding: 1rem;

    }

  }

</style>

<AppLayout>

  <div class="wrapper" style:padding-bottom="2.5rem">

    <HomepageSection

      loading={preferredSeedProjects === undefined}

      empty={preferredSeedProjects instanceof Error ||

        preferredSeedProjects?.length === 0}

      title="Explore">

      <svelte:fragment slot="title">

        <div class="flex-icon-item" style:min-width="0">

          <span class="txt-large">Explore</span>

          <PreferredSeedDropdown selectedSeed={$preferredSeeds.selected} />

        </div>

      </svelte:fragment>

      <svelte:fragment slot="subtitle">

        Pinned repositories on your selected seed node

      </svelte:fragment>

      <svelte:fragment slot="empty">

        <div class="empty-state">

          {#if preferredSeedProjects instanceof Error}

            <ErrorMessage

              {...handleError(

                preferredSeedProjects,

                baseUrlToString($preferredSeeds.selected),

              )} />

          {:else}

            <div class="heading">No pinned repositories</div>

            <div class="label">

              The selected seed node doesn't have any pinned repositories.

            </div>

          {/if}

        </div>

      </svelte:fragment>

      <div class="project-grid">

        {#if preferredSeedProjects && !(preferredSeedProjects instanceof Error)}

          {#each preferredSeedProjects as projectInfo}

            <ProjectCard {projectInfo} />

          {/each}

        {/if}

      </div>

    </HomepageSection>

  </div>

</AppLayout>

<script lang="ts">

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

  export let title: string;

  export let loading = false;

  export let empty: boolean = false;

</script>

<style>

  .section-header {

    margin-bottom: 1.5rem;

  }

  .title {

    width: 100%;

    display: flex;

    align-items: center;

  }

  .title > * {

    margin: 0;

  }

  .subtitle {

    max-width: 100%;

    display: flex;

    flex-wrap: wrap;

    gap: 0.25rem;

    align-items: center;

    margin-top: 0.25rem;

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

  }

  .actions {

    display: flex;

    gap: 0.5rem;

    margin-left: auto;

  }

  .empty-container {

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

    border-radius: var(--border-radius-small);

    border: 1px solid var(--color-border-hint);

    display: flex;

    justify-content: center;

    padding: 3rem 1rem;

    align-items: center;

    opacity: 0.75;

  }

  .empty-container > .inner {

    max-width: 36rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

  }

</style>

<section>

  <div class="section-header">

    <div class="title">

      <slot name="title">

        <h2>{title}</h2>

      </slot>

      <div class="actions">

        <slot name="actions" />

      </div>

    </div>

    <div class="subtitle">

      <slot name="subtitle" />

    </div>

  </div>

  {#if loading}

    <div class="empty-container">

      <div class="inner">

        <Loading small />

      </div>

    </div>

  {:else if empty}

    <div class="empty-container">

      <div class="inner">

        <slot name="empty" />

      </div>

    </div>

  {:else}

    <div>

      <slot />

    </div>

  {/if}

</section>

<script lang="ts">

  import { HttpdClient, type BaseUrl } from "@http-client";

  import config from "virtual:config";

  import {

    addSeedsToConfiguredSeeds,

    configuredPreferredSeeds,

    preferredSeeds as preferredSeedsStore,

    removeSeedFromConfiguredSeeds,

    selectPreferredSeed,

  } from "@app/lib/seeds";

  import { closeFocused } from "@app/components/Popover.svelte";

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

  import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte";

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

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

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

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

  export let selectedSeed: BaseUrl;

  const validateInput = async (seed: BaseUrl) => {

    if (stateOptions.find(s => s.hostname === seed.hostname)) {

      validationMessage = "Seed node already added.";

      return false;

    }

    const api = new HttpdClient(seed);

    try {

      await api.getNode();

      return true;

    } catch (e) {

      validationMessage = "Seed node isn't reachable";

      return false;

    }

  };

  // Reset state if inputValue changes

  $: {

    customSeed;

    submittingInput = false;

    validationMessage = undefined;

    valid = true;

  }

  $: stateOptions = $preferredSeedsStore.seeds;

  let valid = true;

  let submittingInput = false;

  let validationMessage: undefined | string = undefined;

  let customSeed: string = "";

  let expanded = false;

</script>

<style>

  .popover {

    display: flex;

    flex-direction: column;

  }

  .validation-message {

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

    margin-top: 0.5rem;

    margin-left: 0.5rem;

    display: flex;

    align-items: center;

    gap: 0.25rem;

  }

  .dropdown-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

  }

  .divider {

    height: 1px;

    width: 100%;

    margin: 0.5rem 0.25rem;

    background-color: var(--color-border-default);

  }

  .icon-item {

    display: flex;

    gap: 0.5rem;

    align-items: center;

  }

</style>

<Popover

  bind:expanded

  popoverContainerMinWidth="0"

  popoverPositionTop="2.5rem"

  popoverPositionLeft="-0.25rem"

  popoverPadding="0.25rem"

  popoverBorderRadius="var(--border-radius-small)">

  <div

    class="icon-item"

    slot="toggle"

    title="Switch preferred seeds"

    let:toggle>

    <div class="txt-large txt-bold txt-overflow">{selectedSeed.hostname}</div>

    <IconButton on:click={toggle}>

      <IconSmall name={expanded ? "chevron-up" : "chevron-down"} />

    </IconButton>

  </div>

  <svelte:fragment slot="popover">

    <div style:width="16rem">

      <TextInput

        {valid}

        name="seed"

        bind:value={customSeed}

        loading={submittingInput}

        placeholder="Navigate to seed URL"

        on:submit={async () => {

          submittingInput = true;

          const customSeedBaseUrl = {

            hostname: customSeed,

            port: config.nodes.defaultHttpdPort,

            scheme: config.nodes.defaultHttpdScheme,

          };

          valid = await validateInput(customSeedBaseUrl);

          if (valid) {

            addSeedsToConfiguredSeeds(

              $configuredPreferredSeeds.length === 0

                ? [customSeedBaseUrl, config.fallbackPreferredSeed]

                : [customSeedBaseUrl],

            );

            selectPreferredSeed(customSeedBaseUrl);

            customSeed = "";

            closeFocused();

          } else {

            submittingInput = false;

          }

        }} />

      {#if validationMessage}

        <span class="validation-message txt-small">{validationMessage}</span>

      {/if}

      <div class="divider" />

      <div class="popover">

        {#if stateOptions}

          <DropdownList items={stateOptions}>

            <DropdownListItem

              let:item

              on:click={() => {

                selectPreferredSeed(item);

                closeFocused();

              }}

              slot="item"

              selected={item.hostname === selectedSeed.hostname}>

              <div class="dropdown-item">

                <div class="icon-item" style:min-width="0">

                  <IconSmall name="seedling" />

                  <div class="txt-overflow">

                    {item.hostname}

                  </div>

                </div>

                {#if stateOptions && stateOptions.length > 1}

                  <IconButton

                    on:click={() => {

                      removeSeedFromConfiguredSeeds(item.hostname);

                      selectPreferredSeed(config.fallbackPreferredSeed);

                    }}>

                    <IconSmall name="cross" />

                  </IconButton>

                {/if}

              </div>

            </DropdownListItem>

            <DropdownListItem

              on:click={() => {

                selectPreferredSeed(config.fallbackPreferredSeed);

                closeFocused();

              }}

              slot="empty"

              selected>

              <div class="dropdown-item">

                <div class="icon-item" style:min-width="0">

                  <IconSmall name="seedling" />

                  <div class="txt-overflow">

                    {config.fallbackPreferredSeed.hostname}

                  </div>

                </div>

              </div>

            </DropdownListItem>

          </DropdownList>

        {/if}

      </div>

    </div>

  </svelte:fragment>

</Popover>

import { ResponseParseError, ResponseError } from "@http-client/lib/fetcher";

export function handleError(

  error: Error | ResponseParseError | ResponseError,

  url: string,

): {

  error: Error | ResponseParseError | ResponseError;

  title: string;

  description: string;

} {

  if (error instanceof ResponseParseError) {

    return {

      error,

      title: "Could not parse the request",

      description: error.description,

    };

  } else if (error instanceof ResponseError) {

    return {

      error,

      title: "Could not load the repositories",

      description: `You're trying to fetch repositories from a node that is not reachable, make sure the address <a href="${url}">${url}</a> is correct and the right ports are exposed if its your node.`,

    };

  } else if (

    error instanceof TypeError &&

    error.message === "Failed to fetch"

  ) {

    return {

      error,

      title: "Resource not found",

      description: `You're trying to fetch a resource that is not available. Check that the ids is correct, and try to run <code>$ rad sync</code>.`,

    };

  } else {

    return {

      error,

      title: "Could not load this view",

      description:

        "You stumbled on an unknown error, we aren't exactly sure what happened.",

    };

  }

}

export interface HomeRoute {

  resource: "home";

}

export interface HomeLoadedRoute extends HomeRoute {}

<script lang="ts">

  import type { DefaultSeedingPolicy } from "@http-client";

  import capitalize from "lodash/capitalize";

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

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

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

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

  export let seedingPolicy: DefaultSeedingPolicy;

  export let popoverPositionRight: string | undefined = undefined;

  export let popoverPositionLeft: string | undefined = undefined;

</script>

<style>

  .container {

    display: flex;

    gap: 0.5rem;

    align-items: center;

  }

  .separator {

    width: 1px;

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

    display: flex;

    height: 1rem;

  }

  .popover {

    width: 18rem;

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

  }

</style>

<div class="container">

  <span>

    Policy: <span class="txt-semibold">

      {capitalize(seedingPolicy.default)}

    </span>

  </span>

  {#if seedingPolicy.default === "allow"}

    <span class="separator" />

    <span>

      Scope:

      <span class="txt-semibold">{capitalize(seedingPolicy.scope)}</span>

    </span>

  {/if}

  <span style:color="var(--color-fill-gray)">

    <Popover

      {popoverPositionRight}

      {popoverPositionLeft}

      popoverPositionBottom="2.5rem">

      <IconButton slot="toggle" let:toggle on:click={toggle}>

        <span style:color="var(--color-fill-gray)">

          <IconSmall name="info" />

        </span>

      </IconButton>

      <div slot="popover" class="popover">

        <ScopePolicyExplainer {seedingPolicy} />

      </div>

    </Popover>

  </span>

</div>