feat: proper redirect handling

web/src/feature/AccountList/index.tsx

@@ -3,12 +3,14 @@ import { type LocalAccount } from "@/repository/account";
 import { useAuth } from "@/store/auth";
 import { CirclePlus, User } from "lucide-react";
 import { useCallback, type FC } from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 const AccountList: FC = () => {
   const accounts = useAuth((state) => state.accounts);
   const updateActiveAccount = useAuth((state) => state.updateActiveAccount);
 
+  const location = useLocation();
+
   const oauth = useOAuthContext();
 
   const handleAccountSelect = useCallback(
@@ -52,7 +54,7 @@ const AccountList: FC = () => {
           </div>
         </div>
       ))}
-      <Link to="/login">
+      <Link to="/login" state={location.state}>
         <div className="flex flex-row items-center p-4 border-gray-200 dark:border-gray-700/65 border-b border-r-0 border-l-0 select-none cursor-pointer hover:bg-gray-50/50 dark:hover:bg-gray-800/10 transition-colors mb-0">
           <div>
             <div className="rounded-full p-2 text-gray-900 dark:text-gray-200 mr-3">

web/src/feature/Avatar/index.tsx

@@ -0,0 +1,30 @@
+import { useAuth } from "@/store/auth";
+import { User } from "lucide-react";
+import type { FC } from "react";
+
+export interface AvatarProps {
+  iconSize?: number;
+  className?: string;
+}
+
+const Avatar: FC<AvatarProps> = ({ iconSize = 32, className }) => {
+  const profile = useAuth((state) => state.profile);
+
+  return (
+    <div
+      className={`overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500 flex items-center justify-center ${className}`}
+    >
+      {profile?.profile_picture ? (
+        <img
+          src={profile?.profile_picture?.toString()}
+          className="w-full h-full flex-1 object-cover"
+          alt="profile"
+        />
+      ) : (
+        <User size={iconSize} />
+      )}
+    </div>
+  );
+};
+
+export default Avatar;