improve ui

package-lock.json

@@ -2125,6 +2125,14 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.0.8",
+      "resolved": "http://registry.npm.taobao.org/copy-to-clipboard/download/copy-to-clipboard-3.0.8.tgz",
+      "integrity": "sha1-9OgvSogw3ORma3643tDJvMMTq6k=",
+      "requires": {
+        "toggle-selection": "1.0.6"
+      }
+    },
     "core-js": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
@@ -10185,6 +10193,11 @@
         "repeat-string": "1.6.1"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "http://registry.npm.taobao.org/toggle-selection/download/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toposort": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "copy-to-clipboard": "^3.0.8",
     "load-script": "^1.0.0",
     "pressure": "^2.1.2",
     "react": "^16.4.2",

src/Flows.js

@@ -1,4 +1,5 @@
 import React, {Component, PureComponent} from 'react';
+import copy from 'copy-to-clipboard';
 import {ColorPicker} from './color_picker';
 import {Time, TitleLine, HighlightedText} from './Common';
 import './Flows.css';
@@ -67,6 +68,11 @@ function Reply(props) {
 }
 
 function FlowItem(props) {
+    function copy_link(event) {
+        event.preventDefault();
+        copy(event.target.href);
+    }
+
     return (
         <div className="flow-item box">
             {parseInt(props.info.pid,10)>window.LATEST_POST_ID && <div className="flow-item-dot" /> }
@@ -83,7 +89,8 @@ function FlowItem(props) {
                         <span className="icon icon-reply" />
                     </span>
                 }
-                <code className="box-id">#{props.info.pid}</code>&nbsp;
+                <code className="box-id"><a href={'##'+props.info.pid} onClick={copy_link}>#{props.info.pid}</a></code>
+                &nbsp;
                 <Time stamp={props.info.timestamp} />
             </div>
             <HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />

src/Sidebar.css

@@ -16,6 +16,7 @@
 }
 
 .sidebar {
+    user-select: text;
     transition: left 150ms ease-out;
     position: fixed;
     left: 100%;

src/index.css

@@ -3,6 +3,7 @@ body {
     padding: 0;
     background-size: cover;
     overflow-x: hidden;
+    user-select: none;
 }
 
 body::-webkit-scrollbar {