Big Updated, added some tests, added comments for all functions, I forgot the rest

apps/web/src/components/navbar.tsx

@@ -4,11 +4,32 @@ import { useNavigate, useRouterState } from "@tanstack/react-router";
 import * as React from "react";
 import { useUser, type User } from "@tensamin/user/context";
 
+/**
+ * Navigates to the home route when the navbar home button is clicked.
+ * @param navigate Router navigate function from TanStack Router.
+ * @returns Void.
+ */
+function handleHomeButtonClick(navigate: ReturnType<typeof useNavigate>): void {
+  void navigate({ to: "/" });
+}
+
+/**
+ * Renders the top navigation bar and currently selected conversation user.
+ * @returns Navbar JSX element.
+ */
 export default function Navbar() {
   const navigate = useNavigate();
   const { get } = useUser();
   const search = useRouterState({ select: (state) => state.location.search });
 
+  /**
+   * Delegates navbar home button click to navigation helper.
+   * @returns Void.
+   */
+  const onHomeButtonClick = React.useCallback(() => {
+    handleHomeButtonClick(navigate);
+  }, [navigate]);
+
   const [user, setUser] = React.useState<User | null>(null);
 
   const currentId = React.useMemo(
@@ -30,13 +51,11 @@ export default function Navbar() {
   return (
     <div className="w-full h-13.5 flex items-center justify-center">
       <Button
-        onClick={() => {
-          void navigate({ to: "/" });
-        }}
-        className="w-9 h-9 aspect-square p-0 rounded-lg"
+        onClick={onHomeButtonClick}
+        className="w-9 h-9 aspect-square rounded-lg"
         variant="outline"
       >
-        <House size={18} />
+        <House className="size-4.5" />
       </Button>
       <p className="font-medium pl-3 text-md">{user?.display}</p>
       <div className="w-full" />