Add single issue view

radicle-dev · Sep 25, 2024 · 70bcecc · 70bcecc
1 parent 03bf2b4
commit 70bcecc
Show file tree

Hide file tree

Showing 10 changed files with 225 additions and 32 deletions.
diff --git a/src-tauri/src/commands/cobs.rs b/src-tauri/src/commands/cobs.rs
@@ -4,7 +4,6 @@ use radicle::cob::ObjectId;
 use radicle::git::Oid;
 use radicle::identity::RepoId;
 use radicle::issue::cache::Issues;
-use radicle::issue::IssueId;
 use radicle::patch::cache::Patches;
 
 use crate::error::Error;
@@ -41,14 +40,14 @@ pub fn list_issues(
 pub fn issues_by_id(
     ctx: tauri::State<AppState>,
     rid: RepoId,
-    id: IssueId,
+    id: Oid,
 ) -> Result<Option<cobs::Issue>, Error> {
     let (repo, _) = ctx.repo(rid)?;
     let issues = ctx.profile.issues(&repo)?;
-    let issue = issues.get(&id)?;
+    let issue = issues.get(&id.into())?;
 
     let aliases = &ctx.profile.aliases();
-    let issue = issue.map(|issue| cobs::Issue::new(id, issue, aliases));
+    let issue = issue.map(|issue| cobs::Issue::new(id.into(), issue, aliases));
 
     Ok::<_, Error>(issue)
 }

diff --git a/src/App.svelte b/src/App.svelte
@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
 
   import { invoke } from "@tauri-apps/api/core";
+  import { listen } from "@tauri-apps/api/event";
 
   import * as router from "@app/lib/router";
   import { nodeRunning } from "@app/lib/events";
@@ -10,9 +11,9 @@
 
   import AuthenticationError from "@app/views/AuthenticationError.svelte";
   import Home from "@app/views/Home.svelte";
+  import Issue from "@app/views/repo/Issue.svelte";
   import Issues from "@app/views/repo/Issues.svelte";
   import Patches from "@app/views/repo/Patches.svelte";
-  import { listen } from "@tauri-apps/api/event";
 
   const activeRouteStore = router.activeRouteStore;
 
@@ -51,6 +52,8 @@
   <!-- Don't show anything -->
 {:else if $activeRouteStore.resource === "home"}
   <Home {...$activeRouteStore.params} />
+{:else if $activeRouteStore.resource === "repo.issue"}
+  <Issue {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "repo.issues"}
   <Issues {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "repo.patches"}

diff --git a/src/components/IssueTeaser.svelte b/src/components/IssueTeaser.svelte
@@ -6,8 +6,10 @@
   import Icon from "./Icon.svelte";
   import InlineTitle from "./InlineTitle.svelte";
   import NodeId from "./NodeId.svelte";
+  import { push } from "@app/lib/router";
 
   export let issue: Issue;
+  export let rid: string;
 
   const statusColor: Record<Issue["state"]["status"], string> = {
     open: "var(--color-fill-success)",
@@ -49,7 +51,14 @@
   }
 </style>
 
-<div class="issue-teaser">
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+  tabindex="0"
+  role="button"
+  class="issue-teaser"
+  onclick={() => {
+    void push({ resource: "repo.issue", rid, issue: issue.id });
+  }}>
   <div class="global-flex">
     <div
       class="global-counter status"

diff --git a/src/lib/router.ts b/src/lib/router.ts
@@ -118,6 +118,7 @@ export function routeToPath(route: Route): string {
   } else if (route.resource === "authenticationError") {
     return "/authenticationError";
   } else if (
+    route.resource === "repo.issue" ||
     route.resource === "repo.issues" ||
     route.resource === "repo.patches"
   ) {

diff --git a/src/lib/router/definitions.ts b/src/lib/router/definitions.ts
@@ -1,15 +1,17 @@
 import type { Config } from "@bindings/Config";
 import type { RepoInfo } from "@bindings/RepoInfo";
 import type {
-  RepoIssuesRoute,
-  RepoPatchesRoute,
+  LoadedRepoIssueRoute,
   LoadedRepoIssuesRoute,
   LoadedRepoPatchesRoute,
+  RepoIssueRoute,
+  RepoIssuesRoute,
+  RepoPatchesRoute,
 } from "@app/views/repo/router";
 
 import { invoke } from "@tauri-apps/api/core";
 
-import { loadIssues, loadPatches } from "@app/views/repo/router";
+import { loadIssues, loadIssue, loadPatches } from "@app/views/repo/router";
 
 interface BootingRoute {
   resource: "booting";
@@ -36,13 +38,15 @@ export type Route =
   | AuthenticationErrorRoute
   | BootingRoute
   | HomeRoute
+  | RepoIssueRoute
   | RepoIssuesRoute
   | RepoPatchesRoute;
 
 export type LoadedRoute =
   | AuthenticationErrorRoute
   | BootingRoute
   | LoadedHomeRoute
+  | LoadedRepoIssueRoute
   | LoadedRepoIssuesRoute
   | LoadedRepoPatchesRoute;
 
@@ -54,6 +58,8 @@ export async function loadRoute(
     const repos: RepoInfo[] = await invoke("list_repos");
     const config: Config = await invoke("config");
     return { resource: "home", params: { repos, config } };
+  } else if (route.resource === "repo.issue") {
+    return loadIssue(route);
   } else if (route.resource === "repo.issues") {
     return loadIssues(route);
   } else if (route.resource === "repo.patches") {

diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+  import type { Config } from "@bindings/Config";
+  import type { Issue } from "@bindings/Issue";
+  import type { RepoInfo } from "@bindings/RepoInfo";
+
+  import Border from "@app/components/Border.svelte";
+  import CopyableId from "@app/components/CopyableId.svelte";
+  import Icon from "@app/components/Icon.svelte";
+  import Layout from "./Layout.svelte";
+  import Link from "@app/components/Link.svelte";
+  import NodeId from "@app/components/NodeId.svelte";
+
+  export let repo: RepoInfo;
+  export let issue: Issue;
+  export let issues: Issue[];
+  export let config: Config;
+
+  const statusColor: Record<Issue["state"]["status"], string> = {
+    open: "var(--color-fill-success)",
+    closed: "var(--color-foreground-red)",
+  };
+
+  $: project = repo.payloads["xyz.radicle.project"]!;
+</script>
+
+<style>
+  .title {
+    font-size: var(--font-size-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .issue-teaser {
+    max-width: 11rem;
+    white-space: nowrap;
+  }
+  .issue-list {
+    margin-top: 0.5rem;
+    padding-left: 2px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+</style>
+
+<Layout {repo} selfDid={`did:key:${config.publicKey}`}>
+  <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" />
+    Issues
+  </svelte:fragment>
+
+  <svelte:fragment slot="header-center">
+    <CopyableId id={issue.id} />
+  </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 issue}
+        <Link
+          variant="tab"
+          route={{ resource: "repo.issue", rid: repo.rid, issue: issue.id }}>
+          <div class="global-flex">
+            <div style:color={statusColor[issue.state.status]}>
+              <Icon name="issue" />
+            </div>
+            <span class="txt-small issue-teaser txt-overflow">
+              {issue.title}
+            </span>
+          </div>
+        </Link>
+      {/each}
+    </div>
+  </svelte:fragment>
+
+  <div class="title">{issue.title}</div>
+  <pre>
+    {issue.discussion[0].edits.slice(-1)[0].body}
+  </pre>
+</Layout>
diff --git a/src/views/repo/Issues.svelte b/src/views/repo/Issues.svelte
@@ -6,10 +6,13 @@
 
   import Layout from "./Layout.svelte";
 
+  import Border from "@app/components/Border.svelte";
+  import CopyableId from "@app/components/CopyableId.svelte";
   import Icon from "@app/components/Icon.svelte";
   import IssueTeaser from "@app/components/IssueTeaser.svelte";
   import Link from "@app/components/Link.svelte";
   import NodeId from "@app/components/NodeId.svelte";
+  import RepoHeader from "@app/components/RepoHeader.svelte";
 
   export let repo: RepoInfo;
   export let issues: Issue[];
@@ -28,7 +31,7 @@
   }
 </style>
 
-<Layout {repo} selfDid={`did:key:${config.publicKey}`}>
+<Layout>
   <svelte:fragment slot="breadcrumbs">
     <Link route={{ resource: "home" }}>
       <NodeId
@@ -47,7 +50,22 @@
     Issues
   </svelte:fragment>
 
+  <svelte:fragment slot="header-center">
+    <CopyableId id={repo.rid} />
+  </svelte:fragment>
+
   <svelte:fragment slot="sidebar">
+    <Border
+      hoverable={false}
+      variant="ghost"
+      styleWidth="100%"
+      styleHeight="32px">
+      <RepoHeader
+        {repo}
+        selfDid={`did:key:${config.publicKey}`}
+        emphasizedTitle={false} />
+    </Border>
+
     <div class="global-flex txt-small" style:margin="0.5rem 0">
       <Link
         variant={status === "all" ? "active" : "tab"}
@@ -98,7 +116,7 @@
 
   <div class="list">
     {#each issues as issue}
-      <IssueTeaser {issue} />
+      <IssueTeaser {issue} rid={repo.rid} />
     {/each}
 
     {#if issues.length === 0}

diff --git a/src/views/repo/Layout.svelte b/src/views/repo/Layout.svelte
@@ -1,15 +1,7 @@
 <script lang="ts">
-  import type { RepoInfo } from "@bindings/RepoInfo";
-
-  import Border from "@app/components/Border.svelte";
-  import CopyableId from "@app/components/CopyableId.svelte";
   import Header from "@app/components/Header.svelte";
   import Icon from "@app/components/Icon.svelte";
   import NakedButton from "@app/components/NakedButton.svelte";
-  import RepoHeader from "@app/components/RepoHeader.svelte";
-
-  export let repo: RepoInfo;
-  export let selfDid: string;
 
   let hidden = false;
 </script>
@@ -56,24 +48,18 @@
           <Icon name="sidebar" />
         </NakedButton>
       </svelte:fragment>
+
       <svelte:fragment slot="center">
-        <CopyableId id={repo.rid} />
+        <slot name="header-center" />
       </svelte:fragment>
+
       <svelte:fragment slot="breadcrumbs">
         <slot name="breadcrumbs" />
       </svelte:fragment>
     </Header>
   </div>
 
   <div class="sidebar" class:hidden>
-    <Border
-      hoverable={false}
-      variant="ghost"
-      styleWidth="100%"
-      styleHeight="32px">
-      <RepoHeader {repo} {selfDid} emphasizedTitle={false} />
-    </Border>
-
     <slot name="sidebar" />
   </div>
 

diff --git a/src/views/repo/Patches.svelte b/src/views/repo/Patches.svelte
@@ -6,10 +6,13 @@
 
   import Layout from "./Layout.svelte";
 
+  import Border from "@app/components/Border.svelte";
+  import CopyableId from "@app/components/CopyableId.svelte";
   import Icon from "@app/components/Icon.svelte";
   import Link from "@app/components/Link.svelte";
   import NodeId from "@app/components/NodeId.svelte";
   import PatchTeaser from "@app/components/PatchTeaser.svelte";
+  import RepoHeader from "@app/components/RepoHeader.svelte";
 
   export let repo: RepoInfo;
   export let patches: Patch[];
@@ -28,7 +31,7 @@
   }
 </style>
 
-<Layout {repo} selfDid={`did:key:${config.publicKey}`}>
+<Layout>
   <svelte:fragment slot="breadcrumbs">
     <Link route={{ resource: "home" }}>
       <NodeId
@@ -46,8 +49,22 @@
     <Icon name="chevron-right" />
     Patches
   </svelte:fragment>
+  <svelte:fragment slot="header-center">
+    <CopyableId id={repo.rid} />
+  </svelte:fragment>
 
   <svelte:fragment slot="sidebar">
+    <Border
+      hoverable={false}
+      variant="ghost"
+      styleWidth="100%"
+      styleHeight="32px">
+      <RepoHeader
+        {repo}
+        selfDid={`did:key:${config.publicKey}`}
+        emphasizedTitle={false} />
+    </Border>
+
     <div class="global-flex txt-small" style:margin="0.5rem 0">
       <Link
         variant="tab"