4fcf361 Add InlineTitle component and use it in Issue/Patch lists — radicle-desktop

modified package-lock.json

@@ -19,10 +19,12 @@

         "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
         "@tauri-apps/cli": "^2.0.0-rc.1",
         "@tsconfig/svelte": "^5.0.4",
         "@types/dompurify": "^3.0.5",
         "@types/lodash": "^4.17.7",
         "@types/node": "^20.9.0",
         "baconjs": "^3.0.19",
         "bs58": "^6.0.0",
         "dompurify": "^3.1.6",
         "eslint": "^9.10.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.44.0",

@@ -1107,6 +1109,15 @@

       "integrity": "sha512-BV9NplVgLmSi4mwKzD8BD/NQ8erOY/nUE/GpgWe2ckx+wIQF5RyRirn/QsSSCPeulVpc3RA/iJt6DpfTIZps0Q==",
       "dev": true
     },
     "node_modules/@types/dompurify": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
       "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
       "dev": true,
       "dependencies": {
         "@types/trusted-types": "*"
       }
     },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",

@@ -1128,6 +1139,12 @@

         "undici-types": "~6.19.2"
       }
     },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.6.0.tgz",

@@ -1669,6 +1686,12 @@

         "node": ">=0.10.0"
       }
     },
     "node_modules/dompurify": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
       "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==",
       "dev": true
     },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",

modified package.json

@@ -29,10 +29,12 @@

     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
     "@tauri-apps/cli": "^2.0.0-rc.1",
     "@tsconfig/svelte": "^5.0.4",
     "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.17.7",
     "@types/node": "^20.9.0",
     "baconjs": "^3.0.19",
     "bs58": "^6.0.0",
     "dompurify": "^3.1.6",
     "eslint": "^9.10.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.44.0",

added src/components/InlineTitle.svelte

@@ -0,0 +1,30 @@

 <script lang="ts">
   import dompurify from "dompurify";
   import escape from "lodash/escape";
   export let content: string;
   export let fontSize: "tiny" | "small" | "regular" | "medium" | "large" =
     "small";
   function formatInlineTitle(input: string): string {
     return input.replaceAll(/`([^`]+)`/g, "<code>$1</code>");
   }
 </script>
 <style>
   .content :global(code) {
     font-family: var(--font-family-monospace);
     padding: 0.125rem 0.25rem;
     background-color: var(--color-fill-ghost);
   }
 </style>
 <span
   class="content"
   class:txt-large={fontSize === "large"}
   class:txt-medium={fontSize === "medium"}
   class:txt-regular={fontSize === "regular"}
   class:txt-small={fontSize === "small"}
   class:txt-tiny={fontSize === "tiny"}>
   {@html dompurify.sanitize(formatInlineTitle(escape(content)))}
 </span>

modified src/components/IssueTeaser.svelte

@@ -4,6 +4,7 @@

   import { formatOid } from "@app/lib/utils";
   import Icon from "./Icon.svelte";
   import InlineTitle from "./InlineTitle.svelte";
   import NodeId from "./NodeId.svelte";
   export let issue: Issue;

@@ -60,7 +61,7 @@

       class="global-flex"
       style:flex-direction="column"
       style:align-items="flex-start">
       {issue.title}
       <InlineTitle content={issue.title} />
       <div class="global-flex txt-small">
         <NodeId
           nodeId={issue.author.did.replace("did:key:", "")}

modified src/components/PatchTeaser.svelte

@@ -4,6 +4,7 @@

   import { formatOid } from "@app/lib/utils";
   import Icon from "./Icon.svelte";
   import InlineTitle from "./InlineTitle.svelte";
   import NodeId from "./NodeId.svelte";
   export let patch: Patch;

@@ -65,7 +66,7 @@

       class="global-flex"
       style:flex-direction="column"
       style:align-items="flex-start">
       {patch.title}
       <InlineTitle content={patch.title} />
       <div class="global-flex txt-small">
         <NodeId
           nodeId={patch.author.did.replace("did:key:", "")}