mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43: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} />
|
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||||
<div className="mt-2">{renderKind(data)}</div>
|
<div className="mt-2">{renderKind(data)}</div>
|
||||||
<div>
|
<div>
|
||||||
<NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
|
<NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
|
||||||
<NoteStats id={id} />
|
<NoteStats id={id} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -109,7 +109,7 @@ export function TextNoteScreen() {
|
|||||||
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||||
<div className="mt-2">{renderKind(data)}</div>
|
<div className="mt-2">{renderKind(data)}</div>
|
||||||
<div>
|
<div>
|
||||||
<NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
|
<NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
|
||||||
<NoteStats id={id} />
|
<NoteStats id={id} />
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
|
||||||
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||||
<div className="mt-2">{renderKind(data)}</div>
|
<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} />
|
<NoteStats id={params.content} />
|
||||||
</div>
|
</div>
|
||||||
</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 './file';
|
||||||
export * from './share';
|
export * from './share';
|
||||||
export * from './expand';
|
export * from './expand';
|
||||||
|
export * from './focus';
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
import * as Tooltip from '@radix-ui/react-tooltip';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
import { useStorage } from '@libs/storage/provider';
|
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 { MoreActions } from '@shared/notes/actions/more';
|
||||||
import { NoteReaction } from '@shared/notes/actions/reaction';
|
import { NoteReaction } from '@shared/notes/actions/reaction';
|
||||||
import { NoteReply } from '@shared/notes/actions/reply';
|
import { NoteReply } from '@shared/notes/actions/reply';
|
||||||
@ -14,12 +15,12 @@ import { WidgetKinds, useWidgets } from '@stores/widgets';
|
|||||||
export function NoteActions({
|
export function NoteActions({
|
||||||
id,
|
id,
|
||||||
pubkey,
|
pubkey,
|
||||||
noOpenThread,
|
extraButtons = true,
|
||||||
root,
|
root,
|
||||||
}: {
|
}: {
|
||||||
id: string;
|
id: string;
|
||||||
pubkey: string;
|
pubkey: string;
|
||||||
noOpenThread?: boolean;
|
extraButtons?: boolean;
|
||||||
root?: string;
|
root?: string;
|
||||||
}) {
|
}) {
|
||||||
const { db } = useStorage();
|
const { db } = useStorage();
|
||||||
@ -34,9 +35,26 @@ export function NoteActions({
|
|||||||
<NoteRepost id={id} pubkey={pubkey} />
|
<NoteRepost id={id} pubkey={pubkey} />
|
||||||
<NoteZap id={id} />
|
<NoteZap id={id} />
|
||||||
</div>
|
</div>
|
||||||
{!noOpenThread && (
|
{extraButtons && (
|
||||||
<>
|
<>
|
||||||
<div className="mx-2 block h-4 w-px bg-white/10 backdrop-blur-xl" />
|
<div className="mx-2 block h-4 w-px bg-white/10 backdrop-blur-xl" />
|
||||||
|
<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.Root delayDuration={150}>
|
||||||
<Tooltip.Trigger asChild>
|
<Tooltip.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
@ -60,6 +78,7 @@ export function NoteActions({
|
|||||||
</Tooltip.Content>
|
</Tooltip.Content>
|
||||||
</Tooltip.Portal>
|
</Tooltip.Portal>
|
||||||
</Tooltip.Root>
|
</Tooltip.Root>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<MoreActions id={id} pubkey={pubkey} />
|
<MoreActions id={id} pubkey={pubkey} />
|
||||||
|
@ -45,15 +45,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
</Tooltip.Portal>
|
</Tooltip.Portal>
|
||||||
</Tooltip.Root>
|
</Tooltip.Root>
|
||||||
<DropdownMenu.Portal>
|
<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.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>
|
|
||||||
<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.Item asChild>
|
<DropdownMenu.Item asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -23,6 +23,27 @@ export function useEvent(id: string, embed?: string) {
|
|||||||
// get event from relay if event in db not present
|
// get event from relay if event in db not present
|
||||||
const event = await ndk.fetchEvent(id);
|
const event = await ndk.fetchEvent(id);
|
||||||
if (!event) throw new Error(`Event not found: ${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;
|
return event;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user