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({
|
||||
filter: {
|
||||
kinds: [NDKKind.Text, NDKKind.Repost],
|
||||
authors: !storage.account.contacts.length
|
||||
? [storage.account.pubkey]
|
||||
: storage.account.contacts,
|
||||
authors: storage.account.contacts,
|
||||
},
|
||||
limit: FETCH_LIMIT,
|
||||
pageParam,
|
||||
@ -99,7 +97,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
||||
type="button"
|
||||
onClick={() => fetchNextPage()}
|
||||
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 ? (
|
||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
||||
|
@ -372,6 +372,8 @@ export class Ark {
|
||||
signal?: AbortSignal;
|
||||
dedup?: boolean;
|
||||
}) {
|
||||
if (!filter?.authors?.length) return [];
|
||||
|
||||
const rootIds = new Set();
|
||||
const dedupQueue = new Set();
|
||||
const connectedRelays = this.ndk.pool
|
||||
|
@ -40,7 +40,7 @@ export const MentionNote = memo(function MentionNote({
|
||||
|
||||
return (
|
||||
<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">
|
||||
<Note.User variant="mention" />
|
||||
</div>
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { CheckCircleIcon, DownloadIcon } from "@lume/icons";
|
||||
import { getImageMeta } from "@lume/utils";
|
||||
import { downloadDir } from "@tauri-apps/api/path";
|
||||
import { Window } from "@tauri-apps/api/window";
|
||||
import { download } from "@tauri-apps/plugin-upload";
|
||||
@ -21,8 +22,15 @@ export function ImagePreview({ url }: { url: string }) {
|
||||
}
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
return new Window("image-viewer", { url, title: "Image Viewer" });
|
||||
const open = async () => {
|
||||
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>) => {
|
||||
|
@ -10,8 +10,8 @@ import {
|
||||
RelayIcon,
|
||||
SearchIcon,
|
||||
} from "@lume/icons";
|
||||
import { cn } from "@lume/utils";
|
||||
import { Link, NavLink } from "react-router-dom";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { ActiveAccount } from "./account/active";
|
||||
|
||||
export function Navigation() {
|
||||
@ -26,7 +26,7 @@ export function Navigation() {
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
||||
isActive
|
||||
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
||||
@ -40,7 +40,7 @@ export function Navigation() {
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"text-sm",
|
||||
isActive
|
||||
? "font-semibold text-black dark:text-white"
|
||||
@ -60,7 +60,7 @@ export function Navigation() {
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
||||
isActive
|
||||
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
||||
@ -74,7 +74,7 @@ export function Navigation() {
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"text-sm",
|
||||
isActive
|
||||
? "font-semibold text-black dark:text-white"
|
||||
@ -94,7 +94,7 @@ export function Navigation() {
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
||||
isActive
|
||||
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
||||
@ -108,7 +108,7 @@ export function Navigation() {
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"text-sm",
|
||||
isActive
|
||||
? "font-semibold text-black dark:text-white"
|
||||
@ -128,7 +128,7 @@ export function Navigation() {
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
|
||||
isActive
|
||||
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
|
||||
@ -142,7 +142,7 @@ export function Navigation() {
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"text-sm",
|
||||
isActive
|
||||
? "font-semibold text-black dark:text-white"
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { cn } from "@lume/utils";
|
||||
import type { ButtonHTMLAttributes } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function WindowButton({
|
||||
className,
|
||||
@ -9,7 +9,7 @@ export function WindowButton({
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"inline-flex cursor-default items-center justify-center",
|
||||
className,
|
||||
)}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { cn } from "@lume/utils";
|
||||
import { HTMLProps, useContext } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { WindowButton } from "../components/button";
|
||||
import { WindowIcons } from "../components/icons";
|
||||
import { AppWindowContext } from "../context";
|
||||
@ -10,10 +10,7 @@ export function Gnome({ className, ...props }: HTMLProps<HTMLDivElement>) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"mr-[10px] h-auto items-center space-x-[13px]",
|
||||
className,
|
||||
)}
|
||||
className={cn("mr-[10px] h-auto items-center space-x-[13px]", className)}
|
||||
{...props}
|
||||
>
|
||||
<WindowButton
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { cn } from "@lume/utils";
|
||||
import { HTMLProps, useContext, useEffect, useState } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { WindowButton } from "../components/button";
|
||||
import { WindowIcons } from "../components/icons";
|
||||
import { AppWindowContext } from "../context";
|
||||
@ -46,7 +46,7 @@ export function MacOS({ className, ...props }: HTMLProps<HTMLDivElement>) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"space-x-2 px-3 text-black active:text-black dark:text-black",
|
||||
className,
|
||||
)}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { cn } from "@lume/utils";
|
||||
import { HTMLProps, useContext } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { WindowButton } from "../components/button";
|
||||
import { WindowIcons } from "../components/icons";
|
||||
import { AppWindowContext } from "../context";
|
||||
@ -9,7 +9,7 @@ export function Windows({ className, ...props }: HTMLProps<HTMLDivElement>) {
|
||||
useContext(AppWindowContext);
|
||||
|
||||
return (
|
||||
<div className={twMerge("h-8", className)} {...props}>
|
||||
<div className={cn("h-8", className)} {...props}>
|
||||
<WindowButton
|
||||
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]"
|
||||
@ -18,7 +18,7 @@ export function Windows({ className, ...props }: HTMLProps<HTMLDivElement>) {
|
||||
</WindowButton>
|
||||
<WindowButton
|
||||
onClick={maximizeWindow}
|
||||
className={twMerge(
|
||||
className={cn(
|
||||
"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]",
|
||||
// !isMaximizable && "text-white/[.36]",
|
||||
|
@ -6,3 +6,4 @@ export * from "./src/notification";
|
||||
export * from "./src/hooks/useNetworkStatus";
|
||||
export * from "./src/hooks/useOpenGraph";
|
||||
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