Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Make storage migration modal easier to understand
✓ CI success Rūdolfs Ošiņš committed 11 months ago
commit 1d831b1e03b5418089852f7eeb6d4947865a022a
parent 17586953bb9c6ac1f9044efe5ee7df56b270c9c7
1 passed (1 total) View logs
2 files changed +46 -55
modified src/App.svelte
@@ -25,8 +25,10 @@
  import { unreachable, isMac } from "@app/lib/utils";



  import Auth from "@app/views/booting/Auth.svelte";
+ 
  import Command from "./components/Command.svelte";

  import CreateIdentity from "@app/views/booting/CreateIdentity.svelte";

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

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

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

  import Patch from "@app/views/repo/Patch.svelte";
@@ -34,9 +36,6 @@
  import RepoHome from "@app/views/repo/RepoHome.svelte";

  import Repos from "@app/views/home/Repos.svelte";

  import Spinner from "./components/Spinner.svelte";
- 
  import FullWindowError from "./components/FullWindowError.svelte";
- 
  import ExternalLink from "./components/ExternalLink.svelte";
- 
  import Command from "./components/Command.svelte";



  const activeRouteStore = router.activeRouteStore;
@@ -113,28 +112,32 @@
      resetFontSize();

    }

  }} />
- 


{#if $activeRouteStore.resource === "booting"}

  {#if startup.error?.code === "IdentityError.MissingProfile"}

    <CreateIdentity />

  {:else if startup.error?.code === "PassphraseError.InvalidPassphrase" && profile}

    <Auth profile={{ did: profile.publicKey, alias: profile.alias }} />

  {:else if startup.error}
- 
    <FullWindowError title="An error occurred" error={startup.error}>
- 
      We were unable to load your Radicle identity, or your Radicle installation
- 
      is outdated.
- 
      <br />
- 
      If you have an existing Radicle installation, make sure you have
- 
      <ExternalLink href="https://radicle.xyz/download">
- 
        the latest version.
- 
      </ExternalLink>
- 
      <br />
- 
      <br />
+ 
    <FullWindowError
+ 
      title="Radicle storage needs migration"
+ 
      error={startup.error}>

      <div
- 
        style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
- 
        To migrate your Radicle storage, make sure to restart your radicle-node
- 
        or run:
- 
        <Command styleWidth="30rem" command="rad cob migrate" />
+ 
        class="global-flex"
+ 
        style:flex-direction="column"
+ 
        style:align-items="flex-start">
+ 
        Your Radicle storage is outdated and incompatible with this version of
+ 
        Radicle Desktop.
+ 
        <br />
+ 
        <br />
+
+ 
        If you installed via a package manager, update the package using your
+ 
        system's update command, otherwise first install the latest version of
+ 
        Radicle CLI:
+ 
        <Command
+ 
          styleWidth="fit-content"
+ 
          command="curl -sSf https://radicle.xyz/install | sh" />
+ 
        Then migrate your storage by restarting radicle-node or running:
+ 
        <Command styleWidth="fit-content" command="rad cob migrate" />

      </div>

    </FullWindowError>

  {:else if showSpinner}
modified src/components/FullWindowError.svelte
@@ -1,76 +1,64 @@
<script lang="ts">
- 
  import type { Snippet } from "svelte";

  import type { ErrorWrapper } from "@bindings/error/ErrorWrapper";
+ 
  import type { Snippet } from "svelte";
- 
  import ExternalLink from "./ExternalLink.svelte";

  import Border from "./Border.svelte";
- 
  import Icon from "./Icon.svelte";

  import Command from "./Command.svelte";
+ 
  import ExternalLink from "./ExternalLink.svelte";
+ 
  import Icon from "./Icon.svelte";



  const {
- 
    title = "An error occurred",

    children,

    error,
- 
  }: { title?: string; children?: Snippet; error?: ErrorWrapper } = $props();
+ 
    title,
+ 
  }: {
+ 
    children?: Snippet;
+ 
    error?: ErrorWrapper;
+ 
    title: string;
+ 
  } = $props();

</script>



<style>
- 
  .error-container {
+ 
  .container {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

    width: 100%;

  }
-
- 
  .error-icon {
- 
    color: var(--color-fill-);
- 
    margin-bottom: 1rem;
- 
  }
-
- 
  .error-title {
- 
    font-size: var(--font-size-large);
- 
    font-weight: var(--font-weight-bold);
- 
    margin: 0 0 0.75rem 0;
- 
  }
-
- 
  .error-support {
- 
    padding: 0 2rem;
- 
    margin-bottom: 0;
- 
  }

</style>
- 
<div class="error-container txt-small">
+ 
<div class="container txt-small">

  <Border

    styleMaxWidth="45rem"

    variant="float"
- 
    styleJustifyContent="center"

    styleBackgroundColor="var(--color-background-float)"
- 
    styleDisplay="flex"

    styleFlexDirection="column"
- 
    stylePadding="1.5rem">
- 
    <div class="error-icon">
+ 
    stylePadding="3rem">
+ 
    <div class="global-flex" style:margin-bottom="2rem">

      <Icon size="32" name="warning" />
+ 
      <div class="error-title txt-large txt-bold">{title}</div>

    </div>
- 
    <h2 class="error-title">{title}</h2>
- 


    {#if children}
- 
      <p class="error-support" style:text-align="center">
- 
        {@render children()}
- 
      </p>
+ 
      {@render children()}

    {/if}
- 
    <p class="error-support">
+ 
    <div style:width="100%" style:margin-top="1rem">

      If this problem persists, please contact

      <ExternalLink

        href="https://radicle.zulipchat.com/#narrow/channel/444463-desktop/topic/support">

        support{error ? " with the error details below." : "."}

      </ExternalLink>
- 
    </p>
- 
    {#if error?.message}
- 
      <Command styleWidth="30rem" showPrompt={false} command={error.message} />
- 
    {/if}
+ 
      {#if error?.message}
+ 
        <div style:margin-top="0.5rem">
+ 
          <Command
+ 
            styleWidth="fit-content"
+ 
            showPrompt={false}
+ 
            command={error.message} />
+ 
        </div>
+ 
      {/if}
+ 
    </div>

  </Border>

</div>