Nuša Pukšič
1 year ago
8 changed files with 386 additions and 167 deletions
@ -0,0 +1,194 @@ |
|||||||
|
<script lang="ts"> |
||||||
|
import { |
||||||
|
ClipboardCheckOutline, |
||||||
|
ClipboardCleanOutline, |
||||||
|
CodeOutline, |
||||||
|
DotsVerticalOutline, |
||||||
|
EyeOutline, |
||||||
|
ShareNodesOutline |
||||||
|
} from "flowbite-svelte-icons"; |
||||||
|
import { Button, Modal, Popover } from "flowbite-svelte"; |
||||||
|
import { standardRelays } from "$lib/consts"; |
||||||
|
import { neventEncode } from "$lib/utils"; |
||||||
|
import { type AddressPointer, naddrEncode } from "nostr-tools/nip19"; |
||||||
|
import InlineProfile from "$components/util/InlineProfile.svelte"; |
||||||
|
|
||||||
|
let { event } = $props(); |
||||||
|
|
||||||
|
let jsonModalOpen: boolean = $state(false); |
||||||
|
let detailsModalOpen: boolean = $state(false); |
||||||
|
let eventIdCopied: boolean = $state(false); |
||||||
|
let shareLinkCopied: boolean = $state(false); |
||||||
|
let title: string = $derived(event.getMatchingTags('title')[0]?.[1]); |
||||||
|
let author: string = $derived(event.getMatchingTags('author')[0]?.[1] ?? 'unknown'); |
||||||
|
let version: string = $derived(event.getMatchingTags('version')[0]?.[1] ?? '1'); |
||||||
|
let image: string = $derived(event.getMatchingTags('image')[0]?.[1] ?? null); |
||||||
|
let originalAuthor: string = $derived(event.getMatchingTags('p')[0]?.[1] ?? null); |
||||||
|
let summary: string = $derived(event.getMatchingTags('summary')[0]?.[1] ?? null); |
||||||
|
let type: string = $derived(event.getMatchingTags('type')[0]?.[1] ?? null); |
||||||
|
let language: string = $derived(event.getMatchingTags('l')[0]?.[1] ?? null); |
||||||
|
|
||||||
|
let isOpen = $state(false); |
||||||
|
|
||||||
|
function openPopover() { |
||||||
|
isOpen = true; |
||||||
|
} |
||||||
|
|
||||||
|
function closePopover() { |
||||||
|
isOpen = false; |
||||||
|
const menu = document.getElementById('dots-' + event.id); |
||||||
|
if (menu) menu.blur(); |
||||||
|
} |
||||||
|
|
||||||
|
function shareNjump() { |
||||||
|
const relays: string[] = standardRelays; |
||||||
|
const dTag : string | undefined = event.dTag; |
||||||
|
|
||||||
|
if (typeof dTag === 'string') { |
||||||
|
const opts: AddressPointer = { |
||||||
|
identifier: dTag, |
||||||
|
pubkey: event.pubkey, |
||||||
|
kind: 30040, |
||||||
|
relays |
||||||
|
}; |
||||||
|
const naddr = naddrEncode(opts); |
||||||
|
console.debug(naddr); |
||||||
|
navigator.clipboard.writeText(`https://njump.me/${naddr}`); |
||||||
|
shareLinkCopied = true; |
||||||
|
setTimeout(() => { |
||||||
|
shareLinkCopied = false; |
||||||
|
}, 4000); |
||||||
|
} |
||||||
|
|
||||||
|
else { |
||||||
|
console.log('dTag is undefined'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function copyEventId() { |
||||||
|
console.debug("copyEventID"); |
||||||
|
const relays: string[] = standardRelays; |
||||||
|
const nevent = neventEncode(event, relays); |
||||||
|
|
||||||
|
navigator.clipboard.writeText(nevent); |
||||||
|
|
||||||
|
eventIdCopied = true; |
||||||
|
setTimeout(() => { |
||||||
|
eventIdCopied = false; |
||||||
|
}, 4000); |
||||||
|
} |
||||||
|
|
||||||
|
function viewJson() { |
||||||
|
console.debug("viewJSON"); |
||||||
|
jsonModalOpen = true; |
||||||
|
} |
||||||
|
|
||||||
|
function viewDetails() { |
||||||
|
console.log('Details'); |
||||||
|
detailsModalOpen = true; |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<div class="group" role="group" onmouseenter={openPopover}> |
||||||
|
<!-- Main button --> |
||||||
|
<Button type="button" |
||||||
|
id="dots-{event.id}" |
||||||
|
class=" hover:bg-primary-0 dark:text-highlight dark:hover:bg-primary-800 p-1 dots" color="none" |
||||||
|
data-popover-target="popover-actions"> |
||||||
|
<DotsVerticalOutline class="h-6 w-6"/> |
||||||
|
<span class="sr-only">Open actions menu</span> |
||||||
|
</Button> |
||||||
|
|
||||||
|
{#if isOpen} |
||||||
|
<Popover id="popover-actions" |
||||||
|
placement="bottom" |
||||||
|
trigger="click" |
||||||
|
class='popover-leather w-fit z-10' |
||||||
|
onmouseleave={closePopover} |
||||||
|
> |
||||||
|
<div class='flex flex-row justify-between space-x-4'> |
||||||
|
<div class='flex flex-col text-nowrap'> |
||||||
|
<ul class="space-y-2"> |
||||||
|
<li> |
||||||
|
<a role="button" class='btn-leather' onclick={shareNjump}> |
||||||
|
{#if shareLinkCopied} |
||||||
|
<ClipboardCheckOutline class="inline mr-2" /> Copied! |
||||||
|
{:else} |
||||||
|
<ShareNodesOutline class="inline mr-2" /> Share via NJump |
||||||
|
{/if} |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a role="button" class='btn-leather' onclick={copyEventId}> |
||||||
|
{#if eventIdCopied} |
||||||
|
<ClipboardCheckOutline class="inline mr-2" /> Copied! |
||||||
|
{:else} |
||||||
|
<ClipboardCleanOutline class="inline mr-2" /> Copy event ID |
||||||
|
{/if} |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="" role="button" class='btn-leather' onclick={viewJson}> |
||||||
|
<CodeOutline class="inline mr-2" /> View JSON |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="" role="button" class='btn-leather' onclick={viewDetails}> |
||||||
|
<EyeOutline class="inline mr-2" /> View details |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Popover> |
||||||
|
{/if} |
||||||
|
<!-- Event JSON --> |
||||||
|
<Modal class='modal-leather' title='Event JSON' bind:open={jsonModalOpen} autoclose outsideclose size='sm'> |
||||||
|
<div class="overflow-auto bg-highlight dark:bg-primary-900 text-sm rounded p-1"> |
||||||
|
<code>{JSON.stringify(event.rawEvent())}</code> |
||||||
|
</div> |
||||||
|
</Modal> |
||||||
|
<!-- Event details --> |
||||||
|
<Modal class='modal-leather' title='Publication details' bind:open={detailsModalOpen} autoclose outsideclose size='sm'> |
||||||
|
<div class="flex flex-row space-x-4"> |
||||||
|
{#if image} |
||||||
|
<div class="flex col"> |
||||||
|
<img class="max-w-48" src={image} /> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
<div class="flex flex-col col space-y-5 justify-center align-middle"> |
||||||
|
<h1 class="text-3xl font-bold mt-5">{title}</h1> |
||||||
|
<h2 class="text-base font-bold">by |
||||||
|
{#if originalAuthor !== null} |
||||||
|
<InlineProfile pubkey={originalAuthor} title={author} /> |
||||||
|
{:else} |
||||||
|
{author} |
||||||
|
{/if} |
||||||
|
</h2> |
||||||
|
<h4 class='text-base font-thin mt-2'>Version: {version}</h4> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{#if summary} |
||||||
|
<div class="flex flex-row "> |
||||||
|
<p class='text-base text-primary-900 dark:text-highlight'>{summary}</p> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
|
||||||
|
<div class="flex flex-row "> |
||||||
|
<h4 class='text-base font-normal mt-2'>Index author: <InlineProfile pubkey={event.pubkey} /></h4> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="flex flex-col pb-4"> |
||||||
|
{#if type !== null} |
||||||
|
<h5 class="text-sm">Publication type: {type}</h5> |
||||||
|
{/if} |
||||||
|
{#if language !== null} |
||||||
|
<h5 class="text-sm">Language: {language}</h5> |
||||||
|
{/if} |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</Modal> |
||||||
|
</div> |
||||||
@ -1,29 +1,27 @@ |
|||||||
<script lang='ts'> |
<script lang='ts'> |
||||||
import { Tooltip } from 'flowbite-svelte'; |
import { ClipboardCheckOutline, ClipboardCleanOutline } from "flowbite-svelte-icons"; |
||||||
import { FileCopyOutline } from 'flowbite-svelte-icons'; |
|
||||||
export let displayText = ""; // Shown in UI |
let { displayText, copyText = displayText} = $props(); |
||||||
export let copyText = displayText; // Copied to clipboard (default to same if not provided) |
|
||||||
|
let copied: boolean = $state(false); |
||||||
|
|
||||||
async function copyToClipboard() { |
async function copyToClipboard() { |
||||||
try { |
try { |
||||||
await navigator.clipboard.writeText(copyText); |
await navigator.clipboard.writeText(copyText); |
||||||
|
copied = true; |
||||||
|
setTimeout(() => { |
||||||
|
copied = false; |
||||||
|
}, 4000); |
||||||
} catch (err) { |
} catch (err) { |
||||||
console.error("Failed to copy: ", err); |
console.error("Failed to copy: ", err); |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<div role='tooltip'> |
<a role="button" class='btn-leather text-nowrap' onclick={copyToClipboard}> |
||||||
<span> |
{#if copied} |
||||||
{displayText} <button class='btn-leather' id='copy-button' onclick={copyToClipboard}><FileCopyOutline class='w-4 h-4 !fill-none dark:!fill-none' /></button> |
<ClipboardCheckOutline class="!fill-none dark:!fill-none inline mr-1" /> Copied! |
||||||
</span> |
{:else} |
||||||
<Tooltip |
<ClipboardCleanOutline class="!fill-none dark:!fill-none inline mr-1" /> {displayText} |
||||||
class='tooltip-leather' |
{/if} |
||||||
triggeredBy='#copy-button' |
</a> |
||||||
trigger='click' |
|
||||||
placement='bottom' |
|
||||||
type="auto" |
|
||||||
> |
|
||||||
Copied! |
|
||||||
</Tooltip> |
|
||||||
</div> |
|
||||||
@ -0,0 +1,101 @@ |
|||||||
|
<script lang='ts'> |
||||||
|
import CopyToClipboard from "$components/util/CopyToClipboard.svelte"; |
||||||
|
import { logout, ndkInstance } from '$lib/ndk'; |
||||||
|
import { ArrowRightToBracketOutline, UserOutline, FileSearchOutline } from "flowbite-svelte-icons"; |
||||||
|
import { Avatar, Popover } from "flowbite-svelte"; |
||||||
|
import type { NDKUserProfile } from "@nostr-dev-kit/ndk"; |
||||||
|
|
||||||
|
const externalProfileDestination = 'https://njump.me/' |
||||||
|
|
||||||
|
let { pubkey, isNav = false } = $props(); |
||||||
|
|
||||||
|
let profile = $state<NDKUserProfile | null>(null); |
||||||
|
let pfp = $derived(profile?.image); |
||||||
|
let username = $derived(profile?.name); |
||||||
|
let tag = $derived(profile?.name); |
||||||
|
let npub = $state<string | undefined >(undefined); |
||||||
|
|
||||||
|
$effect(() => { |
||||||
|
const user = $ndkInstance |
||||||
|
.getUser({ pubkey: pubkey ?? undefined }); |
||||||
|
|
||||||
|
npub = user.npub; |
||||||
|
|
||||||
|
user.fetchProfile() |
||||||
|
.then(userProfile => { |
||||||
|
profile = userProfile; |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
async function handleSignOutClick() { |
||||||
|
logout($ndkInstance.activeUser!); |
||||||
|
profile = null; |
||||||
|
} |
||||||
|
|
||||||
|
function shortenNpub(long: string|undefined) { |
||||||
|
if (!long) return ''; |
||||||
|
return long.slice(0, 8) + '…' + long.slice(-4); |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<div class="relative"> |
||||||
|
{#if profile} |
||||||
|
<div class="group"> |
||||||
|
<Avatar |
||||||
|
rounded |
||||||
|
class='h-6 w-6 cursor-pointer' |
||||||
|
src={pfp} |
||||||
|
alt={username} |
||||||
|
/> |
||||||
|
{#key username || tag} |
||||||
|
<Popover |
||||||
|
target="avatar" |
||||||
|
class='popover-leather w-[180px]' |
||||||
|
trigger='hover' |
||||||
|
> |
||||||
|
<div class='flex flex-row justify-between space-x-4'> |
||||||
|
<div class='flex flex-col'> |
||||||
|
{#if username} |
||||||
|
<h3 class='text-lg font-bold'>{username}</h3> |
||||||
|
{#if isNav}<h4 class='text-base'>@{tag}</h4>{/if} |
||||||
|
{/if} |
||||||
|
<ul class="space-y-2 mt-2"> |
||||||
|
<li> |
||||||
|
<CopyToClipboard displayText={shortenNpub(npub)} copyText={npub} /> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a class='hover:text-primary-400 dark:hover:text-primary-500 text-nowrap mt-3 m-0' href='{externalProfileDestination}{npub}' target='_blank'> |
||||||
|
<UserOutline class='mr-1 !h-6 !w-6 inline !fill-none dark:!fill-none' /><span class='underline'>View profile</span> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
{#if isNav} |
||||||
|
<li> |
||||||
|
<a |
||||||
|
href="" |
||||||
|
id='sign-out-button' |
||||||
|
class='btn-leather text-nowrap mt-3 flex self-stretch align-middle hover:text-primary-400 dark:hover:text-primary-500' |
||||||
|
onclick={handleSignOutClick} |
||||||
|
role="button" |
||||||
|
> |
||||||
|
<ArrowRightToBracketOutline class='mr-1 !h-6 !w-6 inline !fill-none dark:!fill-none' /> Sign out |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
{:else} |
||||||
|
<!-- li> |
||||||
|
<a |
||||||
|
href="" |
||||||
|
class='btn-leather text-nowrap mt-3 flex self-stretch align-middle hover:text-primary-400 dark:hover:text-primary-500' |
||||||
|
role="button" |
||||||
|
> |
||||||
|
<FileSearchOutline class='mr-1 !h-6 inline !fill-none dark:!fill-none' /> More content |
||||||
|
</a> |
||||||
|
</li --> |
||||||
|
{/if} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Popover> |
||||||
|
{/key} |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
Loading…
Reference in new issue