From 99972b2489eb27ac42681002020ebcaa66717521 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 10 Sep 2024 16:46:16 +0200
Subject: [PATCH] Add copyable current ID to the header

---
 package-lock.json                   |  23 +++
 package.json                        |   3 +
 src-tauri/Cargo.lock                | 269 ++++++++++++++++++++++++++++
 src-tauri/Cargo.toml                |   3 +-
 src-tauri/capabilities/default.json |   4 +-
 src-tauri/src/lib.rs                |   1 +
 src/components/CopyableId.svelte    |  39 ++++
 src/components/Header.svelte        |  14 +-
 src/components/Icon.svelte          |  36 ++++
 src/views/Home.svelte               |   7 +-
 src/views/repo/Layout.svelte        |  12 +-
 11 files changed, 396 insertions(+), 15 deletions(-)
 create mode 100644 src/components/CopyableId.svelte

diff --git a/package-lock.json b/package-lock.json
index 0217f4b..04b9d97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@tauri-apps/api": "^2.0.0-beta.15",
+        "@tauri-apps/plugin-clipboard-manager": "^2.0.0-rc.1",
         "@tauri-apps/plugin-shell": "^2.0.0-beta.8",
         "@tauri-apps/plugin-window-state": "^2.0.0-rc.0"
       },
@@ -18,12 +19,14 @@
         "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
         "@tauri-apps/cli": "^2.0.0-rc.1",
         "@tsconfig/svelte": "^5.0.4",
+        "@types/lodash": "^4.17.7",
         "@types/node": "^20.9.0",
         "baconjs": "^3.0.19",
         "bs58": "^6.0.0",
         "eslint": "^9.9.1",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.43.0",
+        "lodash": "^4.17.21",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.6",
         "svelte": "^5.0.0-next.243",
@@ -1062,6 +1065,14 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tauri-apps/plugin-clipboard-manager": {
+      "version": "2.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-clipboard-manager/-/plugin-clipboard-manager-2.0.0-rc.1.tgz",
+      "integrity": "sha512-hFgUABMmQuVGKwHb8PR9fuqfk0WRkedbWUt/ZV5sL4Q6kLrsp3JYJvtzVPeMYdeBvMqHl8WXNxAc/zwSld2h9w==",
+      "dependencies": {
+        "@tauri-apps/api": "^2.0.0-rc.4"
+      }
+    },
     "node_modules/@tauri-apps/plugin-shell": {
       "version": "2.0.0-rc.1",
       "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-shell/-/plugin-shell-2.0.0-rc.1.tgz",
@@ -1090,6 +1101,12 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.16.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.4.tgz",
@@ -2300,6 +2317,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index 99e8c57..2cd2f43 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "license": "MIT",
   "dependencies": {
     "@tauri-apps/api": "^2.0.0-beta.15",
+    "@tauri-apps/plugin-clipboard-manager": "^2.0.0-rc.1",
     "@tauri-apps/plugin-shell": "^2.0.0-beta.8",
     "@tauri-apps/plugin-window-state": "^2.0.0-rc.0"
   },
@@ -28,12 +29,14 @@
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
     "@tauri-apps/cli": "^2.0.0-rc.1",
     "@tsconfig/svelte": "^5.0.4",
+    "@types/lodash": "^4.17.7",
     "@types/node": "^20.9.0",
     "baconjs": "^3.0.19",
     "bs58": "^6.0.0",
     "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.43.0",
+    "lodash": "^4.17.21",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
     "svelte": "^5.0.0-next.243",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index d677dd2..878b757 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -141,6 +141,24 @@ version = "1.0.86"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b3d1d046238990b9cf5bcde22a3fb3584ee5cf65fb2765f454ed428c7a0063da"
 
+[[package]]
+name = "arboard"
+version = "3.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9fb4009533e8ff8f1450a5bcbc30f4242a1d34442221f72314bea1f5dc9c7f89"
+dependencies = [
+ "clipboard-win",
+ "core-graphics 0.23.2",
+ "image 0.25.2",
+ "log",
+ "objc2",
+ "objc2-app-kit",
+ "objc2-foundation",
+ "parking_lot",
+ "windows-sys 0.48.0",
+ "x11rb",
+]
+
 [[package]]
 name = "ascii"
 version = "1.1.0"
@@ -322,6 +340,12 @@ dependencies = [
  "sha2",
 ]
 
+[[package]]
+name = "bit_field"
+version = "0.10.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc827186963e592360843fb5ba4b973e145841266c1357f7180c43526f2e5b61"
+
 [[package]]
 name = "bitflags"
 version = "1.3.2"
@@ -419,6 +443,12 @@ version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
 
+[[package]]
+name = "byteorder-lite"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f1fe948ff07f4bd06c30984e69f5b4899c516a3ef74f34df92a2df2ab535495"
+
 [[package]]
 name = "bytes"
 version = "1.7.1"
@@ -587,6 +617,15 @@ dependencies = [
  "inout",
 ]
 
+[[package]]
+name = "clipboard-win"
+version = "5.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "15efe7a882b08f34e38556b14f2fb3daa98769d06c7f0c1b076dfd0d983bc892"
+dependencies = [
+ "error-code",
+]
+
 [[package]]
 name = "cocoa"
 version = "0.25.0"
@@ -647,6 +686,12 @@ dependencies = [
  "objc",
 ]
 
+[[package]]
+name = "color_quant"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d7b894f5411737b7867f4827955924d7c254fc9f4d91a6aad6b097804b1018b"
+
 [[package]]
 name = "colored"
 version = "2.1.0"
@@ -780,12 +825,37 @@ dependencies = [
  "crossbeam-utils",
 ]
 
+[[package]]
+name = "crossbeam-deque"
+version = "0.8.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "613f8cc01fe9cf1a3eb3d7f488fd2fa8388403e97039e2f73692932e291a770d"
+dependencies = [
+ "crossbeam-epoch",
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "crossbeam-epoch"
+version = "0.9.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b82ac4a3c2ca9c3460964f020e1402edd5753411d7737aa39c3714ad1b5420e"
+dependencies = [
+ "crossbeam-utils",
+]
+
 [[package]]
 name = "crossbeam-utils"
 version = "0.8.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "22ec99545bb0ed0ea7bb9b8e1e9122ea386ff8a48c0922e43f36d45ab09e0e80"
 
+[[package]]
+name = "crunchy"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a81dae078cea95a014a339291cec439d2f232ebe854a9d672b796c6afafa9b7"
+
 [[package]]
 name = "crypto-bigint"
 version = "0.5.5"
@@ -1242,6 +1312,28 @@ dependencies = [
  "windows-sys 0.52.0",
 ]
 
+[[package]]
+name = "error-code"
+version = "3.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a5d9305ccc6942a704f4335694ecd3de2ea531b114ac2d51f5f843750787a92f"
+
+[[package]]
+name = "exr"
+version = "1.72.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "887d93f60543e9a9362ef8a21beedd0a833c5d9610e18c67abe15a5963dcb1a4"
+dependencies = [
+ "bit_field",
+ "flume",
+ "half",
+ "lebe",
+ "miniz_oxide",
+ "rayon-core",
+ "smallvec",
+ "zune-inflate",
+]
+
 [[package]]
 name = "fastrand"
 version = "2.1.0"
@@ -1308,6 +1400,15 @@ dependencies = [
  "bitflags 1.3.2",
 ]
 
+[[package]]
+name = "flume"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "55ac459de2512911e4b674ce33cf20befaba382d05b62b008afc1c8b57cbf181"
+dependencies = [
+ "spin",
+]
+
 [[package]]
 name = "fnv"
 version = "1.0.7"
@@ -1581,6 +1682,16 @@ dependencies = [
  "zeroize",
 ]
 
+[[package]]
+name = "gethostname"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0176e0459c2e4a1fe232f984bca6890e681076abb9934f6cea7c326f3fc47818"
+dependencies = [
+ "libc",
+ "windows-targets 0.48.5",
+]
+
 [[package]]
 name = "getrandom"
 version = "0.1.16"
@@ -1613,6 +1724,16 @@ dependencies = [
  "polyval",
 ]
 
+[[package]]
+name = "gif"
+version = "0.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3fb2d69b19215e18bb912fa30f7ce15846e301408695e44e0ef719f1da9e19f2"
+dependencies = [
+ "color_quant",
+ "weezl",
+]
+
 [[package]]
 name = "gimli"
 version = "0.29.0"
@@ -1842,6 +1963,16 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "half"
+version = "2.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6dd08c532ae367adf81c312a4580bc67f1d0fe8bc9c460520283f4c0ff277888"
+dependencies = [
+ "cfg-if",
+ "crunchy",
+]
+
 [[package]]
 name = "hashbrown"
 version = "0.12.3"
@@ -2099,6 +2230,37 @@ dependencies = [
  "unicode-normalization",
 ]
 
+[[package]]
+name = "image"
+version = "0.24.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5690139d2f55868e080017335e4b94cb7414274c74f1669c84fb5feba2c9f69d"
+dependencies = [
+ "bytemuck",
+ "byteorder",
+ "color_quant",
+ "exr",
+ "gif",
+ "jpeg-decoder",
+ "num-traits",
+ "png",
+ "qoi",
+ "tiff",
+]
+
+[[package]]
+name = "image"
+version = "0.25.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "99314c8a2152b8ddb211f924cdae532d8c5e4c8bb54728e12fff1b0cd5963a10"
+dependencies = [
+ "bytemuck",
+ "byteorder-lite",
+ "num-traits",
+ "png",
+ "tiff",
+]
+
 [[package]]
 name = "indexmap"
 version = "1.9.3"
@@ -2249,6 +2411,15 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "jpeg-decoder"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f5d4a7da358eff58addd2877a45865158f0d78c911d43a5784ceb7bbf52833b0"
+dependencies = [
+ "rayon",
+]
+
 [[package]]
 name = "js-sys"
 version = "0.3.69"
@@ -2323,6 +2494,12 @@ dependencies = [
  "spin",
 ]
 
+[[package]]
+name = "lebe"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03087c2bad5e1034e8cace5926dec053fb3790248370865f5117a7d0213354c8"
+
 [[package]]
 name = "libappindicator"
 version = "0.9.0"
@@ -3409,6 +3586,15 @@ dependencies = [
  "prost",
 ]
 
+[[package]]
+name = "qoi"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f6d64c71eb498fe9eae14ce4ec935c555749aef511cca85b5568910d6e48001"
+dependencies = [
+ "bytemuck",
+]
+
 [[package]]
 name = "quick-xml"
 version = "0.32.0"
@@ -3516,6 +3702,7 @@ dependencies = [
  "serde_json",
  "tauri",
  "tauri-build",
+ "tauri-plugin-clipboard-manager",
  "tauri-plugin-devtools",
  "tauri-plugin-shell",
  "tauri-plugin-window-state",
@@ -3661,6 +3848,26 @@ version = "0.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "20675572f6f24e9e76ef639bc5552774ed45f1c30e2951e1e99c59888861c539"
 
+[[package]]
+name = "rayon"
+version = "1.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b418a60154510ca1a002a752ca9714984e21e4241e804d32555251faf8b78ffa"
+dependencies = [
+ "either",
+ "rayon-core",
+]
+
+[[package]]
+name = "rayon-core"
+version = "1.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1465873a3dfdaa8ae7cb14b4383657caab0b3e8a0aa9ae8e04b044854c8dfce2"
+dependencies = [
+ "crossbeam-deque",
+ "crossbeam-utils",
+]
+
 [[package]]
 name = "redox_syscall"
 version = "0.5.3"
@@ -4243,6 +4450,9 @@ name = "spin"
 version = "0.9.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6980e8d7511241f8acf4aebddbb1ff938df5eebe98691418c4468d0b72a96a67"
+dependencies = [
+ "lock_api",
+]
 
 [[package]]
 name = "spki"
@@ -4643,6 +4853,22 @@ dependencies = [
  "walkdir",
 ]
 
+[[package]]
+name = "tauri-plugin-clipboard-manager"
+version = "2.1.0-beta.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "becbc5a692e842f8d6a7ab5e490c3c36d267b5c3d5bf4b6a0cdd039d7df25569"
+dependencies = [
+ "arboard",
+ "image 0.24.9",
+ "log",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "thiserror",
+]
+
 [[package]]
 name = "tauri-plugin-devtools"
 version = "2.0.0-rc.1"
@@ -4866,6 +5092,17 @@ dependencies = [
  "once_cell",
 ]
 
+[[package]]
+name = "tiff"
+version = "0.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba1310fcea54c6a9a4fd1aad794ecc02c31682f6bfbecdf460bf19533eed1e3e"
+dependencies = [
+ "flate2",
+ "jpeg-decoder",
+ "weezl",
+]
+
 [[package]]
 name = "time"
 version = "0.3.36"
@@ -5627,6 +5864,12 @@ dependencies = [
  "windows-core 0.58.0",
 ]
 
+[[package]]
+name = "weezl"
+version = "0.1.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "53a85b86a771b1c87058196170769dd264f66c0782acf1ae6cc51bfd64b39082"
+
 [[package]]
 name = "winapi"
 version = "0.3.9"
@@ -6057,6 +6300,23 @@ dependencies = [
  "pkg-config",
 ]
 
+[[package]]
+name = "x11rb"
+version = "0.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d91ffca73ee7f68ce055750bf9f6eca0780b8c85eff9bc046a3b0da41755e12"
+dependencies = [
+ "gethostname",
+ "rustix",
+ "x11rb-protocol",
+]
+
+[[package]]
+name = "x11rb-protocol"
+version = "0.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ec107c4503ea0b4a98ef47356329af139c0a4f7750e621cf2973cd3385ebcb3d"
+
 [[package]]
 name = "xattr"
 version = "1.3.1"
@@ -6073,3 +6333,12 @@ name = "zeroize"
 version = "1.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ced3678a2879b30306d323f4542626697a464a97c0a07c9aebf7ebca65cd4dde"
+
+[[package]]
+name = "zune-inflate"
+version = "0.2.54"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "73ab332fe2f6680068f3582b16a24f90ad7096d5d39b974d1c0aff0125116f02"
+dependencies = [
+ "simd-adler32",
+]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 8ce9b9b..abbc25c 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -25,9 +25,10 @@ radicle-surf = { version = "0.21.0" }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = { version = "1.0" }
 tauri = { version = "2.0.0-rc.0", features = ["isolation"] }
+tauri-plugin-clipboard-manager = "2.1.0-beta.7"
 tauri-plugin-devtools = { version = "2.0.0-rc" }
 tauri-plugin-shell = { version = "2.0.0-rc.0" }
-tauri-plugin-window-state = "2.0.0-rc.1"
+tauri-plugin-window-state = { version = "2.0.0-rc.1" }
 thiserror = { version = "1.0.63" }
 ts-rs = { version = "9.0.1", features = ["serde-json-impl", "no-serde-warnings"] }
 
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 1626d6f..a5db7f5 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -13,6 +13,8 @@
     "core:resources:default",
     "core:menu:default",
     "core:tray:default",
-    "shell:allow-open"
+    "shell:allow-open",
+    "clipboard-manager:default",
+    "clipboard-manager:allow-write-text"
   ]
 }
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index da41c5c..24eeb6a 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -102,6 +102,7 @@ pub fn run() {
             Ok(())
         })
         .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_clipboard_manager::init())
         .plugin(tauri_plugin_window_state::Builder::default().build())
         .invoke_handler(tauri::generate_handler![
             auth::authenticate,
diff --git a/src/components/CopyableId.svelte b/src/components/CopyableId.svelte
new file mode 100644
index 0000000..9c339fe
--- /dev/null
+++ b/src/components/CopyableId.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+
+  import debounce from "lodash/debounce";
+  import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+
+  import Icon from "./Icon.svelte";
+
+  export let id: string;
+
+  let icon: ComponentProps<Icon>["name"] = "copy";
+
+  const restoreIcon = debounce(() => {
+    icon = "copy";
+  }, 1000);
+
+  async function copy() {
+    await writeText(id);
+    icon = "checkmark";
+    restoreIcon();
+  }
+</script>
+
+<style>
+  .copyable-id {
+    cursor: pointer;
+  }
+</style>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+  role="button"
+  tabindex="0"
+  onclick={copy}
+  class="copyable-id global-flex txt-small txt-monospace"
+  style:color="var(--color-foreground-dim)">
+  {id}
+  <Icon name={icon} />
+</div>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 3d8a61f..846fde5 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
   import Background from "./Header/Background.svelte";
   import Border from "./Border.svelte";
-  import Fill from "./Fill.svelte";
   import Icon from "./Icon.svelte";
   import Popover from "./Popover.svelte";
   import ThemeSwitch from "./ThemeSwitch.svelte";
-
-  export let currentPage: string;
 </script>
 
 <style>
@@ -50,14 +47,11 @@
             window.history.forward();
           }} />
       </div>
-      <Fill variant="ghost" stylePadding="0 0.5rem" styleHeight="32px">
-        <span class="txt-small txt-semibold">{currentPage}</span>
-      </Fill>
-      <Border variant="ghost" stylePadding="0 0.25rem" styleHeight="32px">
-        <Icon name="plus" />
-      </Border>
+      <slot name="icon-left" />
     </div>
 
+    <slot name="center" />
+
     <div class="flex-item" style:gap="0.5rem">
       <Border variant="ghost" stylePadding="0 0.5rem" styleHeight="32px">
         <Icon name="offline" />
@@ -71,7 +65,7 @@
           variant="ghost"
           stylePadding="0 0.25rem"
           styleHeight="32px">
-          <Icon name="settings" />
+          <Icon name="more-vertical" />
         </Border>
         <Border variant="ghost" slot="popover" stylePadding="0.5rem 1rem">
           <div style="display: flex; gap: 2rem; align-items: center;">
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
index e468c73..b9d7a7b 100644
--- a/src/components/Icon.svelte
+++ b/src/components/Icon.svelte
@@ -7,7 +7,9 @@
   export let name:
     | "arrow-left"
     | "arrow-right"
+    | "checkmark"
     | "chevron-right"
+    | "copy"
     | "dashboard"
     | "delegate"
     | "diff"
@@ -16,12 +18,14 @@
     | "issue"
     | "lock"
     | "moon"
+    | "more-vertical"
     | "offline"
     | "patch"
     | "plus"
     | "repo"
     | "seedling"
     | "settings"
+    | "sidebar"
     | "sun"
     | "warning";
 </script>
@@ -65,6 +69,17 @@
     <path d="M10 3H9.00003V13H10V3Z" />
     <path d="M13 6H12V7H13V6Z" />
     <path d="M14 7H13V8H14V7Z" />
+  {:else if name === "checkmark"}
+    <path d="M7 11V12H6V11H7Z" />
+    <path d="M8 10V11L7 11L7 10H8Z" />
+    <path d="M9 9V10H8V9L9 9Z" />
+    <path d="M10 8V9L9 9V8H10Z" />
+    <path d="M11 7V8L10 8L10 7H11Z" />
+    <path d="M12 6V7H11V6H12Z" />
+    <path d="M13 5V6L12 6V5L13 5Z" />
+    <path d="M4 8V9H3L3 8H4Z" />
+    <path d="M5 9L5 10L4 10L4 9H5Z" />
+    <path d="M6 10L6 11H5L5 10L6 10Z" />
   {:else if name === "chevron-right"}
     <path d="M9 7L10 7L10 8L9 8L9 7Z" />
     <path d="M8 6H9V7H8L8 6Z" />
@@ -76,6 +91,17 @@
     <path d="M7 10L8 10L8 11L7 11L7 10Z" />
     <path d="M9 8L10 8V9L9 9V8Z" />
     <path d="M8 9H9V10H8L8 9Z" />
+  {:else if name === "copy"}
+    <path d="M6.5 2H13.5V3H6.5V2Z" />
+    <path d="M3.5 5H4.5V6H3.5V5Z" />
+    <path d="M7.5 5H10.5V6H7.5V5Z" />
+    <path d="M6.5 10H13.5V11H6.5V10Z" />
+    <path d="M3.5 13H10.5V14H3.5V13Z" />
+    <path d="M13.5 3L14.5 3V10L13.5 10L13.5 3Z" />
+    <path d="M5.5 3L6.5 3L6.5 10L5.5 10V3Z" />
+    <path d="M2.5 6H3.5L3.5 13H2.5V6Z" />
+    <path d="M10.5 12H11.5V13H10.5V12Z" />
+    <path d="M10.5 6L11.5 6V9H10.5L10.5 6Z" />
   {:else if name === "dashboard"}
     <path d="M2 11H14V12H2V11Z" />
     <path d="M2 9H3V11H2L2 9Z" />
@@ -193,6 +219,10 @@
     <path d="M11 4H12V7H11V4Z" />
     <path d="M10 5H13V6H10V5Z" />
     <path d="M9 3H10V4H9V3Z" />
+  {:else if name === "more-vertical"}
+    <path d="M9 2V4L7 4L7 2L9 2Z" />
+    <path d="M9 7L9 9H7L7 7H9Z" />
+    <path d="M9 12L9 14H7L7 12H9Z" />
   {:else if name === "offline"}
     <path d="M3 6L3 8H2L2 6H3Z" />
     <path d="M13 10V8H14V10H13Z" />
@@ -338,6 +368,12 @@
     <path d="M4 4L5 4L5 7H4V4Z" />
     <path d="M11 9L12 9V12H11V9Z" />
     <path d="M7 4L8 4V7L7 7V4Z" />
+  {:else if name === "sidebar"}
+    <path d="M2 3H3V13H2V3Z" />
+    <path d="M13 3H14V13H13V3Z" />
+    <path d="M6 2H7V14H6V2Z" />
+    <path d="M3 2H13L13 3H3L3 2Z" />
+    <path d="M3 13H13L13 14H3L3 13Z" />
   {:else if name === "sun"}
     <path d="M8 2H9V3H8V2Z" />
     <path d="M14 8V9H13V8H14Z" />
diff --git a/src/views/Home.svelte b/src/views/Home.svelte
index 4dab2ff..6411704 100644
--- a/src/views/Home.svelte
+++ b/src/views/Home.svelte
@@ -4,6 +4,7 @@
 
   import * as router from "@app/lib/router";
 
+  import CopyableId from "@app/components/CopyableId.svelte";
   import Header from "@app/components/Header.svelte";
   import RepoCard from "@app/components/RepoCard.svelte";
 
@@ -22,7 +23,11 @@
   }
 </style>
 
-<Header currentPage="Repositories" />
+<Header>
+  <svelte:fragment slot="center">
+    <CopyableId id={`did:key:${config.publicKey}`} />
+  </svelte:fragment>
+</Header>
 <div class="layout">
   <div class="repo-grid">
     {#each repos as repo}
diff --git a/src/views/repo/Layout.svelte b/src/views/repo/Layout.svelte
index cbde3c2..26720a3 100644
--- a/src/views/repo/Layout.svelte
+++ b/src/views/repo/Layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import type { RepoInfo } from "@bindings/RepoInfo";
 
+  import CopyableId from "@app/components/CopyableId.svelte";
   import Header from "@app/components/Header.svelte";
+  import Icon from "@app/components/Icon.svelte";
   import Link from "@app/components/Link.svelte";
 
   export let repo: RepoInfo;
@@ -9,9 +11,15 @@
   $: project = repo.payloads["xyz.radicle.project"]!;
 </script>
 
-<Header currentPage="Repositories" />
+<Header>
+  <svelte:fragment slot="icon-left">
+    <Icon name="sidebar" />
+  </svelte:fragment>
+  <svelte:fragment slot="center">
+    <CopyableId id={repo.rid} />
+  </svelte:fragment>
+</Header>
 <div>{project.data.name}</div>
-<div>{repo.rid}</div>
 
 Issues
 <Link route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}>