+ ⟵ Landscape
+
+ );
+ }
+}
+
diff --git a/pkg/interface/link/src/js/components/lib/channels-item.js b/pkg/interface/link/src/js/components/lib/channels-item.js
new file mode 100644
index 0000000000..4475dd82fd
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/channels-item.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+
+import { Route, Link } from 'react-router-dom';
+
+export class ChannelsItem extends Component {
+ render() {
+ const { props } = this;
+
+ let selectedClass = (props.selected)
+ ? "bg-gray5 bg-gray1-d b--gray4 b--gray2-d"
+ : "b--transparent";
+
+ let memberCount = Object.keys(props.members).length;
+
+ return (
+
+
+
+ + Your Collections +
+ {privateChannel} + {channelItems} +
+
+
+ );
+ }
+}
+
diff --git a/pkg/interface/link/src/js/components/lib/comment-item.js b/pkg/interface/link/src/js/components/lib/comment-item.js
new file mode 100644
index 0000000000..d2d8fa61c3
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/comment-item.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react'
+import { Sigil } from './icons/sigil';
+import moment from 'moment';
+
+export class CommentItem extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ timeSinceComment: this.getTimeSinceComment()
+ };
+ }
+
+ componentDidMount() {
+ this.updateTimeSinceNewestMessageInterval = setInterval( () => {
+ this.setState({timeSinceComment: this.getTimeSinceComment()});
+ }, 60000);
+ }
+
+ componentWillUnmount() {
+ if (this.updateTimeSinceNewestMessageInterval) {
+ clearInterval(this.updateTimeSinceNewestMessageInterval);
+ this.updateTimeSinceNewestMessageInterval = null;
+ }
+ }
+
+ getTimeSinceComment() {
+ return !!this.props.time ?
+ moment.unix(this.props.time / 1000).from(moment.utc())
+ : '';
+ }
+
+ render() {
+ let props = this.props;
+ return (
+ {props.name}
++ {memberCount + " contributor" + ((memberCount === 1) ? "" : "s")} +
++ {props.linkCount + " link" + ((props.linkCount === 1) ? "" : "s")} +
+
+
+ )
+ }
+}
+
+export default CommentItem
diff --git a/pkg/interface/link/src/js/components/lib/comments-pagination.js b/pkg/interface/link/src/js/components/lib/comments-pagination.js
new file mode 100644
index 0000000000..8c6f9356db
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/comments-pagination.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { Route, Link } from 'react-router-dom';
+
+export class CommentsPagination extends Component {
+ render() {
+ let props = this.props;
+
+ let prevPage = "/" + (Number(props.commentPage) - 1);
+ let nextPage = "/" + (Number(props.commentPage) + 1);
+
+ let prevDisplay = ((Number(props.commentPage) > 0))
+ ? "dib"
+ : "dn";
+
+ let nextDisplay = (Number(props.commentPage + 1) < Number(props.total))
+ ? "dib"
+ : "dn";
+
+ let popout = (props.popout) ? "/popout" : "";
+
+ return (
+
+
+ + + {((props.nickname) ? props.nickname : props.ship)} + + + {this.state.timeSinceComment} + +
+{props.content}
+
+
+ <- Previous Page
+
+
+ Next Page ->
+
+
+ )
+ }
+}
+
+export default CommentsPagination;
\ No newline at end of file
diff --git a/pkg/interface/link/src/js/components/lib/comments.js b/pkg/interface/link/src/js/components/lib/comments.js
new file mode 100644
index 0000000000..5d7ec7f65e
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/comments.js
@@ -0,0 +1,104 @@
+import React, { Component } from 'react'
+import { CommentItem } from './comment-item';
+import { CommentsPagination } from './comments-pagination';
+
+import { uxToHex } from '../../lib/util';
+import { api } from '../../api';
+
+export class Comments extends Component {
+
+ componentDidMount() {
+ let page = "page" + this.props.commentPage;
+ let comments = !!this.props.comments;
+ if ((!comments[page]) && (page !== "page0")) {
+ api.getCommentsPage(
+ this.props.path,
+ this.props.url,
+ this.props.linkPage,
+ this.props.linkIndex,
+ this.props.commentPage);
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ let page = "page" + this.props.commentPage;
+ if (prevProps !== this.props) {
+ if (!!this.props.comments) {
+ if ((page !== "page0") && (!this.props.comments[page])) {
+ api.getCommentsPage(
+ this.props.path,
+ this.props.url,
+ this.props.linkPage,
+ this.props.linkIndex,
+ this.props.commentPage);
+ }
+ }
+ }
+ }
+
+ render() {
+ let props = this.props;
+
+ let page = "page" + props.commentPage;
+
+ let commentsObj = !!props.comments
+ ? props.comments
+ : {};
+
+ let commentsPage = !!commentsObj[page]
+ ? commentsObj[page]
+ : {};
+
+ let total = !!props.comments
+ ? props.comments["total-pages"]
+ : {};
+
+ let commentsList = Object.keys(commentsPage)
+ .map((entry) => {
+
+ let commentObj = commentsPage[entry]
+ let { ship, time, udon } = commentObj;
+
+ let members = !!props.members
+ ? props.members
+ : {};
+
+ let nickname = !!members[ship]
+ ? members[ship].nickname
+ : "";
+
+ let nameClass = nickname ? "inter" : "mono";
+
+ let color = !!members[ship]
+ ? uxToHex(members[ship].color)
+ : "000000";
+
+ return(
+
+ {commentsList}
+
+
+ )
+ }
+}
+
+export default Comments;
\ No newline at end of file
diff --git a/pkg/interface/link/src/js/components/lib/header-bar.js b/pkg/interface/link/src/js/components/lib/header-bar.js
new file mode 100644
index 0000000000..bbd7fb5e9c
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/header-bar.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { IconHome } from '/components/lib/icons/icon-home';
+import { IconSpinner } from '/components/lib/icons/icon-spinner';
+import { Sigil } from '/components/lib/icons/sigil';
+
+export class HeaderBar extends Component {
+ render() {
+ // let spin = (this.props.spinner)
+ // ?
+ //
+ // : null;
+
+ let popout = (window.location.href.includes("popout/"))
+ ? "dn"
+ : "dn db-m db-l db-xl";
+
+ let title = (document.title === "Home")
+ ? ""
+ : document.title;
+
+ return (
+
+ );
+ }
+}
+
diff --git a/pkg/interface/link/src/js/components/lib/icons/icon-home.js b/pkg/interface/link/src/js/components/lib/icons/icon-home.js
new file mode 100644
index 0000000000..ddd33b94d4
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/icons/icon-home.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+
+export class IconHome extends Component {
+ render() {
+ return (
+ //TODO relocate to ~launch when OS1 is ported
+ 
+ );
+ }
+}
diff --git a/pkg/interface/link/src/js/components/lib/icons/icon-sidebar-switch.js b/pkg/interface/link/src/js/components/lib/icons/icon-sidebar-switch.js
new file mode 100644
index 0000000000..644442693a
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/icons/icon-sidebar-switch.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import { api } from '../../../api'
+
+export class SidebarSwitcher extends Component {
+ render() {
+
+ let popoutSwitcher = this.props.popout
+ ? "dn-m dn-l dn-xl"
+ : "dib-m dib-l dib-xl";
+
+ return (
+
+ );
+ }
+}
+
+export default SidebarSwitcher
diff --git a/pkg/interface/link/src/js/components/lib/icons/icon-spinner.js b/pkg/interface/link/src/js/components/lib/icons/icon-spinner.js
new file mode 100644
index 0000000000..ee2730f6a5
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/icons/icon-spinner.js
@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+export class IconSpinner extends Component {
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/pkg/interface/link/src/js/components/lib/icons/sigil.js b/pkg/interface/link/src/js/components/lib/icons/sigil.js
new file mode 100644
index 0000000000..146b3a0651
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/icons/sigil.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { sigil, reactRenderer } from 'urbit-sigil-js';
+
+
+export class Sigil extends Component {
+ render() {
+ const { props } = this;
+
+ if (props.ship.length > 14) {
+ return (
+
+
+ );
+ } else {
+ return (
+
+ {sigil({
+ patp: props.ship,
+ renderer: reactRenderer,
+ size: props.size,
+ colors: [props.color, "white"]
+ })}
+
+ );
+ }
+ }
+}
diff --git a/pkg/interface/link/src/js/components/lib/link-item.js b/pkg/interface/link/src/js/components/lib/link-item.js
new file mode 100644
index 0000000000..f9210569a6
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/link-item.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react'
+import moment from 'moment';
+
+import { Sigil } from '/components/lib/icons/sigil';
+import { Route, Link } from 'react-router-dom';
+
+export class LinkItem extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ timeSinceLinkPost: this.getTimeSinceLinkPost()
+ };
+ }
+
+ componentDidMount() {
+ this.updateTimeSinceNewestMessageInterval = setInterval( () => {
+ this.setState({timeSinceLinkPost: this.getTimeSinceLinkPost()});
+ }, 60000);
+ }
+
+ componentWillUnmount() {
+ if (this.updateTimeSinceNewestMessageInterval) {
+ clearInterval(this.updateTimeSinceNewestMessageInterval);
+ this.updateTimeSinceNewestMessageInterval = null;
+ }
+ }
+
+ getTimeSinceLinkPost() {
+ return !!this.props.timestamp ?
+ moment.unix(this.props.timestamp / 1000).from(moment.utc())
+ : '';
+ }
+
+ render() {
+
+ let props = this.props;
+
+ let mono = (props.nickname) ? "inter white-d" : "mono white-d";
+
+ let URLparser = new RegExp(/((?:([\w\d\.-]+)\:\/\/?){1}(?:(www)\.?){0,1}(((?:[\w\d-]+\.)*)([\w\d-]+\.[\w\d]+))){1}(?:\:(\d+)){0,1}((\/(?:(?:[^\/\s\?]+\/)*))(?:([^\?\/\s#]+?(?:.[^\?\s]+){0,1}){0,1}(?:\?([^\s#]+)){0,1})){0,1}(?:#([^#\s]+)){0,1}/);
+
+ let hostname = URLparser.exec(props.url);
+
+ if (hostname) {
+ hostname = hostname[4];
+ }
+
+ let comments = props.comments + " comment" + ((props.comments === 1) ? "" : "s");
+
+ return (
+
+
+ )
+ }
+}
+
+export default LinkItem
diff --git a/pkg/interface/link/src/js/components/lib/link-submit.js b/pkg/interface/link/src/js/components/lib/link-submit.js
new file mode 100644
index 0000000000..63ea9f1b2b
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/link-submit.js
@@ -0,0 +1,117 @@
+import React, { Component } from 'react'
+import { api } from '../../api';
+
+
+export class LinkSubmit extends Component {
+ constructor() {
+ super();
+ this.state = {
+ linkValue: "",
+ linkTitle: "",
+ linkValid: false
+ }
+ this.setLinkValue = this.setLinkValue.bind(this);
+ this.setLinkTitle = this.setLinkTitle.bind(this);
+ }
+
+ onClickPost() {
+ let link = this.state.linkValue;
+ let title = (this.state.linkTitle)
+ ? this.state.linkTitle
+ : this.state.linkValue;
+ let request = api.postLink(this.props.path, link, title);
+
+ if (request) {
+ this.setState({linkValue: "", linkTitle: ""})
+ }
+ }
+
+ setLinkValid(link) {
+ let URLparser = new RegExp(/((?:([\w\d\.-]+)\:\/\/?){1}(?:(www)\.?){0,1}(((?:[\w\d-]+\.)*)([\w\d-]+\.[\w\d]+))){1}(?:\:(\d+)){0,1}((\/(?:(?:[^\/\s\?]+\/)*))(?:([^\?\/\s#]+?(?:.[^\?\s]+){0,1}){0,1}(?:\?([^\s#]+)){0,1})){0,1}(?:#([^#\s]+)){0,1}/);
+
+ let validURL = URLparser.exec(link);
+
+ if (!validURL) {
+ let checkProtocol = URLparser.exec("http://" + link);
+ if (checkProtocol) {
+ this.setState({linkValid: true});
+ this.setState({linkValue: "http://" + link});
+ } else {
+ this.setState({linkValid: false})
+ }
+ } else if (validURL) {
+ this.setState({linkValid: true});
+ }
+ }
+
+ setLinkValue(event) {
+ this.setState({linkValue: event.target.value});
+ this.setLinkValid(event.target.value);
+ }
+
+ setLinkTitle(event) {
+ this.setState({linkTitle: event.target.value});
+ }
+
+ render() {
+
+ let activeClasses = (this.state.linkValid)
+ ? "green2 pointer"
+ : "gray2";
+
+ return (
+
+
+
+ {props.title} + {hostname} ↗ +
+ +
+ {(props.nickname)
+ ? props.nickname
+ : "~" + props.ship}
+ {this.state.timeSinceLinkPost}
+
+
+ {comments}
+
+
+
+
+