feat(gateway): add cid copy button to directory listings

[VersaliXis]

Fixes: #895

[gammazero]

Could you upload a screenshot with this PR?

[VersaliXis]

Sure! Here is what it looks like. If you want to change anything in the style, feel free to ask.

The code is pretty simple, here is a diff:

diff --git a/gateway/assets/directory.html b/gateway/assets/directory.html
index 888ecabf..9201ce83 100644
--- a/gateway/assets/directory.html
+++ b/gateway/assets/directory.html
@@ -59,6 +59,7 @@
             <a class="ipfs-hash" translate="no" href={{ if $root.DNSLink }}"https://cid.ipfs.tech/#{{ .Hash | urlEscape}}" target="_blank" rel="noreferrer noopener"{{ else }}"{{ $root.GatewayURL }}/ipfs/{{ .Hash | urlEscape}}?filename={{ .Name | urlEscape }}"{{ end }}>
               {{- .ShortHash -}}
             </a>
+            <button class="copy-button" onclick="navigator.clipboard.writeText('{{ .Hash }}')">Copy</button>
             {{ end }}
           </div>
           <div class="nowrap" title="Cumulative size of IPFS DAG (data + metadata)">{{ .Size }}</div>
diff --git a/gateway/assets/style.css b/gateway/assets/style.css
index a8dfdaf7..7e4512e7 100644
--- a/gateway/assets/style.css
+++ b/gateway/assets/style.css
@@ -66,6 +66,23 @@ a:visited {
        font-family: var(--monospace);
 }
 
+.copy-button {
+       color: #7f8491;
+       background-color: inherit;
+       border: 1px solid var(--dark-white);;
+       border-radius: 2px;
+       padding: 1px 2px;
+       cursor: copy;
+}
+
+.copy-button:hover {
+       background-color: var(--light-white);
+}
+
+.copy-button:active {
+       color: #00b0e9;
+}
+
 #header {
        align-items: center;
        background: var(--navy);