mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
add focus button to note actionbar
This commit is contained in:
parent
d4eb237e40
commit
d1701eff20
@ -103,7 +103,7 @@ export function ArticleNoteScreen() {
|
||||
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="mt-2">{renderKind(data)}</div>
|
||||
<div>
|
||||
<NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
|
||||
<NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
|
||||
<NoteStats id={id} />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -109,7 +109,7 @@ export function TextNoteScreen() {
|
||||
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="mt-2">{renderKind(data)}</div>
|
||||
<div>
|
||||
<NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
|
||||
<NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
|
||||
<NoteStats id={id} />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -55,7 +55,11 @@ export function ThreadBlock({ params }: { params: Widget }) {
|
||||
<div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
|
||||
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="mt-2">{renderKind(data)}</div>
|
||||
<NoteActions id={params.content} pubkey={data.pubkey} noOpenThread={true} />
|
||||
<NoteActions
|
||||
id={params.content}
|
||||
pubkey={data.pubkey}
|
||||
extraButtons={false}
|
||||
/>
|
||||
<NoteStats id={params.content} />
|
||||
</div>
|
||||
</div>
|
||||
|
22
src/shared/icons/focus.tsx
Normal file
22
src/shared/icons/focus.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { SVGProps } from 'react';
|
||||
|
||||
export function FocusIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d="M8.25 3.75h-3.5a1 1 0 00-1 1v3.5m12-4.5h3.5a1 1 0 011 1v3.5m0 7.5v3.5a1 1 0 01-1 1h-3.5m-7.5 0h-3.5a1 1 0 01-1-1v-3.5"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
@ -52,3 +52,4 @@ export * from './hashtag';
|
||||
export * from './file';
|
||||
export * from './share';
|
||||
export * from './expand';
|
||||
export * from './focus';
|
||||
|
@ -1,8 +1,9 @@
|
||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { ThreadIcon } from '@shared/icons';
|
||||
import { FocusIcon, ThreadIcon } from '@shared/icons';
|
||||
import { MoreActions } from '@shared/notes/actions/more';
|
||||
import { NoteReaction } from '@shared/notes/actions/reaction';
|
||||
import { NoteReply } from '@shared/notes/actions/reply';
|
||||
@ -14,12 +15,12 @@ import { WidgetKinds, useWidgets } from '@stores/widgets';
|
||||
export function NoteActions({
|
||||
id,
|
||||
pubkey,
|
||||
noOpenThread,
|
||||
extraButtons = true,
|
||||
root,
|
||||
}: {
|
||||
id: string;
|
||||
pubkey: string;
|
||||
noOpenThread?: boolean;
|
||||
extraButtons?: boolean;
|
||||
root?: string;
|
||||
}) {
|
||||
const { db } = useStorage();
|
||||
@ -34,32 +35,50 @@ export function NoteActions({
|
||||
<NoteRepost id={id} pubkey={pubkey} />
|
||||
<NoteZap id={id} />
|
||||
</div>
|
||||
{!noOpenThread && (
|
||||
{extraButtons && (
|
||||
<>
|
||||
<div className="mx-2 block h-4 w-px bg-white/10 backdrop-blur-xl" />
|
||||
<Tooltip.Root delayDuration={150}>
|
||||
<Tooltip.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setWidget(db, {
|
||||
kind: WidgetKinds.thread,
|
||||
title: 'Thread',
|
||||
content: id,
|
||||
})
|
||||
}
|
||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||
>
|
||||
<ThreadIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
|
||||
</button>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
||||
Open thread
|
||||
<Tooltip.Arrow className="fill-black" />
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Tooltip.Root delayDuration={150}>
|
||||
<Tooltip.Trigger asChild>
|
||||
<Link
|
||||
to={`/notes/text/${id}`}
|
||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||
>
|
||||
<FocusIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
|
||||
</Link>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
||||
Open thread
|
||||
<Tooltip.Arrow className="fill-black" />
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
<Tooltip.Root delayDuration={150}>
|
||||
<Tooltip.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setWidget(db, {
|
||||
kind: WidgetKinds.thread,
|
||||
title: 'Thread',
|
||||
content: id,
|
||||
})
|
||||
}
|
||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||
>
|
||||
<ThreadIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
|
||||
</button>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
||||
Open thread
|
||||
<Tooltip.Arrow className="fill-black" />
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<MoreActions id={id} pubkey={pubkey} />
|
||||
|
@ -45,15 +45,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl backdrop-blur-xl focus:outline-none">
|
||||
<DropdownMenu.Item asChild>
|
||||
<Link
|
||||
to={`/notes/text/${id}`}
|
||||
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
Focus mode
|
||||
</Link>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
|
||||
<DropdownMenu.Item asChild>
|
||||
<button
|
||||
type="button"
|
||||
|
@ -23,6 +23,27 @@ export function useEvent(id: string, embed?: string) {
|
||||
// get event from relay if event in db not present
|
||||
const event = await ndk.fetchEvent(id);
|
||||
if (!event) throw new Error(`Event not found: ${id}`);
|
||||
|
||||
let root: string;
|
||||
let reply: string;
|
||||
|
||||
if (event.tags?.[0]?.[0] === 'e' && !event.tags?.[0]?.[3]) {
|
||||
root = event.tags[0][1];
|
||||
} else {
|
||||
root = event.tags.find((el) => el[3] === 'root')?.[1];
|
||||
reply = event.tags.find((el) => el[3] === 'reply')?.[1];
|
||||
}
|
||||
|
||||
await db.createEvent(
|
||||
event.id,
|
||||
JSON.stringify(event),
|
||||
event.pubkey,
|
||||
event.kind,
|
||||
root,
|
||||
reply,
|
||||
event.created_at
|
||||
);
|
||||
|
||||
return event;
|
||||
}
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user