From d292e658fcd62190677960aea366a201860a18f0 Mon Sep 17 00:00:00 2001 From: Kieran Date: Wed, 19 Jul 2023 16:21:21 +0100 Subject: [PATCH] Progress --- packages/app/public/icons.svg | 58 ++++- packages/app/src/Element/FixedTabs.css | 34 +++ packages/app/src/Element/FixedTabs.tsx | 6 + packages/app/src/Element/LiveStreams.css | 54 +++++ packages/app/src/Element/LiveStreams.tsx | 58 +++++ packages/app/src/Element/Note.css | 66 +----- packages/app/src/Element/Skeleton.css | 46 ---- packages/app/src/Element/Skeleton.tsx | 21 -- .../app/src/Element/SuggestedProfiles.tsx | 3 - packages/app/src/Element/Tabs.css | 26 ++- packages/app/src/Element/Tabs.tsx | 3 +- packages/app/src/Element/Timeline.tsx | 8 +- packages/app/src/Element/TrendingPosts.tsx | 4 - packages/app/src/Element/TrendingUsers.tsx | 4 - packages/app/src/Feed/TimelineFeed.ts | 16 +- packages/app/src/Pages/ProfilePage.tsx | 2 +- packages/app/src/Pages/Root.css | 20 +- packages/app/src/Pages/Root.tsx | 199 +++++++++++++----- packages/app/src/Pages/messages.ts | 2 - packages/app/src/index.css | 85 ++++++++ packages/app/src/index.tsx | 5 - packages/app/src/lang.json | 12 -- packages/system/src/text.ts | 2 +- 23 files changed, 496 insertions(+), 238 deletions(-) create mode 100644 packages/app/src/Element/FixedTabs.css create mode 100644 packages/app/src/Element/FixedTabs.tsx create mode 100644 packages/app/src/Element/LiveStreams.css create mode 100644 packages/app/src/Element/LiveStreams.tsx delete mode 100644 packages/app/src/Element/Skeleton.css delete mode 100644 packages/app/src/Element/Skeleton.tsx diff --git a/packages/app/public/icons.svg b/packages/app/public/icons.svg index 382fecd3..4a96e53c 100644 --- a/packages/app/public/icons.svg +++ b/packages/app/public/icons.svg @@ -180,19 +180,55 @@ - - - - - + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/app/src/Element/FixedTabs.css b/packages/app/src/Element/FixedTabs.css new file mode 100644 index 00000000..2c568719 --- /dev/null +++ b/packages/app/src/Element/FixedTabs.css @@ -0,0 +1,34 @@ +.fixed-tabs { + display: flex; + align-items: center; + flex-direction: row; + white-space: nowrap; + text-align: center; + user-select: none; +} + +.fixed-tabs > a { + flex: 1; + padding: 16px; + color: var(--font-tertiary-color); + font-weight: 500; + font-size: 16px; + letter-spacing: 0.2px; + cursor: pointer; + text-decoration: none; +} + +.fixed-tabs > a.active { + border-bottom: 1px solid var(--highlight); + color: var(--font-color); +} + +.fixed-tabs > a.disabled { + opacity: 0.3; + cursor: not-allowed; + pointer-events: none; +} + +.fixed-tabs > a:hover { + border-color: var(--highlight); +} diff --git a/packages/app/src/Element/FixedTabs.tsx b/packages/app/src/Element/FixedTabs.tsx new file mode 100644 index 00000000..edf2a1f3 --- /dev/null +++ b/packages/app/src/Element/FixedTabs.tsx @@ -0,0 +1,6 @@ +import "./FixedTabs.css"; +import { ReactNode } from "react"; + +export function FixedTabs({ children }: { children: ReactNode }) { + return
{children}
; +} diff --git a/packages/app/src/Element/LiveStreams.css b/packages/app/src/Element/LiveStreams.css new file mode 100644 index 00000000..e86ac8dd --- /dev/null +++ b/packages/app/src/Element/LiveStreams.css @@ -0,0 +1,54 @@ +.stream-list { + display: flex; + gap: 4px; + overflow-x: auto; +} + +.stream-list::-webkit-scrollbar { + height: 6.25px; +} + +.stream-event { + display: flex; + padding: 8px 12px; + gap: 8px; + text-decoration: none; +} + +.stream-event > div:first-of-type { + border-radius: 8px; + height: 49px; + width: 65px; + background-color: var(--gray-light); + background-image: var(--img); + background-position: center; + background-size: cover; +} + +.stream-event span.live { + display: flex; + padding: 4px 6px; + justify-content: center; + align-items: center; + gap: 4px; + border-radius: 9px; + background: var(--live); + font-size: 12px; + font-weight: 700; + text-transform: uppercase; +} + +.stream-event .details .reactions { + color: var(--font-secondary-color); +} + +.stream-event .details > div:nth-of-type(2) { + width: 100px; + min-width: 0; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-size: 16px; + font-weight: 600; + line-height: 24px; +} diff --git a/packages/app/src/Element/LiveStreams.tsx b/packages/app/src/Element/LiveStreams.tsx new file mode 100644 index 00000000..f639a2de --- /dev/null +++ b/packages/app/src/Element/LiveStreams.tsx @@ -0,0 +1,58 @@ +import "./LiveStreams.css"; +import { NostrEvent, NostrPrefix, encodeTLV } from "@snort/system"; +import { findTag } from "SnortUtils"; +import { CSSProperties, useMemo } from "react"; +import { Link } from "react-router-dom"; +import useImgProxy from "Hooks/useImgProxy"; +import Icon from "Icons/Icon"; + +export function LiveStreams({ evs }: { evs: Array }) { + const streams = useMemo(() => { + return [...evs].sort((a, b) => { + const aStarts = Number(findTag(a, "starts") ?? a.created_at); + const bStarts = Number(findTag(b, "starts") ?? b.created_at); + return aStarts > bStarts ? -1 : 1; + }); + }, [evs]); + + if (streams.length === 0) return null; + + return ( +
+ {streams.map(v => ( + + ))} +
+ ); +} + +function LiveStreamEvent({ ev }: { ev: NostrEvent }) { + const { proxy } = useImgProxy(); + const title = findTag(ev, "title"); + const image = findTag(ev, "image"); + const status = findTag(ev, "status"); + + const link = encodeTLV(NostrPrefix.Address, findTag(ev, "d") ?? "", undefined, ev.kind, ev.pubkey); + const imageProxy = proxy(image ?? ""); + + return ( + +
+
+
+ {status} +
+ +
0
+
+
+
{title}
+
+ + ); +} diff --git a/packages/app/src/Element/Note.css b/packages/app/src/Element/Note.css index ad4b9ed2..f8f7edc7 100644 --- a/packages/app/src/Element/Note.css +++ b/packages/app/src/Element/Note.css @@ -62,9 +62,9 @@ } .note-quote { - border: 1px solid var(--gray); - border-radius: 10px; - padding: 5px; + border: 1px solid var(--gray-superdark); + border-radius: 12px; + padding: 8px 16px 16px 16px; } .note > .body .text-frag { @@ -91,54 +91,6 @@ } } -.note .ctx-menu { - color: var(--font-secondary-color); - background: transparent; - box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4); - min-width: 0; - margin: 0; - padding: 0; - border-radius: 16px; -} - -.note .ctx-menu li { - background: #1e1e1e; - padding-top: 8px; - padding-bottom: 8px; - display: grid; - grid-template-columns: 2rem auto; -} - -.light .note .ctx-menu li { - background: var(--note-bg); -} - -.note .ctx-menu li:first-of-type { - padding-top: 12px; - border-top-left-radius: 16px; - border-top-right-radius: 16px; -} - -.note .ctx-menu li:last-of-type { - padding-bottom: 12px; - border-bottom-left-radius: 16px; - border-bottom-right-radius: 16px; -} - -.note .ctx-menu li:hover { - color: white; - background: #2a2a2a; -} - -.light .note .ctx-menu li:hover { - color: white; - background: var(--font-secondary-color); -} - -.ctx-menu .red { - color: var(--error); -} - .note > .header img:hover, .note > .header .name > .reply:hover { cursor: pointer; @@ -250,14 +202,6 @@ text-decoration: underline; } -.close-menu { - position: absolute; - width: 100vw; - height: 100vh; - top: -400px; - left: -600px; -} - -.close-menu-container { - position: absolute; +.note .body > .text > a { + color: var(--highlight); } diff --git a/packages/app/src/Element/Skeleton.css b/packages/app/src/Element/Skeleton.css deleted file mode 100644 index a05f8955..00000000 --- a/packages/app/src/Element/Skeleton.css +++ /dev/null @@ -1,46 +0,0 @@ -.skeleton { - display: inline-block; - height: 1em; - position: relative; - overflow: hidden; - background-color: var(--note-bg); - border-radius: 16px; -} - -html.light .skeleton { - background-color: var(--gray-secondary); -} - -.skeleton::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - transform: translateX(-100%); - background-image: linear-gradient( - 90deg, - rgba(255, 255, 255, 0) 0, - rgba(255, 255, 255, 0.02) 20%, - rgba(255, 255, 255, 0.05) 60%, - rgba(255, 255, 255, 0) - ); - animation: shimmer 2s infinite; - content: ""; -} - -html.light .skeleton::after { - background-image: linear-gradient( - 90deg, - rgba(255, 255, 255, 0) 0, - rgba(255, 255, 255, 0.2) 20%, - rgba(255, 255, 255, 0.5) 60%, - rgba(255, 255, 255, 0) - ); -} - -@keyframes shimmer { - 100% { - transform: translateX(100%); - } -} diff --git a/packages/app/src/Element/Skeleton.tsx b/packages/app/src/Element/Skeleton.tsx deleted file mode 100644 index 1fa311fe..00000000 --- a/packages/app/src/Element/Skeleton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import "./Skeleton.css"; - -interface ISkepetonProps { - children?: React.ReactNode; - loading?: boolean; - width?: string; - height?: string; - margin?: string; -} - -export default function Skeleton({ children, width, height, margin, loading = true }: ISkepetonProps) { - if (!loading) { - return <>{children}; - } - - return ( -
- {children} -
- ); -} diff --git a/packages/app/src/Element/SuggestedProfiles.tsx b/packages/app/src/Element/SuggestedProfiles.tsx index 7d86420c..71ff96de 100644 --- a/packages/app/src/Element/SuggestedProfiles.tsx +++ b/packages/app/src/Element/SuggestedProfiles.tsx @@ -55,9 +55,6 @@ export default function SuggestedProfiles() { return ( <> -

- -