commit
9cd24e5623
@ -28,6 +28,7 @@
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.5.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-textarea-autosize": "^8.4.0",
|
||||
"react-twitter-embed": "^4.0.4",
|
||||
"typescript": "^4.9.4",
|
||||
"uuid": "^9.0.0"
|
||||
|
@ -38,7 +38,7 @@ export default function DM(props: DMProps) {
|
||||
|
||||
return (
|
||||
<div className={`flex dm f-col${props.data.pubkey === pubKey ? " me" : ""}`} ref={ref}>
|
||||
<div><NoteTime from={props.data.created_at * 1000} /></div>
|
||||
<div><NoteTime from={props.data.created_at * 1000} fallback={'Just now'} /></div>
|
||||
<div className="w-max">
|
||||
<Text content={content} />
|
||||
</div>
|
||||
|
@ -20,6 +20,7 @@
|
||||
font-size: small;
|
||||
white-space: nowrap;
|
||||
color: var(--gray-light);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.note > .body {
|
||||
|
@ -50,7 +50,8 @@ export default function Note(props) {
|
||||
let replyId = ev.Thread?.ReplyTo?.Event ?? ev.Thread?.Root?.Event;
|
||||
let mentions = ev.Thread?.PubKeys?.map(a => [a, users[a]])?.map(a => (a[1]?.name?.length ?? 0) > 0 ? a[1].name : hexToBech32("npub", a[0]).substring(0, 12))
|
||||
.sort((a, b) => a.startsWith("npub") ? 1 : -1);
|
||||
let pubMentions = mentions.length > maxMentions ? `${mentions?.slice(0, maxMentions).join(", ")} & ${mentions.length - maxMentions} others` : mentions?.join(", ");
|
||||
let othersLength = mentions.length - maxMentions
|
||||
let pubMentions = mentions.length > maxMentions ? `${mentions?.slice(0, maxMentions).join(", ")} & ${othersLength} other${othersLength > 1 ? 's' : ''}` : mentions?.join(", ");
|
||||
return (
|
||||
<div className="reply">
|
||||
➡️ {(pubMentions?.length ?? 0) > 0 ? pubMentions : hexToBech32("note", replyId)?.substring(0, 12)}
|
||||
|
@ -4,8 +4,13 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.note-reply {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.note-creator textarea {
|
||||
outline: none;
|
||||
resize: none;
|
||||
min-height: 40px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
max-width: -webkit-fill-available;
|
||||
@ -15,11 +20,6 @@
|
||||
min-width: -webkit-fill-available;
|
||||
min-width: -moz-available;
|
||||
min-width: fill-available;
|
||||
transition: min-height .5s;
|
||||
}
|
||||
|
||||
.note-creator .textarea--focused {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.note-creator .actions {
|
||||
@ -43,4 +43,7 @@
|
||||
.note-creator .btn {
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
background-color: var(--gray-secondary);
|
||||
color: var(--gray-superlight);
|
||||
border-color: var(--gray-superlight);
|
||||
}
|
||||
|
@ -15,6 +15,7 @@ export function NoteCreator(props) {
|
||||
const replyTo = props.replyTo;
|
||||
const onSend = props.onSend;
|
||||
const show = props.show || false;
|
||||
const autoFocus = props.autoFocus || false;
|
||||
const publisher = useEventPublisher();
|
||||
const [note, setNote] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
@ -26,10 +27,10 @@ export function NoteCreator(props) {
|
||||
console.debug("Sending note: ", ev);
|
||||
publisher.broadcast(ev);
|
||||
setNote("");
|
||||
setActive(false);
|
||||
if (typeof onSend === "function") {
|
||||
onSend();
|
||||
}
|
||||
setActive(false);
|
||||
}
|
||||
|
||||
async function attachFile() {
|
||||
@ -49,33 +50,43 @@ export function NoteCreator(props) {
|
||||
|
||||
function onChange(ev) {
|
||||
const { value } = ev.target
|
||||
setNote(value)
|
||||
if (value) {
|
||||
setNote(value)
|
||||
setActive(true)
|
||||
} else {
|
||||
setActive(false)
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit(ev) {
|
||||
ev.stopPropagation();
|
||||
sendNote()
|
||||
}
|
||||
|
||||
if (!show) return false;
|
||||
return (
|
||||
<>
|
||||
{replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
|
||||
<div className="flex note-creator">
|
||||
<div className={`flex note-creator ${replyTo ? 'note-reply' : ''}`}>
|
||||
<div className="flex f-col mr10 f-grow">
|
||||
<Textarea
|
||||
autoFocus={autoFocus}
|
||||
className={`textarea ${active ? "textarea--focused" : ""}`}
|
||||
users={users}
|
||||
onChange={onChange}
|
||||
value={note}
|
||||
onFocus={() => setActive(true)}
|
||||
/>
|
||||
<div className="actions flex f-row">
|
||||
<div className="attachment flex f-row">
|
||||
{error.length > 0 ? <b className="error">{error}</b> : null}
|
||||
<FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
|
||||
</div>
|
||||
<div className="btn" onClick={() => sendNote()}>Send</div>
|
||||
</div>
|
||||
{active && note && (
|
||||
<div className="actions flex f-row">
|
||||
<div className="attachment flex f-row">
|
||||
{error.length > 0 ? <b className="error">{error}</b> : null}
|
||||
<FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
|
||||
</div>
|
||||
<button type="button" className="btn" onClick={onSubmit}>
|
||||
{replyTo ? 'Reply' : 'Send'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
@ -104,8 +104,13 @@ export default function NoteFooter(props) {
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<NoteCreator replyTo={ev} onSend={(e) => setReply(false)} show={reply} />
|
||||
<NoteCreator
|
||||
autoFocus={true}
|
||||
replyTo={ev}
|
||||
onSend={(e) => setReply(false)}
|
||||
show={reply}
|
||||
/>
|
||||
<LNURLTip svc={author?.lud16 || author?.lud06} onClose={(e) => setTip(false)} show={tip} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -18,8 +18,9 @@
|
||||
}
|
||||
|
||||
.reaction > .header > .info {
|
||||
color: #999;
|
||||
color: var(--gray-light);
|
||||
font-size: small;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.reaction .reaction-text {
|
||||
|
@ -63,12 +63,12 @@ export default function NoteReaction(props) {
|
||||
const root = extractRoot();
|
||||
const opt = {
|
||||
showHeader: ev?.Kind === EventKind.Repost,
|
||||
showFooter: ev?.Kind === EventKind.Repost
|
||||
showFooter: ev?.Kind === EventKind.Repost,
|
||||
};
|
||||
return (
|
||||
<div className="reaction">
|
||||
<div className="header flex">
|
||||
<ProfileImage pubkey={ev.RootPubKey} subHeader={tagLine()} />
|
||||
<ProfileImage pubkey={ev.RootPubKey} />
|
||||
<div className="info">
|
||||
<NoteTime from={ev.CreatedAt * 1000} />
|
||||
</div>
|
||||
@ -78,4 +78,4 @@ export default function NoteReaction(props) {
|
||||
{!root && refEvent ? <p><Link to={eventLink(refEvent)}>#{hexToBech32("note", refEvent).substring(0, 12)}</Link></p> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ const MinuteInMs = 1_000 * 60;
|
||||
const HourInMs = MinuteInMs * 60;
|
||||
const DayInMs = HourInMs * 24;
|
||||
|
||||
export default function NoteTime({ from }) {
|
||||
export default function NoteTime({ from, fallback = '' }) {
|
||||
const [time, setTime] = useState("");
|
||||
|
||||
function calcTime() {
|
||||
@ -16,7 +16,7 @@ export default function NoteTime({ from }) {
|
||||
} else if (absAgo > HourInMs) {
|
||||
return `${fromDate.getHours().toString().padStart(2, '0')}:${fromDate.getMinutes().toString().padStart(2, '0')}`;
|
||||
} else if (absAgo < MinuteInMs) {
|
||||
return 'Just now'
|
||||
return fallback
|
||||
} else {
|
||||
let mins = parseInt(absAgo / MinuteInMs);
|
||||
let minutes = mins === 1 ? 'min' : 'mins'
|
||||
|
@ -24,7 +24,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: bold;
|
||||
margin-bottom: .2em;
|
||||
}
|
||||
|
||||
.pfp .nip05 {
|
||||
|
@ -2,6 +2,7 @@ import { useSelector } from "react-redux";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
|
||||
import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
|
||||
import TextareaAutosize from "react-textarea-autosize";
|
||||
|
||||
// @ts-expect-error
|
||||
import Nip05 from "./Nip05";
|
||||
@ -61,6 +62,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
|
||||
loadingComponent={() => <span>Loading....</span>}
|
||||
placeholder="Say something!"
|
||||
onChange={onChange}
|
||||
textAreaComponent={TextareaAutosize}
|
||||
trigger={{
|
||||
"@": {
|
||||
afterWhitespace: true,
|
||||
|
@ -199,6 +199,7 @@ span.pill {
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
user-select: none;
|
||||
color: var(--font-color);
|
||||
margin: 2px 5px;
|
||||
}
|
||||
|
||||
|
@ -7,8 +7,8 @@
|
||||
height: 210px;
|
||||
margin-bottom: -80px;
|
||||
object-fit: cover;
|
||||
mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
|
||||
-webkit-mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
|
||||
mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
|
||||
-webkit-mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@ -93,6 +93,7 @@
|
||||
.profile .details {
|
||||
max-width: 680px;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.profile .details p {
|
||||
@ -101,15 +102,11 @@
|
||||
|
||||
.profile .details a {
|
||||
color: var(--highlight);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile .website {
|
||||
color: var(--highlight);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.profile .lnurl {
|
||||
color: var(--highlight);
|
||||
.profile .details a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.profile .btn-icon {
|
||||
@ -118,21 +115,6 @@
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.profile .website::before {
|
||||
content: '🔗 ';
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.profile .lnurl {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.profile .lnurl::before {
|
||||
content: '⚡️ ';
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.profile .details-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -148,10 +130,12 @@
|
||||
@media (min-width: 360px) {
|
||||
.profile .copy .body { font-size: 14px }
|
||||
.profile .details-wrapper, .profile .avatar-wrapper { margin-left: 21px; }
|
||||
.profile .details { width: calc(100% - 21px); }
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.profile .details-wrapper, .profile .avatar-wrapper { margin-left: 30px; }
|
||||
.profile .details { width: calc(100% - 30px); }
|
||||
}
|
||||
|
||||
.profile .follow-button {
|
||||
@ -227,3 +211,39 @@
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile .links {
|
||||
margin: 8px 12px;
|
||||
}
|
||||
|
||||
.profile .website {
|
||||
color: var(--highlight);
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.profile .website a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile .website::before {
|
||||
content: '🔗 ';
|
||||
}
|
||||
|
||||
.profile .lnurl {
|
||||
color: var(--highlight);
|
||||
margin: 6px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile .lnurl:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.profile .lnurl {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.profile .zap {
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
@ -61,18 +61,22 @@ export default function ProfilePage() {
|
||||
<div className="details">
|
||||
<div>{about}</div>
|
||||
|
||||
{user?.website && (
|
||||
<div className="website f-ellipsis">
|
||||
<a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
|
||||
</div>
|
||||
)}
|
||||
<div className="links">
|
||||
{user?.website && (
|
||||
<div className="website f-ellipsis">
|
||||
<a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lnurl ? <div className="lnurl f-ellipsis">
|
||||
{lnurl}
|
||||
<div className="btn btn-icon" onClick={(e) => setShowLnQr(true)}>
|
||||
<FontAwesomeIcon icon={faQrcode} size="lg" />
|
||||
{lnurl && (
|
||||
<div className="f-ellipsis" onClick={(e) => setShowLnQr(true)}>
|
||||
<span className="zap">⚡️</span>
|
||||
<span className="lnurl" >
|
||||
{lnurl}
|
||||
</span>
|
||||
</div>
|
||||
</div> : null}
|
||||
)}
|
||||
</div>
|
||||
<LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
|
||||
</div>
|
||||
)
|
||||
|
28
yarn.lock
28
yarn.lock
@ -1024,7 +1024,7 @@
|
||||
"@babel/helper-validator-option" "^7.18.6"
|
||||
"@babel/plugin-transform-typescript" "^7.18.6"
|
||||
|
||||
"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
version "7.20.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
|
||||
integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
|
||||
@ -8048,6 +8048,15 @@ react-scripts@5.0.1:
|
||||
optionalDependencies:
|
||||
fsevents "^2.3.2"
|
||||
|
||||
react-textarea-autosize@^8.4.0:
|
||||
version "8.4.0"
|
||||
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz#4d0244d6a50caa897806b8c44abc0540a69bfc8c"
|
||||
integrity sha512-YrTFaEHLgJsi8sJVYHBzYn+mkP3prGkmP2DKb/tm0t7CLJY5t1Rxix8070LAKb0wby7bl/lf2EeHkuMihMZMwQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.10.2"
|
||||
use-composed-ref "^1.3.0"
|
||||
use-latest "^1.2.1"
|
||||
|
||||
react-twitter-embed@^4.0.4:
|
||||
version "4.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz#4a6b8354acc266876ff1110b9f648518ea20db6d"
|
||||
@ -9335,6 +9344,23 @@ url-parse@^1.5.3:
|
||||
querystringify "^2.1.1"
|
||||
requires-port "^1.0.0"
|
||||
|
||||
use-composed-ref@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
|
||||
integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
|
||||
|
||||
use-isomorphic-layout-effect@^1.1.1:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
|
||||
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
|
||||
|
||||
use-latest@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2"
|
||||
integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==
|
||||
dependencies:
|
||||
use-isomorphic-layout-effect "^1.1.1"
|
||||
|
||||
use-sync-external-store@^1.0.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
|
||||
|
Loading…
x
Reference in New Issue
Block a user