From c500c7354f2c71d4ad8fbe0196fad5ca3f02ebcf Mon Sep 17 00:00:00 2001 From: Jonathan Staab Date: Tue, 28 Feb 2023 14:02:20 -0600 Subject: [PATCH] Add person popover --- CHANGELOG.md | 3 + ROADMAP.md | 10 +-- package-lock.json | Bin 596066 -> 597373 bytes package.json | 1 + src/app.css | 19 +++++ src/partials/Popover.svelte | 62 ++++++++++++++++ src/views/SideNav.svelte | 2 +- src/views/alerts/Alerts.svelte | 26 +------ src/views/alerts/Mention.svelte | 41 +++++++++++ src/views/notes/Note.svelte | 21 ++++-- src/views/person/PersonDetail.svelte | 102 +++++++++----------------- src/views/person/PersonSummary.svelte | 72 ++++++++++++++++++ 12 files changed, 256 insertions(+), 103 deletions(-) create mode 100644 src/partials/Popover.svelte create mode 100644 src/views/alerts/Mention.svelte create mode 100644 src/views/person/PersonSummary.svelte diff --git a/CHANGELOG.md b/CHANGELOG.md index e821dade..87d4b449 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,9 @@ - [x] Improve paste support - [x] Add timestamps to messages - [x] Support installation as a PWA +- [x] Fix social share image, add description +- [x] Clean up person detail actions, maybe click one circle and show the rest +- [x] Add person popover to notes/alerts ## 0.2.13 diff --git a/ROADMAP.md b/ROADMAP.md index 7a46c99a..7a2c6b63 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -1,6 +1,8 @@ # Current - [ ] Fix iOS +- [ ] Hover badge to view profile like twitter + - [ ] Cache follower numbers to avoid re-fetching so much - [ ] Make the note relays button modal make sense, one relay with no explanation is not good # Lightning @@ -18,22 +20,17 @@ # More +- [ ] Allow the user to disable likes/zaps - [ ] Polls - Find the best implementation https://github.com/nostr-protocol/nips/search?q=poll&type=issues - Comment on all three nip drafts which one I implemented - [ ] Micro app DSL -- [ ] Fix social share image, add description - [ ] Sort feeds by created date on profile page? - [ ] Implement https://media.nostr.band/ -- [ ] Cache follower numbers to avoid re-fetching so much - [ ] Groups - may need a new NIP, or maybe use topics - [ ] Support https://github.com/nostr-protocol/nips/pull/211 as a bech32 entity - [ ] Add new DM button to dms list - [ ] Add suggested relays based on follows or topics -- [ ] Combine alerts/messages and any other top-level subscriptions to avoid sub limit -- [ ] Clean up person detail actions, maybe click one circle and show the rest -- [ ] Hover badge to view profile like twitter -- [ ] Show created date as bitcoin block height (add a setting?) - [ ] Support relay auth - [ ] Following indicator on person info - [ ] Share button for notes, shows qr code and nevent @@ -75,6 +72,7 @@ - [ ] Release to android - https://svelte-native.technology/docs - https://ionic.io/blog/capacitor-everything-youve-ever-wanted-to-know + - Or just wrap it - [ ] When publishing fails, enqueue and retry - Track which relays the events should be published to, and which ones have succeeded - Maybe notify and ask user which events to re-publish. diff --git a/package-lock.json b/package-lock.json index d27befb9423d8f9487c6c23a98cba1ab85b1ace4..8a0558ff92ce2c58e8211f702285625a9a448481 100644 GIT binary patch delta 744 zcmaE~LFMl*l?~A>LM5361(kYP#Y$ERN^xd-#(L(>{w&-5Sr||Fa}?wk6r>hq6;Hp& z%PPZSq-SV2SyA6a5+OwIaNN!P67Toj%JQ7?kV2pu92mA!HFiG24*G|sYN*@g_a@i z5yciBx&GOvuG(eO6F)GDPv5}Fj&Vxo~a%;P{0z?ix~|4&}HT_x1j zFvU1Oz$i60-ODm1C@?A|&Dc9T&!EsN-P0_}r=T*}w8|_hJJQg_%{V(TFwv>lJ*qe_ z#kIhryh1zGS-T|C*Tm2xG1#xnuf(Uqq9oMR+^s5P^2Mzh!YE+}4s)Z)7dh42PqeXY zKhefoG>xo4kEBVUm)qJZO@F7%CIb%Qc3=<#G5huaSq|mC!4RO+Ken@~;0RHv?M16O HKI8xZ3dQ(z delta 76 zcmeynOXbl9l?~A>&6O!&MfJ_S2z^K+FWh%-c_gvdl4RU)Ra9 deO)JO;k0&nMK&O2-!8AnVcEC6Zv)5s9029GA0Pk# diff --git a/package.json b/package.json index 112d7c5a..e2dca72c 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "svelte-routing": "^1.6.0", "svelte-switch": "^0.0.5", "throttle-debounce": "^5.0.0", + "tippy.js": "^6.3.7", "vite-plugin-node-polyfills": "^0.5.0", "vite-plugin-pwa": "^0.14.4" } diff --git a/src/app.css b/src/app.css index 7fd032bc..b1eb9678 100644 --- a/src/app.css +++ b/src/app.css @@ -57,3 +57,22 @@ html, body, #app, #app > div { height: 100%; } + +/* Tippy */ + +.tippy-box { + background-color: #0f0f0e !important; + border: 1px solid #403D39; + box-shadow: 3px 3px 20px #0f0f0e, + 3px -3px 20px #0f0f0e, + -3px 3px 20px #0f0f0e, + -3px -3px 20px #0f0f0e; +} + +.tippy-box[data-placement^=top]>.tippy-arrow:before { + border-top-color: #403D39 !important; +} + +.tippy-box[data-placement^=top]>.tippy-arrow { + bottom: -1px !important; +} diff --git a/src/partials/Popover.svelte b/src/partials/Popover.svelte new file mode 100644 index 00000000..ef1fd3ad --- /dev/null +++ b/src/partials/Popover.svelte @@ -0,0 +1,62 @@ + + + { + instance.hide() + }} /> + + { + if (e.key === 'Escape') { + instance.hide() + } + }} /> + +
+ +
+ + diff --git a/src/views/SideNav.svelte b/src/views/SideNav.svelte index 46e1e50f..bbc675e3 100644 --- a/src/views/SideNav.svelte +++ b/src/views/SideNav.svelte @@ -23,7 +23,7 @@
    diff --git a/src/views/alerts/Alerts.svelte b/src/views/alerts/Alerts.svelte index b040a8de..4da48837 100644 --- a/src/views/alerts/Alerts.svelte +++ b/src/views/alerts/Alerts.svelte @@ -2,18 +2,14 @@ import {sortBy, assoc} from 'ramda' import {onMount} from 'svelte' import {fly} from 'svelte/transition' - import {ellipsize} from 'hurdak/lib/hurdak' - import {displayPerson} from 'src/util/nostr' - import {now, formatTimestamp, createScroller} from 'src/util/misc' + import {now, createScroller} from 'src/util/misc' import Spinner from 'src/partials/Spinner.svelte' import Content from 'src/partials/Content.svelte' - import Anchor from 'src/partials/Anchor.svelte' - import ImageCircle from "src/partials/ImageCircle.svelte" import Alert from 'src/views/alerts/Alert.svelte' + import Mention from 'src/views/alerts/Mention.svelte' import database from 'src/agent/database' import user from 'src/agent/user' import {lastChecked} from 'src/app/alerts' - import {modal, routes} from 'src/app/ui' let limit = 0 let notes = null @@ -37,29 +33,13 @@ {#if notes} {#each notes as note (note.id)} - {@const person = database.getPersonWithFallback(note.pubkey)}
    {#if note.replies.length > 0} {:else if note.likedBy.length > 0} {:else} - + {/if}
    {:else} diff --git a/src/views/alerts/Mention.svelte b/src/views/alerts/Mention.svelte new file mode 100644 index 00000000..a03d727c --- /dev/null +++ b/src/views/alerts/Mention.svelte @@ -0,0 +1,41 @@ + + + diff --git a/src/views/notes/Note.svelte b/src/views/notes/Note.svelte index 255b75bb..dcaa9402 100644 --- a/src/views/notes/Note.svelte +++ b/src/views/notes/Note.svelte @@ -11,6 +11,8 @@ import {extractUrls} from "src/util/html" import ImageCircle from 'src/partials/ImageCircle.svelte' import Content from 'src/partials/Content.svelte' + import PersonSummary from 'src/views/person/PersonSummary.svelte' + import Popover from 'src/partials/Popover.svelte' import RelayCard from 'src/views/relays/RelayCard.svelte' import Modal from 'src/partials/Modal.svelte' import Preview from 'src/partials/Preview.svelte' @@ -225,12 +227,19 @@
    - - {displayPerson($person)} - {#if $person.verified_as} - - {/if} - + +
    + + {displayPerson($person)} + {#if $person.verified_as} + + {/if} + +
    +
    + +
    +     { log('Person', npub, person) @@ -75,12 +100,6 @@ showActions = !showActions } - const makeGetTransition = () => { - let i = 0 - - return () => ({y: 20, delay: i++ * 30}) - } - const setActiveTab = tab => navigate(routes.person(pubkey, tab)) const showFollows = () => { @@ -142,78 +161,27 @@
    - +
    - {#if showActions} - {@const getTransition = makeGetTransition()}
    + transition:fade|local /> + {#each actions as {onClick, href, label, icon}, i}
    -
    Share
    + in:fly|local={{y: 20, delay: i * 30}} + out:fly|local={{y: 20, delay: (actions.length - i - 1) * 30}} + on:click={onClick}> +
    {label}
    - +
    - {#if following} -
    -
    Unfollow
    - - - -
    - {:else if user.getPubkey() !== pubkey} -
    -
    Follow
    - - - -
    - {/if} - {#if $canPublish} -
    navigate(`/messages/${npub}`)}> -
    Message
    - - - -
    -
    -
    Advanced
    - - - -
    - {/if} - {#if user.getPubkey() === pubkey} -
    navigate("/profile")}> -
    Edit
    - - - -
    - {/if} + {/each}
    - {/if}

    {@html renderContent(person?.kind0?.about || '')}

    diff --git a/src/views/person/PersonSummary.svelte b/src/views/person/PersonSummary.svelte new file mode 100644 index 00000000..c35611a4 --- /dev/null +++ b/src/views/person/PersonSummary.svelte @@ -0,0 +1,72 @@ + + +
    +
    +
    +
    + navigate(routes.person(pubkey))}> +

    {displayPerson(person)}

    +     + {#if person.verified_as} +
    + + {last(person.verified_as.split('@'))} +
    + {/if} +
    +
    + + + + {#if following} + + + + {:else} + + + + {/if} +
    +
    +

    {@html renderContent(person?.kind0?.about || '')}

    +