chore: tweak max width

docs/apidocs.swagger.yaml

@@ -2137,7 +2137,8 @@ definitions:
 
           Note: this functionality is not currently available in the official
           protobuf release, and it is not used for type URLs beginning with
-          type.googleapis.com.
+          type.googleapis.com. As of May 2023, there are no widely used type server
+          implementations and no plans to implement one.
 
           Schemes other than `http`, `https` (or the empty scheme) might be
           used with implementation specific semantics.
@@ -2172,7 +2173,7 @@ definitions:
             foo = any.unpack(Foo.getDefaultInstance());
           }
 
-      Example 3: Pack and unpack a message in Python.
+       Example 3: Pack and unpack a message in Python.
 
           foo = Foo(...)
           any = Any()
@@ -2182,7 +2183,7 @@ definitions:
             any.Unpack(foo)
             ...
 
-      Example 4: Pack and unpack a message in Go
+       Example 4: Pack and unpack a message in Go
 
            foo := &pb.Foo{...}
            any, err := anypb.New(foo)
@@ -2202,7 +2203,7 @@ definitions:
       name "y.z".
 
       JSON
-
+      ====
       The JSON representation of an `Any` value uses the regular
       representation of the deserialized, embedded message, with an
       additional field `@type` which contains the type URL. Example:

web/package.json

@@ -13,7 +13,7 @@
     "@github/relative-time-element": "^4.4.0",
     "@matejmazur/react-katex": "^3.1.3",
     "@mui/joy": "5.0.0-beta.36",
-    "@reduxjs/toolkit": "^2.2.3",
+    "@reduxjs/toolkit": "^2.2.4",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.11",
@@ -43,7 +43,7 @@
     "@types/dompurify": "^3.0.5",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.12.10",
+    "@types/node": "^20.12.11",
     "@types/qs": "^6.9.15",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
@@ -64,6 +64,6 @@
     "prettier": "^3.2.5",
     "protobufjs": "^7.2.6",
     "typescript": "^5.4.5",
-    "vite": "^5.2.10"
+    "vite": "^5.2.11"
   }
 }

web/src/components/MemoContent/CodeBlock.tsx

-import { Checkbox } from "@mui/joy";
 import clsx from "clsx";
 import copy from "copy-to-clipboard";
 import hljs from "highlight.js";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import toast from "react-hot-toast";
-import useResponsiveWidth from "@/hooks/useResponsiveWidth";
-import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 import MermaidBlock from "./MermaidBlock";
 import { BaseProps } from "./types";
@@ -31,12 +28,6 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
     return <MermaidBlock content={content} />;
   }
 
-  const { md } = useResponsiveWidth();
-  const t = useTranslate();
-
-  const [wrap, setWrap] = useState(true);
-  const handleWrapChange = useCallback(() => setWrap(!wrap), [setWrap, wrap]);
-
   const highlightedCode: string = useMemo(() => {
     try {
       const lang = hljs.getLanguage(formatedLanguage);
@@ -61,25 +52,17 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
     <div className="w-full my-1 bg-amber-100 border-l-4 border-amber-400 rounded hover:shadow dark:bg-zinc-600 dark:border-zinc-400 relative">
       <div className="w-full px-2 py-1 flex flex-row justify-between items-center text-amber-500 dark:text-zinc-400">
         <span className="text-sm font-mono">{formatedLanguage}</span>
-        {md && <Icon.Copy className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />}
+        <Icon.Copy className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />
       </div>
 
       <div className="overflow-auto">
-        <pre className={clsx(wrap ? "whitespace-pre-wrap" : "no-wrap overflow-auto", "w-full p-2 bg-amber-50 dark:bg-zinc-700 relative")}>
+        <pre className={clsx("no-wrap overflow-auto", "w-full p-2 bg-amber-50 dark:bg-zinc-700 relative")}>
           <code
             className={clsx(`language-${formatedLanguage}`, "block text-sm leading-5")}
             dangerouslySetInnerHTML={{ __html: highlightedCode }}
           ></code>
         </pre>
       </div>
-      {!md && (
-        <div className="sticky flex px-2 h-8 bottom-0 bg-amber-100 dark:bg-zinc-600 rounded items-center">
-          <div className="grow h-full">
-            <Checkbox className="h-full items-center" label={t("memo.wrapping")} size="sm" checked={wrap} onChange={handleWrapChange} />
-          </div>
-          <Icon.Copy className="w-4 h-full cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />
-        </div>
-      )}
     </div>
   );
 };

web/src/pages/About.tsx

@@ -4,7 +4,7 @@ import MobileHeader from "@/components/MobileHeader";
 
 const About = () => {
   return (
-    <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">
+    <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">
       <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">

web/src/pages/Archived.tsx

@@ -90,12 +90,16 @@ const Archived = () => {
   };
 
   return (
-    <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">
+    <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">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
         <div className="w-full flex flex-col justify-start items-start">
-          <div className="w-full flex flex-row justify-end items-center mb-2">
-            <div className="w-40">
+          <div className="w-full flex flex-row justify-between items-center mb-2">
+            <div className="flex flex-row justify-start items-center gap-1">
+              <Icon.Archive className="w-5 h-auto opacity-70 shrink-0" />
+              <span className="font-medium">{t("common.archived")}</span>
+            </div>
+            <div className="w-44">
               <SearchBar />
             </div>
           </div>

web/src/pages/Explore.tsx

@@ -58,7 +58,7 @@ const Explore = () => {
   };
 
   return (
-    <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">
+    <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">
       {!md && (
         <MobileHeader>
           <ExploreSidebarDrawer />

web/src/pages/Home.tsx

@@ -72,7 +72,7 @@ const Home = () => {
   }, [memoList]);
 
   return (
-    <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">
+    <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">
       {!md && (
         <MobileHeader>
           <HomeSidebarDrawer />

web/src/pages/Inboxes.tsx

@@ -23,7 +23,7 @@ const Inboxes = () => {
   }, []);
 
   return (
-    <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">
+    <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">
       <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">

web/src/pages/MemoDetail.tsx

@@ -75,7 +75,7 @@ const MemoDetail = () => {
   };
 
   return (
-    <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">
+    <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">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
         {parentMemo && (
@@ -110,10 +110,10 @@ const MemoDetail = () => {
                   <Button
                     variant="plain"
                     color="neutral"
-                    startDecorator={<Icon.MessageCircle className="w-5 h-auto text-gray-400" />}
+                    endDecorator={<Icon.MessageCircle className="w-5 h-auto text-gray-400" />}
                     onClick={handleShowCommentEditor}
                   >
-                    <span className="">{t("memo.comment.write-a-comment")}</span>
+                    <span className="font-normal">{t("memo.comment.write-a-comment")}</span>
                   </Button>
                 </div>
               )

web/src/pages/NotFound.tsx

@@ -2,7 +2,7 @@ import MobileHeader from "@/components/MobileHeader";
 
 const NotFound = () => {
   return (
-    <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">
+    <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">
       <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>

web/src/pages/PermissionDenied.tsx

@@ -2,7 +2,7 @@ import MobileHeader from "@/components/MobileHeader";
 
 const PermissionDenied = () => {
   return (
-    <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">
+    <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">
       <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>

web/src/pages/Resources.tsx

@@ -74,7 +74,7 @@ const Resources = () => {
   };
 
   return (
-    <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">
+    <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">
       <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">

web/src/pages/Setting.tsx

@@ -57,7 +57,7 @@ const Setting = () => {
   }, []);
 
   return (
-    <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">
+    <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">
       <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">

web/src/pages/Timeline.tsx

@@ -100,12 +100,18 @@ const Timeline = () => {
     return nextPageToken;
   };
 
+  const handleSelectedDataChange = (date: string) => {
+    if (dayjs(date).isValid()) {
+      setSelectedDateString(new Date(date).toDateString());
+    }
+  };
+
   const handleNewMemo = () => {
     showMemoEditorDialog({});
   };
 
   return (
-    <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">
+    <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">
       {!md && (
         <MobileHeader>
           <TimelineSidebarDrawer />
@@ -141,9 +147,10 @@ const Timeline = () => {
                       <input
                         className="inset-0 absolute z-1 opacity-0"
                         type="date"
-                        defaultValue={dayjs(selectedDateString).format("YYYY-MM-DD")}
+                        max={dayjs().format("YYYY-MM-DD")}
+                        value={dayjs(selectedDateString).format("YYYY-MM-DD")}
                         onFocus={(e) => e.target.showPicker()}
-                        onChange={(e) => setSelectedDateString(e.target.value)}
+                        onChange={(e) => handleSelectedDataChange(e.target.value)}
                       />
                     </div>
                     <span className="opacity-60 text-lg">{dayjs(monthString).year()}</span>

web/src/pages/UserProfile.tsx

@@ -103,7 +103,7 @@ const UserProfile = () => {
   };
 
   return (
-    <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">
+    <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">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6 flex flex-col justify-start items-center">
         {!loadingState.isLoading &&