From 2005604c9d06abf10396fe4210f25ba1a4309125 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Mon, 9 Nov 2020 21:47:12 -0500 Subject: [PATCH 01/56] landscape: use indigo theme imports --- pkg/interface/config/webpack.dev.js | 2 +- pkg/interface/config/webpack.prod.js | 2 +- pkg/interface/package-lock.json | 99 ++++++------------- pkg/interface/package.json | 3 +- pkg/interface/src/views/App.js | 6 +- .../apps/chat/components/ChatMessage.tsx | 2 +- .../apps/chat/components/overlay-sigil.js | 4 + .../src/views/apps/chat/css/custom.css | 3 - .../src/views/apps/launch/css/custom.css | 7 +- .../src/views/apps/publish/css/custom.css | 3 - 10 files changed, 46 insertions(+), 85 deletions(-) diff --git a/pkg/interface/config/webpack.dev.js b/pkg/interface/config/webpack.dev.js index 9bdb61031..fe97e7c07 100644 --- a/pkg/interface/config/webpack.dev.js +++ b/pkg/interface/config/webpack.dev.js @@ -96,7 +96,7 @@ module.exports = { ] } }, - exclude: /node_modules/ + exclude: /node_modules\/(?!(@tlon\/indigo-dark|@tlon\/indigo-light)\/).*/ }, { test: /\.css$/i, diff --git a/pkg/interface/config/webpack.prod.js b/pkg/interface/config/webpack.prod.js index 85f431360..c7ea82a1c 100644 --- a/pkg/interface/config/webpack.prod.js +++ b/pkg/interface/config/webpack.prod.js @@ -25,7 +25,7 @@ module.exports = { ] } }, - exclude: /node_modules/ + exclude: /node_modules\/(?!(@tlon\/indigo-dark|@tlon\/indigo-light)\/).*/ }, { test: /\.css$/i, diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json index e103e8c63..b34bce4f3 100644 --- a/pkg/interface/package-lock.json +++ b/pkg/interface/package-lock.json @@ -1687,10 +1687,15 @@ "@styled-system/css": "^5.1.5" } }, + "@tlon/indigo-dark": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@tlon/indigo-dark/-/indigo-dark-1.0.5.tgz", + "integrity": "sha512-V8QOT1FylerKjhmNxxrOWoSnB6AiTFXwG/kt1ApFi+bww3rZ1u/ykkHLikfHvGl5xvbUTSUtTvuC6G4iR7ZQcQ==" + }, "@tlon/indigo-light": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@tlon/indigo-light/-/indigo-light-1.0.3.tgz", - "integrity": "sha512-3OPSdf9cejP/TSzWXuBaYbzLtAfBzQnc75SlPLkoPfwpxnv1Bvy9hiWngLY0WnKRR6lMOldnkYQCCuNWeDibYQ==" + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@tlon/indigo-light/-/indigo-light-1.0.5.tgz", + "integrity": "sha512-ZtZTDUT4V0RlSAvJ1wJi+ogjH5HOb/FgS+EeEGDWo1zUSgbO4Sgxjfzyq3TZ5EYRQRhSAgkBBFYGolmQXoc9+A==" }, "@tlon/indigo-react": { "version": "1.2.13", @@ -10118,8 +10123,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -10140,14 +10144,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -10162,20 +10164,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -10292,8 +10291,7 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -10305,7 +10303,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -10320,7 +10317,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10328,14 +10324,12 @@ "minimist": { "version": "1.2.5", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10354,7 +10348,6 @@ "version": "0.5.3", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "^1.2.5" } @@ -10416,8 +10409,7 @@ "npm-normalize-package-bin": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "npm-packlist": { "version": "1.4.8", @@ -10445,8 +10437,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -10458,7 +10449,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -10536,8 +10526,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -10573,7 +10562,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10593,7 +10581,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -10637,14 +10624,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -11125,8 +11110,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -11147,14 +11131,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -11169,20 +11151,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -11299,8 +11278,7 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -11312,7 +11290,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -11327,7 +11304,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -11335,14 +11311,12 @@ "minimist": { "version": "1.2.5", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -11361,7 +11335,6 @@ "version": "0.5.3", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "^1.2.5" } @@ -11423,8 +11396,7 @@ "npm-normalize-package-bin": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "npm-packlist": { "version": "1.4.8", @@ -11452,8 +11424,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -11465,7 +11436,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -11543,8 +11513,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -11580,7 +11549,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -11600,7 +11568,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -11644,14 +11611,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/pkg/interface/package.json b/pkg/interface/package.json index ea3f11602..969e7108f 100644 --- a/pkg/interface/package.json +++ b/pkg/interface/package.json @@ -8,7 +8,8 @@ "@reach/disclosure": "^0.10.5", "@reach/menu-button": "^0.10.5", "@reach/tabs": "^0.10.5", - "@tlon/indigo-light": "^1.0.3", + "@tlon/indigo-dark": "^1.0.5", + "@tlon/indigo-light": "^1.0.5", "@tlon/indigo-react": "1.2.13", "@tlon/sigil-js": "^1.4.2", "aws-sdk": "^2.726.0", diff --git a/pkg/interface/src/views/App.js b/pkg/interface/src/views/App.js index 82e6640b1..31a1878fa 100644 --- a/pkg/interface/src/views/App.js +++ b/pkg/interface/src/views/App.js @@ -11,8 +11,8 @@ import 'mousetrap-global-bind'; import './css/indigo-static.css'; import './css/fonts.css'; -import light from './themes/light'; -import dark from './themes/old-dark'; +import light from '@tlon/indigo-light'; +import dark from '@tlon/indigo-dark'; import { Content } from './landscape/components/Content'; import StatusBar from './components/StatusBar'; @@ -36,7 +36,7 @@ const Root = styled.div` background-size: cover; ` : p.background?.type === 'color' ? ` background-color: ${p.background.color}; - ` : '' + ` : `background-color: ${p.theme.colors.white};` } display: flex; flex-flow: column nowrap; diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index 48a6d5afc..f72914dd4 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -213,7 +213,7 @@ export class MessageWithSigil extends PureComponent { scrollWindow={scrollWindow} history={history} api={api} - className="fl pr3 v-top bg-white bg-gray0-d pt1" + className="fl" /> Date: Tue, 15 Dec 2020 16:46:14 +1000 Subject: [PATCH 02/56] links-fe: infinite scroll for link displays --- .../src/views/apps/links/LinkResource.tsx | 39 ++++---- .../src/views/apps/links/LinkWindow.tsx | 98 +++++++++++++++++++ .../views/apps/links/components/LinkItem.tsx | 2 +- .../src/views/components/VirtualScroller.tsx | 7 +- 4 files changed, 118 insertions(+), 28 deletions(-) create mode 100644 pkg/interface/src/views/apps/links/LinkWindow.tsx diff --git a/pkg/interface/src/views/apps/links/LinkResource.tsx b/pkg/interface/src/views/apps/links/LinkResource.tsx index 224a7cf41..aa10e85b7 100644 --- a/pkg/interface/src/views/apps/links/LinkResource.tsx +++ b/pkg/interface/src/views/apps/links/LinkResource.tsx @@ -11,6 +11,7 @@ import { RouteComponentProps } from "react-router-dom"; import { LinkItem } from "./components/LinkItem"; import LinkSubmit from "./components/LinkSubmit"; import { LinkPreview } from "./components/link-preview"; +import { LinkWindow } from "./LinkWindow"; import { Comments } from "~/views/components/Comments"; import "./css/custom.css"; @@ -73,27 +74,23 @@ export function LinkResource(props: LinkResourceProps) { - {Array.from(graph).map(([date, node]) => { - const contact = contactDetails[node.post.author]; - return ( - + ); })} diff --git a/pkg/interface/src/views/apps/links/LinkWindow.tsx b/pkg/interface/src/views/apps/links/LinkWindow.tsx new file mode 100644 index 000000000..57512b047 --- /dev/null +++ b/pkg/interface/src/views/apps/links/LinkWindow.tsx @@ -0,0 +1,98 @@ +import React, { useRef, useCallback, useEffect } from "react"; +import { + Association, + Graph, + Contacts, + Unreads, + LocalUpdateRemoteContentPolicy, + Group, + Rolodex, +} from "~/types"; +import GlobalApi from "~/logic/api/global"; +import VirtualScroller from "~/views/components/VirtualScroller"; +import { LinkItem } from "./components/LinkItem"; + +interface LinkWindowProps { + association: Association; + contacts: Rolodex; + resource: string; + graph: Graph; + unreads: Unreads; + hideNicknames: boolean; + hideAvatars: boolean; + remoteContentPolicy: LocalUpdateRemoteContentPolicy; + baseUrl: string; + group: Group; + path: string; + api: GlobalApi; +} +export function LinkWindow(props: LinkWindowProps) { + const { graph, api, association } = props; + const loadedNewest = useRef(true); + const loadedOldest = useRef(false); + const virtualList = useRef(); + const fetchLinks = useCallback( + async (newer: boolean) => { + /* stubbed, should we generalize the display of graphs in virtualscroller? + * this is copied verbatim from chatwindow + const [, , ship, name] = association["app-path"].split("/"); + const currSize = graph.size; + if (newer && !loadedNewest.current) { + const [index] = graph.peekLargest()!; + await api.graph.getYoungerSiblings( + ship, + name, + 20, + `/${index.toString()}` + ); + if (currSize === graph.size) { + loadedNewest.current = true; + } + } else if (!newer && !loadedOldest.current) { + const [index] = graph.peekSmallest()!; + await api.graph.getOlderSiblings( + ship, + name, + 20, + `/${index.toString()}` + ); + if (currSize === graph.size) { + console.log("loaded all oldest"); + loadedOldest.current = true; + } + } + */ + }, + [api, graph, association, loadedNewest, loadedOldest] + ); + + useEffect(() => { + const list = virtualList?.current; + if(!list) return; + list.calculateVisibleItems(); + }, [graph.size]) + return ( + (virtualList.current = l ?? undefined)} + origin="top" + style={{ height: "100%" }} + onStartReached={() => {}} + onScroll={() => {}} + data={graph} + size={graph.size} + renderer={({ index, measure, scrollWindow }) => { + const node = graph.get(index); + const post = node?.post; + if (!node || !post) return null; + const isPending = "pending" in post && post.pending; + const linkProps = { + ...props, + node, + key: index.toString() + }; + return ; + }} + loadRows={fetchLinks} + /> + ); +} diff --git a/pkg/interface/src/views/apps/links/components/LinkItem.tsx b/pkg/interface/src/views/apps/links/components/LinkItem.tsx index 10cacd232..09fdd26e0 100644 --- a/pkg/interface/src/views/apps/links/components/LinkItem.tsx +++ b/pkg/interface/src/views/apps/links/components/LinkItem.tsx @@ -21,7 +21,7 @@ interface LinkItemProps { api: GlobalApi; group: Group; path: string; - contacts: Rolodex[]; + contacts: Rolodex; unreads: Unreads; } diff --git a/pkg/interface/src/views/components/VirtualScroller.tsx b/pkg/interface/src/views/components/VirtualScroller.tsx index fc06e62d9..e7a57ba54 100644 --- a/pkg/interface/src/views/components/VirtualScroller.tsx +++ b/pkg/interface/src/views/components/VirtualScroller.tsx @@ -141,7 +141,6 @@ export default class VirtualScroller extends Component { startgap -= this.heightOf(index); @@ -303,7 +298,7 @@ export default class VirtualScroller extends Component Date: Mon, 11 Jan 2021 18:26:42 -0500 Subject: [PATCH 03/56] meta: force dev stream deploy --- pkg/interface/src/views/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/interface/src/views/App.js b/pkg/interface/src/views/App.js index 27b32293e..6ae467769 100644 --- a/pkg/interface/src/views/App.js +++ b/pkg/interface/src/views/App.js @@ -90,7 +90,7 @@ class App extends React.Component { this.themeWatcher.onchange = this.updateTheme; setTimeout(() => { // Something about how the store works doesn't like changing it - // before the app has actually rendered, hence the timeout + // before the app has actually rendered, hence the timeout. this.updateTheme(this.themeWatcher); }, 500); this.api.local.getBaseHash(); From b009104f8b899a62bcb3ae84f656f6b7bbde502d Mon Sep 17 00:00:00 2001 From: Liam Fitzgerald Date: Tue, 12 Jan 2021 12:24:07 +1000 Subject: [PATCH 04/56] notifications: update count on archive --- pkg/interface/src/logic/reducers/hark-update.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pkg/interface/src/logic/reducers/hark-update.ts b/pkg/interface/src/logic/reducers/hark-update.ts index 62dfbe42e..8db766f53 100644 --- a/pkg/interface/src/logic/reducers/hark-update.ts +++ b/pkg/interface/src/logic/reducers/hark-update.ts @@ -386,5 +386,7 @@ function archive(json: any, state: HarkState) { notifIdxEqual(index, idxNotif.index) ); state.notifications.set(time, unarchived); + const newlyRead = archived.filter(x => !x.notification.read).length; + updateNotificationStats(state, index, 'notifications', (x) => x - newlyRead); } } From 742971fec9c1dd945b93c36a530b8fcb49a43ac0 Mon Sep 17 00:00:00 2001 From: Liam Fitzgerald Date: Tue, 12 Jan 2021 12:44:16 +1000 Subject: [PATCH 05/56] LinkWindow: address Tyler review --- .../src/views/apps/links/LinkWindow.tsx | 41 +++---------------- 1 file changed, 6 insertions(+), 35 deletions(-) diff --git a/pkg/interface/src/views/apps/links/LinkWindow.tsx b/pkg/interface/src/views/apps/links/LinkWindow.tsx index 57512b047..dd7113a69 100644 --- a/pkg/interface/src/views/apps/links/LinkWindow.tsx +++ b/pkg/interface/src/views/apps/links/LinkWindow.tsx @@ -20,7 +20,6 @@ interface LinkWindowProps { unreads: Unreads; hideNicknames: boolean; hideAvatars: boolean; - remoteContentPolicy: LocalUpdateRemoteContentPolicy; baseUrl: string; group: Group; path: string; @@ -33,49 +32,22 @@ export function LinkWindow(props: LinkWindowProps) { const virtualList = useRef(); const fetchLinks = useCallback( async (newer: boolean) => { - /* stubbed, should we generalize the display of graphs in virtualscroller? - * this is copied verbatim from chatwindow - const [, , ship, name] = association["app-path"].split("/"); - const currSize = graph.size; - if (newer && !loadedNewest.current) { - const [index] = graph.peekLargest()!; - await api.graph.getYoungerSiblings( - ship, - name, - 20, - `/${index.toString()}` - ); - if (currSize === graph.size) { - loadedNewest.current = true; - } - } else if (!newer && !loadedOldest.current) { - const [index] = graph.peekSmallest()!; - await api.graph.getOlderSiblings( - ship, - name, - 20, - `/${index.toString()}` - ); - if (currSize === graph.size) { - console.log("loaded all oldest"); - loadedOldest.current = true; - } - } - */ - }, - [api, graph, association, loadedNewest, loadedOldest] + /* stubbed, should we generalize the display of graphs in virtualscroller? */ + }, [] ); useEffect(() => { const list = virtualList?.current; if(!list) return; list.calculateVisibleItems(); - }, [graph.size]) + }, [graph.size]); + + return ( (virtualList.current = l ?? undefined)} origin="top" - style={{ height: "100%" }} + style={{ height: "100%", width: "100%" }} onStartReached={() => {}} onScroll={() => {}} data={graph} @@ -84,7 +56,6 @@ export function LinkWindow(props: LinkWindowProps) { const node = graph.get(index); const post = node?.post; if (!node || !post) return null; - const isPending = "pending" in post && post.pending; const linkProps = { ...props, node, From 652073cd495b2266d36d0091a088502c576479e7 Mon Sep 17 00:00:00 2001 From: Tyler Brown Cifu Shuster Date: Mon, 11 Jan 2021 21:12:47 -0800 Subject: [PATCH 06/56] interface: bump sigil-js --- pkg/interface/package-lock.json | 6 +++--- pkg/interface/package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json index cd806bbc0..71245ec8b 100644 --- a/pkg/interface/package-lock.json +++ b/pkg/interface/package-lock.json @@ -1710,9 +1710,9 @@ } }, "@tlon/sigil-js": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/@tlon/sigil-js/-/sigil-js-1.4.2.tgz", - "integrity": "sha512-meb0q0kf4S34oTKDulRMfVU6Wq/9lSOALeQil4EWttL72Lae9Fznsm+ix3tgT69g1xUpjeZIB+vqGOtAFhZX3g==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@tlon/sigil-js/-/sigil-js-1.4.3.tgz", + "integrity": "sha512-IaJUvAgXRmPFj5JA/MDfd+b+RFDhGdiMLfzJZKuFIQyl3Dl/3cC9HdDLCYSoK4GBTu3gZqoqi6wxZl5Xia/cSw==", "requires": { "invariant": "^2.2.4", "svgson": "^4.0.0", diff --git a/pkg/interface/package.json b/pkg/interface/package.json index b99291738..a925b2588 100644 --- a/pkg/interface/package.json +++ b/pkg/interface/package.json @@ -10,7 +10,7 @@ "@reach/tabs": "^0.10.5", "@tlon/indigo-light": "^1.0.3", "@tlon/indigo-react": "1.2.15", - "@tlon/sigil-js": "^1.4.2", + "@tlon/sigil-js": "^1.4.3", "aws-sdk": "^2.726.0", "big-integer": "^1.6.48", "classnames": "^2.2.6", From cbfbfa21c1c8d8a72b9a14ad03ac6eaebaa9cad2 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 12 Jan 2021 14:32:34 -0500 Subject: [PATCH 07/56] landscape: update light / dark versions --- pkg/interface/package-lock.json | 12 ++++++------ pkg/interface/package.json | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json index ac22b72aa..4e59dba68 100644 --- a/pkg/interface/package-lock.json +++ b/pkg/interface/package-lock.json @@ -1688,14 +1688,14 @@ } }, "@tlon/indigo-dark": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@tlon/indigo-dark/-/indigo-dark-1.0.5.tgz", - "integrity": "sha512-V8QOT1FylerKjhmNxxrOWoSnB6AiTFXwG/kt1ApFi+bww3rZ1u/ykkHLikfHvGl5xvbUTSUtTvuC6G4iR7ZQcQ==" + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@tlon/indigo-dark/-/indigo-dark-1.0.6.tgz", + "integrity": "sha512-/c+3/aC+gSnLHiLwTdje7pYS84ZAR3zyMJhp2mT9BIPtk7ek/EGsrrugZjVJxeKXqy+mQpFD5TXktgAEh0Ko1A==" }, "@tlon/indigo-light": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@tlon/indigo-light/-/indigo-light-1.0.5.tgz", - "integrity": "sha512-ZtZTDUT4V0RlSAvJ1wJi+ogjH5HOb/FgS+EeEGDWo1zUSgbO4Sgxjfzyq3TZ5EYRQRhSAgkBBFYGolmQXoc9+A==" + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@tlon/indigo-light/-/indigo-light-1.0.6.tgz", + "integrity": "sha512-kBzJueOoGDVF2knGt+Kf5ylvil6+V1qn8/RqAj1S6wUTnfUfAMRzDp4LQI2MxLI8Is0OG3XCErVSOUImU6R3lg==" }, "@tlon/indigo-react": { "version": "1.2.15", diff --git a/pkg/interface/package.json b/pkg/interface/package.json index 9398c608a..94ef5197d 100644 --- a/pkg/interface/package.json +++ b/pkg/interface/package.json @@ -8,8 +8,8 @@ "@reach/disclosure": "^0.10.5", "@reach/menu-button": "^0.10.5", "@reach/tabs": "^0.10.5", - "@tlon/indigo-dark": "^1.0.5", - "@tlon/indigo-light": "^1.0.5", + "@tlon/indigo-dark": "^1.0.6", + "@tlon/indigo-light": "^1.0.6", "@tlon/indigo-react": "1.2.15", "@tlon/sigil-js": "^1.4.3", "aws-sdk": "^2.726.0", From 686127cc8b6825abc86d7aafed41dec4a5fd0295 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 12 Jan 2021 14:56:37 -0500 Subject: [PATCH 08/56] landscape: update to indigo-react 1.2.16 --- pkg/interface/package-lock.json | 12 ++++++------ pkg/interface/package.json | 2 +- .../src/views/apps/chat/components/ChatMessage.tsx | 2 +- .../src/views/apps/chat/components/chat-editor.js | 4 ++-- .../src/views/apps/chat/components/content/code.js | 2 ++ .../src/views/apps/chat/components/content/text.js | 2 +- pkg/interface/src/views/apps/notifications/chat.tsx | 2 +- 7 files changed, 14 insertions(+), 12 deletions(-) diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json index 4e59dba68..ca272f26f 100644 --- a/pkg/interface/package-lock.json +++ b/pkg/interface/package-lock.json @@ -1698,9 +1698,9 @@ "integrity": "sha512-kBzJueOoGDVF2knGt+Kf5ylvil6+V1qn8/RqAj1S6wUTnfUfAMRzDp4LQI2MxLI8Is0OG3XCErVSOUImU6R3lg==" }, "@tlon/indigo-react": { - "version": "1.2.15", - "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.15.tgz", - "integrity": "sha512-h9umWEzYZwyb53ujWoCQCJQwY9RUuoDaf6189+0LH3C7y9fybJe6vzbW6g2cUVH8dXA2EZkedS5nriYR0IpQbw==", + "version": "1.2.16", + "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.16.tgz", + "integrity": "sha512-9bQ43cXiJGOsrihwy8+MBfG4WroKucZJOm4whfSjsNFCHorjS+5Y/6nWl2hEwHo068XONFmD7xlDE1QBMTk+pA==", "requires": { "@reach/menu-button": "^0.10.5", "react": "^16.13.1", @@ -1708,9 +1708,9 @@ }, "dependencies": { "tslib": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", - "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz", + "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==" } } }, diff --git a/pkg/interface/package.json b/pkg/interface/package.json index 94ef5197d..09bfe0cd7 100644 --- a/pkg/interface/package.json +++ b/pkg/interface/package.json @@ -10,7 +10,7 @@ "@reach/tabs": "^0.10.5", "@tlon/indigo-dark": "^1.0.6", "@tlon/indigo-light": "^1.0.6", - "@tlon/indigo-react": "1.2.15", + "@tlon/indigo-react": "1.2.16", "@tlon/sigil-js": "^1.4.3", "aws-sdk": "^2.726.0", "big-integer": "^1.6.48", diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index 7203d6cfe..66cc7858f 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -259,7 +259,7 @@ const ContentBox = styled(Box)` export const MessageWithoutSigil = ({ timestamp, contacts, msg, measure, group }) => ( <> - {timestamp} + {timestamp} {msg.contents.map((c, i) => ( { if (this.editor) { @@ -211,7 +211,7 @@ export default class ChatEditor extends Component { > {content.code.expression} diff --git a/pkg/interface/src/views/apps/chat/components/content/text.js b/pkg/interface/src/views/apps/chat/components/content/text.js index d5c5c58af..0aa802a38 100644 --- a/pkg/interface/src/views/apps/chat/components/content/text.js +++ b/pkg/interface/src/views/apps/chat/components/content/text.js @@ -29,7 +29,7 @@ const renderers = { return {value} }, paragraph: ({ children }) => { - return ({children}); + return ({children}); }, code: ({language, value}) => { return 5 && ( - + and {contents.length - 5} other message {contents.length > 6 ? "s" : ""} From 344c40f51e6cf8de99b5b6a5c6a51fe199233112 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 12 Jan 2021 14:59:58 -0500 Subject: [PATCH 09/56] landscape: delete interim themes --- pkg/interface/src/views/themes/light.ts | 171 ------------------- pkg/interface/src/views/themes/old-dark.ts | 186 --------------------- 2 files changed, 357 deletions(-) delete mode 100644 pkg/interface/src/views/themes/light.ts delete mode 100644 pkg/interface/src/views/themes/old-dark.ts diff --git a/pkg/interface/src/views/themes/light.ts b/pkg/interface/src/views/themes/light.ts deleted file mode 100644 index bd3ec6837..000000000 --- a/pkg/interface/src/views/themes/light.ts +++ /dev/null @@ -1,171 +0,0 @@ -import baseStyled, { ThemedStyledInterface } from "styled-components"; - -const base = { - white: "rgba(255,255,255,1)", - black: "rgba(0,0,0,1)", - red: "rgba(255,65,54,1)", - yellow: "rgba(255,199,0,1)", - green: "rgba(0,159,101,1)", - blue: "rgba(0,142,255,1)", -}; - -const scales = { - white10: "rgba(255,255,255,0.1)", - white20: "rgba(255,255,255,0.2)", - white30: "rgba(255,255,255,0.3)", - white40: "rgba(255,255,255,0.4)", - white50: "rgba(255,255,255,0.5)", - white60: "rgba(255,255,255,0.6)", - white70: "rgba(255,255,255,0.7)", - white80: "rgba(255,255,255,0.8)", - white90: "rgba(255,255,255,0.9)", - white100: "rgba(255,255,255,1)", - black05: "rgba(0,0,0,0.05)", - black10: "rgba(0,0,0,0.1)", - black20: "rgba(0,0,0,0.2)", - black30: "rgba(0,0,0,0.3)", - black40: "rgba(0,0,0,0.4)", - black50: "rgba(0,0,0,0.5)", - black60: "rgba(0,0,0,0.6)", - black70: "rgba(0,0,0,0.7)", - black80: "rgba(0,0,0,0.8)", - black90: "rgba(0,0,0,0.9)", - black100: "rgba(0,0,0,1)", - red10: "rgba(255,65,54,0.1)", - red20: "rgba(255,65,54,0.2)", - red30: "rgba(255,65,54,0.3)", - red40: "rgba(255,65,54,0.4)", - red50: "rgba(255,65,54,0.5)", - red60: "rgba(255,65,54,0.6)", - red70: "rgba(255,65,54,0.7)", - red80: "rgba(255,65,54,0.8)", - red90: "rgba(255,65,54,0.9)", - red100: "rgba(255,65,54,1)", - yellow10: "rgba(255,199,0,0.1)", - yellow20: "rgba(255,199,0,0.2)", - yellow30: "rgba(255,199,0,0.3)", - yellow40: "rgba(255,199,0,0.4)", - yellow50: "rgba(255,199,0,0.5)", - yellow60: "rgba(255,199,0,0.6)", - yellow70: "rgba(255,199,0,0.7)", - yellow80: "rgba(255,199,0,0.8)", - yellow90: "rgba(255,199,0,0.9)", - yellow100: "rgba(255,199,0,1)", - green10: "rgba(0,159,101,0.1)", - green20: "rgba(0,159,101,0.2)", - green30: "rgba(0,159,101,0.3)", - green40: "rgba(0,159,101,0.4)", - green50: "rgba(0,159,101,0.5)", - green60: "rgba(0,159,101,0.6)", - green70: "rgba(0,159,101,0.7)", - green80: "rgba(0,159,101,0.8)", - green90: "rgba(0,159,101,0.9)", - green100: "rgba(0,159,101,1)", - blue10: "rgba(0,142,255,0.1)", - blue20: "rgba(0,142,255,0.2)", - blue30: "rgba(0,142,255,0.3)", - blue40: "rgba(0,142,255,0.4)", - blue50: "rgba(0,142,255,0.5)", - blue60: "rgba(0,142,255,0.6)", - blue70: "rgba(0,142,255,0.7)", - blue80: "rgba(0,142,255,0.8)", - blue90: "rgba(0,142,255,0.9)", - blue100: "rgba(0,142,255,1)", -}; - -const theme = { - colors: { - white: base.white, - black: base.black, - - darkGray: scales.black80, - gray: scales.black60, - lightGray: scales.black30, - washedGray: scales.black10, - - red: base.red, - lightRed: scales.red30, - washedRed: scales.red10, - - yellow: base.yellow, - lightYellow: scales.yellow30, - washedYellow: scales.yellow10, - - green: base.green, - lightGreen: scales.green30, - washedGreen: scales.green10, - - blue: base.blue, - lightBlue: scales.blue30, - washedBlue: scales.blue10, - - none: "rgba(0,0,0,0)", - scales: scales, - }, - fonts: { - sans: `"Inter", "Inter UI", -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', Arial, sans-serif`, - mono: `"Source Code Pro", "Roboto mono", "Courier New", monospace`, - }, - // font-size - fontSizes: [ - 12, // 0 - 16, // 1 - 24, // 2 - 32, // 3 - 48, // 4 - 64, // 5 - ], - // font-weight - fontWeights: { - thin: 300, - regular: 400, - bold: 600, - }, - // line-height - lineHeights: { - min: 1.2, - short: 1.333333, - regular: 1.5, - tall: 1.666666, - }, - // border, border-top, border-right, border-bottom, border-left - borders: ["none", "1px solid"], - // margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, grid-gap, grid-column-gap, grid-row-gap - space: [ - 0, // 0 - 4, // 1 - 8, // 2 - 16, // 3 - 24, // 4 - 32, // 5 - 48, // 6 - 64, // 7 - 96, // 8 - ], - // border-radius - radii: [ - 0, // 0 - 2, // 1 - 4, // 2 - 8, // 3 - 16, // 4 - ], - // width, height, min-width, max-width, min-height, max-height - sizes: [ - 0, // 0 - 4, // 1 - 8, // 2 - 16, // 3 - 24, // 4 - 32, // 5 - 48, // 6 - 64, // 7 - 96, // 8 - ], - // z-index - zIndices: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], - breakpoints: ["550px", "750px", "960px"], -}; -export type Theme = typeof theme; -export const styled = baseStyled as ThemedStyledInterface; -export default theme; diff --git a/pkg/interface/src/views/themes/old-dark.ts b/pkg/interface/src/views/themes/old-dark.ts deleted file mode 100644 index f2eead7c9..000000000 --- a/pkg/interface/src/views/themes/old-dark.ts +++ /dev/null @@ -1,186 +0,0 @@ -import baseStyled, { ThemedStyledInterface } from "styled-components"; - -const base = { - white: "rgba(255,255,255,1)", - black: "rgba(0,0,0,1)", - red: "rgba(255,65,54,1)", - yellow: "rgba(255,199,0,1)", - green: "rgba(0,159,101,1)", - blue: "rgba(0,142,255,1)", -}; - -const scales = { - white05: "rgba(255,255,255,0.05)", - white10: "rgba(255,255,255,0.1)", - white20: "rgba(255,255,255,0.2)", - white30: "rgba(255,255,255,0.3)", - white40: "rgba(255,255,255,0.4)", - white50: "rgba(255,255,255,0.5)", - white60: "rgba(255,255,255,0.6)", - white70: "rgba(255,255,255,0.7)", - white80: "rgba(255,255,255,0.8)", - white90: "rgba(255,255,255,0.9)", - white100: "rgba(255,255,255,1)", - black05: "rgba(0,0,0,0.05)", - black10: "rgba(0,0,0,0.1)", - black20: "rgba(0,0,0,0.2)", - black30: "rgba(0,0,0,0.3)", - black40: "rgba(0,0,0,0.4)", - black50: "rgba(0,0,0,0.5)", - black60: "rgba(0,0,0,0.6)", - black70: "rgba(0,0,0,0.7)", - black80: "rgba(0,0,0,0.8)", - black90: "rgba(0,0,0,0.9)", - black100: "rgba(0,0,0,1)", - red05: "rgba(255,65,54,0.05)", - red10: "rgba(255,65,54,0.1)", - red20: "rgba(255,65,54,0.2)", - red30: "rgba(255,65,54,0.3)", - red40: "rgba(255,65,54,0.4)", - red50: "rgba(255,65,54,0.5)", - red60: "rgba(255,65,54,0.6)", - red70: "rgba(255,65,54,0.7)", - red80: "rgba(255,65,54,0.8)", - red90: "rgba(255,65,54,0.9)", - red100: "rgba(255,65,54,1)", - yellow05: "rgba(255,199,0,0.05)", - yellow10: "rgba(255,199,0,0.1)", - yellow20: "rgba(255,199,0,0.2)", - yellow30: "rgba(255,199,0,0.3)", - yellow40: "rgba(255,199,0,0.4)", - yellow50: "rgba(255,199,0,0.5)", - yellow60: "rgba(255,199,0,0.6)", - yellow70: "rgba(255,199,0,0.7)", - yellow80: "rgba(255,199,0,0.8)", - yellow90: "rgba(255,199,0,0.9)", - yellow100: "rgba(255,199,0,1)", - green05: "rgba(0,159,101,0.05)", - green10: "rgba(0,159,101,0.1)", - green20: "rgba(0,159,101,0.2)", - green30: "rgba(0,159,101,0.3)", - green40: "rgba(0,159,101,0.4)", - green50: "rgba(0,159,101,0.5)", - green60: "rgba(0,159,101,0.6)", - green70: "rgba(0,159,101,0.7)", - green80: "rgba(0,159,101,0.8)", - green90: "rgba(0,159,101,0.9)", - green100: "rgba(0,159,101,1)", - blue05: "rgba(0,142,255,0.05)", - blue10: "rgba(0,142,255,0.1)", - blue20: "rgba(0,142,255,0.2)", - blue30: "rgba(0,142,255,0.3)", - blue40: "rgba(0,142,255,0.4)", - blue50: "rgba(0,142,255,0.5)", - blue60: "rgba(0,142,255,0.6)", - blue70: "rgba(0,142,255,0.7)", - blue80: "rgba(0,142,255,0.8)", - blue90: "rgba(0,142,255,0.9)", - blue100: "rgba(0,142,255,1)", -}; - -const util = { - cyan: "#00FFFF", - magenta: "#FF00FF", - yellow: "#FFFF00", - black: "#000000", - gray0: "#333333" -}; - -const theme = { - colors: { - white: util.gray0, - black: base.white, - - darkGray: scales.white80, - gray: scales.white60, - lightGray: scales.white30, - washedGray: scales.white05, - - red: base.red, - lightRed: scales.red30, - washedRed: scales.red05, - - yellow: base.yellow, - lightYellow: scales.yellow30, - washedYellow: scales.yellow10, - - green: base.green, - lightGreen: scales.green30, - washedGreen: scales.green10, - - blue: base.blue, - lightBlue: scales.blue30, - washedBlue: scales.blue10, - - none: "rgba(0,0,0,0)", - - scales: scales, - util: util, - }, - fonts: { - sans: `"Inter", "Inter UI", -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', Arial, sans-serif`, - mono: `"Source Code Pro", "Roboto mono", "Courier New", monospace`, - }, - // font-size - fontSizes: [ - 12, // 0 - 16, // 1 - 24, // 2 - 32, // 3 - 48, // 4 - 64, // 5 - ], - // font-weight - fontWeights: { - thin: 300, - regular: 400, - semibold: 500, - bold: 600, - }, - // line-height - lineHeights: { - min: 1.2, - short: 1.333333, - regular: 1.5, - tall: 1.666666, - }, - // border, border-top, border-right, border-bottom, border-left - borders: ["none", "1px solid"], - // margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, grid-gap, grid-column-gap, grid-row-gap - space: [ - 0, // 0 - 4, // 1 - 8, // 2 - 16, // 3 - 24, // 4 - 32, // 5 - 48, // 6 - 64, // 7 - 96, // 8 - ], - // border-radius - radii: [ - 0, // 0 - 2, // 1 - 4, // 2 - 8, // 3 - ], - // width, height, min-width, max-width, min-height, max-height - sizes: [ - 0, // 0 - 4, // 1 - 8, // 2 - 16, // 3 - 24, // 4 - 32, // 5 - 48, // 6 - 64, // 7 - 96, // 8 - ], - // z-index - zIndices: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], - breakpoints: ["550px", "750px", "960px"], -}; -export type Theme = typeof theme; -export const styled = baseStyled as ThemedStyledInterface; -export default theme; From 115bb9a3d895930c66a2537d3cdfb217d1ff8339 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 12 Jan 2021 15:03:19 -0500 Subject: [PATCH 10/56] chat: code fontSize step down --- pkg/interface/src/views/apps/chat/components/content/text.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pkg/interface/src/views/apps/chat/components/content/text.js b/pkg/interface/src/views/apps/chat/components/content/text.js index 0aa802a38..9a0801573 100644 --- a/pkg/interface/src/views/apps/chat/components/content/text.js +++ b/pkg/interface/src/views/apps/chat/components/content/text.js @@ -26,7 +26,7 @@ const DISABLED_INLINE_TOKENS = [ const renderers = { inlineCode: ({language, value}) => { - return {value} + return {value} }, paragraph: ({ children }) => { return ({children}); @@ -38,6 +38,7 @@ const renderers = { display='block' borderRadius='1' mono + fontSize='0' backgroundColor='washedGray' overflowX='auto' style={{ whiteSpace: 'pre'}}> From c7f43279201fce42e6ed5b672f5e2845cdfdccf5 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 12 Jan 2021 18:05:30 -0500 Subject: [PATCH 11/56] landscape: pass contact to profile overlay --- pkg/interface/src/views/components/MentionText.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/interface/src/views/components/MentionText.tsx b/pkg/interface/src/views/components/MentionText.tsx index f08e13d52..eb4fbb344 100644 --- a/pkg/interface/src/views/components/MentionText.tsx +++ b/pkg/interface/src/views/components/MentionText.tsx @@ -44,7 +44,7 @@ export function Mention(props: { const { contacts, ship } = props; let { contact } = props; - contact = (contact?.nickname) ? contact : contacts?.[ship]; + contact = (contact?.color) ? contact : contacts?.[ship]; const showNickname = useShowNickname(contact); From 36a5bfbf937ce8bf933630973c873fdf44d489d8 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 12 Jan 2021 18:58:04 -0500 Subject: [PATCH 12/56] landscape: hotfix to cite in statusbar --- pkg/interface/src/views/components/StatusBar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pkg/interface/src/views/components/StatusBar.js b/pkg/interface/src/views/components/StatusBar.js index 7382f0400..3ee44c211 100644 --- a/pkg/interface/src/views/components/StatusBar.js +++ b/pkg/interface/src/views/components/StatusBar.js @@ -5,6 +5,7 @@ import ReconnectButton from './ReconnectButton'; import { StatusBarItem } from './StatusBarItem'; import { Sigil } from '~/logic/lib/sigil'; import useLocalState from '~/logic/state/local'; +import { cite } from '~/logic/lib/util'; const StatusBar = (props) => { const invites = [].concat(...Object.values(props.invites).map(obj => Object.values(obj))); @@ -61,7 +62,7 @@ const StatusBar = (props) => { props.history.push('/~profile')}> - ~{props.ship} + {cite(props.ship)} From f9452a4173ec54c299c899074e21270e5bb52968 Mon Sep 17 00:00:00 2001 From: Tyler Brown Cifu Shuster Date: Tue, 12 Jan 2021 21:14:07 -0800 Subject: [PATCH 13/56] notifications: fix layout fixes https://github.com/urbit/landscape/issues/218 --- pkg/interface/src/logic/state/local.tsx | 2 +- .../src/views/apps/notifications/graph.tsx | 24 +++++++++++-------- .../src/views/apps/notifications/header.tsx | 2 +- .../views/apps/notifications/notification.tsx | 13 +++++++--- .../src/views/components/MentionText.tsx | 4 ++-- 5 files changed, 28 insertions(+), 17 deletions(-) diff --git a/pkg/interface/src/logic/state/local.tsx b/pkg/interface/src/logic/state/local.tsx index b9dfe5794..408bd2bdd 100644 --- a/pkg/interface/src/logic/state/local.tsx +++ b/pkg/interface/src/logic/state/local.tsx @@ -31,7 +31,7 @@ const useLocalState = create(persist((set, get) => ({ suspendedFocus: undefined, toggleOmnibox: () => set(produce(state => { state.omniboxShown = !state.omniboxShown; - if (state.suspendedFocus) { + if (typeof state.suspendedFocus?.focus === 'function') { state.suspendedFocus.focus(); state.suspendedFocus = undefined; } else { diff --git a/pkg/interface/src/views/apps/notifications/graph.tsx b/pkg/interface/src/views/apps/notifications/graph.tsx index 3f29b9e30..bedb24d8a 100644 --- a/pkg/interface/src/views/apps/notifications/graph.tsx +++ b/pkg/interface/src/views/apps/notifications/graph.tsx @@ -90,6 +90,8 @@ const GraphNodeContent = ({ group, post, contacts, mod, description, index, remo content={contents} group={group} contacts={contacts} + fontSize='14px' + lineHeight="tall" /> } else if (idx[1] === "1") { const [{ text: header }, { text: body }] = contents; @@ -164,13 +166,14 @@ const GraphNode = ({ group, read, onRead, + showContact = false, remoteContentPolicy }) => { const { contents } = post; author = deSig(author); const history = useHistory(); - const img = ( + const img = showContact ? ( - ); + ) : ; const groupContacts = contacts[groupPath] ?? {}; @@ -192,10 +195,10 @@ const GraphNode = ({ }, [read, onRead]); return ( - + {img} - {moment(time).format("HH:mm")} - - + } + + <>
- + {_.map(contents, (content, idx) => ( ))} - - + + ); } diff --git a/pkg/interface/src/views/apps/notifications/header.tsx b/pkg/interface/src/views/apps/notifications/header.tsx index e930d9b19..69d2b81ed 100644 --- a/pkg/interface/src/views/apps/notifications/header.tsx +++ b/pkg/interface/src/views/apps/notifications/header.tsx @@ -71,7 +71,7 @@ export function Header(props: { channel; return ( - + {!props.archived && ( + {children} - + {changeMuteDesc} @@ -103,7 +110,7 @@ function NotificationWrapper(props: { )} - + ); } diff --git a/pkg/interface/src/views/components/MentionText.tsx b/pkg/interface/src/views/components/MentionText.tsx index f08e13d52..7bf0ba491 100644 --- a/pkg/interface/src/views/components/MentionText.tsx +++ b/pkg/interface/src/views/components/MentionText.tsx @@ -19,10 +19,10 @@ interface MentionTextProps { group: Group; } export function MentionText(props: MentionTextProps) { - const { content, contacts, contact, group } = props; + const { content, contacts, contact, group, ...rest } = props; return ( - + {content.reduce((accum, c) => { if ("text" in c) { return accum + c.text; From f5e51b321b1745f0e2dbc2ded72388eb5cfaeaf3 Mon Sep 17 00:00:00 2001 From: Tyler Brown Cifu Shuster Date: Tue, 12 Jan 2021 22:33:17 -0800 Subject: [PATCH 14/56] fixes https://github.com/urbit/landscape/issues/148 --- .../src/views/apps/notifications/notification.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/pkg/interface/src/views/apps/notifications/notification.tsx b/pkg/interface/src/views/apps/notifications/notification.tsx index addac4a5e..584d2d9ca 100644 --- a/pkg/interface/src/views/apps/notifications/notification.tsx +++ b/pkg/interface/src/views/apps/notifications/notification.tsx @@ -1,5 +1,5 @@ -import React, { ReactNode, useCallback, useMemo } from "react"; -import { Row, Box, Col, Text, Anchor, Icon, Action } from "@tlon/indigo-react"; +import React, { ReactNode, useCallback, useMemo, useState } from "react"; +import { Row, Box } from "@tlon/indigo-react"; import _ from "lodash"; import { GraphNotificationContents, @@ -7,7 +7,6 @@ import { GroupNotificationContents, NotificationGraphConfig, GroupNotificationsConfig, - NotifIndex, Groups, Associations, Contacts, @@ -89,6 +88,8 @@ function NotificationWrapper(props: { return api.hark[func](notif); }, [notif, api, isMuted]); + const [visible, setVisible] = useState(false); + const changeMuteDesc = isMuted ? "Unmute" : "Mute"; return ( setVisible(true)} + onMouseLeave={() => setVisible(false)} > {children} - + {changeMuteDesc} From d8ec8ae9d1a1662bd537d57cdbecd39fe1936acf Mon Sep 17 00:00:00 2001 From: Tyler Brown Cifu Shuster Date: Tue, 12 Jan 2021 22:46:49 -0800 Subject: [PATCH 15/56] fixes https://github.com/urbit/landscape/issues/146 --- .../src/views/apps/notifications/graph.tsx | 2 +- .../src/views/apps/notifications/header.tsx | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/pkg/interface/src/views/apps/notifications/graph.tsx b/pkg/interface/src/views/apps/notifications/graph.tsx index bedb24d8a..9291a463e 100644 --- a/pkg/interface/src/views/apps/notifications/graph.tsx +++ b/pkg/interface/src/views/apps/notifications/graph.tsx @@ -270,7 +270,7 @@ return ( description={desc} associations={props.associations} /> - + {_.map(contents, (content, idx) => ( + {!props.archived && ( @@ -84,13 +84,13 @@ export function Header(props: { {authorDesc} {description} - {!!moduleIcon && } - {!!channel && {channelTitle}} - + {!!moduleIcon && } + {!!channel && {channelTitle}} + {groupTitle && <> - {groupTitle} - + {groupTitle} + } From 2a91c43fa89f43c6fe9f84d340707dc725b40db9 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Wed, 13 Jan 2021 16:30:49 -0500 Subject: [PATCH 16/56] publish: automatically continue lists Fixes #3329. --- .../src/views/apps/publish/components/MarkdownEditor.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pkg/interface/src/views/apps/publish/components/MarkdownEditor.tsx b/pkg/interface/src/views/apps/publish/components/MarkdownEditor.tsx index b3af28950..32f372f5d 100644 --- a/pkg/interface/src/views/apps/publish/components/MarkdownEditor.tsx +++ b/pkg/interface/src/views/apps/publish/components/MarkdownEditor.tsx @@ -10,6 +10,7 @@ import CodeMirror from "codemirror"; import "codemirror/mode/markdown/markdown"; import "codemirror/addon/display/placeholder"; +import "codemirror/addon/edit/continuelist"; import "codemirror/lib/codemirror.css"; import { Box } from "@tlon/indigo-react"; @@ -54,6 +55,7 @@ export function MarkdownEditor( scrollbarStyle: "native", // cursorHeight: 0.85, placeholder: placeholder || "", + extraKeys: { 'Enter': 'newlineAndIndentContinueMarkdownList' } }; const editor: React.RefObject = useRef(); From 9b15ccbcc851a1bfae4f5b95e430b758ae261bff Mon Sep 17 00:00:00 2001 From: Tyler Brown Cifu Shuster Date: Wed, 13 Jan 2021 14:32:31 -0800 Subject: [PATCH 17/56] fixes https://github.com/urbit/landscape/issues/171 --- .../src/views/apps/notifications/inbox.tsx | 89 +++++++++---------- .../src/views/components/RichText.js | 16 ++-- 2 files changed, 51 insertions(+), 54 deletions(-) diff --git a/pkg/interface/src/views/apps/notifications/inbox.tsx b/pkg/interface/src/views/apps/notifications/inbox.tsx index 4b55a7e49..ad7c3573f 100644 --- a/pkg/interface/src/views/apps/notifications/inbox.tsx +++ b/pkg/interface/src/views/apps/notifications/inbox.tsx @@ -61,20 +61,36 @@ export default function Inbox(props: { }; }, []); - const [newNotifications, ...notifications] = + const notifications = Array.from(props.showArchive ? props.archive : props.notifications) || []; + + const calendar = { + ...MOMENT_CALENDAR_DATE, sameDay: function (now) { + if (this.subtract(6, 'hours').isBefore(now)) { + return "[Earlier Today]"; + } else { + return MOMENT_CALENDAR_DATE.sameDay; + } + } + }; - const notificationsByDay = f.flow( + let notificationsByDay = f.flow( f.map(([date, nots]) => [ date, nots.filter(filterNotification(associations, props.filter)), ]), - f.groupBy(([date]) => - moment(daToUnix(date)).format("DDMMYYYY") - ), - f.values, - f.reverse + f.groupBy(([date]) => { + date = moment(daToUnix(date)); + if (moment().subtract(6, 'hours').isBefore(date)) { + return 'latest'; + } else { + return date.format("YYYYMMDD"); + } + }), )(notifications); + notificationsByDay = new Map(Object.keys(notificationsByDay).sort().reverse().map(timebox => { + return [timebox, notificationsByDay[timebox]]; + })); useEffect(() => { api.hark.getMore(props.showArchive); @@ -133,38 +149,24 @@ export default function Inbox(props: { {inviteItems(invites, api)} - {newNotifications && ( - - )} - {_.map( - notificationsByDay, - (timeboxes, idx) => - timeboxes.length > 0 && ( - - ) - )} + {[...notificationsByDay.keys()].map((day, index) => { + const timeboxes = notificationsByDay.get(day); + return timeboxes.length > 0 && ( + + ); + })} ); } @@ -181,21 +183,18 @@ function sortIndexedNotification( } function DaySection({ + label, contacts, groups, archive, timeboxes, - latest = false, associations, api, groupConfig, graphConfig, chatConfig, - remoteContentPolicy }) { - const calendar = latest - ? MOMENT_CALENDAR_DATE - : { ...MOMENT_CALENDAR_DATE, sameDay: "[Earlier Today]" }; + const lent = timeboxes.map(([,nots]) => nots.length).reduce(f.add, 0); if (lent === 0 || timeboxes.length === 0) { return null; @@ -206,7 +205,7 @@ function DaySection({ - {moment(daToUnix(timeboxes[0][0])).calendar(null, calendar)} + {label} diff --git a/pkg/interface/src/views/components/RichText.js b/pkg/interface/src/views/components/RichText.js index 298cb6075..4b40655f3 100644 --- a/pkg/interface/src/views/components/RichText.js +++ b/pkg/interface/src/views/components/RichText.js @@ -27,19 +27,17 @@ const RichText = React.memo(({ disableRemoteContent, ...props }) => ( {...props} renderers={{ link: (linkProps) => { - if (disableRemoteContent) { - linkProps.remoteContentPolicy = { - imageShown: false, - audioShown: false, - videoShown: false, - oembedShown: false - }; - } + const remoteContentPolicy = disableRemoteContent ? { + imageShown: false, + audioShown: false, + videoShown: false, + oembedShown: false + } : null; if (hasProvider(linkProps.href)) { return ; } - return {linkProps.children}; + return {linkProps.children}; }, linkReference: (linkProps) => { const linkText = String(linkProps.children[0].props.children); From 7be1d8d313887337d99458498a95bd74156f31b0 Mon Sep 17 00:00:00 2001 From: Tyler Brown Cifu Shuster Date: Wed, 13 Jan 2021 18:50:14 -0800 Subject: [PATCH 18/56] interface: add useHovering hook --- pkg/interface/src/logic/lib/util.ts | 11 ++++++++++- .../src/views/apps/notifications/notification.tsx | 8 ++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/pkg/interface/src/logic/lib/util.ts b/pkg/interface/src/logic/lib/util.ts index 293b02299..616f73bc4 100644 --- a/pkg/interface/src/logic/lib/util.ts +++ b/pkg/interface/src/logic/lib/util.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import _ from "lodash"; import f, { memoize } from "lodash/fp"; import bigInt, { BigInteger } from "big-integer"; @@ -361,4 +361,13 @@ export function pluralize(text: string, isPlural = false, vowel = false) { export function useShowNickname(contact: Contact | null, hide?: boolean): boolean { const hideNicknames = typeof hide !== 'undefined' ? hide : useLocalState(state => state.hideNicknames); return !!(contact && contact.nickname && !hideNicknames); +} + +export function useHovering() { + const [hovering, setHovering] = useState(false); + const bind = { + onMouseEnter: () => setHovering(true), + onMouseLeave: () => setHovering(false) + }; + return { hovering, bind }; } \ No newline at end of file diff --git a/pkg/interface/src/views/apps/notifications/notification.tsx b/pkg/interface/src/views/apps/notifications/notification.tsx index 584d2d9ca..455169434 100644 --- a/pkg/interface/src/views/apps/notifications/notification.tsx +++ b/pkg/interface/src/views/apps/notifications/notification.tsx @@ -18,6 +18,7 @@ import { GroupNotification } from "./group"; import { GraphNotification } from "./graph"; import { ChatNotification } from "./chat"; import { BigInteger } from "big-integer"; +import { useHovering } from "~/logic/lib/util"; interface NotificationProps { notification: IndexedNotification; @@ -88,7 +89,7 @@ function NotificationWrapper(props: { return api.hark[func](notif); }, [notif, api, isMuted]); - const [visible, setVisible] = useState(false); + const { hovering, bind } = useHovering(); const changeMuteDesc = isMuted ? "Unmute" : "Mute"; return ( @@ -99,11 +100,10 @@ function NotificationWrapper(props: { gridTemplateRows="auto" gridTemplateAreas="'header actions' 'main main'" pb={2} - onMouseEnter={() => setVisible(true)} - onMouseLeave={() => setVisible(false)} + {...bind} > {children} - + {changeMuteDesc} From 901a08aa258680c27ed7bd10b7717019c4922463 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Thu, 14 Jan 2021 18:06:53 -0500 Subject: [PATCH 19/56] chat: allow line breaks in markdown Fixes #4202. --- pkg/interface/package-lock.json | 5 +++++ pkg/interface/package.json | 1 + pkg/interface/src/views/apps/chat/components/content/text.js | 2 ++ 3 files changed, 8 insertions(+) diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json index ca272f26f..6f1071d53 100644 --- a/pkg/interface/package-lock.json +++ b/pkg/interface/package-lock.json @@ -8137,6 +8137,11 @@ "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", "dev": true }, + "remark-breaks": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-2.0.1.tgz", + "integrity": "sha512-CZKI8xdPUnvMqPxYEIBBUg8C0B0kyn14lkW0abzhfh/P71YRIxCC3wvBh6AejQL602OxF6kNRl1x4HAZA07JyQ==" + }, "remark-disable-tokenizers": { "version": "1.0.24", "resolved": "https://registry.npmjs.org/remark-disable-tokenizers/-/remark-disable-tokenizers-1.0.24.tgz", diff --git a/pkg/interface/package.json b/pkg/interface/package.json index 09bfe0cd7..3a8e65cca 100644 --- a/pkg/interface/package.json +++ b/pkg/interface/package.json @@ -37,6 +37,7 @@ "react-router-dom": "^5.0.0", "react-virtuoso": "^0.20.0", "react-visibility-sensor": "^5.1.1", + "remark-breaks": "^2.0.1", "remark-disable-tokenizers": "^1.0.24", "style-loader": "^1.2.1", "styled-components": "^5.1.0", diff --git a/pkg/interface/src/views/apps/chat/components/content/text.js b/pkg/interface/src/views/apps/chat/components/content/text.js index 9a0801573..98094c31e 100644 --- a/pkg/interface/src/views/apps/chat/components/content/text.js +++ b/pkg/interface/src/views/apps/chat/components/content/text.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import ReactMarkdown from 'react-markdown'; import RemarkDisableTokenizers from 'remark-disable-tokenizers'; +import RemarkBreaks from 'remark-breaks'; import urbitOb from 'urbit-ob'; import { Text } from '@tlon/indigo-react'; @@ -67,6 +68,7 @@ const MessageMarkdown = React.memo(props => ( return true; }} plugins={[[ + RemarkBreaks, RemarkDisableTokenizers, { block: DISABLED_BLOCK_TOKENS, inline: DISABLED_INLINE_TOKENS } ]]} /> From a0f324b80017d8e58e43c699f7218e8de2c4ea85 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Thu, 14 Jan 2021 19:08:51 -0500 Subject: [PATCH 20/56] hark: only allow marking as read Fixes urbit/landscape#149. --- .../src/views/apps/notifications/chat.tsx | 105 ------------------ .../src/views/apps/notifications/graph.tsx | 5 +- .../src/views/apps/notifications/header.tsx | 3 +- .../views/apps/notifications/notification.tsx | 24 ---- 4 files changed, 4 insertions(+), 133 deletions(-) delete mode 100644 pkg/interface/src/views/apps/notifications/chat.tsx diff --git a/pkg/interface/src/views/apps/notifications/chat.tsx b/pkg/interface/src/views/apps/notifications/chat.tsx deleted file mode 100644 index 1dddf4b1d..000000000 --- a/pkg/interface/src/views/apps/notifications/chat.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React, { useCallback } from "react"; -import _ from "lodash"; -import { Link } from "react-router-dom"; -import GlobalApi from "~/logic/api/global"; -import { - Rolodex, - Associations, - ChatNotifIndex, - ChatNotificationContents, - Groups, -} from "~/types"; -import { BigInteger } from "big-integer"; -import { Box, Col } from "@tlon/indigo-react"; -import { Header } from "./header"; -import { pluralize } from "~/logic/lib/util"; -import ChatMessage from "../chat/components/ChatMessage"; - -function describeNotification(mention: boolean, lent: number) { - const msg = pluralize("message", lent !== 1); - if (mention) { - return `mentioned you in ${msg} in`; - } - return `sent ${msg} in`; -} - -export function ChatNotification(props: { - index: ChatNotifIndex; - contents: ChatNotificationContents; - archived: boolean; - read: boolean; - time: number; - timebox: BigInteger; - associations: Associations; - contacts: Rolodex; - groups: Groups; - api: GlobalApi; -}) { - const { index, contents, read, time, api, timebox } = props; - const authors = _.map(contents, "author"); - - const { chat, mention } = index; - const association = props?.associations?.chat?.[chat]; - const groupPath = association?.["group-path"]; - const appPath = index?.chat; - - const group = props?.groups?.[groupPath]; - - const desc = describeNotification(mention, contents.length); - const groupContacts = props.contacts[groupPath] || {}; - - const onClick = useCallback(() => { - if (props.archived) { - return; - } - - const func = read ? "unread" : "read"; - return api.hark[func](timebox, { chat: index }); - }, [api, timebox, index, read]); - - return ( - -
- - {_.map(_.take(contents, 5), (content, idx) => { - let workspace = groupPath; - if (workspace === undefined || group?.hidden) { - workspace = '/home'; - } - const to = `/~landscape${workspace}/resource/chat${appPath}?msg=${content.number}`; - return ( - - {}} - msg={content} - isLastRead={false} - group={group} - contacts={groupContacts} - fontSize='0' - pt='2' - /> - - ); - })} - {contents.length > 5 && ( - - and {contents.length - 5} other message - {contents.length > 6 ? "s" : ""} - - )} - - - ); -} diff --git a/pkg/interface/src/views/apps/notifications/graph.tsx b/pkg/interface/src/views/apps/notifications/graph.tsx index 9291a463e..8358be149 100644 --- a/pkg/interface/src/views/apps/notifications/graph.tsx +++ b/pkg/interface/src/views/apps/notifications/graph.tsx @@ -247,12 +247,11 @@ export function GraphNotification(props: { const desc = describeNotification(index.description, contents.length !== 1); const onClick = useCallback(() => { - if (props.archived) { + if (props.archived || read) { return; } - const func = read ? "unread" : "read"; - return api.hark[func](timebox, { graph: index }); + return api.hark["read"](timebox, { graph: index }); }, [api, timebox, index, read]); return ( diff --git a/pkg/interface/src/views/apps/notifications/header.tsx b/pkg/interface/src/views/apps/notifications/header.tsx index d0c1a3450..b987a0693 100644 --- a/pkg/interface/src/views/apps/notifications/header.tsx +++ b/pkg/interface/src/views/apps/notifications/header.tsx @@ -75,8 +75,9 @@ export function Header(props: { {!props.archived && ( )} diff --git a/pkg/interface/src/views/apps/notifications/notification.tsx b/pkg/interface/src/views/apps/notifications/notification.tsx index 455169434..248ffc6e3 100644 --- a/pkg/interface/src/views/apps/notifications/notification.tsx +++ b/pkg/interface/src/views/apps/notifications/notification.tsx @@ -16,7 +16,6 @@ import { getParentIndex } from "~/logic/lib/notification"; import { StatelessAsyncAction } from "~/views/components/StatelessAsyncAction"; import { GroupNotification } from "./group"; import { GraphNotification } from "./graph"; -import { ChatNotification } from "./chat"; import { BigInteger } from "big-integer"; import { useHovering } from "~/logic/lib/util"; @@ -55,9 +54,6 @@ function getMuted( if ("group" in index) { return _.findIndex(groups || [], (g) => g === index.group.group) === -1; } - if ("chat" in index) { - return _.findIndex(chat || [], (c) => c === index.chat.chat) === -1; - } return false; } @@ -176,26 +172,6 @@ export function Notification(props: NotificationProps) { ); } - if ("chat" in notification.index) { - const index = notification.index.chat; - const c: ChatNotificationContents = (contents as any).chat; - return ( - - - - ); - } return null; } From 84e6073745db16a96856a94f5276845386d70ae9 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Thu, 14 Jan 2021 19:10:02 -0500 Subject: [PATCH 21/56] publish: delete uses cursor:pointer --- pkg/interface/src/views/apps/publish/components/Note.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/interface/src/views/apps/publish/components/Note.tsx b/pkg/interface/src/views/apps/publish/components/Note.tsx index 199e7466d..3c71ecd9e 100644 --- a/pkg/interface/src/views/apps/publish/components/Note.tsx +++ b/pkg/interface/src/views/apps/publish/components/Note.tsx @@ -67,7 +67,7 @@ export function Note(props: NoteProps & RouteComponentProps) { color="red" ml={2} onClick={deletePost} - css={{ cursor: "pointer" }} + style={{ cursor: "pointer" }} > Delete From 2180fd65c353477bb67070ea5690ef6647309ad5 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Thu, 14 Jan 2021 19:19:52 -0500 Subject: [PATCH 22/56] hark: use pat-da for dates --- pkg/interface/src/logic/lib/util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/interface/src/logic/lib/util.ts b/pkg/interface/src/logic/lib/util.ts index 616f73bc4..ba2bc67c8 100644 --- a/pkg/interface/src/logic/lib/util.ts +++ b/pkg/interface/src/logic/lib/util.ts @@ -13,7 +13,7 @@ export const MOMENT_CALENDAR_DATE = { nextWeek: "dddd", lastDay: "[Yesterday]", lastWeek: "[Last] dddd", - sameElse: "DD/MM/YYYY", + sameElse: "~YYYY.M.D", }; export function appIsGraph(app: string) { From 07070fc3b65478f5ae5791fb0c71ec043730cdc0 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Thu, 14 Jan 2021 19:26:14 -0500 Subject: [PATCH 23/56] statusbar: force squared icons Both were 32x34; either we could change px to 7px or tell it to fit 32px. I chose latter. --- pkg/interface/src/views/components/StatusBar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/interface/src/views/components/StatusBar.js b/pkg/interface/src/views/components/StatusBar.js index 3ee44c211..583a7efd5 100644 --- a/pkg/interface/src/views/components/StatusBar.js +++ b/pkg/interface/src/views/components/StatusBar.js @@ -22,7 +22,7 @@ const StatusBar = (props) => { pb='3' > - @@ -60,7 +60,7 @@ const StatusBar = (props) => { > Submit an issue - props.history.push('/~profile')}> + props.history.push('/~profile')}> {cite(props.ship)} From d5b0f15e0b14b74ca974311b68c004fbd29ba202 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Thu, 14 Jan 2021 19:32:39 -0500 Subject: [PATCH 24/56] launch: icons match modal icon margin --- pkg/interface/src/views/apps/launch/app.js | 2 +- .../src/views/apps/launch/components/tiles/basic.js | 4 ++-- .../src/views/apps/launch/components/tiles/weather.js | 9 ++++----- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js index 192af6f19..c15ad5990 100644 --- a/pkg/interface/src/views/apps/launch/app.js +++ b/pkg/interface/src/views/apps/launch/app.js @@ -78,7 +78,7 @@ export default function LaunchApp(props) { color="black" icon="Mail" /> - DMs + Drafts + DMs + Drafts diff --git a/pkg/interface/src/views/apps/launch/components/tiles/basic.js b/pkg/interface/src/views/apps/launch/components/tiles/basic.js index 6206dd78b..d90dc29b0 100644 --- a/pkg/interface/src/views/apps/launch/components/tiles/basic.js +++ b/pkg/interface/src/views/apps/launch/components/tiles/basic.js @@ -20,8 +20,8 @@ export default class BasicTile extends React.PureComponent { size='12px' display='inline-block' verticalAlign='top' - pt='5px' - pr='2px' + mt='5px' + mr='2' /> : null }{props.title} diff --git a/pkg/interface/src/views/apps/launch/components/tiles/weather.js b/pkg/interface/src/views/apps/launch/components/tiles/weather.js index 68e91f815..7e409edd8 100644 --- a/pkg/interface/src/views/apps/launch/components/tiles/weather.js +++ b/pkg/interface/src/views/apps/launch/components/tiles/weather.js @@ -171,7 +171,7 @@ export default class WeatherTile extends React.Component { onClick={() => this.setState({ manualEntry: !this.state.manualEntry })} > - + Weather @@ -217,15 +217,14 @@ export default class WeatherTile extends React.Component { title={`${locationName} Weather`} > - - Weather + this.setState({ manualEntry: !this.state.manualEntry }) } > - -> + Weather -> @@ -268,7 +267,7 @@ export default class WeatherTile extends React.Component { flexDirection="column" justifyContent="flex-start" > - Weather + Weather Loading, please check again later... From f00b887867c82a9c11e8a5b8aa3e6f126820a3c4 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Thu, 14 Jan 2021 20:16:37 -0500 Subject: [PATCH 25/56] dropdown: use latest mockup --- .../src/views/components/Dropdown.tsx | 5 ++-- .../landscape/components/GroupSwitcher.tsx | 23 +++++++++---------- .../components/Sidebar/SidebarItem.tsx | 6 ++--- .../components/Sidebar/SidebarListHeader.tsx | 6 ++--- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/pkg/interface/src/views/components/Dropdown.tsx b/pkg/interface/src/views/components/Dropdown.tsx index e113ae50a..f0282867a 100644 --- a/pkg/interface/src/views/components/Dropdown.tsx +++ b/pkg/interface/src/views/components/Dropdown.tsx @@ -21,6 +21,7 @@ interface DropdownProps { alignY: AlignY | AlignY[]; alignX: AlignX | AlignX[]; width?: string; + dropWidth?: string; } const ClickBox = styled(Box)` @@ -111,14 +112,14 @@ export function Dropdown(props: DropdownProps) { }); return ( - + {children} {open && ( diff --git a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx index b303d1d4c..ddd6eb6c9 100644 --- a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx +++ b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx @@ -81,17 +81,15 @@ export function GroupSwitcher(props: { const title = getTitleFromWorkspace(associations, workspace); const navTo = (to: string) => `${props.baseUrl}${to}`; return ( - + } > - - - {title} - + + + {title} + - + {(workspace.type === "group") && ( <> {isAdmin && ( )} - + )} diff --git a/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx b/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx index 4eb101228..2b18f76e3 100644 --- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx +++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx @@ -93,8 +93,8 @@ export function SidebarItem(props: { justifyContent="space-between" alignItems="center" py={1} - pl={2} - pr={2} + pl={3} + pr={3} selected={selected} > @@ -105,7 +105,7 @@ export function SidebarItem(props: { /> - + {props.initialValues.hideUnjoined ? "Joined Channels" : "All Channels"} @@ -71,7 +71,7 @@ export function SidebarListHeader(props: { } > - + ); From a6254066e7cb63867310412f741bc25ff42fb342 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Thu, 14 Jan 2021 20:18:07 -0500 Subject: [PATCH 26/56] newChannel: correct dark mode back link --- pkg/interface/src/views/landscape/components/NewChannel.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pkg/interface/src/views/landscape/components/NewChannel.tsx b/pkg/interface/src/views/landscape/components/NewChannel.tsx index fa3725df4..a7fc45bf6 100644 --- a/pkg/interface/src/views/landscape/components/NewChannel.tsx +++ b/pkg/interface/src/views/landscape/components/NewChannel.tsx @@ -85,7 +85,7 @@ export function NewChannel(props: NewChannelProps & RouteComponentProps) { moduleType ); } - + if (!group) { await waiter(p => Boolean(p?.groups?.[`/ship/~${window.ship}/${resId}`])); } @@ -99,11 +99,11 @@ export function NewChannel(props: NewChannelProps & RouteComponentProps) { actions.setStatus({ error: 'Channel creation failed' }); } }; - + return ( history.push(props.baseUrl)}> - {'<- Back'} + {'<- Back'} New Channel From 316c52802fac4526b56945774f94ea0b3a1e6b8c Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Thu, 14 Jan 2021 20:22:20 -0500 Subject: [PATCH 27/56] landscape: prevent offscreen bumps from font size --- pkg/interface/src/views/apps/chat/components/ChatMessage.tsx | 4 ++-- pkg/interface/src/views/components/ProfileOverlay.tsx | 2 +- pkg/interface/src/views/landscape/components/ChannelMenu.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index 66cc7858f..c57d21143 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -231,8 +231,8 @@ export const MessageWithSigil = (props) => { }} title={`~${msg.author}`} >{name} - {timestamp} - {datestamp} + {timestamp} + {datestamp} {msg.contents.map(c => diff --git a/pkg/interface/src/views/components/ProfileOverlay.tsx b/pkg/interface/src/views/components/ProfileOverlay.tsx index 3951829c2..0b1ee7f0a 100644 --- a/pkg/interface/src/views/components/ProfileOverlay.tsx +++ b/pkg/interface/src/views/components/ProfileOverlay.tsx @@ -129,7 +129,7 @@ class ProfileOverlay extends PureComponent { )} {cite(`~${ship}`)} {!isOwn && ( - )} diff --git a/pkg/interface/src/views/landscape/components/ChannelMenu.tsx b/pkg/interface/src/views/landscape/components/ChannelMenu.tsx index 131ea9699..91e68c528 100644 --- a/pkg/interface/src/views/landscape/components/ChannelMenu.tsx +++ b/pkg/interface/src/views/landscape/components/ChannelMenu.tsx @@ -48,7 +48,7 @@ export function ChannelMenu(props: ChannelMenuProps) { const isOurs = ship.slice(1) === window.ship; - const isMuted = + const isMuted = props.graphNotificationConfig.watching.findIndex( (a) => a.graph === appPath && a.index === "/" ) === -1; @@ -119,7 +119,7 @@ export function ChannelMenu(props: ChannelMenuProps) { } alignX="right" alignY="top" - width="250px" + dropWidth="250px" > From a889095265356ad6c0dc95d626fb105b074b16b2 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Thu, 14 Jan 2021 20:28:44 -0500 Subject: [PATCH 28/56] landscape: amend paddingRight in sidebar --- pkg/interface/src/views/landscape/components/GroupSwitcher.tsx | 2 +- .../views/landscape/components/Sidebar/SidebarListHeader.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx index ddd6eb6c9..47ac1f19c 100644 --- a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx +++ b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx @@ -170,7 +170,7 @@ export function GroupSwitcher(props: { - + {(workspace.type === "group") && ( <> {isAdmin && ( diff --git a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx index 4b7744992..d9b553763 100644 --- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx +++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx @@ -100,7 +100,7 @@ export function SidebarListHeader(props: { } > - + ); From 2cd80bf2afc2527c9bfd076752efba6a5c8e8380 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Fri, 15 Jan 2021 17:32:39 -0500 Subject: [PATCH 29/56] landscape: sidebar updated to latest --- .../landscape/components/GroupSwitcher.tsx | 14 +++++----- .../landscape/components/Sidebar/Sidebar.tsx | 15 ----------- .../components/Sidebar/SidebarListHeader.tsx | 27 +++++++++++++------ 3 files changed, 25 insertions(+), 31 deletions(-) diff --git a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx index 47ac1f19c..f5e373d27 100644 --- a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx +++ b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx @@ -81,12 +81,11 @@ export function GroupSwitcher(props: { const title = getTitleFromWorkspace(associations, workspace); const navTo = (to: string) => `${props.baseUrl}${to}`; return ( - + - + } > - - - {title} - + + + {title} - + {(workspace.type === "group") && ( <> {isAdmin && ( diff --git a/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx b/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx index 07b96e02a..1fec33daa 100644 --- a/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx +++ b/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx @@ -48,20 +48,6 @@ interface SidebarProps { workspace: Workspace; } -// Magic spacer that because firefox doesn't correctly calculate -// position: sticky on a flex child -// remove when https://bugzilla.mozilla.org/show_bug.cgi?id=1488080 -// is fixed -const SidebarStickySpacer = styled(Box)` - height: 0px; - flex-grow: 1; - @-moz-document url-prefix() { - & { - height: ${p => p.theme.space[6] }px; - } - } -`; - export function Sidebar(props: SidebarProps) { const { invites, api, associations, selected, apps, workspace } = props; const groupPath = getGroupFromWorkspace(workspace); @@ -118,7 +104,6 @@ export function Sidebar(props: SidebarProps) { apps={props.apps} baseUrl={props.baseUrl} /> - @@ -51,12 +56,18 @@ export function SidebarListHeader(props: { - + + + + - + ); } From 64b4689a4a891e40af90963ee96101b34e08323f Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Fri, 15 Jan 2021 17:45:10 -0500 Subject: [PATCH 30/56] landscape: remove old new channel button --- .../landscape/components/GroupSwitcher.tsx | 42 ++++++------ .../landscape/components/Sidebar/Sidebar.tsx | 68 ++++++------------- 2 files changed, 41 insertions(+), 69 deletions(-) diff --git a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx index f5e373d27..2b51e7680 100644 --- a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx +++ b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx @@ -1,21 +1,18 @@ -import React from "react"; +import React from 'react'; import { - Center, Box, Col, Row, Text, - IconButton, - Button, - Icon, -} from "@tlon/indigo-react"; -import { uxToHex } from "~/logic/lib/util"; -import { Link } from "react-router-dom"; + Icon +} from '@tlon/indigo-react'; +import { uxToHex } from '~/logic/lib/util'; +import { Link } from 'react-router-dom'; -import { Association, Associations } from "~/types/metadata-update"; -import { Dropdown } from "~/views/components/Dropdown"; -import { Workspace } from "~/types"; -import { getTitleFromWorkspace } from "~/logic/lib/workspace"; +import { Associations } from '~/types/metadata-update'; +import { Dropdown } from '~/views/components/Dropdown'; +import { Workspace } from '~/types'; +import { getTitleFromWorkspace } from '~/logic/lib/workspace'; const GroupSwitcherItem = ({ to, children, bottom = false, ...rest }) => ( @@ -47,7 +44,7 @@ function RecentGroups(props: { recent: string[]; associations: Associations }) { return (e in associations?.contacts); }).slice(1, 5).map((g) => { const assoc = associations.contacts[g]; - const color = uxToHex(assoc?.metadata?.color || "0x0"); + const color = uxToHex(assoc?.metadata?.color || '0x0'); return ( @@ -60,7 +57,7 @@ function RecentGroups(props: { recent: string[]; associations: Associations }) { bg={`#${color}`} mr={2} display="block" - flexShrink='0' + flexShrink={0} /> {assoc?.metadata?.title} @@ -76,6 +73,7 @@ export function GroupSwitcher(props: { workspace: Workspace; baseUrl: string; recentGroups: string[]; + isAdmin: any; }) { const { associations, workspace, isAdmin } = props; const title = getTitleFromWorkspace(associations, workspace); @@ -131,9 +129,9 @@ export function GroupSwitcher(props: { Join Group - {workspace.type === "group" && ( + {workspace.type === 'group' && ( <> - + Participants - + Group Settings - {isAdmin && ( + {isAdmin && ( - {title} + {title} - {(workspace.type === "group") && ( + {(workspace.type === 'group') && ( <> - {isAdmin && ( + {isAdmin && ( )} - + diff --git a/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx b/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx index 1fec33daa..61380aaee 100644 --- a/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx +++ b/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx @@ -1,26 +1,24 @@ -import React, { ReactNode } from "react"; +import React, { ReactNode } from 'react'; import styled from 'styled-components'; import { - Box, - Col, -} from "@tlon/indigo-react"; -import { Link } from "react-router-dom"; + Col +} from '@tlon/indigo-react'; -import GlobalApi from "~/logic/api/global"; -import { GroupSwitcher } from "../GroupSwitcher"; +import GlobalApi from '~/logic/api/global'; +import { GroupSwitcher } from '../GroupSwitcher'; import { Associations, Workspace, Groups, Invites, - Rolodex, -} from "~/types"; -import { SidebarListHeader } from "./SidebarListHeader"; -import { useLocalStorageState } from "~/logic/lib/useLocalStorageState"; -import { getGroupFromWorkspace } from "~/logic/lib/workspace"; + Rolodex +} from '~/types'; +import { SidebarListHeader } from './SidebarListHeader'; +import { useLocalStorageState } from '~/logic/lib/useLocalStorageState'; +import { getGroupFromWorkspace } from '~/logic/lib/workspace'; import { SidebarAppConfigs } from './types'; -import { SidebarList } from "./SidebarList"; -import { roleForShip } from "~/logic/lib/group"; +import { SidebarList } from './SidebarList'; +import { roleForShip } from '~/logic/lib/group'; const ScrollbarLessCol = styled(Col)` scrollbar-width: none !important; @@ -30,7 +28,6 @@ const ScrollbarLessCol = styled(Col)` } `; - interface SidebarProps { contacts: Rolodex; children: ReactNode; @@ -49,23 +46,23 @@ interface SidebarProps { } export function Sidebar(props: SidebarProps) { - const { invites, api, associations, selected, apps, workspace } = props; + const { associations, selected, workspace } = props; const groupPath = getGroupFromWorkspace(workspace); - const display = props.mobileHide ? ["none", "flex"] : "flex"; + const display = props.mobileHide ? ['none', 'flex'] : 'flex'; if (!associations) { return null; } const [config, setConfig] = useLocalStorageState( - `group-config:${groupPath || "home"}`, + `group-config:${groupPath || 'home'}`, { - sortBy: "lastUpdated", - hideUnjoined: false, + sortBy: 'lastUpdated', + hideUnjoined: false } ); const role = props.groups?.[groupPath] ? roleForShip(props.groups[groupPath], window.ship) : undefined; - const isAdmin = (role === "admin") || (workspace?.type === 'home'); + const isAdmin = (role === 'admin') || (workspace?.type === 'home'); return ( + selected={selected || ''} + workspace={workspace} + /> - - - - + New Channel - - - ); } From 959c7ee48894159bbfcf24389a54caede5df13f3 Mon Sep 17 00:00:00 2001 From: Liam Fitzgerald Date: Mon, 18 Jan 2021 16:30:05 +1000 Subject: [PATCH 31/56] LinkWindow, VirtualScroller: virtualise correctly --- .../src/views/apps/links/LinkResource.tsx | 32 ++++++-------- .../src/views/apps/links/LinkWindow.tsx | 30 ++++++++++++- .../views/apps/links/components/LinkItem.tsx | 20 +++++++-- .../src/views/components/VirtualScroller.tsx | 43 ++++++++----------- 4 files changed, 77 insertions(+), 48 deletions(-) diff --git a/pkg/interface/src/views/apps/links/LinkResource.tsx b/pkg/interface/src/views/apps/links/LinkResource.tsx index e7deda085..f8a06a2a7 100644 --- a/pkg/interface/src/views/apps/links/LinkResource.tsx +++ b/pkg/interface/src/views/apps/links/LinkResource.tsx @@ -60,30 +60,26 @@ export function LinkResource(props: LinkResourceProps) { } return ( - + { return ( - - - - - - + ); }} /> diff --git a/pkg/interface/src/views/apps/links/LinkWindow.tsx b/pkg/interface/src/views/apps/links/LinkWindow.tsx index dd7113a69..62a1a15d8 100644 --- a/pkg/interface/src/views/apps/links/LinkWindow.tsx +++ b/pkg/interface/src/views/apps/links/LinkWindow.tsx @@ -1,4 +1,6 @@ -import React, { useRef, useCallback, useEffect } from "react"; +import React, { useRef, useCallback, useEffect, useMemo } from "react"; +import { Col } from "@tlon/indigo-react"; +import bigInt from 'big-integer'; import { Association, Graph, @@ -7,10 +9,12 @@ import { LocalUpdateRemoteContentPolicy, Group, Rolodex, + S3State, } from "~/types"; import GlobalApi from "~/logic/api/global"; import VirtualScroller from "~/views/components/VirtualScroller"; import { LinkItem } from "./components/LinkItem"; +import LinkSubmit from "./components/LinkSubmit"; interface LinkWindowProps { association: Association; @@ -24,6 +28,7 @@ interface LinkWindowProps { group: Group; path: string; api: GlobalApi; + s3: S3State; } export function LinkWindow(props: LinkWindowProps) { const { graph, api, association } = props; @@ -42,12 +47,24 @@ export function LinkWindow(props: LinkWindowProps) { list.calculateVisibleItems(); }, [graph.size]); + const first = graph.peekLargest()?.[0]; + + const [,,ship, name] = association['app-path'].split('/'); + + const style = useMemo(() => + ({ + height: "100%", + width: "100%", + display: 'flex', + flexDirection: 'column', + alignItems: 'center' + }), []); return ( (virtualList.current = l ?? undefined)} origin="top" - style={{ height: "100%", width: "100%" }} + style={style} onStartReached={() => {}} onScroll={() => {}} data={graph} @@ -59,8 +76,17 @@ export function LinkWindow(props: LinkWindowProps) { const linkProps = { ...props, node, + measure, key: index.toString() }; + if(index.eq(first ?? bigInt.zero)) { + return ( + + + + + ) + } return ; }} loadRows={fetchLinks} diff --git a/pkg/interface/src/views/apps/links/components/LinkItem.tsx b/pkg/interface/src/views/apps/links/components/LinkItem.tsx index a8345ef0d..e34de6cfb 100644 --- a/pkg/interface/src/views/apps/links/components/LinkItem.tsx +++ b/pkg/interface/src/views/apps/links/components/LinkItem.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect, useRef, useCallback } from 'react'; import { Link } from 'react-router-dom'; import { Row, Col, Anchor, Box, Text, Icon, Action } from '@tlon/indigo-react'; @@ -19,6 +19,7 @@ interface LinkItemProps { path: string; contacts: Rolodex; unreads: Unreads; + measure: (el: any) => void; } export const LinkItem = (props: LinkItemProps) => { @@ -29,9 +30,12 @@ export const LinkItem = (props: LinkItemProps) => { group, path, contacts, + measure, ...rest } = props; + const ref = useRef(null); + const 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}/ ); @@ -70,9 +74,18 @@ export const LinkItem = (props: LinkItemProps) => { const markRead = () => { api.hark.markEachAsRead(props.association, '/', `/${index}`, 'link', 'link'); } + + + const onMeasure = useCallback(() => { + ref.current && measure(ref.current); + }, [ref.current, measure]) + + useEffect(() => { + onMeasure(); + }, [onMeasure]); + return ( - - + { url={contents[1].url} text={contents[0].text} unfold={true} + onLoad={onMeasure} style={{ alignSelf: 'center' }} oembedProps={{ p: 2, diff --git a/pkg/interface/src/views/components/VirtualScroller.tsx b/pkg/interface/src/views/components/VirtualScroller.tsx index e7a57ba54..3dd67700d 100644 --- a/pkg/interface/src/views/components/VirtualScroller.tsx +++ b/pkg/interface/src/views/components/VirtualScroller.tsx @@ -44,6 +44,8 @@ export default class VirtualScroller extends Component; } | undefined; + overscan = 150; + OVERSCAN_SIZE = 100; // Minimum number of messages on either side before loadRows is called constructor(props: VirtualScrollerProps) { @@ -53,7 +55,7 @@ export default class VirtualScroller extends Component { - totalHeight += this.heightOf(index); + totalHeight += Math.max(this.heightOf(index), 0); }); averageHeight = Number((totalHeight / this.props.data.size).toFixed()); totalHeight += (this.props.size - this.props.data.size) * averageHeight; @@ -136,36 +140,23 @@ export default class VirtualScroller extends Component(); - let startBuffer = new BigIntOrderedMap(); - let endBuffer = new BigIntOrderedMap(); const { scrollTop, offsetHeight: windowHeight } = this.window; - const { averageHeight } = this.state; + const { averageHeight, totalHeight } = this.state; const { data, size: totalSize, onCalculateVisibleItems } = this.props; - const overscan = Math.max(windowHeight / 2, 200); - [...data].forEach(([index, datum]) => { const height = this.heightOf(index); - if (startgap < (scrollTop - overscan) && !startGapFilled) { - startBuffer.set(index, datum); + if (startgap < (scrollTop - this.overscan) && !startGapFilled) { startgap += height; - } else if (heightShown < (windowHeight + overscan)) { + } else if (heightShown < (windowHeight + this.overscan)) { startGapFilled = true; visibleItems.set(index, datum); heightShown += height; - } else if (endBuffer.size < visibleItems.size) { - endBuffer.set(index, data.get(index)); - } else { - endgap += height; - } - }); - - - startBuffer.forEach((_datum, index) => { - startgap -= this.heightOf(index); + } }); + endgap = totalHeight - heightShown - startgap; const firstVisibleKey = visibleItems.peekSmallest()?.[0] ?? this.estimateIndexFromScrollTop(scrollTop)!; const smallest = data.peekSmallest(); @@ -184,7 +175,7 @@ export default class VirtualScroller extends Component { @@ -309,7 +302,7 @@ export default class VirtualScroller extends Component - + {indexesToRender.map(render)} From becd520c45bd117e1a87a957098d667b869196d4 Mon Sep 17 00:00:00 2001 From: Liam Fitzgerald Date: Mon, 18 Jan 2021 17:14:12 +1000 Subject: [PATCH 32/56] links: pass empty measure prop to fix comments --- pkg/interface/src/views/apps/links/LinkResource.tsx | 8 +++++++- pkg/interface/src/views/apps/links/LinkWindow.tsx | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/pkg/interface/src/views/apps/links/LinkResource.tsx b/pkg/interface/src/views/apps/links/LinkResource.tsx index f8a06a2a7..0bf62c845 100644 --- a/pkg/interface/src/views/apps/links/LinkResource.tsx +++ b/pkg/interface/src/views/apps/links/LinkResource.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useCallback } from "react"; import { Box, Row, Col, Center, LoadingSpinner, Text } from "@tlon/indigo-react"; import { Switch, Route, Link } from "react-router-dom"; import bigInt from 'big-integer'; @@ -16,6 +16,8 @@ import { Comments } from "~/views/components/Comments"; import "./css/custom.css"; +const emptyMeasure = () => {}; + type LinkResourceProps = StoreState & { association: Association; api: GlobalApi; @@ -59,6 +61,7 @@ export function LinkResource(props: LinkResourceProps) { return
; } + return ( @@ -102,6 +105,7 @@ export function LinkResource(props: LinkResourceProps) { const contact = contactDetails[node.post.author]; return ( + {"<- Back"} + ); }} /> diff --git a/pkg/interface/src/views/apps/links/LinkWindow.tsx b/pkg/interface/src/views/apps/links/LinkWindow.tsx index 62a1a15d8..3c29eac4b 100644 --- a/pkg/interface/src/views/apps/links/LinkWindow.tsx +++ b/pkg/interface/src/views/apps/links/LinkWindow.tsx @@ -81,7 +81,7 @@ export function LinkWindow(props: LinkWindowProps) { }; if(index.eq(first ?? bigInt.zero)) { return ( - + From 2ea9b48ecb14ade56691be2fb21e60ced7489aa5 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:19:40 -0500 Subject: [PATCH 33/56] groupSwitcher: prevent text clipping --- pkg/interface/src/views/landscape/components/GroupSwitcher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx index 2b51e7680..356aa0313 100644 --- a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx +++ b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx @@ -162,7 +162,7 @@ export function GroupSwitcher(props: { > - {title} + {title} From 6790664b2b0d2f18f68401945bb70bbd64464148 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:20:30 -0500 Subject: [PATCH 34/56] sidebar: level padding-right --- .../views/landscape/components/Sidebar/SidebarListHeader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx index ca41db26e..8395233d3 100644 --- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx +++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx @@ -67,12 +67,12 @@ export function SidebarListHeader(props: { + style={{ display: (props.workspace?.type === 'home') ? 'inline-block' : 'none'}}> From f5344efade367a890aa743e0b32a5ab8f09467ab Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:22:55 -0500 Subject: [PATCH 35/56] landscape: widen popover menu --- pkg/interface/src/views/landscape/components/PopoverRoutes.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx b/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx index 5b42228ff..5dec307ed 100644 --- a/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx +++ b/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx @@ -80,7 +80,7 @@ export function PopoverRoutes( From ed2b350b2fa1c51f2550eaf6c7e92a4e5901bd60 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:24:55 -0500 Subject: [PATCH 36/56] profile: widen sidebar --- pkg/interface/src/views/apps/profile/profile.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/pkg/interface/src/views/apps/profile/profile.tsx b/pkg/interface/src/views/apps/profile/profile.tsx index 993416e0f..f11bc2d0a 100644 --- a/pkg/interface/src/views/apps/profile/profile.tsx +++ b/pkg/interface/src/views/apps/profile/profile.tsx @@ -33,7 +33,7 @@ const SidebarItem = ({ children, view, current }) => { backgroundColor={selected ? "washedGray" : "white"} > - + {children} @@ -76,7 +76,7 @@ export default function ProfileScreen(props: any) { height="100%" width="100%" display="grid" - gridTemplateColumns={["100%", "200px 1fr"]} + gridTemplateColumns={["100%", "250px 1fr"]} gridTemplateRows={["48px 1fr", "1fr"]} borderRadius={1} bg="white" @@ -95,8 +95,8 @@ export default function ProfileScreen(props: any) { bg={sigilColor} borderRadius={8} my={4} - height={128} - width={128} + height={160} + width={160} display="flex" justifyContent="center" alignItems="center" From 6ce130176ae444acbfe939f9de61ba9af43b8a81 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:28:43 -0500 Subject: [PATCH 37/56] links: equalise font size, fix dropdown width --- .../src/views/apps/links/components/LinkItem.tsx | 12 ++++++------ .../src/views/apps/links/components/LinkSubmit.tsx | 4 +--- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/pkg/interface/src/views/apps/links/components/LinkItem.tsx b/pkg/interface/src/views/apps/links/components/LinkItem.tsx index e27e45365..d47e5ee57 100644 --- a/pkg/interface/src/views/apps/links/components/LinkItem.tsx +++ b/pkg/interface/src/views/apps/links/components/LinkItem.tsx @@ -72,7 +72,7 @@ export const LinkItem = (props: LinkItemProps) => { } return ( - + { - + - + { - + { > - + ); }; diff --git a/pkg/interface/src/views/apps/links/components/LinkSubmit.tsx b/pkg/interface/src/views/apps/links/components/LinkSubmit.tsx index ab9a78b0f..2eaba4555 100644 --- a/pkg/interface/src/views/apps/links/components/LinkSubmit.tsx +++ b/pkg/interface/src/views/apps/links/components/LinkSubmit.tsx @@ -132,7 +132,6 @@ const LinkSubmit = (props: LinkSubmitProps) => { position="absolute" px={2} pt={2} - fontSize={0} style={{ pointerEvents: 'none' }} >{canUpload ? <> @@ -180,7 +179,6 @@ const LinkSubmit = (props: LinkSubmitProps) => { type="url" pl={2} width="100%" - fontSize={0} py={2} color="black" backgroundColor="transparent" @@ -198,8 +196,8 @@ const LinkSubmit = (props: LinkSubmitProps) => { pl={2} backgroundColor="transparent" width="100%" - fontSize={0} color="black" + fontSize={1} style={{ resize: 'none', height: 40 From 7ba6efbca2be7a78dc28a01efb56289249340429 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:30:35 -0500 Subject: [PATCH 38/56] publish: prevent 'new post' squash --- pkg/interface/src/views/apps/publish/components/Notebook.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/interface/src/views/apps/publish/components/Notebook.tsx b/pkg/interface/src/views/apps/publish/components/Notebook.tsx index 47c5bef32..379497cb2 100644 --- a/pkg/interface/src/views/apps/publish/components/Notebook.tsx +++ b/pkg/interface/src/views/apps/publish/components/Notebook.tsx @@ -60,7 +60,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps) { {isWriter && ( - + From d0a276fd43c38c0ff86c93803d4ad15d278472b0 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:44:20 -0500 Subject: [PATCH 39/56] chat: add editor padding on mobile --- pkg/interface/src/views/apps/chat/components/chat-editor.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pkg/interface/src/views/apps/chat/components/chat-editor.js b/pkg/interface/src/views/apps/chat/components/chat-editor.js index 26abf5ad7..03910afc2 100644 --- a/pkg/interface/src/views/apps/chat/components/chat-editor.js +++ b/pkg/interface/src/views/apps/chat/components/chat-editor.js @@ -193,6 +193,8 @@ export default class ChatEditor extends Component { alignItems='center' flexGrow='1' height='100%' + paddingTop={MOBILE_BROWSER_REGEX.test(navigator.userAgent) ? '16px' : '0'} + paddingBottom={MOBILE_BROWSER_REGEX.test(navigator.userAgent) ? '16px' : '0'} maxHeight='224px' width='calc(100% - 88px)' className={inCodeMode ? 'chat code' : 'chat'} From 22f775458320753600dd695001dc348a03027a0c Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:44:42 -0500 Subject: [PATCH 40/56] landscape: step up font size in channel header --- pkg/interface/src/views/landscape/components/ChannelMenu.tsx | 2 +- .../src/views/landscape/components/ResourceSkeleton.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/pkg/interface/src/views/landscape/components/ChannelMenu.tsx b/pkg/interface/src/views/landscape/components/ChannelMenu.tsx index 91e68c528..2f0c39924 100644 --- a/pkg/interface/src/views/landscape/components/ChannelMenu.tsx +++ b/pkg/interface/src/views/landscape/components/ChannelMenu.tsx @@ -121,7 +121,7 @@ export function ChannelMenu(props: ChannelMenuProps) { alignY="top" dropWidth="250px" > - + ); } diff --git a/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx b/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx index 7ad8d8842..673c1c61f 100644 --- a/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx +++ b/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx @@ -42,6 +42,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) { - + {title} From 392bccc6a85b22e7d38ba1d70da35bf6df5724bb Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:46:23 -0500 Subject: [PATCH 41/56] launch: prevent modal button size overflow --- pkg/interface/src/views/apps/launch/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js index c15ad5990..7861d905f 100644 --- a/pkg/interface/src/views/apps/launch/app.js +++ b/pkg/interface/src/views/apps/launch/app.js @@ -102,7 +102,7 @@ export default function LaunchApp(props) { icon="CreateGroup" bg="green" color="#fff" - text="Create a Group" + text="Create Group" > From 3f8de9a7014fd593019169ee26081318fba971f6 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:47:30 -0500 Subject: [PATCH 42/56] leap: correct font sizing of input --- pkg/interface/src/views/components/leap/OmniboxInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/interface/src/views/components/leap/OmniboxInput.js b/pkg/interface/src/views/components/leap/OmniboxInput.js index aea53b7af..a4beb6a7c 100644 --- a/pkg/interface/src/views/components/leap/OmniboxInput.js +++ b/pkg/interface/src/views/components/leap/OmniboxInput.js @@ -22,7 +22,7 @@ export class OmniboxInput extends Component { border='1px solid transparent' borderRadius='2' maxWidth='calc(600px - 1.15rem)' - fontSize='0' + fontSize='1' style={{ boxSizing: 'border-box' }} placeholder='Search...' onKeyDown={props.control} From 4eb3a5ffdf4863a7b503436dbe4df5a97baefa45 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:51:34 -0500 Subject: [PATCH 43/56] statusbar: remove patp --- pkg/interface/src/views/components/StatusBar.js | 1 - 1 file changed, 1 deletion(-) diff --git a/pkg/interface/src/views/components/StatusBar.js b/pkg/interface/src/views/components/StatusBar.js index 583a7efd5..e636e36ad 100644 --- a/pkg/interface/src/views/components/StatusBar.js +++ b/pkg/interface/src/views/components/StatusBar.js @@ -62,7 +62,6 @@ const StatusBar = (props) => { props.history.push('/~profile')}> - {cite(props.ship)} From 904ba113b7ebec5147bc1314b912af868ae3ad03 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 15:54:07 -0500 Subject: [PATCH 44/56] author: increase font size --- pkg/interface/src/views/components/Author.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pkg/interface/src/views/components/Author.tsx b/pkg/interface/src/views/components/Author.tsx index 11707be74..cd54c6ba6 100644 --- a/pkg/interface/src/views/components/Author.tsx +++ b/pkg/interface/src/views/components/Author.tsx @@ -52,13 +52,14 @@ export default function Author(props: AuthorProps) { {name} - + {dateFmt} {props.children} From 1f7348ab6cc99530559f581b95acab7655c07213 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Tue, 19 Jan 2021 16:24:21 -0500 Subject: [PATCH 45/56] publish: move 'new post' to header --- .../apps/publish/components/Notebook.tsx | 35 ++----------------- .../views/landscape/components/Resource.tsx | 2 ++ .../landscape/components/ResourceSkeleton.tsx | 24 +++++++++++-- 3 files changed, 25 insertions(+), 36 deletions(-) diff --git a/pkg/interface/src/views/apps/publish/components/Notebook.tsx b/pkg/interface/src/views/apps/publish/components/Notebook.tsx index 379497cb2..c6e7fcd97 100644 --- a/pkg/interface/src/views/apps/publish/components/Notebook.tsx +++ b/pkg/interface/src/views/apps/publish/components/Notebook.tsx @@ -1,10 +1,9 @@ import React from "react"; -import { Link, RouteComponentProps } from "react-router-dom"; +import { RouteComponentProps } from "react-router-dom"; import { NotebookPosts } from "./NotebookPosts"; -import { Box, Button, Text, Row, Col } from "@tlon/indigo-react"; +import { Col } from "@tlon/indigo-react"; import GlobalApi from "~/logic/api/global"; import { Contacts, Rolodex, Groups, Associations, Graph, Association, Unreads } from "~/types"; -import { useShowNickname } from "~/logic/lib/util"; interface NotebookProps { api: GlobalApi; @@ -30,44 +29,14 @@ export function Notebook(props: NotebookProps & RouteComponentProps) { association, graph } = props; - const { metadata } = association; const group = groups[association?.['group-path']]; if (!group) { return null; // Waiting on groups to populate } - const relativePath = (p: string) => props.baseUrl + p; - - const contact = notebookContacts?.[ship]; - const isOwn = `~${window.ship}` === ship; - let isWriter = true; - - if (group.tags?.publish?.[`writers-${book}`]) { - isWriter = isOwn || group.tags?.publish?.[`writers-${book}`]?.has(window.ship); - } - - const showNickname = useShowNickname(contact); - return ( - - - {metadata?.title} - by - - {showNickname ? contact?.nickname : ship} - - - {isWriter && ( - - - - )} - - diff --git a/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx b/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx index 673c1c61f..1af976b78 100644 --- a/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx +++ b/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx @@ -16,7 +16,7 @@ import { ChannelMenu } from "./ChannelMenu"; import { NotificationGraphConfig } from "~/types"; const TruncatedBox = styled(Box)` - white-space: nowrap; + white-space: pre; text-overflow: ellipsis; overflow: hidden; `; @@ -29,15 +29,28 @@ type ResourceSkeletonProps = { children: ReactNode; atRoot?: boolean; title?: string; + groupTags?: any; }; export function ResourceSkeleton(props: ResourceSkeletonProps) { - const { association, api, baseUrl, children, atRoot } = props; + const { association, api, baseUrl, children, atRoot, groupTags } = props; const app = association?.metadata?.module || association["app-name"]; const appPath = association["app-path"]; const workspace = baseUrl === "/~landscape/home" ? "/home" : association["group-path"]; const title = props.title || association?.metadata?.title; + + const [, , ship, resource] = appPath.split("/"); + + const resourcePath = (p: string) => baseUrl + `/resource/${app}/ship/${ship}/${resource}` + p; + + const isOwn = `~${window.ship}` === ship; + let isWriter = (app === 'publish') ? true : false; + + if (groupTags?.publish?.[`writers-${resource}`]) { + isWriter = isOwn || groupTags?.publish?.[`writers-${resource}`]?.has(window.ship); + } + return ( + {isWriter && ( + + + New Post + + )} Date: Tue, 19 Jan 2021 16:25:36 -0500 Subject: [PATCH 46/56] publish: step up font size in titles --- .../src/views/apps/publish/components/NotePreview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/interface/src/views/apps/publish/components/NotePreview.tsx b/pkg/interface/src/views/apps/publish/components/NotePreview.tsx index 163556e9f..1820188c4 100644 --- a/pkg/interface/src/views/apps/publish/components/NotePreview.tsx +++ b/pkg/interface/src/views/apps/publish/components/NotePreview.tsx @@ -61,9 +61,9 @@ export function NotePreview(props: NotePreviewProps) { overflow='hidden' p='2' > - {title} + {title} - + Date: Wed, 20 Jan 2021 13:27:27 -0500 Subject: [PATCH 47/56] landscape: font + padding hotfix - Channel Settings size - Padding on channel header --- pkg/interface/src/views/landscape/components/ChannelMenu.tsx | 2 +- .../src/views/landscape/components/ResourceSkeleton.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/interface/src/views/landscape/components/ChannelMenu.tsx b/pkg/interface/src/views/landscape/components/ChannelMenu.tsx index 2f0c39924..fd05bdc5b 100644 --- a/pkg/interface/src/views/landscape/components/ChannelMenu.tsx +++ b/pkg/interface/src/views/landscape/components/ChannelMenu.tsx @@ -102,7 +102,7 @@ export function ChannelMenu(props: ChannelMenuProps) { - + Channel Settings diff --git a/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx b/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx index 1af976b78..4e7fcd862 100644 --- a/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx +++ b/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx @@ -85,7 +85,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) { {atRoot && ( <> - + {title} From 2df7c62a331d52594b19a0aeac52da67e54cdff6 Mon Sep 17 00:00:00 2001 From: Matilde Park Date: Wed, 20 Jan 2021 18:45:07 -0500 Subject: [PATCH 48/56] landscape: sidebar header item center, padded Fixes urbit/landscape#257. --- .../views/landscape/components/Sidebar/SidebarListHeader.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx index 8395233d3..0a38fad42 100644 --- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx +++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx @@ -58,13 +58,14 @@ export function SidebarListHeader(props: { - + @@ -72,7 +73,7 @@ export function SidebarListHeader(props: { display='inline-block' py='1px' px='3px' - mr='2' + mr='12px' backgroundColor='washedBlue' color='blue' borderRadius='1'> From 85a548833246fcdbf7eab5386f7270b896526719 Mon Sep 17 00:00:00 2001 From: Liam Fitzgerald Date: Thu, 3 Dec 2020 13:31:23 +1000 Subject: [PATCH 49/56] AsyncButton: protect against double submit --- pkg/interface/package-lock.json | 88 ++++++++++++++----- .../src/views/components/AsyncButton.tsx | 9 +- .../views/components/StatelessAsyncAction.tsx | 7 +- .../views/components/StatelessAsyncButton.tsx | 10 ++- 4 files changed, 85 insertions(+), 29 deletions(-) diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json index 6f1071d53..09a89a46a 100644 --- a/pkg/interface/package-lock.json +++ b/pkg/interface/package-lock.json @@ -10138,7 +10138,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -10159,12 +10160,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -10179,17 +10182,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -10306,7 +10312,8 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -10318,6 +10325,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -10332,6 +10340,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10339,12 +10348,14 @@ "minimist": { "version": "1.2.5", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10363,6 +10374,7 @@ "version": "0.5.3", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -10424,7 +10436,8 @@ "npm-normalize-package-bin": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -10452,7 +10465,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -10464,6 +10478,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -10541,7 +10556,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -10577,6 +10593,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10596,6 +10613,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -10639,12 +10657,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -11125,7 +11145,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -11146,12 +11167,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -11166,17 +11189,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -11293,7 +11319,8 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -11305,6 +11332,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -11319,6 +11347,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -11326,12 +11355,14 @@ "minimist": { "version": "1.2.5", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -11350,6 +11381,7 @@ "version": "0.5.3", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -11411,7 +11443,8 @@ "npm-normalize-package-bin": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -11439,7 +11472,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -11451,6 +11485,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -11528,7 +11563,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -11564,6 +11600,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -11583,6 +11620,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -11626,12 +11664,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/pkg/interface/src/views/components/AsyncButton.tsx b/pkg/interface/src/views/components/AsyncButton.tsx index b7f99588c..f62288ee5 100644 --- a/pkg/interface/src/views/components/AsyncButton.tsx +++ b/pkg/interface/src/views/components/AsyncButton.tsx @@ -29,10 +29,15 @@ export function AsyncButton({ }, [status]); return ( -