reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: polish

Browse Source
This commit is contained in:
reya
2024-01-17 09:30:32 +07:00
parent c29b4e173e
commit a20f5ca15d
14 changed files with 50 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ark/src/ark.ts
View File

@@ -253,7 +253,7 @@ export class Ark {
}
}
return await this.ndk.fetchEvent(id);
return await this.ndk.fetchEvent(eventId);
} catch {
throw new Error("event not found");
}

2
packages/ark/src/components/column/header.tsx
View File

@@ -60,7 +60,7 @@ export function ColumnHeader({
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-black/70 dark:bg-white/20 backdrop-blur-lg focus:outline-none">
<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-black/70 dark:bg-white/10 backdrop-blur-xl focus:outline-none">
<DropdownMenu.Item asChild>
<button
type="button"

6
packages/ark/src/components/note/buttons/repost.tsx
View File

@@ -1,4 +1,4 @@
import { LoaderIcon, RepostIcon } from "@lume/icons";
import { LoaderIcon, ReplyIcon, RepostIcon } from "@lume/icons";
import { editorAtom, editorValueAtom } from "@lume/utils";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import * as Tooltip from "@radix-ui/react-tooltip";
@@ -89,13 +89,14 @@ export function NoteRepost() {
</Tooltip.Root>
</Tooltip.Provider>
<DropdownMenu.Portal>
<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-black/70 dark:bg-white/20 backdrop-blur-lg focus:outline-none">
<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-black/70 dark:bg-white/10 backdrop-blur-xl focus:outline-none">
<DropdownMenu.Item asChild>
<button
type="button"
onClick={repost}
className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
>
<RepostIcon className="size-4" />
Repost
</button>
</DropdownMenu.Item>
@@ -105,6 +106,7 @@ export function NoteRepost() {
onClick={quote}
className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
>
<ReplyIcon className="size-4" />
Quote
</button>
</DropdownMenu.Item>

2
packages/ark/src/components/note/child.tsx
View File

@@ -64,7 +64,7 @@ export function NoteChild({
to={url.toString()}
target="_blank"
rel="noreferrer"
className="break-all font-normal text-blue-500 hover:text-blue-600"
className="break-p font-normal text-blue-500 hover:text-blue-600"
>
{url.toString()}
</Link>

2
packages/ark/src/components/note/content.tsx
View File

@@ -176,7 +176,7 @@ export function NoteContent({
to={url.toString()}
target="_blank"
rel="noreferrer"
className="break-all font-normal text-blue-500 hover:text-blue-600"
className="break-p truncate inline-block w-full font-normal text-blue-500 hover:text-blue-600"
>
{url.toString()}
</Link>

8
packages/ark/src/components/note/mentions/note.tsx
View File

@@ -20,7 +20,7 @@ export const MentionNote = memo(function MentionNote({
contentEditable={false}
className="flex items-center justify-between w-full p-3 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900"
>
<p>Loading</p>
<p>Loading...</p>
</div>
);
}
@@ -54,7 +54,7 @@ export const MentionNote = memo(function MentionNote({
</User.Provider>
<Note.Content mini className="px-3" />
{openable ? (
<div className="mt-2 px-3 flex items-center justify-between">
<div className="px-3 h-10 flex items-center justify-between">
<Link
to={`/events/${data.id}`}
className="text-sm font-medium text-blue-500 hover:text-blue-600"
@@ -75,7 +75,9 @@ export const MentionNote = memo(function MentionNote({
<PinIcon className="size-4" />
</button>
</div>
) : null}
) : (
<div className="h-10" />
)}
</Note.Root>
</Note.Provider>
);

2
packages/ark/src/components/note/menu.tsx
View File

@@ -56,7 +56,7 @@ export function NoteMenu() {
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-black/70 dark:bg-white/20 backdrop-blur-lg focus:outline-none">
<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-black/70 dark:bg-white/10 backdrop-blur-xl focus:outline-none">
<DropdownMenu.Item asChild>
<button
type="button"

32
packages/ark/src/components/note/preview/video.tsx
View File

@@ -1,18 +1,26 @@
import { MediaPlayer, MediaProvider } from "@vidstack/react";
import {
DefaultVideoLayout,
defaultLayoutIcons,
} from "@vidstack/react/player/layouts/default";
MediaControlBar,
MediaController,
MediaMuteButton,
MediaPlayButton,
MediaTimeDisplay,
MediaTimeRange,
MediaVolumeRange,
} from "media-chrome/dist/react";
export function VideoPreview({ url }: { url: string }) {
return (
<MediaPlayer
src={url}
className="w-full my-1 overflow-hidden rounded-lg"
load="visible"
>
<MediaProvider />
<DefaultVideoLayout icons={defaultLayoutIcons} />
</MediaPlayer>
<div className="my-1 w-full rounded-lg overflow-hidden">
<MediaController>
<video slot="media" src={url} preload="auto" muted />
<MediaControlBar>
<MediaPlayButton />
<MediaTimeRange />
<MediaTimeDisplay showDuration />
<MediaMuteButton />
<MediaVolumeRange />
</MediaControlBar>
</MediaController>
</div>
);
}

4
packages/ark/src/hooks/useEvent.ts
View File

@@ -3,7 +3,7 @@ import { useArk } from "./useArk";
export function useEvent(id: string) {
const ark = useArk();
const { status, isLoading, isError, data } = useQuery({
const { isLoading, isError, data } = useQuery({
queryKey: ["event", id],
queryFn: async () => {
const event = await ark.getEventById(id);
@@ -20,5 +20,5 @@ export function useEvent(id: string) {
retry: 2,
});
return { status, isLoading, isError, data };
return { isLoading, isError, data };
}