Preferences page

packages/app/src/Element/Avatar.tsx

@@ -11,19 +11,21 @@ interface AvatarProps {
   user?: UserMetadata;
   onClick?: () => void;
   size?: number;
+  image?: string;
 }
-const Avatar = ({ user, size, onClick }: AvatarProps) => {
+const Avatar = ({ user, size, onClick, image }: AvatarProps) => {
   const [url, setUrl] = useState<string>(Nostrich);
   const { proxy } = useImgProxy();
 
   useEffect(() => {
-    if (user?.picture) {
-      const url = proxy(user.picture, size ?? 120);
-      setUrl(url);
+    const url = image ?? user?.picture;
+    if (url) {
+      const proxyUrl = proxy(url, size ?? 120);
+      setUrl(proxyUrl);
     } else {
       setUrl(Nostrich);
     }
-  }, [user]);
+  }, [user, image]);
 
   const backgroundImage = `url(${url})`;
   const style = { "--img-url": backgroundImage } as CSSProperties;

packages/app/src/Element/AvatarEditor.css

@@ -0,0 +1,20 @@
+.avatar .edit,
+.banner .edit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--bg-color);
+  cursor: pointer;
+  opacity: 0;
+  border-radius: 100%;
+}
+
+.avatar .edit.new {
+  opacity: 0.5;
+}
+
+.avatar .edit:hover {
+  opacity: 0.5;
+}

packages/app/src/Element/AvatarEditor.tsx

@@ -1,7 +1,9 @@
+import "./AvatarEditor.css";
 import Icon from "Icons/Icon";
 import { useState } from "react";
 import useFileUpload from "Upload";
 import { openFile, unwrap } from "SnortUtils";
+import Spinner from "Icons/Spinner";
 
 interface AvatarEditorProps {
   picture?: string;
@@ -11,9 +13,11 @@ interface AvatarEditorProps {
 export default function AvatarEditor({ picture, onPictureChange }: AvatarEditorProps) {
   const uploader = useFileUpload();
   const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
 
   async function uploadFile() {
     setError("");
+    setLoading(true);
     try {
       const f = await openFile();
       if (f) {
@@ -32,6 +36,7 @@ export default function AvatarEditor({ picture, onPictureChange }: AvatarEditorP
         setError(`Upload failed`);
       }
     }
+    setLoading(false);
   }
 
   return (
@@ -39,7 +44,7 @@ export default function AvatarEditor({ picture, onPictureChange }: AvatarEditorP
       <div className="flex f-center">
         <div style={{ backgroundImage: `url(${picture})` }} className="avatar">
           <div className={`edit${picture ? "" : " new"}`} onClick={() => uploadFile().catch(console.error)}>
-            <Icon name={picture ? "edit" : "camera-plus"} />
+            {loading ? <Spinner /> : <Icon name={picture ? "edit" : "camera-plus"} />}
           </div>
         </div>
       </div>