Merge pull request #70 from v0l/ui

UI improvements
2023-01-16 11:47:00 +01:00 · 2023-01-16 11:47:00 +01:00 · 9cd24e5623
parent ed4201e773 cd8d4cf2ea
commit 9cd24e5623
16 changed files with 137 additions and 62 deletions
--- a/package.json
+++ b/package.json
@ -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"
--- a/src/element/DM.tsx
+++ b/src/element/DM.tsx
@ -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>
--- a/src/element/Note.css
+++ b/src/element/Note.css
@ -20,6 +20,7 @@
    font-size: small;
    white-space: nowrap;
    color: var(--gray-light);
+    align-self: flex-start;
 }

 .note > .body {
--- a/src/element/Note.js
+++ b/src/element/Note.js
@ -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)}
--- a/src/element/NoteCreator.css
+++ b/src/element/NoteCreator.css
@ -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);
 }
--- a/src/element/NoteCreator.js
+++ b/src/element/NoteCreator.js
@ -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>
        </>
--- a/src/element/NoteFooter.js
+++ b/src/element/NoteFooter.js
@ -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} />
        </>
    )
-}
+}
--- a/src/element/NoteReaction.css
+++ b/src/element/NoteReaction.css
@ -18,8 +18,9 @@
 }

 .reaction > .header > .info {
-    color: #999;
+    color: var(--gray-light);
    font-size: small;
+    align-self: flex-start;
 }

 .reaction .reaction-text {
--- a/src/element/NoteReaction.js
+++ b/src/element/NoteReaction.js
@ -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>
    );
-}
+}
--- a/src/element/NoteTime.js
+++ b/src/element/NoteTime.js
@ -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'
--- a/src/element/ProfileImage.css
+++ b/src/element/ProfileImage.css
@ -24,7 +24,6 @@
  display: flex;
  flex-direction: column;
  font-weight: bold;
-  margin-bottom: .2em;
 }

 .pfp .nip05 {
--- a/src/element/Textarea.tsx
+++ b/src/element/Textarea.tsx
@ -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,
--- a/src/index.css
+++ b/src/index.css
@ -199,6 +199,7 @@ span.pill {
  padding: 2px 10px;
  border-radius: 10px;
  user-select: none;
+  color: var(--font-color);
  margin: 2px 5px;
 }

--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@ -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;
+}
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@ -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>
        )
--- a/yarn.lock
+++ b/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"