hammer/network-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: command palette (Ctrl+K), dark mode, pinned clients

Browse Source 
- Global Command Palette: Ctrl+K search across clients, pages, and actions
  - Arrow key navigation, grouped results (Pages/Clients/Actions)
  - Keyboard hints in footer
- Dark mode: full theme toggle (light/dark/system) with localStorage
  - Theme toggle in header bar
  - Dark mode applied to Layout, Dashboard, Clients, ClientDetail, Login, Modal
  - Tailwind v4 @custom-variant for class-based dark mode
- Pinned/Favorite clients: star clients for quick dashboard access
  - Pin button on client detail page and dashboard recent clients
  - Pinned clients grid on dashboard
  - Uses localStorage (no backend changes needed)
- Search bar trigger in header with ⌘K shortcut hint
This commit is contained in:
Hammer
2026-01-29 13:36:39 +00:00
parent 4c7a8be5b8
commit 8c27b7b522
11 changed files with 585 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/LoginPage.tsx
View File

@@ -28,41 +28,41 @@ export default function LoginPage() {
};
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-slate-50 flex items-center justify-center p-4">
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-slate-50 dark:from-slate-900 dark:via-slate-900 dark:to-slate-800 flex items-center justify-center p-4">
<div className="w-full max-w-md">
{/* Logo */}
<div className="text-center mb-8">
<div className="inline-flex items-center justify-center w-14 h-14 bg-blue-600 rounded-2xl mb-4">
<Network className="w-8 h-8 text-white" />
</div>
<h1 className="text-2xl font-bold text-slate-900">NetworkCRM</h1>
<p className="text-slate-500 mt-1">Sign in to manage your network</p>
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">NetworkCRM</h1>
<p className="text-slate-500 dark:text-slate-400 mt-1">Sign in to manage your network</p>
</div>
{/* Card */}
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
<div className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-8">
<form onSubmit={handleSubmit} className="space-y-5">
{error && (
<div className="p-3 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg">
<div className="p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 text-sm rounded-lg">
{error}
</div>
)}
<div>
<label className="block text-sm font-medium text-slate-700 mb-1.5">Email</label>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="w-full px-3.5 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
className="w-full px-3.5 py-2.5 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
placeholder="you@example.com"
/>
</div>
<div>
<div className="flex items-center justify-between mb-1.5">
<label className="block text-sm font-medium text-slate-700">Password</label>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Password</label>
<Link
to="/forgot-password"
className="text-xs text-blue-600 hover:text-blue-700"
@@ -76,7 +76,7 @@ export default function LoginPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="w-full px-3.5 py-2.5 pr-10 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
className="w-full px-3.5 py-2.5 pr-10 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
placeholder="••••••••"
/>
<button