From ddbbcf41b55ae573f8e601c7c8fcb0b446597b3b Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Sat, 30 Dec 2023 09:02:39 +0700
Subject: [PATCH] chore: polish some components

---
 packages/@columns/timeline/src/home.tsx        |  6 ++----
 packages/ark/src/ark.ts                        |  2 ++
 .../ark/src/components/note/mentions/note.tsx  |  2 +-
 .../ark/src/components/note/preview/image.tsx  | 12 ++++++++++--
 packages/ui/src/navigation.tsx                 | 18 +++++++++---------
 packages/ui/src/titlebar/components/button.tsx |  4 ++--
 packages/ui/src/titlebar/controls/gnome.tsx    |  7 ++-----
 packages/ui/src/titlebar/controls/macos.tsx    |  4 ++--
 packages/ui/src/titlebar/controls/windows.tsx  |  6 +++---
 packages/utils/index.ts                        |  1 +
 packages/utils/src/image.ts                    | 10 ++++++++++
 11 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 packages/utils/src/image.ts

diff --git a/packages/@columns/timeline/src/home.tsx b/packages/@columns/timeline/src/home.tsx
index 7c542baa..f5038762 100644
--- a/packages/@columns/timeline/src/home.tsx
+++ b/packages/@columns/timeline/src/home.tsx
@@ -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" />
diff --git a/packages/ark/src/ark.ts b/packages/ark/src/ark.ts
index d3c3313a..574cbff6 100644
--- a/packages/ark/src/ark.ts
+++ b/packages/ark/src/ark.ts
@@ -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
diff --git a/packages/ark/src/components/note/mentions/note.tsx b/packages/ark/src/components/note/mentions/note.tsx
index 522f6a34..c21bc143 100644
--- a/packages/ark/src/components/note/mentions/note.tsx
+++ b/packages/ark/src/components/note/mentions/note.tsx
@@ -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>
diff --git a/packages/ark/src/components/note/preview/image.tsx b/packages/ark/src/components/note/preview/image.tsx
index 2743b7ff..de99f37e 100644
--- a/packages/ark/src/components/note/preview/image.tsx
+++ b/packages/ark/src/components/note/preview/image.tsx
@@ -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>) => {
diff --git a/packages/ui/src/navigation.tsx b/packages/ui/src/navigation.tsx
index ffdcaa21..ac405479 100644
--- a/packages/ui/src/navigation.tsx
+++ b/packages/ui/src/navigation.tsx
@@ -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"
diff --git a/packages/ui/src/titlebar/components/button.tsx b/packages/ui/src/titlebar/components/button.tsx
index aee2c9c4..28fbcf8d 100644
--- a/packages/ui/src/titlebar/components/button.tsx
+++ b/packages/ui/src/titlebar/components/button.tsx
@@ -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,
 			)}
diff --git a/packages/ui/src/titlebar/controls/gnome.tsx b/packages/ui/src/titlebar/controls/gnome.tsx
index 253dfc43..95294a62 100644
--- a/packages/ui/src/titlebar/controls/gnome.tsx
+++ b/packages/ui/src/titlebar/controls/gnome.tsx
@@ -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
diff --git a/packages/ui/src/titlebar/controls/macos.tsx b/packages/ui/src/titlebar/controls/macos.tsx
index bf13a382..c1607df5 100644
--- a/packages/ui/src/titlebar/controls/macos.tsx
+++ b/packages/ui/src/titlebar/controls/macos.tsx
@@ -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,
 			)}
diff --git a/packages/ui/src/titlebar/controls/windows.tsx b/packages/ui/src/titlebar/controls/windows.tsx
index 530ae1dd..19372fa1 100644
--- a/packages/ui/src/titlebar/controls/windows.tsx
+++ b/packages/ui/src/titlebar/controls/windows.tsx
@@ -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]",
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 032ce06d..7ebd27b9 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -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";
diff --git a/packages/utils/src/image.ts b/packages/utils/src/image.ts
new file mode 100644
index 00000000..70fa37e2
--- /dev/null
+++ b/packages/utils/src/image.ts
@@ -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;
+	});
+}