refactor: migrate img tags to next/image and fix hook usage

src/app/sidebar/components/sidebar-screen.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
+import Image from "next/image";
 import Link from "next/link";
 
 import { MobileShell } from "@/app/_components/core/mobile-shell";
@@ -35,8 +36,7 @@ export function SidebarScreen() {
           <section className={styles.profileCard}>
             <div className={styles.avatar}>
               {user.avatarUrl ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img src={user.avatarUrl} alt="" />
+                <Image src={user.avatarUrl} alt="" width={64} height={64} />
               ) : (
                 <span className={styles.avatarInitial}>
                   {(user.currentUser?.username ?? "?").charAt(0).toUpperCase()}