CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Support drag-and-drop file publishing _community pr!_ ([#4170](https://github.com/lbryio/lbry-desktop/pull/4170))
 - Add advanced editor for comments _community pr!_ ([#4224](https://github.com/lbryio/lbry-desktop/pull/4224))
 - Paid content improvements ([#4234](https://github.com/lbryio/lbry-desktop/pull/4234))
+- Add status-bar to display a link's destination _community pr!_ ([#4259](https://github.com/lbryio/lbry-desktop/pull/4259))
 
 ### Changed
 
@@ -27,7 +28,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Fixed
 
 - Channel selector alignment on creator analytics page _community pr!_ ([#4157](https://github.com/lbryio/lbry-desktop/pull/4157))
-- Fix inconsistent relative-date string for claims, comments, etc. ([#4172](https://github.com/lbryio/lbry-desktop/pull/4172))
+- Fix inconsistent relative-date string for claims, comments, etc. _community pr!_ ([#4172](https://github.com/lbryio/lbry-desktop/pull/4172))
 - Error opening certain files with special characters in name #2777 _community pr!_ ([#4161](https://github.com/lbryio/lbry-desktop/pull/4161))
 - Comic-book file page shows download button first, and then viewer after download _community pr!_ ([#4161](https://github.com/lbryio/lbry-desktop/pull/4161))
 - Only show "start at" on share modal for video/audio _community pr!_ ([#4194](https://github.com/lbryio/lbry-desktop/pull/4194))

electron/createWindow.js

@@ -164,5 +164,17 @@ export default appState => {
     shell.openExternal(url);
   });
 
+  window.webContents.on('update-target-url', (event, url) => {
+    // Change internal links to the lbry protocol. External (https) links should remain unchanged.
+    let dispUrl = url.replace(`http://localhost:${WEBPACK_ELECTRON_PORT}/`, lbryProto);
+    // Non-claims don't need the lbry protocol:
+    if (dispUrl === lbryProto)  {
+      dispUrl = 'Home';
+    } else if (dispUrl.startsWith(lbryProto + '$/')) {
+      dispUrl = dispUrl.replace(lbryProto, '/');
+    }
+    window.webContents.send('update-target-url', dispUrl);
+  });
+
   return window;
 };

ui/component/common/status-bar.jsx

@@ -0,0 +1,48 @@
+// @flow
+import React from 'react';
+import { ipcRenderer } from 'electron';
+import classnames from 'classnames';
+
+type Props = {};
+
+type State = {
+  hoverUrl: string,
+  show: boolean,
+};
+
+class StatusBar extends React.PureComponent<Props, State> {
+  constructor() {
+    super();
+    this.state = {
+      hoverUrl: '',
+      show: false,
+    };
+    (this: any).handleUrlChange = this.handleUrlChange.bind(this);
+  }
+
+  componentDidMount() {
+    ipcRenderer.on('update-target-url', this.handleUrlChange);
+  }
+
+  componentWillUnmount() {
+    ipcRenderer.removeListener('update-target-url', this.handleUrlChange);
+  }
+
+  handleUrlChange(event: any, url: string) {
+    // We want to retain the previous URL so that it can fade out
+    // without the component collapsing.
+    if (url === '') {
+      this.setState({ show: false });
+    } else {
+      this.setState({ show: true });
+      this.setState({ hoverUrl: url });
+    }
+  }
+
+  render() {
+    const { hoverUrl, show } = this.state;
+    return <div className={classnames('status-bar', { visible: show })}>{hoverUrl}</div>;
+  }
+}
+
+export default StatusBar;

ui/component/page/view.jsx

@@ -5,6 +5,9 @@ import classnames from 'classnames';
 import SideNavigation from 'component/sideNavigation';
 import Header from 'component/header';
 import Footer from 'web/component/footer';
+/* @if TARGET='app' */
+import StatusBar from 'component/common/status-bar';
+/* @endif */
 
 export const MAIN_CLASS = 'main';
 type Props = {
@@ -27,6 +30,9 @@ function Page(props: Props) {
       <div className={classnames('main-wrapper__inner')}>
         <main className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage })}>{children}</main>
         {!authPage && !noSideNavigation && <SideNavigation />}
+        {/* @if TARGET='app' */}
+        <StatusBar />
+        {/* @endif */}
       </div>
       {/* @if TARGET='web' */}
       {!noFooter && <Footer />}

ui/scss/all.scss

@@ -44,6 +44,7 @@
 @import 'component/snack-bar';
 @import 'component/spinner';
 @import 'component/splash';
+@import 'component/status-bar';
 @import 'component/subscriptions';
 @import 'component/syntax-highlighter';
 @import 'component/table';

ui/scss/component/_status-bar.scss

@@ -0,0 +1,23 @@
+.status-bar {
+  background-color: #505050;
+  border: solid 1px #707070;
+  border-bottom-color: #505050;
+  border-left-color: #505050;
+  color: #e0e0e0;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  font-size: var(--font-small);
+  padding-top: 2px;
+  padding-left: var(--spacing-xsmall);
+  padding-right: var(--spacing-xsmall);
+  border-top-right-radius: var(--spacing-xsmall);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  transition-delay: 400ms;
+
+  &.visible {
+    opacity: 1;
+    transition-delay: 0s;
+  }
+}