mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-29 16:30:55 +00:00
chore: polish some components
This commit is contained in:
parent
55d6318614
commit
ddbbcf41b5
@ -32,9 +32,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
|||||||
const events = await ark.getInfiniteEvents({
|
const events = await ark.getInfiniteEvents({
|
||||||
filter: {
|
filter: {
|
||||||
kinds: [NDKKind.Text, NDKKind.Repost],
|
kinds: [NDKKind.Text, NDKKind.Repost],
|
||||||
authors: !storage.account.contacts.length
|
authors: storage.account.contacts,
|
||||||
? [storage.account.pubkey]
|
|
||||||
: storage.account.contacts,
|
|
||||||
},
|
},
|
||||||
limit: FETCH_LIMIT,
|
limit: FETCH_LIMIT,
|
||||||
pageParam,
|
pageParam,
|
||||||
@ -99,7 +97,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={() => fetchNextPage()}
|
onClick={() => fetchNextPage()}
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
disabled={!hasNextPage || isFetchingNextPage}
|
||||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
className="inline-flex h-10 w-40 items-center justify-center gap-2 rounded-full bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{isFetchingNextPage ? (
|
{isFetchingNextPage ? (
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
<LoaderIcon className="h-5 w-5 animate-spin" />
|
||||||
|
@ -372,6 +372,8 @@ export class Ark {
|
|||||||
signal?: AbortSignal;
|
signal?: AbortSignal;
|
||||||
dedup?: boolean;
|
dedup?: boolean;
|
||||||
}) {
|
}) {
|
||||||
|
if (!filter?.authors?.length) return [];
|
||||||
|
|
||||||
const rootIds = new Set();
|
const rootIds = new Set();
|
||||||
const dedupQueue = new Set();
|
const dedupQueue = new Set();
|
||||||
const connectedRelays = this.ndk.pool
|
const connectedRelays = this.ndk.pool
|
||||||
|
@ -40,7 +40,7 @@ export const MentionNote = memo(function MentionNote({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Note.Provider event={data}>
|
<Note.Provider event={data}>
|
||||||
<Note.Root className="my-2 flex w-full cursor-default flex-col gap-1 rounded-lg bg-neutral-100 dark:bg-neutral-900">
|
<Note.Root className="flex w-full cursor-default flex-col gap-1 rounded-lg bg-neutral-100 dark:bg-neutral-900">
|
||||||
<div className="mt-3 px-3">
|
<div className="mt-3 px-3">
|
||||||
<Note.User variant="mention" />
|
<Note.User variant="mention" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { CheckCircleIcon, DownloadIcon } from "@lume/icons";
|
import { CheckCircleIcon, DownloadIcon } from "@lume/icons";
|
||||||
|
import { getImageMeta } from "@lume/utils";
|
||||||
import { downloadDir } from "@tauri-apps/api/path";
|
import { downloadDir } from "@tauri-apps/api/path";
|
||||||
import { Window } from "@tauri-apps/api/window";
|
import { Window } from "@tauri-apps/api/window";
|
||||||
import { download } from "@tauri-apps/plugin-upload";
|
import { download } from "@tauri-apps/plugin-upload";
|
||||||
@ -21,8 +22,15 @@ export function ImagePreview({ url }: { url: string }) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const open = () => {
|
const open = async () => {
|
||||||
return new Window("image-viewer", { url, title: "Image Viewer" });
|
const name = new URL(url).pathname.split("/").pop();
|
||||||
|
const image = await getImageMeta(url);
|
||||||
|
return new Window("image-viewer", {
|
||||||
|
url,
|
||||||
|
title: name,
|
||||||
|
width: image.width,
|
||||||
|
height: image.height,
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const fallback = (event: SyntheticEvent<HTMLImageElement, Event>) => {
|
const fallback = (event: SyntheticEvent<HTMLImageElement, Event>) => {
|
||||||
|
@ -10,8 +10,8 @@ import {
|
|||||||
RelayIcon,
|
RelayIcon,
|
||||||
SearchIcon,
|
SearchIcon,
|
||||||
} from "@lume/icons";
|
} from "@lume/icons";
|
||||||
|
import { cn } from "@lume/utils";
|
||||||
import { Link, NavLink } from "react-router-dom";
|
import { Link, NavLink } from "react-router-dom";
|
||||||
import { twMerge } from "tailwind-merge";
|
|
||||||
import { ActiveAccount } from "./account/active";
|
import { ActiveAccount } from "./account/active";
|
||||||
|
|
||||||
export function Navigation() {
|
export function Navigation() {
|
||||||
@ -26,7 +26,7 @@ export function Navigation() {
|
|||||||
{({ isActive }) => (
|
{({ isActive }) => (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
||||||
isActive
|
isActive
|
||||||
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
||||||
@ -40,7 +40,7 @@ export function Navigation() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"text-sm",
|
"text-sm",
|
||||||
isActive
|
isActive
|
||||||
? "font-semibold text-black dark:text-white"
|
? "font-semibold text-black dark:text-white"
|
||||||
@ -60,7 +60,7 @@ export function Navigation() {
|
|||||||
{({ isActive }) => (
|
{({ isActive }) => (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
||||||
isActive
|
isActive
|
||||||
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
||||||
@ -74,7 +74,7 @@ export function Navigation() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"text-sm",
|
"text-sm",
|
||||||
isActive
|
isActive
|
||||||
? "font-semibold text-black dark:text-white"
|
? "font-semibold text-black dark:text-white"
|
||||||
@ -94,7 +94,7 @@ export function Navigation() {
|
|||||||
{({ isActive }) => (
|
{({ isActive }) => (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
||||||
isActive
|
isActive
|
||||||
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
||||||
@ -108,7 +108,7 @@ export function Navigation() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"text-sm",
|
"text-sm",
|
||||||
isActive
|
isActive
|
||||||
? "font-semibold text-black dark:text-white"
|
? "font-semibold text-black dark:text-white"
|
||||||
@ -128,7 +128,7 @@ export function Navigation() {
|
|||||||
{({ isActive }) => (
|
{({ isActive }) => (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
||||||
isActive
|
isActive
|
||||||
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
||||||
@ -142,7 +142,7 @@ export function Navigation() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"text-sm",
|
"text-sm",
|
||||||
isActive
|
isActive
|
||||||
? "font-semibold text-black dark:text-white"
|
? "font-semibold text-black dark:text-white"
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
|
import { cn } from "@lume/utils";
|
||||||
import type { ButtonHTMLAttributes } from "react";
|
import type { ButtonHTMLAttributes } from "react";
|
||||||
import { twMerge } from "tailwind-merge";
|
|
||||||
|
|
||||||
export function WindowButton({
|
export function WindowButton({
|
||||||
className,
|
className,
|
||||||
@ -9,7 +9,7 @@ export function WindowButton({
|
|||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"inline-flex cursor-default items-center justify-center",
|
"inline-flex cursor-default items-center justify-center",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
|
import { cn } from "@lume/utils";
|
||||||
import { HTMLProps, useContext } from "react";
|
import { HTMLProps, useContext } from "react";
|
||||||
import { twMerge } from "tailwind-merge";
|
|
||||||
import { WindowButton } from "../components/button";
|
import { WindowButton } from "../components/button";
|
||||||
import { WindowIcons } from "../components/icons";
|
import { WindowIcons } from "../components/icons";
|
||||||
import { AppWindowContext } from "../context";
|
import { AppWindowContext } from "../context";
|
||||||
@ -10,10 +10,7 @@ export function Gnome({ className, ...props }: HTMLProps<HTMLDivElement>) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={cn("mr-[10px] h-auto items-center space-x-[13px]", className)}
|
||||||
"mr-[10px] h-auto items-center space-x-[13px]",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<WindowButton
|
<WindowButton
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
|
import { cn } from "@lume/utils";
|
||||||
import { HTMLProps, useContext, useEffect, useState } from "react";
|
import { HTMLProps, useContext, useEffect, useState } from "react";
|
||||||
import { twMerge } from "tailwind-merge";
|
|
||||||
import { WindowButton } from "../components/button";
|
import { WindowButton } from "../components/button";
|
||||||
import { WindowIcons } from "../components/icons";
|
import { WindowIcons } from "../components/icons";
|
||||||
import { AppWindowContext } from "../context";
|
import { AppWindowContext } from "../context";
|
||||||
@ -46,7 +46,7 @@ export function MacOS({ className, ...props }: HTMLProps<HTMLDivElement>) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"space-x-2 px-3 text-black active:text-black dark:text-black",
|
"space-x-2 px-3 text-black active:text-black dark:text-black",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
|
import { cn } from "@lume/utils";
|
||||||
import { HTMLProps, useContext } from "react";
|
import { HTMLProps, useContext } from "react";
|
||||||
import { twMerge } from "tailwind-merge";
|
|
||||||
import { WindowButton } from "../components/button";
|
import { WindowButton } from "../components/button";
|
||||||
import { WindowIcons } from "../components/icons";
|
import { WindowIcons } from "../components/icons";
|
||||||
import { AppWindowContext } from "../context";
|
import { AppWindowContext } from "../context";
|
||||||
@ -9,7 +9,7 @@ export function Windows({ className, ...props }: HTMLProps<HTMLDivElement>) {
|
|||||||
useContext(AppWindowContext);
|
useContext(AppWindowContext);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={twMerge("h-8", className)} {...props}>
|
<div className={cn("h-8", className)} {...props}>
|
||||||
<WindowButton
|
<WindowButton
|
||||||
onClick={minimizeWindow}
|
onClick={minimizeWindow}
|
||||||
className="max-h-8 w-[46px] cursor-default rounded-none bg-transparent text-black/90 hover:bg-black/[.05] active:bg-black/[.03] dark:text-white dark:hover:bg-white/[.06] dark:active:bg-white/[.04]"
|
className="max-h-8 w-[46px] cursor-default rounded-none bg-transparent text-black/90 hover:bg-black/[.05] active:bg-black/[.03] dark:text-white dark:hover:bg-white/[.06] dark:active:bg-white/[.04]"
|
||||||
@ -18,7 +18,7 @@ export function Windows({ className, ...props }: HTMLProps<HTMLDivElement>) {
|
|||||||
</WindowButton>
|
</WindowButton>
|
||||||
<WindowButton
|
<WindowButton
|
||||||
onClick={maximizeWindow}
|
onClick={maximizeWindow}
|
||||||
className={twMerge(
|
className={cn(
|
||||||
"max-h-8 w-[46px] cursor-default rounded-none bg-transparent",
|
"max-h-8 w-[46px] cursor-default rounded-none bg-transparent",
|
||||||
"text-black/90 hover:bg-black/[.05] active:bg-black/[.03] dark:text-white dark:hover:bg-white/[.06] dark:active:bg-white/[.04]",
|
"text-black/90 hover:bg-black/[.05] active:bg-black/[.03] dark:text-white dark:hover:bg-white/[.06] dark:active:bg-white/[.04]",
|
||||||
// !isMaximizable && "text-white/[.36]",
|
// !isMaximizable && "text-white/[.36]",
|
||||||
|
@ -6,3 +6,4 @@ export * from "./src/notification";
|
|||||||
export * from "./src/hooks/useNetworkStatus";
|
export * from "./src/hooks/useNetworkStatus";
|
||||||
export * from "./src/hooks/useOpenGraph";
|
export * from "./src/hooks/useOpenGraph";
|
||||||
export * from "./src/cn";
|
export * from "./src/cn";
|
||||||
|
export * from "./src/image";
|
||||||
|
10
packages/utils/src/image.ts
Normal file
10
packages/utils/src/image.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export function getImageMeta(
|
||||||
|
url: string,
|
||||||
|
): Promise<{ width: number; height: number }> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const img = new Image();
|
||||||
|
img.onload = () => resolve(img);
|
||||||
|
img.onerror = () => reject();
|
||||||
|
img.src = url;
|
||||||
|
});
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user