From 21d22320b38b62b9a0b280870558943e559f4dfc Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Thu, 22 Jun 2023 21:14:53 +0700
Subject: [PATCH] polish

---
 src/app/channel/components/list.tsx           |  2 +-
 src/app/chat/components/list.tsx              | 12 ++++++------
 src/app/space/components/blocks/following.tsx |  9 +--------
 src/shared/layout.tsx                         |  6 +-----
 src/shared/navigation.tsx                     |  2 +-
 src/shared/notes/preview/link.tsx             |  4 +++-
 src/shared/notes/preview/video.tsx            |  8 +++++---
 7 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/app/channel/components/list.tsx b/src/app/channel/components/list.tsx
index da5dd53c..5ee7e047 100644
--- a/src/app/channel/components/list.tsx
+++ b/src/app/channel/components/list.tsx
@@ -12,7 +12,7 @@ export function ChannelsList() {
 	}, [fetchChannels]);
 
 	return (
-		<div className="flex flex-col gap-0.5">
+		<div className="flex flex-col">
 			{!channels ? (
 				<>
 					<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
diff --git a/src/app/chat/components/list.tsx b/src/app/chat/components/list.tsx
index 367364fe..063d37cf 100644
--- a/src/app/chat/components/list.tsx
+++ b/src/app/chat/components/list.tsx
@@ -17,29 +17,29 @@ export function ChatsList() {
 
 	if (!account)
 		return (
-			<div className="flex flex-col gap-0.5">
+			<div className="flex flex-col">
 				<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
-					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
+					<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
 				</div>
 				<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
-					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
+					<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
 				</div>
 			</div>
 		);
 
 	return (
-		<div className="flex flex-col gap-0.5">
+		<div className="flex flex-col">
 			<ChatsListSelfItem data={account} />
 			{!chats ? (
 				<>
 					<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
-						<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
+						<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
 						<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
 					</div>
 					<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
-						<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
+						<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
 						<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
 					</div>
 				</>
diff --git a/src/app/space/components/blocks/following.tsx b/src/app/space/components/blocks/following.tsx
index eb5bb51b..63b2099a 100644
--- a/src/app/space/components/blocks/following.tsx
+++ b/src/app/space/components/blocks/following.tsx
@@ -101,14 +101,7 @@ export function FollowingBlock({ block }: { block: number }) {
 				className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto"
 				style={{ contain: "strict" }}
 			>
-				{isLoading && (
-					<div className="px-3 py-1.5">
-						<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
-							<NoteSkeleton />
-						</div>
-					</div>
-				)}
-				{!data ? (
+				{!data || isLoading ? (
 					<div className="px-3 py-1.5">
 						<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
 							<NoteSkeleton />
diff --git a/src/shared/layout.tsx b/src/shared/layout.tsx
index c2d1c687..8054d208 100644
--- a/src/shared/layout.tsx
+++ b/src/shared/layout.tsx
@@ -13,11 +13,7 @@ export function DefaultLayout({ children }: { children: React.ReactNode }) {
 	);
 
 	return (
-		<div
-			className={`flex w-screen h-screen ${
-				platform === "darwin" ? "flex-row" : "flex-row-reverse"
-			}`}
-		>
+		<div className="flex w-screen h-screen">
 			<div className="relative flex flex-row shrink-0">
 				<Navigation reverse={platform !== "darwin"} />
 			</div>
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index 09040bfc..39ed8528 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -26,7 +26,7 @@ export function Navigation({ reverse }: { reverse?: boolean }) {
 							Feeds
 						</h3>
 					</div>
-					<div className="flex flex-col gap-1">
+					<div className="flex flex-col">
 						<ActiveLink
 							href="/app/space"
 							className="flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200"
diff --git a/src/shared/notes/preview/link.tsx b/src/shared/notes/preview/link.tsx
index 358cf8c9..fb027f74 100644
--- a/src/shared/notes/preview/link.tsx
+++ b/src/shared/notes/preview/link.tsx
@@ -14,7 +14,9 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 					<div className="flex flex-col gap-2 px-3 py-3">
 						<div className="w-2/3 h-3 rounded bg-zinc-700 animate-pulse" />
 						<div className="w-3/4 h-3 rounded bg-zinc-700 animate-pulse" />
-						<div className="mt-2.5 w-1/3 h-2 rounded bg-zinc-700 animate-pulse" />
+						<span className="mt-2.5 leading-none text-sm text-zinc-500">
+							{domain.hostname}
+						</span>
 					</div>
 				</div>
 			) : (
diff --git a/src/shared/notes/preview/video.tsx b/src/shared/notes/preview/video.tsx
index 758c470b..73ff8341 100644
--- a/src/shared/notes/preview/video.tsx
+++ b/src/shared/notes/preview/video.tsx
@@ -7,9 +7,11 @@ export function VideoPreview({ urls }: { urls: string[] }) {
 			onKeyDown={(e) => e.stopPropagation()}
 			className="relative mt-3 max-w-[420px] flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
 		>
-			<MediaPlayer src={urls[0]} poster="" controls>
-				<MediaOutlet />
-			</MediaPlayer>
+			{urls.map((url: string) => (
+				<MediaPlayer key={url} src={urls[0]} poster="" controls>
+					<MediaOutlet />
+				</MediaPlayer>
+			))}
 		</div>
 	);
 }