chore: update avatar max size (#1109)

api/user.go

@@ -56,7 +56,6 @@ type UserCreate struct {
 	Email        string `json:"email"`
 	Nickname     string `json:"nickname"`
 	Password     string `json:"password"`
-	AvatarURL    string `json:"avatarUrl"`
 	PasswordHash string
 	OpenID       string
 }
@@ -111,7 +110,12 @@ func (patch UserPatch) Validate() error {
 	if patch.Nickname != nil && len(*patch.Nickname) > 64 {
 		return fmt.Errorf("nickname is too long, maximum length is 64")
 	}
-	if patch.Email != nil {
+	if patch.AvatarURL != nil {
+		if len(*patch.AvatarURL) > 2<<20 {
+			return fmt.Errorf("avatar is too large, maximum is 2MB")
+		}
+	}
+	if patch.Email != nil && *patch.Email != "" {
 		if len(*patch.Email) > 256 {
 			return fmt.Errorf("email is too long, maximum length is 256")
 		}

store/user.go

@@ -182,10 +182,9 @@ func createUser(ctx context.Context, tx *sql.Tx, create *api.UserCreate) (*userR
 			email,
 			nickname,
 			password_hash,
-			open_id,
-			avatar_url
+			open_id
 		)
-		VALUES (?, ?, ?, ?, ?, ?, ?)
+		VALUES (?, ?, ?, ?, ?, ?)
 		RETURNING id, username, role, email, nickname, password_hash, open_id, avatar_url, created_ts, updated_ts, row_status
 	`
 	var userRaw userRaw
@@ -196,7 +195,6 @@ func createUser(ctx context.Context, tx *sql.Tx, create *api.UserCreate) (*userR
 		create.Nickname,
 		create.PasswordHash,
 		create.OpenID,
-		create.AvatarURL,
 	).Scan(
 		&userRaw.ID,
 		&userRaw.Username,

web/src/components/Sidebar.tsx

@@ -32,20 +32,32 @@ const Sidebar = () => {
       <aside className="sidebar-wrapper">
         <UserBanner />
         <UsageHeatMap />
-        <div className="action-btns-container">
-          <button className="btn action-btn" onClick={() => showDailyReviewDialog()}>
-            <span className="icon">📅</span> {t("sidebar.daily-review")}
+        <div className="w-full px-2 my-2 flex flex-col justify-start items-start shrink-0">
+          <button
+            className="leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
+            onClick={() => showDailyReviewDialog()}
+          >
+            <span className="mr-1">📅</span> {t("sidebar.daily-review")}
           </button>
-          <Link to="/explore" className="btn action-btn">
-            <span className="icon">🏂</span> {t("common.explore")}
+          <Link
+            to="/explore"
+            className="leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
+          >
+            <span className="mr-1">🏂</span> {t("common.explore")}
           </Link>
-          <button className="btn action-btn" onClick={() => showResourcesDialog()}>
-            <span className="icon">🗂️</span> {t("sidebar.resources")}
+          <button
+            className="leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
+            onClick={() => showResourcesDialog()}
+          >
+            <span className="mr-1">🗂️</span> {t("sidebar.resources")}
           </button>
           {!userStore.isVisitorMode() && (
             <>
-              <button className="btn action-btn" onClick={handleSettingBtnClick}>
-                <span className="icon">⚙️</span> {t("sidebar.setting")}
+              <button
+                className="leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
+                onClick={handleSettingBtnClick}
+              >
+                <span className="mr-1">⚙️</span> {t("sidebar.setting")}
               </button>
             </>
           )}

web/src/components/UpdateAccountDialog.tsx

@@ -64,8 +64,6 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
         console.error(error);
         toastHelper.error(`Failed to convert image to base64`);
       }
-    } else {
-      toastHelper.error("Image not found");
     }
   };
 

web/src/components/UserAvatar.tsx

@@ -9,7 +9,7 @@ const UserAvatar = (props: Props) => {
   const { avatarUrl, className } = props;
   return (
     <div className={`${className ?? ""} w-8 h-8 rounded-full bg-gray-100 dark:bg-zinc-800`}>
-      <img className="w-full h-full" src={avatarUrl || MEMOS_LOGO_URL} alt="" />
+      <img className="w-full h-auto min-w-full min-h-full object-cover" src={avatarUrl || MEMOS_LOGO_URL} alt="" />
     </div>
   );
 };

web/src/less/siderbar.less

@@ -4,18 +4,6 @@
   &.show {
     @apply translate-x-0 shadow-2xl sm:shadow-none;
   }
-
-  > .action-btns-container {
-    @apply w-full px-2 my-2 flex flex-col justify-start items-start shrink-0;
-
-    > .action-btn {
-      @apply leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white dark:hover:bg-zinc-700;
-
-      > .icon {
-        @apply mr-1;
-      }
-    }
-  }
 }
 
 .mask {