From f9258e41a03eacb1704bc9b1542f39b55f1c56d3 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 7 May 2024 22:10:08 +0800
Subject: [PATCH] chore: tweak max width

---
 .../MemoEditor/ActionButton/UploadResourceButton.tsx     | 7 +------
 web/src/components/MemoResourceListView.tsx              | 9 ++++-----
 web/src/pages/About.tsx                                  | 2 +-
 web/src/pages/Archived.tsx                               | 2 +-
 web/src/pages/Explore.tsx                                | 2 +-
 web/src/pages/Home.tsx                                   | 2 +-
 web/src/pages/Inboxes.tsx                                | 2 +-
 web/src/pages/MemoDetail.tsx                             | 2 +-
 web/src/pages/NotFound.tsx                               | 2 +-
 web/src/pages/PermissionDenied.tsx                       | 2 +-
 web/src/pages/Resources.tsx                              | 2 +-
 web/src/pages/Setting.tsx                                | 2 +-
 web/src/pages/Timeline.tsx                               | 2 +-
 web/src/pages/UserProfile.tsx                            | 2 +-
 14 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx b/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx
index 3e608c5e..d5c48cca 100644
--- a/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx
+++ b/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx
@@ -38,12 +38,7 @@ const UploadResourceButton = () => {
       if (!fileInputRef.current || !fileInputRef.current.files) {
         return;
       }
-      const filesOnInput = Array.from(fileInputRef.current.files);
       for (const file of fileInputRef.current.files) {
-        const fileOnInput = filesOnInput.find((fileOnInput) => fileOnInput.name === file.name);
-        if (!fileOnInput) {
-          continue;
-        }
         const { name: filename, size, type } = file;
         const buffer = new Uint8Array(await file.arrayBuffer());
         const resource = await resourceStore.createResource({
@@ -65,7 +60,7 @@ const UploadResourceButton = () => {
   };
 
   return (
-    <IconButton size="sm">
+    <IconButton size="sm" disabled={state.uploadingFlag}>
       <Icon.Paperclip className="w-5 h-5 mx-auto" />
       <input
         className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
diff --git a/web/src/components/MemoResourceListView.tsx b/web/src/components/MemoResourceListView.tsx
index 18151c4b..d8abb560 100644
--- a/web/src/components/MemoResourceListView.tsx
+++ b/web/src/components/MemoResourceListView.tsx
@@ -1,5 +1,4 @@
 import { memo } from "react";
-import { absolutifyLink } from "@/helpers/utils";
 import { Resource } from "@/types/proto/api/v1/resource_service";
 import { getResourceType, getResourceUrl } from "@/utils/resource";
 import MemoResource from "./MemoResource";
@@ -28,7 +27,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
     showPreviewImageDialog(imgUrls, index);
   };
 
-  const MediaCard = ({ resource, thumbnail }: { resource: Resource; thumbnail?: boolean }) => {
+  const MediaCard = ({ resource }: { resource: Resource }) => {
     const type = getResourceType(resource);
     const url = getResourceUrl(resource);
 
@@ -36,7 +35,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
       return (
         <img
           className="cursor-pointer min-h-full w-auto object-cover"
-          src={resource.externalLink ? url : `${url}${thumbnail ? "?thumbnail=1" : ""}`}
+          src={url}
           onClick={() => handleImageClick(url)}
           decoding="async"
           loading="lazy"
@@ -48,7 +47,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
           className="cursor-pointer w-full h-full object-contain bg-zinc-100 dark:bg-zinc-800"
           preload="metadata"
           crossOrigin="anonymous"
-          src={absolutifyLink(url)}
+          src={url}
           controls
         />
       );
@@ -73,7 +72,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
         key={resource.name}
         className="flex justify-center items-center border dark:border-zinc-900 rounded overflow-hidden hide-scrollbar hover:shadow-md"
       >
-        <MediaCard resource={resource} thumbnail />
+        <MediaCard resource={resource} />
       </SquareDiv>
     ));
 
diff --git a/web/src/pages/About.tsx b/web/src/pages/About.tsx
index b7c0aab8..d76dd3b5 100644
--- a/web/src/pages/About.tsx
+++ b/web/src/pages/About.tsx
@@ -4,7 +4,7 @@ import MobileHeader from "@/components/MobileHeader";
 
 const About = () => {
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index 755883e6..67a902ea 100644
--- a/web/src/pages/Archived.tsx
+++ b/web/src/pages/Archived.tsx
@@ -87,7 +87,7 @@ const Archived = () => {
   };
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
         <div className="w-full flex flex-col justify-start items-start">
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index b0276aba..d064e2d6 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -55,7 +55,7 @@ const Explore = () => {
   };
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       {!md && (
         <MobileHeader>
           <ExploreSidebarDrawer />
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 957d0f37..ea1c91a2 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -69,7 +69,7 @@ const Home = () => {
   }, [memoList]);
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       {!md && (
         <MobileHeader>
           <HomeSidebarDrawer />
diff --git a/web/src/pages/Inboxes.tsx b/web/src/pages/Inboxes.tsx
index 5deeae91..ffb62f17 100644
--- a/web/src/pages/Inboxes.tsx
+++ b/web/src/pages/Inboxes.tsx
@@ -23,7 +23,7 @@ const Inboxes = () => {
   }, []);
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 94f0cf2c..8155c877 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -66,7 +66,7 @@ const MemoDetail = () => {
   };
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
         {parentMemo && (
diff --git a/web/src/pages/NotFound.tsx b/web/src/pages/NotFound.tsx
index 0fac1e20..9ec290de 100644
--- a/web/src/pages/NotFound.tsx
+++ b/web/src/pages/NotFound.tsx
@@ -2,7 +2,7 @@ import MobileHeader from "@/components/MobileHeader";
 
 const NotFound = () => {
   return (
-    <section className="@container w-full max-w-5xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6">
         <p className="font-medium">{"The page you are looking for can't be found."}</p>
diff --git a/web/src/pages/PermissionDenied.tsx b/web/src/pages/PermissionDenied.tsx
index 78867403..7cb766d1 100644
--- a/web/src/pages/PermissionDenied.tsx
+++ b/web/src/pages/PermissionDenied.tsx
@@ -2,7 +2,7 @@ import MobileHeader from "@/components/MobileHeader";
 
 const PermissionDenied = () => {
   return (
-    <section className="@container w-full max-w-5xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6">
         <p className="font-medium">Permission denied</p>
diff --git a/web/src/pages/Resources.tsx b/web/src/pages/Resources.tsx
index 15397e93..eafc4c0b 100644
--- a/web/src/pages/Resources.tsx
+++ b/web/src/pages/Resources.tsx
@@ -74,7 +74,7 @@ const Resources = () => {
   };
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
diff --git a/web/src/pages/Setting.tsx b/web/src/pages/Setting.tsx
index 760c6de3..fc44ed2a 100644
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@@ -57,7 +57,7 @@ const Setting = () => {
   }, []);
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
         <div className="w-full shadow flex flex-row justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-gray-600 dark:text-gray-400">
diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx
index 0a1a5415..2ed62f35 100644
--- a/web/src/pages/Timeline.tsx
+++ b/web/src/pages/Timeline.tsx
@@ -119,7 +119,7 @@ const Timeline = () => {
   };
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       {!md && (
         <MobileHeader>
           <TimelineSidebarDrawer />
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index 45a215bf..a23e81a0 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -100,7 +100,7 @@ const UserProfile = () => {
   };
 
   return (
-    <section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
+    <section className="w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6 flex flex-col justify-start items-center">
         {!loadingState.isLoading &&