From 587f4b4d78e683d377da9f2961351c9bf06919bb Mon Sep 17 00:00:00 2001
From: rathi <rathiharivansh@gmail.com>
Date: Fri, 22 Nov 2024 00:19:56 -0500
Subject: [PATCH] Added way to see name of account in sidebar

---
 src/components/MobileNav.tsx | 20 ++++++++++++++------
 src/components/Sidebar.tsx   | 12 +++++++++---
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index 5b4e40e..70777a2 100644
--- a/src/components/MobileNav.tsx
+++ b/src/components/MobileNav.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Plus, CalendarIcon, SettingsIcon, LogOut } from 'lucide-react';
+import { Plus, CalendarIcon, SettingsIcon, LogOut, User } from 'lucide-react';
 import { useThemeContext } from '../contexts/ThemeContext';
 import { useAuth } from '../contexts/AuthContext';
 
@@ -12,7 +12,7 @@ interface MobileNavProps {
 
 export const MobileNav: React.FC<MobileNavProps> = ({ activeView, setActiveView }) => {
   const { theme } = useThemeContext();
-  const { signOut } = useAuth();
+  const { signOut, user } = useAuth();
 
   return (
     <>
@@ -45,6 +45,11 @@ export const MobileNav: React.FC<MobileNavProps> = ({ activeView, setActiveView
             icon={<SettingsIcon className="h-5 w-5" />}
             label="Settings"
           />
+          <NavButton
+            icon={<User className="h-5 w-5" />}
+            label={user?.email?.split('@')[0] ?? 'Account'}
+            tooltip={user?.email}
+          />
           <NavButton
             onClick={signOut}
             icon={<LogOut className="h-5 w-5" />}
@@ -59,10 +64,11 @@ export const MobileNav: React.FC<MobileNavProps> = ({ activeView, setActiveView
 
 interface NavButtonProps {
   active?: boolean;
-  onClick: () => void;
+  onClick?: () => void;
   icon: React.ReactNode;
   label: string;
   variant?: 'default' | 'danger';
+  tooltip?: string;
 }
 
 const NavButton: React.FC<NavButtonProps> = ({ 
@@ -70,7 +76,8 @@ const NavButton: React.FC<NavButtonProps> = ({
   onClick, 
   icon, 
   label,
-  variant = 'default'
+  variant = 'default',
+  tooltip
 }) => {
   const { theme } = useThemeContext();
   
@@ -85,8 +92,9 @@ const NavButton: React.FC<NavButtonProps> = ({
       className={`
         ${baseStyles}
         ${variantStyles}
-        ${active ? 'scale-95 shadow-inner' : 'hover:scale-105'}
+        ${active ? 'scale-95 shadow-inner' : onClick ? 'hover:scale-105' : ''}
       `}
+      title={tooltip}
     >
       <div className={`
         ${active ? 'scale-95' : ''}
@@ -95,7 +103,7 @@ const NavButton: React.FC<NavButtonProps> = ({
         {icon}
       </div>
       <span className={`
-        text-xs mt-1 font-medium
+        text-xs mt-1 font-medium truncate max-w-[60px]
         ${active ? 'opacity-100' : 'opacity-70'}
       `}>
         {label}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 28c88f6..ae9b372 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Plus, CalendarIcon, SettingsIcon, LogOut } from 'lucide-react';
+import { Plus, CalendarIcon, SettingsIcon, LogOut, User } from 'lucide-react';
 import { useThemeContext } from '../contexts/ThemeContext';
 import { useAuth } from '../contexts/AuthContext';
 
@@ -12,7 +12,7 @@ interface SidebarProps {
 
 export const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView }) => {
   const { theme } = useThemeContext();
-  const { signOut } = useAuth();
+  const { signOut, user } = useAuth();
   
   return (
     <nav className={`w-72 h-screen sticky top-0 border-r ${theme.border} ${theme.sidebarBackground} flex flex-col`}>
@@ -62,7 +62,13 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView }) =
           </li>
         </ul>
       </div>
-      <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+      <div className="p-4 border-t border-gray-200 dark:border-gray-700 space-y-2">
+        <div className={`w-full px-6 py-3 rounded-lg ${theme.text} ${theme.habitItem} flex items-center`}>
+          <User className="h-5 w-5 mr-3" />
+          <div className="flex-1 truncate">
+            <span className="font-medium block truncate">{user?.email}</span>
+          </div>
+        </div>
         <button
           onClick={signOut}
           className={`w-full px-6 py-3 text-left rounded-lg transition-all duration-200 flex items-center