Add InlineTitle component and use it in Issue/Patch lists

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",

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>

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:", "")}

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:", "")}