From b10a70b4ce4b936e6640084d96695c0094dc21d1 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 20 Mar 2023 15:12:41 +0700
Subject: [PATCH] minor design fixes

---
 src/components/note/content/index.tsx | 15 +++++++++++----
 src/components/note/placeholder.tsx   |  4 ++--
 src/components/note/preview/image.tsx |  2 +-
 src/components/note/preview/video.tsx |  9 ++++++++-
 src/components/user/extend.tsx        |  6 ++++--
 src/layouts/withSidebar.tsx           | 12 ++++++++++--
 6 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/note/content/index.tsx b/src/components/note/content/index.tsx
index d3099a66..742a3227 100644
--- a/src/components/note/content/index.tsx
+++ b/src/components/note/content/index.tsx
@@ -3,7 +3,7 @@ import NotePreview from '@components/note/content/preview';
 import { UserExtend } from '@components/user/extend';
 
 import dynamic from 'next/dynamic';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
@@ -11,17 +11,24 @@ const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
 });
 
 export const Content = memo(function Content({ data }: { data: any }) {
+  const content = useMemo(
+    () =>
+      // remove all image urls
+      data.content.replace(/(https?:\/\/.*\.(jpg|jpeg|gif|png|webp)((\?.*)$|$))/i, ''),
+    [data.content]
+  );
+
   return (
     <div className="relative z-10 flex flex-col">
       <UserExtend pubkey={data.pubkey} time={data.created_at} />
-      <div className="-mt-4 pl-[60px]">
+      <div className="-mt-5 pl-[52px]">
         <div className="flex flex-col gap-6">
           <div className="flex flex-col">
             <div>
               <MarkdownPreview
-                source={data.content}
+                source={content}
                 className={
-                  'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
+                  'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
                 }
                 linkTarget="_blank"
                 disallowedElements={[
diff --git a/src/components/note/placeholder.tsx b/src/components/note/placeholder.tsx
index d8dfdd75..fdd9579f 100644
--- a/src/components/note/placeholder.tsx
+++ b/src/components/note/placeholder.tsx
@@ -3,7 +3,7 @@ import { memo } from 'react';
 export const Placeholder = memo(function Placeholder() {
   return (
     <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-5 px-3">
-      <div className="flex items-start gap-4">
+      <div className="flex items-start gap-2">
         <div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
         <div className="flex w-full flex-1 items-start justify-between">
           <div className="flex w-full items-center justify-between">
@@ -16,7 +16,7 @@ export const Placeholder = memo(function Placeholder() {
           </div>
         </div>
       </div>
-      <div className="-mt-4 pl-[60px]">
+      <div className="-mt-5 pl-[52px]">
         <div className="flex flex-col gap-6">
           <div className="h-16 w-full rounded bg-zinc-700" />
           <div className="flex items-center gap-8">
diff --git a/src/components/note/preview/image.tsx b/src/components/note/preview/image.tsx
index 59db107d..787f56e1 100644
--- a/src/components/note/preview/image.tsx
+++ b/src/components/note/preview/image.tsx
@@ -5,7 +5,7 @@ export const ImagePreview = memo(function ImagePreview({ data }: { data: any })
   return (
     <div className="relative mt-2 flex flex-col overflow-hidden">
       {data.map((image: string, index: number) => (
-        <div key={index} className={`relative h-full w-full rounded-lg ${index == 1 ? 'mt-2' : ''}`}>
+        <div key={index} className={`relative h-full w-full rounded-lg xl:w-2/3 ${index == 1 ? 'mt-2' : ''}`}>
           <Image
             placeholder="blur"
             blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
diff --git a/src/components/note/preview/video.tsx b/src/components/note/preview/video.tsx
index ced7fdfa..26bd7ada 100644
--- a/src/components/note/preview/video.tsx
+++ b/src/components/note/preview/video.tsx
@@ -4,7 +4,14 @@ import ReactPlayer from 'react-player/lazy';
 export const VideoPreview = memo(function VideoPreview({ data }: { data: string }) {
   return (
     <div className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
-      <ReactPlayer url={data} controls={true} volume={0} className="aspect-video w-full" width="100%" height="100%" />
+      <ReactPlayer
+        url={data}
+        controls={true}
+        volume={0}
+        className="aspect-video w-full xl:w-2/3"
+        width="100%"
+        height="100%"
+      />
     </div>
   );
 });
diff --git a/src/components/user/extend.tsx b/src/components/user/extend.tsx
index 1c38917c..168b07f8 100644
--- a/src/components/user/extend.tsx
+++ b/src/components/user/extend.tsx
@@ -54,7 +54,7 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
   }, [getCacheProfile, insertCacheProfile, pubkey]);
 
   return (
-    <div className="relative flex items-start gap-4">
+    <div className="flex items-start gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
         {profile.picture ? (
           <ImageWithFallback
@@ -83,7 +83,9 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
             <span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
           </div>
           <div>
-            <DotsHorizontalIcon className="h-4 w-4 text-zinc-500" />
+            <button className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800">
+              <DotsHorizontalIcon className="h-3 w-3 text-zinc-500" />
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/layouts/withSidebar.tsx b/src/layouts/withSidebar.tsx
index 6640ffd7..c2b6384a 100644
--- a/src/layouts/withSidebar.tsx
+++ b/src/layouts/withSidebar.tsx
@@ -16,13 +16,21 @@ export default function WithSidebarLayout({ children }: { children: React.ReactN
           <div className="absolute top-0 left-0 h-12 w-full" />
           <AccountColumn />
         </div>
-        <div className="grid w-full grid-cols-4">
+        <div className="grid w-full grid-cols-4 xl:grid-cols-5">
           <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
             <NavigatorColumn />
           </div>
-          <div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+          <div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
             <div className="h-full w-full rounded-lg">{children}</div>
           </div>
+          <div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
+            <div className="flex h-full w-full items-center justify-center">
+              <p className="select-text p-8 text-center text-zinc-400">
+                This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
+                I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>