diff --git a/packages/app/babel.config.json b/packages/app/babel.config.json deleted file mode 100644 index 5946cceb..00000000 --- a/packages/app/babel.config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["@babel/preset-env", "@babel/preset-react"], - "plugins": [["formatjs"]] -} diff --git a/packages/app/custom.d.ts b/packages/app/custom.d.ts index 82dc4522..7a7bf018 100644 --- a/packages/app/custom.d.ts +++ b/packages/app/custom.d.ts @@ -30,15 +30,7 @@ declare module "translations/*.json" { export default value; } -type EmojiShape = { - [key: string]: { - keywords: Array; - char: string; - fitzpatrick_scale: boolean; - category: string; - }; -}; - declare module "emojilib" { - const lib: EmojiShape; + const value: Record>; + export default value; } diff --git a/packages/app/package.json b/packages/app/package.json index 720eaa30..1349e6ef 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -19,14 +19,13 @@ "dexie": "^3.2.4", "dns-over-http-resolver": "^2.1.1", "emojilib": "^3.0.10", - "hls.js": "^1.4.6", "light-bolt11-decoder": "^2.1.0", "match-sorter": "^6.3.1", "qr-code-styling": "^1.6.0-rc.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-intersection-observer": "^9.4.1", - "react-intl": "^6.2.8", + "react-intl": "^6.4.4", "react-redux": "^8.0.5", "react-router-dom": "^6.5.0", "react-textarea-autosize": "^8.4.0", @@ -38,8 +37,8 @@ "workbox-strategies": "^6.4.2" }, "scripts": { - "start": "webpack serve --node-env=development", - "build": "webpack --node-env=production", + "start": "webpack serve --node-env=development --mode=development", + "build": "webpack --node-env=production --mode=production", "test": "jest --runInBand", "intl-extract": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file src/lang.json --flatten true", "intl-compile": "formatjs compile src/lang.json --out-file src/translations/en.json", @@ -71,9 +70,9 @@ "@babel/plugin-syntax-import-assertions": "^7.20.0", "@babel/preset-env": "^7.21.5", "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.22.5", "@babel/runtime": "^7.22.6", "@formatjs/cli": "^6.0.1", - "@formatjs/ts-transformer": "^3.13.1", "@jest/globals": "^29.6.1", "@types/debug": "^4.1.8", "@types/jest": "^29.5.1", @@ -83,6 +82,8 @@ "@types/uuid": "^9.0.2", "@types/webscopeio__react-textarea-autocomplete": "^4.7.2", "@types/webtorrent": "^0.109.3", + "@typescript-eslint/eslint-plugin": "^6.1.0", + "@typescript-eslint/parser": "^6.1.0", "@webbtc/webln-types": "^1.0.10", "@webpack-cli/generators": "^3.0.4", "@webscopeio/react-textarea-autocomplete": "^4.9.2", @@ -103,9 +104,9 @@ "mini-css-extract-plugin": "^2.7.5", "prettier": "2.8.3", "prop-types": "^15.8.1", + "source-map-loader": "^4.0.1", "terser-webpack-plugin": "^5.3.9", "ts-jest": "^29.1.0", - "ts-loader": "^9.4.2", "typescript": "^5.1.6", "webpack": "^5.82.1", "webpack-bundle-analyzer": "^4.8.0", diff --git a/packages/app/src/Element/LinkPreview.css b/packages/app/src/Element/LinkPreview.css index 6e7ff60a..8ee8aa9e 100644 --- a/packages/app/src/Element/LinkPreview.css +++ b/packages/app/src/Element/LinkPreview.css @@ -1,5 +1,5 @@ .link-preview-container { - border-radius: 0px 0px 12px 12px; + border-radius: 12px; background: #151515; overflow: hidden; } @@ -14,11 +14,26 @@ .link-preview-title { padding: 0 10px 10px 10px; + line-height: 21px; +} + +.link-preview-title > h1 { + padding: 0; + font-size: 16px; + font-weight: 700; +} + +.link-preview-container:hover .link-preview-title > h1 { + color: var(--highlight); } .link-preview-title > small { color: var(--font-secondary-color); - font-size: small; + font-size: 14px; +} + +.link-preview-title > small.host { + font-size: 12px; } .link-preview-image { @@ -30,3 +45,7 @@ background-size: cover; background-position: center; } + +.light .link-preview-container { + background: #ddd; +} diff --git a/packages/app/src/Element/LinkPreview.tsx b/packages/app/src/Element/LinkPreview.tsx index bcac9c93..cb453446 100644 --- a/packages/app/src/Element/LinkPreview.tsx +++ b/packages/app/src/Element/LinkPreview.tsx @@ -73,15 +73,12 @@ const LinkPreview = ({ url }: { url: string }) => { {preview && ( e.stopPropagation()} target="_blank" rel="noreferrer" className="ext"> {previewElement()} -

- {preview?.title} - {preview?.description && ( - <> -
- {preview.description.slice(0, 160)} - - )} -

+
+

{preview?.title}

+ {preview?.description && {preview.description.slice(0, 160)}} +
+ {new URL(url).host} +
)} {!preview && } diff --git a/packages/app/src/Element/LiveChat.css b/packages/app/src/Element/LiveChat.css deleted file mode 100644 index c2c85ff4..00000000 --- a/packages/app/src/Element/LiveChat.css +++ /dev/null @@ -1,47 +0,0 @@ -.live-chat { - height: calc(100vh - 100px); - display: flex; - flex-direction: column; -} - -.live-chat > div:nth-child(1) { - font-size: 24px; - line-height: 29px; - font-weight: bold; -} - -.live-chat > div:nth-child(2) { - flex-grow: 1; - display: flex; - gap: 16px; - flex-direction: column-reverse; - margin-block-end: 20px; - overflow-y: auto; -} - -.live-chat > div:nth-child(3) { - display: flex; - gap: 10px; -} - -.live-chat .message { - display: inline-flex; - align-items: center; - gap: 8px; -} - -.live-chat .message .name { - display: inline-flex; - align-items: center; - color: var(--highlight); - font-weight: 600; - cursor: pointer; - user-select: none; -} - -.live-chat .message .avatar { - width: 24px; - height: 24px; - display: inline-block; - margin-right: 8px; -} diff --git a/packages/app/src/Element/LiveChat.tsx b/packages/app/src/Element/LiveChat.tsx deleted file mode 100644 index 0a422c38..00000000 --- a/packages/app/src/Element/LiveChat.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import "./LiveChat.css"; -import { EventKind, NostrLink, TaggedNostrEvent } from "@snort/system"; -import { useUserProfile } from "@snort/system-react"; -import { useState } from "react"; -import { useNavigate } from "react-router-dom"; -import { FormattedMessage, useIntl } from "react-intl"; - -import Textarea from "Element/Textarea"; -import { useLiveChatFeed } from "Feed/LiveChatFeed"; -import useEventPublisher from "Feed/EventPublisher"; -import { getDisplayName } from "Element/ProfileImage"; -import Avatar from "Element/Avatar"; -import AsyncButton from "Element/AsyncButton"; -import Text from "Element/Text"; -import { System } from "index"; -import { profileLink } from "SnortUtils"; - -export function LiveChat({ ev, link }: { ev: TaggedNostrEvent; link: NostrLink }) { - const [chat, setChat] = useState(""); - const messages = useLiveChatFeed(link); - const pub = useEventPublisher(); - const { formatMessage } = useIntl(); - - async function sendChatMessage() { - if (chat.length > 1) { - const reply = await pub?.generic(eb => { - return eb - .kind(1311 as EventKind) - .content(chat) - .tag(["a", `${link.kind}:${link.author}:${link.id}`]) - .processContent(); - }); - if (reply) { - console.debug(reply); - System.BroadcastEvent(reply); - } - setChat(""); - } - } - return ( -
-
- -
-
- {[...(messages.data ?? [])] - .sort((a, b) => b.created_at - a.created_at) - .map(a => ( - - ))} -
-
-