mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
updated newsfeed note ui
This commit is contained in:
parent
8b67253c0a
commit
dfe5e4533e
@ -62,7 +62,7 @@
|
|||||||
"eslint-plugin-react-hooks": "^4.6.0",
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
"husky": "^8.0.3",
|
"husky": "^8.0.3",
|
||||||
"lint-staged": "^13.2.1",
|
"lint-staged": "^13.2.1",
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.22",
|
||||||
"prettier": "^2.8.7",
|
"prettier": "^2.8.7",
|
||||||
"prettier-plugin-tailwindcss": "^0.2.7",
|
"prettier-plugin-tailwindcss": "^0.2.7",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
|
@ -40,7 +40,7 @@ specifiers:
|
|||||||
next: ^13.3.0
|
next: ^13.3.0
|
||||||
nostr-relaypool: ^0.5.18
|
nostr-relaypool: ^0.5.18
|
||||||
nostr-tools: ^1.9.0
|
nostr-tools: ^1.9.0
|
||||||
postcss: ^8.4.21
|
postcss: ^8.4.22
|
||||||
prettier: ^2.8.7
|
prettier: ^2.8.7
|
||||||
prettier-plugin-tailwindcss: ^0.2.7
|
prettier-plugin-tailwindcss: ^0.2.7
|
||||||
prop-types: ^15.8.1
|
prop-types: ^15.8.1
|
||||||
@ -95,7 +95,7 @@ devDependencies:
|
|||||||
'@types/react-dom': 18.0.11
|
'@types/react-dom': 18.0.11
|
||||||
'@typescript-eslint/eslint-plugin': 5.58.0_hzv37tkb63et4viajosjuuyxgi
|
'@typescript-eslint/eslint-plugin': 5.58.0_hzv37tkb63et4viajosjuuyxgi
|
||||||
'@typescript-eslint/parser': 5.58.0_ze6bmax3gcsfve3yrzu6npguhe
|
'@typescript-eslint/parser': 5.58.0_ze6bmax3gcsfve3yrzu6npguhe
|
||||||
autoprefixer: 10.4.14_postcss@8.4.21
|
autoprefixer: 10.4.14_postcss@8.4.22
|
||||||
csstype: 3.1.2
|
csstype: 3.1.2
|
||||||
encoding: 0.1.13
|
encoding: 0.1.13
|
||||||
eslint: 8.38.0
|
eslint: 8.38.0
|
||||||
@ -105,11 +105,11 @@ devDependencies:
|
|||||||
eslint-plugin-react-hooks: 4.6.0_eslint@8.38.0
|
eslint-plugin-react-hooks: 4.6.0_eslint@8.38.0
|
||||||
husky: 8.0.3
|
husky: 8.0.3
|
||||||
lint-staged: 13.2.1
|
lint-staged: 13.2.1
|
||||||
postcss: 8.4.21
|
postcss: 8.4.22
|
||||||
prettier: 2.8.7
|
prettier: 2.8.7
|
||||||
prettier-plugin-tailwindcss: 0.2.7_yk5p2qt6yzw3zyyilt4azle7eu
|
prettier-plugin-tailwindcss: 0.2.7_yk5p2qt6yzw3zyyilt4azle7eu
|
||||||
prop-types: 15.8.1
|
prop-types: 15.8.1
|
||||||
tailwindcss: 3.3.1_postcss@8.4.21
|
tailwindcss: 3.3.1_postcss@8.4.22
|
||||||
typescript: 4.9.5
|
typescript: 4.9.5
|
||||||
|
|
||||||
packages:
|
packages:
|
||||||
@ -1178,7 +1178,7 @@ packages:
|
|||||||
lodash.isplainobject: 4.0.6
|
lodash.isplainobject: 4.0.6
|
||||||
lodash.merge: 4.6.2
|
lodash.merge: 4.6.2
|
||||||
postcss-selector-parser: 6.0.10
|
postcss-selector-parser: 6.0.10
|
||||||
tailwindcss: 3.3.1_postcss@8.4.21
|
tailwindcss: 3.3.1_postcss@8.4.22
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@tauri-apps/api/1.2.0:
|
/@tauri-apps/api/1.2.0:
|
||||||
@ -1693,7 +1693,7 @@ packages:
|
|||||||
engines: { node: '>=8' }
|
engines: { node: '>=8' }
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/autoprefixer/10.4.14_postcss@8.4.21:
|
/autoprefixer/10.4.14_postcss@8.4.22:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ== }
|
{ integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ== }
|
||||||
engines: { node: ^10 || ^12 || >=14 }
|
engines: { node: ^10 || ^12 || >=14 }
|
||||||
@ -1702,11 +1702,11 @@ packages:
|
|||||||
postcss: ^8.1.0
|
postcss: ^8.1.0
|
||||||
dependencies:
|
dependencies:
|
||||||
browserslist: 4.21.5
|
browserslist: 4.21.5
|
||||||
caniuse-lite: 1.0.30001478
|
caniuse-lite: 1.0.30001479
|
||||||
fraction.js: 4.2.0
|
fraction.js: 4.2.0
|
||||||
normalize-range: 0.1.2
|
normalize-range: 0.1.2
|
||||||
picocolors: 1.0.0
|
picocolors: 1.0.0
|
||||||
postcss: 8.4.21
|
postcss: 8.4.22
|
||||||
postcss-value-parser: 4.2.0
|
postcss-value-parser: 4.2.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
@ -1762,10 +1762,10 @@ packages:
|
|||||||
engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
|
engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
caniuse-lite: 1.0.30001478
|
caniuse-lite: 1.0.30001479
|
||||||
electron-to-chromium: 1.4.365
|
electron-to-chromium: 1.4.365
|
||||||
node-releases: 2.0.10
|
node-releases: 2.0.10
|
||||||
update-browserslist-db: 1.0.10_browserslist@4.21.5
|
update-browserslist-db: 1.0.11_browserslist@4.21.5
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/bufferutil/4.0.7:
|
/bufferutil/4.0.7:
|
||||||
@ -1804,9 +1804,9 @@ packages:
|
|||||||
engines: { node: '>= 6' }
|
engines: { node: '>= 6' }
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/caniuse-lite/1.0.30001478:
|
/caniuse-lite/1.0.30001479:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw== }
|
{ integrity: sha512-6nuRFim5dx8Eu2tO+KJ9PiBdPHs7WB5Hdf+klDcyefyEuOAcfhihIv7pS+JFknJLUiNQbm1AJYKm0c9QOlQS/Q== }
|
||||||
|
|
||||||
/chalk/2.4.2:
|
/chalk/2.4.2:
|
||||||
resolution:
|
resolution:
|
||||||
@ -1911,14 +1911,14 @@ packages:
|
|||||||
{ integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== }
|
{ integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== }
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/colorette/2.0.19:
|
/colorette/2.0.20:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ== }
|
{ integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w== }
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/commander/10.0.0:
|
/commander/10.0.1:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA== }
|
{ integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug== }
|
||||||
engines: { node: '>=14' }
|
engines: { node: '>=14' }
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
@ -3400,7 +3400,7 @@ packages:
|
|||||||
dependencies:
|
dependencies:
|
||||||
chalk: 5.2.0
|
chalk: 5.2.0
|
||||||
cli-truncate: 3.1.0
|
cli-truncate: 3.1.0
|
||||||
commander: 10.0.0
|
commander: 10.0.1
|
||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
execa: 7.1.1
|
execa: 7.1.1
|
||||||
lilconfig: 2.1.0
|
lilconfig: 2.1.0
|
||||||
@ -3427,7 +3427,7 @@ packages:
|
|||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
cli-truncate: 2.1.0
|
cli-truncate: 2.1.0
|
||||||
colorette: 2.0.19
|
colorette: 2.0.20
|
||||||
log-update: 4.0.0
|
log-update: 4.0.0
|
||||||
p-map: 4.0.0
|
p-map: 4.0.0
|
||||||
rfdc: 1.3.0
|
rfdc: 1.3.0
|
||||||
@ -3614,7 +3614,7 @@ packages:
|
|||||||
'@next/env': 13.3.0
|
'@next/env': 13.3.0
|
||||||
'@swc/helpers': 0.4.14
|
'@swc/helpers': 0.4.14
|
||||||
busboy: 1.6.0
|
busboy: 1.6.0
|
||||||
caniuse-lite: 1.0.30001478
|
caniuse-lite: 1.0.30001479
|
||||||
postcss: 8.4.14
|
postcss: 8.4.14
|
||||||
react: 18.2.0
|
react: 18.2.0
|
||||||
react-dom: 18.2.0_react@18.2.0
|
react-dom: 18.2.0_react@18.2.0
|
||||||
@ -3924,20 +3924,20 @@ packages:
|
|||||||
engines: { node: '>= 6' }
|
engines: { node: '>= 6' }
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/postcss-import/14.1.0_postcss@8.4.21:
|
/postcss-import/14.1.0_postcss@8.4.22:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw== }
|
{ integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw== }
|
||||||
engines: { node: '>=10.0.0' }
|
engines: { node: '>=10.0.0' }
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.0.0
|
postcss: ^8.0.0
|
||||||
dependencies:
|
dependencies:
|
||||||
postcss: 8.4.21
|
postcss: 8.4.22
|
||||||
postcss-value-parser: 4.2.0
|
postcss-value-parser: 4.2.0
|
||||||
read-cache: 1.0.0
|
read-cache: 1.0.0
|
||||||
resolve: 1.22.3
|
resolve: 1.22.3
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/postcss-js/4.0.1_postcss@8.4.21:
|
/postcss-js/4.0.1_postcss@8.4.22:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw== }
|
{ integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw== }
|
||||||
engines: { node: ^12 || ^14 || >= 16 }
|
engines: { node: ^12 || ^14 || >= 16 }
|
||||||
@ -3945,10 +3945,10 @@ packages:
|
|||||||
postcss: ^8.4.21
|
postcss: ^8.4.21
|
||||||
dependencies:
|
dependencies:
|
||||||
camelcase-css: 2.0.1
|
camelcase-css: 2.0.1
|
||||||
postcss: 8.4.21
|
postcss: 8.4.22
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/postcss-load-config/3.1.4_postcss@8.4.21:
|
/postcss-load-config/3.1.4_postcss@8.4.22:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg== }
|
{ integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg== }
|
||||||
engines: { node: '>= 10' }
|
engines: { node: '>= 10' }
|
||||||
@ -3962,18 +3962,18 @@ packages:
|
|||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
lilconfig: 2.1.0
|
lilconfig: 2.1.0
|
||||||
postcss: 8.4.21
|
postcss: 8.4.22
|
||||||
yaml: 1.10.2
|
yaml: 1.10.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/postcss-nested/6.0.0_postcss@8.4.21:
|
/postcss-nested/6.0.0_postcss@8.4.22:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w== }
|
{ integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w== }
|
||||||
engines: { node: '>=12.0' }
|
engines: { node: '>=12.0' }
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.2.14
|
postcss: ^8.2.14
|
||||||
dependencies:
|
dependencies:
|
||||||
postcss: 8.4.21
|
postcss: 8.4.22
|
||||||
postcss-selector-parser: 6.0.11
|
postcss-selector-parser: 6.0.11
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
@ -4010,9 +4010,9 @@ packages:
|
|||||||
source-map-js: 1.0.2
|
source-map-js: 1.0.2
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/postcss/8.4.21:
|
/postcss/8.4.22:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg== }
|
{ integrity: sha512-XseknLAfRHzVWjCEtdviapiBtfLdgyzExD50Rg2ePaucEesyh8Wv4VPdW0nbyDa1ydbrAxV19jvMT4+LFmcNUA== }
|
||||||
engines: { node: ^10 || ^12 || >=14 }
|
engines: { node: ^10 || ^12 || >=14 }
|
||||||
dependencies:
|
dependencies:
|
||||||
nanoid: 3.3.6
|
nanoid: 3.3.6
|
||||||
@ -4638,7 +4638,7 @@ packages:
|
|||||||
tslib: 2.5.0
|
tslib: 2.5.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/tailwindcss/3.3.1_postcss@8.4.21:
|
/tailwindcss/3.3.1_postcss@8.4.22:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g== }
|
{ integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g== }
|
||||||
engines: { node: '>=12.13.0' }
|
engines: { node: '>=12.13.0' }
|
||||||
@ -4660,11 +4660,11 @@ packages:
|
|||||||
normalize-path: 3.0.0
|
normalize-path: 3.0.0
|
||||||
object-hash: 3.0.0
|
object-hash: 3.0.0
|
||||||
picocolors: 1.0.0
|
picocolors: 1.0.0
|
||||||
postcss: 8.4.21
|
postcss: 8.4.22
|
||||||
postcss-import: 14.1.0_postcss@8.4.21
|
postcss-import: 14.1.0_postcss@8.4.22
|
||||||
postcss-js: 4.0.1_postcss@8.4.21
|
postcss-js: 4.0.1_postcss@8.4.22
|
||||||
postcss-load-config: 3.1.4_postcss@8.4.21
|
postcss-load-config: 3.1.4_postcss@8.4.22
|
||||||
postcss-nested: 6.0.0_postcss@8.4.21
|
postcss-nested: 6.0.0_postcss@8.4.22
|
||||||
postcss-selector-parser: 6.0.11
|
postcss-selector-parser: 6.0.11
|
||||||
postcss-value-parser: 4.2.0
|
postcss-value-parser: 4.2.0
|
||||||
quick-lru: 5.1.1
|
quick-lru: 5.1.1
|
||||||
@ -4836,9 +4836,9 @@ packages:
|
|||||||
engines: { node: '>=8' }
|
engines: { node: '>=8' }
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/update-browserslist-db/1.0.10_browserslist@4.21.5:
|
/update-browserslist-db/1.0.11_browserslist@4.21.5:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ== }
|
{ integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA== }
|
||||||
hasBin: true
|
hasBin: true
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
browserslist: '>= 4.21.0'
|
browserslist: '>= 4.21.0'
|
||||||
|
@ -73,9 +73,9 @@ export default function Page() {
|
|||||||
const result: any = await getLatestNotes({ date: dateToUnix(now.current) });
|
const result: any = await getLatestNotes({ date: dateToUnix(now.current) });
|
||||||
// update data
|
// update data
|
||||||
if (Array.isArray(result)) {
|
if (Array.isArray(result)) {
|
||||||
setData((data) => [...data, ...result]);
|
setData((data) => [...result, ...data]);
|
||||||
} else {
|
} else {
|
||||||
setData((data) => [...data, result]);
|
setData((data) => [result, ...data]);
|
||||||
}
|
}
|
||||||
// hide newer trigger
|
// hide newer trigger
|
||||||
setHasNewerNote(false);
|
setHasNewerNote(false);
|
||||||
|
@ -20,11 +20,6 @@
|
|||||||
scrollbar-width: none; /* Firefox */
|
scrollbar-width: none; /* Firefox */
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gradient-radial-page {
|
|
||||||
background: radial-gradient(52.56% 52.56% at 50% 117.61%, #1c1c21 0, rgba(28, 28, 33, 0) 100%),
|
|
||||||
radial-gradient(63.94% 63.94% at 50% 0, #1c1c21 0, rgba(28, 28, 33, 0) 78.13%), #07070d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
.border {
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
}
|
}
|
||||||
|
@ -44,12 +44,8 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
|
|||||||
<div onClick={(e) => openUserPage(e)}>
|
<div onClick={(e) => openUserPage(e)}>
|
||||||
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
|
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-5 pl-[52px]">
|
<div className="mt-1 pl-[52px]">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
|
||||||
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
|
||||||
{content}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
|
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
|
||||||
<NoteMetadata
|
<NoteMetadata
|
||||||
|
@ -6,7 +6,7 @@ import { dateToUnix } from '@utils/getDate';
|
|||||||
|
|
||||||
import * as Dialog from '@radix-ui/react-dialog';
|
import * as Dialog from '@radix-ui/react-dialog';
|
||||||
import useLocalStorage from '@rehooks/local-storage';
|
import useLocalStorage from '@rehooks/local-storage';
|
||||||
import { MultiBubble, OpenNewWindow } from 'iconoir-react';
|
import { ChatLines, OpenNewWindow } from 'iconoir-react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
||||||
import { useContext, useState } from 'react';
|
import { useContext, useState } from 'react';
|
||||||
@ -57,7 +57,7 @@ export const NoteComment = ({
|
|||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
|
<button className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
|
||||||
<div className="rounded-md p-1 group-hover:bg-zinc-800">
|
<div className="rounded-md p-1 group-hover:bg-zinc-800">
|
||||||
<MultiBubble width={20} height={20} className="text-zinc-500" />
|
<ChatLines width={20} height={20} className="text-zinc-500" />
|
||||||
</div>
|
</div>
|
||||||
<span>{count}</span>
|
<span>{count}</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -82,12 +82,8 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
|
|||||||
<div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
|
<div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
|
||||||
<div className="relative z-10 flex flex-col">
|
<div className="relative z-10 flex flex-col">
|
||||||
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
|
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
|
||||||
<div className="-mt-5 pl-[52px]">
|
<div className="mt-1 pl-[52px]">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
|
||||||
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
|
||||||
{content}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
|
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
|
||||||
<NoteMetadata
|
<NoteMetadata
|
||||||
|
@ -4,7 +4,9 @@ import { memo } from 'react';
|
|||||||
export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
|
export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`relative h-full ${size === 'large' ? 'w-full' : 'w-2/3'} rounded-lg border border-zinc-800 xl:w-2/3`}
|
className={`relative h-full ${
|
||||||
|
size === 'large' ? 'w-full' : 'w-2/3'
|
||||||
|
} mt-2 rounded-lg border border-zinc-800 xl:w-2/3`}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src={url}
|
src={url}
|
||||||
|
@ -3,7 +3,7 @@ import ReactPlayer from 'react-player/lazy';
|
|||||||
|
|
||||||
export const VideoPreview = memo(function VideoPreview({ url }: { url: string }) {
|
export const VideoPreview = memo(function VideoPreview({ url }: { url: string }) {
|
||||||
return (
|
return (
|
||||||
<div onClick={(e) => e.stopPropagation()} className="relative flex flex-col overflow-hidden rounded-lg">
|
<div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
|
||||||
<ReactPlayer
|
<ReactPlayer
|
||||||
url={url}
|
url={url}
|
||||||
controls={true}
|
controls={true}
|
||||||
|
@ -81,12 +81,8 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
|
|||||||
<div className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
|
<div className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
|
||||||
<div className="relative z-10 flex flex-col">
|
<div className="relative z-10 flex flex-col">
|
||||||
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
|
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
|
||||||
<div className="-mt-5 pl-[52px]">
|
<div className="mt-1 pl-[52px]">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
|
||||||
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
|
||||||
{content}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -69,12 +69,8 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
|
|||||||
<div onClick={(e) => openUserPage(e)}>
|
<div onClick={(e) => openUserPage(e)}>
|
||||||
<UserExtend pubkey={data.pubkey} time={data.created_at} />
|
<UserExtend pubkey={data.pubkey} time={data.created_at} />
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-5 pl-[52px]">
|
<div className="mt-1 pl-[52px]">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
|
||||||
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
|
||||||
{content}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
|
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
|
||||||
<NoteMetadata
|
<NoteMetadata
|
||||||
|
@ -3,11 +3,10 @@ import { ImageWithFallback } from '@components/imageWithFallback';
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
|
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
|
||||||
import { truncate } from '@utils/truncate';
|
import { shortenKey } from '@utils/shortenKey';
|
||||||
|
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||||
import { MoreHoriz } from 'iconoir-react';
|
|
||||||
|
|
||||||
dayjs.extend(relativeTime);
|
dayjs.extend(relativeTime);
|
||||||
|
|
||||||
@ -15,7 +14,7 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
|
|||||||
const profile = useProfileMetadata(pubkey);
|
const profile = useProfileMetadata(pubkey);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="group flex items-start gap-2">
|
<div className="group flex h-11 items-center gap-2">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
|
||||||
<ImageWithFallback
|
<ImageWithFallback
|
||||||
src={profile?.picture || DEFAULT_AVATAR}
|
src={profile?.picture || DEFAULT_AVATAR}
|
||||||
@ -25,19 +24,16 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex w-full flex-1 items-start justify-between">
|
<div className="flex w-full flex-1 items-start justify-between">
|
||||||
<div className="flex w-full justify-between">
|
<div className="flex flex-col gap-1">
|
||||||
<div className="flex items-baseline gap-2 text-sm">
|
<div className="flex items-baseline gap-2">
|
||||||
<span className="font-bold leading-tight group-hover:underline">
|
<h5 className="text-sm font-semibold leading-none group-hover:underline">
|
||||||
{profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
|
{profile?.display_name || profile?.name || shortenKey(pubkey)}
|
||||||
</span>
|
</h5>
|
||||||
<span className="leading-tight text-zinc-500">·</span>
|
<span className="text-sm leading-none text-zinc-700"></span>
|
||||||
<span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800">
|
|
||||||
<MoreHoriz width={12} height={12} className="text-zinc-500" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span className="text-sm leading-none text-zinc-500">
|
||||||
|
{profile?.nip05 || shortenKey(pubkey)} • {dayjs().to(dayjs.unix(time))}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -7,7 +7,7 @@ import destr from 'destr';
|
|||||||
import reactStringReplace from 'react-string-replace';
|
import reactStringReplace from 'react-string-replace';
|
||||||
|
|
||||||
export const contentParser = (noteContent, noteTags) => {
|
export const contentParser = (noteContent, noteTags) => {
|
||||||
let parsedContent = noteContent;
|
let parsedContent = noteContent.trim();
|
||||||
|
|
||||||
// get data tags
|
// get data tags
|
||||||
const tags = destr(noteTags);
|
const tags = destr(noteTags);
|
||||||
@ -24,7 +24,7 @@ export const contentParser = (noteContent, noteTags) => {
|
|||||||
return <VideoPreview key={match + i} url={match} />;
|
return <VideoPreview key={match + i} url={match} />;
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<a key={match + i} href={match} target="_blank" rel="noreferrer">
|
<a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">
|
||||||
{match}
|
{match}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
@ -55,7 +55,7 @@ export const contentParser = (noteContent, noteTags) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const messageParser = (noteContent) => {
|
export const messageParser = (noteContent) => {
|
||||||
let parsedContent = noteContent;
|
let parsedContent = noteContent.trim();
|
||||||
|
|
||||||
// handle urls
|
// handle urls
|
||||||
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
||||||
@ -70,7 +70,7 @@ export const messageParser = (noteContent) => {
|
|||||||
return <VideoPreview key={match + i} url={match} />;
|
return <VideoPreview key={match + i} url={match} />;
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<a key={match + i} href={match} target="_blank" rel="noreferrer">
|
<a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">
|
||||||
{match}
|
{match}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
|
6
src/utils/shortenKey.tsx
Normal file
6
src/utils/shortenKey.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { nip19 } from 'nostr-tools';
|
||||||
|
|
||||||
|
export const shortenKey = (pubkey: string) => {
|
||||||
|
const npub = nip19.npubEncode(pubkey);
|
||||||
|
return npub.substring(0, 16).concat('...');
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user