@crmy/web 0.5.5 → 0.5.9

package/src/components/layout/Sidebar.tsx

@@ -1,157 +0,0 @@
-import { Link, useLocation } from 'react-router-dom';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  LayoutDashboard,
-  Users,
-  Building2,
-  Briefcase,
-  FolderKanban,
-  Activity,
-  Inbox,
-  Settings,
-  PanelLeftClose,
-  PanelLeft,
-} from 'lucide-react';
-import { useAppStore } from '@/store/appStore';
-import { useInboxCounts } from '@/api/hooks';
-import crmyLogo from '@/assets/crmy-logo.png';
-import { ENTITY_COLORS } from '@/lib/entityColors';
-
-export { ENTITY_COLORS };
-
-const navItems = [
-  { icon: LayoutDashboard, label: 'Dashboard',    path: '/',              color: ENTITY_COLORS.dashboard },
-  { icon: Users,           label: 'Contacts',     path: '/contacts',      color: ENTITY_COLORS.contacts },
-  { icon: Building2,       label: 'Accounts',     path: '/accounts',      color: ENTITY_COLORS.accounts },
-  { icon: Briefcase,       label: 'Opportunities',path: '/opportunities', color: ENTITY_COLORS.opportunities },
-  { icon: FolderKanban,    label: 'Use Cases',    path: '/use-cases',     color: ENTITY_COLORS.useCases },
-  { icon: Activity,        label: 'Activities',   path: '/activities',    color: ENTITY_COLORS.activities },
-  { icon: Inbox,           label: 'Assignments',   path: '/assignments',   color: ENTITY_COLORS.inbox },
-];
-
-const bottomItems = [
-  { icon: Settings, label: 'Settings', path: '/settings' },
-];
-
-export function Sidebar() {
-  const location = useLocation();
-  const { sidebarExpanded, setSidebarExpanded } = useAppStore();
-  const { total: inboxCount } = useInboxCounts();
-
-  return (
-    <motion.aside
-      className="hidden md:flex flex-col h-screen bg-sidebar border-r border-sidebar-border flex-shrink-0"
-      animate={{ width: sidebarExpanded ? 220 : 56 }}
-      transition={{ duration: 0.2, ease: 'easeInOut' }}
-    >
-      {/* Logo */}
-      <div className="flex items-center h-14 px-3 gap-2 border-b border-sidebar-border">
-        <img src={crmyLogo} alt="CRMy" className="w-8 h-8 flex-shrink-0 rounded-lg" />
-        <AnimatePresence>
-          {sidebarExpanded && (
-            <motion.span
-              initial={{ opacity: 0, width: 0 }}
-              animate={{ opacity: 1, width: 'auto' }}
-              exit={{ opacity: 0, width: 0 }}
-              className="font-brand font-bold text-lg text-sidebar-accent-foreground whitespace-nowrap overflow-hidden"
-            >
-              CRMy
-            </motion.span>
-          )}
-        </AnimatePresence>
-      </div>
-
-      {/* Nav */}
-      <nav className="flex-1 flex flex-col py-3 gap-1 px-2">
-        {navItems.map((item) => {
-          const active = item.path === '/' ? location.pathname === '/' : location.pathname.startsWith(item.path);
-          return (
-            <Link
-              key={item.path}
-              to={item.path}
-              className={`group relative flex items-center gap-3 rounded-xl px-2.5 py-2.5 text-sm transition-all
-                ${active
-                  ? `${item.color.bg} ${item.color.text}`
-                  : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
-                }`}
-              title={!sidebarExpanded ? item.label : undefined}
-            >
-              <item.icon className="w-5 h-5 flex-shrink-0" />
-              <AnimatePresence>
-                {sidebarExpanded && (
-                  <motion.span
-                    initial={{ opacity: 0, width: 0 }}
-                    animate={{ opacity: 1, width: 'auto' }}
-                    exit={{ opacity: 0, width: 0 }}
-                    className="whitespace-nowrap overflow-hidden font-medium flex-1"
-                  >
-                    {item.label}
-                  </motion.span>
-                )}
-              </AnimatePresence>
-              {item.path === '/assignments' && inboxCount > 0 && (
-                <span className={`flex-shrink-0 min-w-[18px] h-[18px] px-1 flex items-center justify-center rounded-full bg-destructive text-white text-[10px] font-bold ${sidebarExpanded ? '' : 'absolute -top-1 -right-1'}`}>
-                  {inboxCount > 99 ? '99+' : inboxCount}
-                </span>
-              )}
-              {active && (
-                <motion.div
-                  layoutId="sidebar-active"
-                  className={`absolute -left-2 top-2 w-[3px] h-6 ${item.color.bar} rounded-r-full`}
-                  transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-                />
-              )}
-              {/* Tooltip when collapsed */}
-              {!sidebarExpanded && (
-                <div className="absolute left-full ml-2 px-2.5 py-1.5 rounded-lg bg-popover text-popover-foreground text-xs shadow-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50 font-medium">
-                  {item.label}
-                </div>
-              )}
-            </Link>
-          );
-        })}
-      </nav>
-
-      {/* Bottom */}
-      <div className="flex flex-col gap-1 px-2 pb-3 border-t border-sidebar-border pt-3">
-        {bottomItems.map((item) => {
-          const active = location.pathname.startsWith(item.path);
-          return (
-            <Link
-              key={item.path}
-              to={item.path}
-              className={`flex items-center gap-3 rounded-xl px-2.5 py-2.5 text-sm transition-all
-                ${active
-                  ? 'bg-sidebar-primary/15 text-sidebar-primary'
-                  : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
-                }`}
-              title={!sidebarExpanded ? item.label : undefined}
-            >
-              <item.icon className="w-5 h-5 flex-shrink-0" />
-              <AnimatePresence>
-                {sidebarExpanded && (
-                  <motion.span
-                    initial={{ opacity: 0, width: 0 }}
-                    animate={{ opacity: 1, width: 'auto' }}
-                    exit={{ opacity: 0, width: 0 }}
-                    className="whitespace-nowrap overflow-hidden font-medium"
-                  >
-                    {item.label}
-                  </motion.span>
-                )}
-              </AnimatePresence>
-            </Link>
-          );
-        })}
-
-        {/* Toggle button */}
-        <button
-          onClick={() => setSidebarExpanded(!sidebarExpanded)}
-          className="flex items-center justify-center w-8 h-8 rounded-lg text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground mx-auto mt-1 transition-colors"
-        >
-          {sidebarExpanded ? <PanelLeftClose className="w-4 h-4" /> : <PanelLeft className="w-4 h-4" />}
-        </button>
-      </div>
-    </motion.aside>
-  );
-}

package/src/components/layout/TopBar.tsx

@@ -1,54 +0,0 @@
-import { Search, Command, Sun, Moon, LogOut } from 'lucide-react';
-import { useAppStore } from '@/store/appStore';
-import { useTheme } from '@/hooks/useTheme';
-import { useNavigate } from 'react-router-dom';
-import { clearToken } from '@/api/client';
-
-interface TopBarProps {
-  title: string;
-  children?: React.ReactNode;
-}
-
-export function TopBar({ title, children }: TopBarProps) {
-  const { setCommandPaletteOpen } = useAppStore();
-  const { theme, toggle } = useTheme();
-  const navigate = useNavigate();
-
-  const handleLogout = () => {
-    clearToken();
-    navigate('/login');
-  };
-
-  return (
-    <header className="sticky top-0 z-30 flex items-center justify-between h-14 px-4 md:px-6 border-b border-border bg-background/80 backdrop-blur-md gap-2">
-      <h1 className="font-display font-bold text-lg text-foreground truncate hidden md:block">{title}</h1>
-      <div className="flex items-center gap-1.5 md:ml-auto w-full md:w-auto">
-        {children}
-        <button
-          onClick={toggle}
-          className="p-2 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-          title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-        >
-          {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-        </button>
-        <button
-          onClick={() => setCommandPaletteOpen(true)}
-          className="flex items-center gap-2 flex-1 md:flex-none px-3 py-1.5 rounded-xl bg-muted text-muted-foreground text-sm hover:bg-muted/80 transition-colors min-h-[36px] md:min-h-0"
-        >
-          <Search className="w-4 h-4 md:w-3.5 md:h-3.5 flex-shrink-0" />
-          <span className="text-left flex-1 md:flex-none">Search...</span>
-          <kbd className="hidden md:inline-flex items-center gap-0.5 text-xs font-mono bg-background px-1.5 py-0.5 rounded-md border border-border">
-            <Command className="w-3 h-3" />K
-          </kbd>
-        </button>
-        <button
-          onClick={handleLogout}
-          className="p-2 rounded-xl text-muted-foreground hover:text-destructive hover:bg-muted transition-colors"
-          title="Sign out"
-        >
-          <LogOut className="w-4 h-4" />
-        </button>
-      </div>
-    </header>
-  );
-}