Radish alpha
r
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Make storage migration modal easier to understand
Archived rudolfs opened 10 months ago
2 files changed +46 -55 17586953 1d831b1e
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>