Hugging Face's logo

Spaces:
Seth0330
/
EMAILOUT
Running

App Files Community
Seth commited on
Commit
cb49f6a
·
1 Parent(s): 401b968

update

Browse files
Files changed (2) hide show
  1. frontend/src/components/layout/AppShell.jsx +32 -28
  2. frontend/src/pages/Contacts.jsx +13 -15
frontend/src/components/layout/AppShell.jsx CHANGED
@@ -58,21 +58,9 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
58
  )}
59
  >
60
  {sidebarCollapsed ? (
61
- <>
62
- <div className="h-11 w-11 shrink-0 rounded-2xl bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-200">
63
- <Zap className="h-5 w-5 text-white" />
64
- </div>
65
- <Button
66
- type="button"
67
- variant="ghost"
68
- size="icon"
69
- className="mt-1 h-8 w-8 shrink-0 text-slate-500 hover:text-slate-800 hover:bg-slate-100"
70
- aria-label="Expand sidebar"
71
- onClick={() => setSidebarCollapsed(false)}
72
- >
73
- <ChevronRight className="h-4 w-4" />
74
- </Button>
75
- </>
76
  ) : (
77
  <>
78
  <div className="h-11 w-11 shrink-0 rounded-2xl bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-200">
@@ -84,16 +72,6 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
84
  </h1>
85
  <p className="text-xs text-slate-500 truncate">CRM Workspace</p>
86
  </div>
87
- <Button
88
- type="button"
89
- variant="ghost"
90
- size="icon"
91
- className="shrink-0 h-9 w-9 text-slate-500 hover:text-slate-800 hover:bg-slate-100"
92
- aria-label="Collapse sidebar"
93
- onClick={() => setSidebarCollapsed(true)}
94
- >
95
- <ChevronLeft className="h-5 w-5" />
96
- </Button>
97
  </>
98
  )}
99
  </div>
@@ -127,11 +105,16 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
127
  <div className="flex min-h-0 flex-1">
128
  <aside
129
  className={cn(
130
- 'hidden md:flex shrink-0 flex-col gap-2 border-r border-slate-200 bg-white py-4 transition-[width] duration-200 ease-out',
131
- sidebarCollapsed ? 'w-16 items-center px-2' : 'w-72 px-4'
132
  )}
133
  >
134
- <nav className={cn('flex w-full flex-col gap-2', sidebarCollapsed && 'items-center')}>
 
 
 
 
 
135
  {NAV_ITEMS.map((item) => {
136
  const Icon = item.icon;
137
  const active = pathMatches(location.pathname, item.href);
@@ -174,6 +157,27 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
174
  );
175
  })}
176
  </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
177
  </aside>
178
 
179
  <div className="min-w-0 flex-1 overflow-auto">
 
58
  )}
59
  >
60
  {sidebarCollapsed ? (
61
+ <div className="h-11 w-11 shrink-0 rounded-2xl bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-200">
62
+ <Zap className="h-5 w-5 text-white" />
63
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
64
  ) : (
65
  <>
66
  <div className="h-11 w-11 shrink-0 rounded-2xl bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-200">
 
72
  </h1>
73
  <p className="text-xs text-slate-500 truncate">CRM Workspace</p>
74
  </div>
 
 
 
 
 
 
 
 
 
 
75
  </>
76
  )}
77
  </div>
 
105
  <div className="flex min-h-0 flex-1">
106
  <aside
107
  className={cn(
108
+ 'hidden md:flex min-h-0 shrink-0 flex-col self-stretch border-r border-slate-200 bg-white py-4 transition-[width] duration-200 ease-out',
109
+ sidebarCollapsed ? 'w-16 items-stretch px-2' : 'w-72 px-4'
110
  )}
111
  >
112
+ <nav
113
+ className={cn(
114
+ 'flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto',
115
+ sidebarCollapsed && 'items-center'
116
+ )}
117
+ >
118
  {NAV_ITEMS.map((item) => {
119
  const Icon = item.icon;
120
  const active = pathMatches(location.pathname, item.href);
 
157
  );
158
  })}
159
  </nav>
160
+ <div
161
+ className={cn(
162
+ 'mt-auto flex shrink-0 border-t border-slate-100 pt-3',
163
+ sidebarCollapsed ? 'justify-center' : 'justify-start'
164
+ )}
165
+ >
166
+ <Button
167
+ type="button"
168
+ variant="ghost"
169
+ size="icon"
170
+ className="h-9 w-9 text-slate-500 hover:text-slate-800 hover:bg-slate-100"
171
+ aria-label={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
172
+ onClick={() => setSidebarCollapsed((c) => !c)}
173
+ >
174
+ {sidebarCollapsed ? (
175
+ <ChevronRight className="h-5 w-5" />
176
+ ) : (
177
+ <ChevronLeft className="h-5 w-5" />
178
+ )}
179
+ </Button>
180
+ </div>
181
  </aside>
182
 
183
  <div className="min-w-0 flex-1 overflow-auto">
frontend/src/pages/Contacts.jsx CHANGED
@@ -569,21 +569,9 @@ export default function Contacts() {
569
 
570
  const filtersBlock = (
571
  <div className="space-y-2 text-xs">
572
- <div className="space-y-2">
573
- <div className="flex items-start gap-1.5 text-slate-600 font-medium leading-snug">
574
- <SlidersHorizontal className="h-3.5 w-3.5 mt-0.5 shrink-0" />
575
- <span>Filters (AND)</span>
576
- </div>
577
- <Button
578
- type="button"
579
- variant="outline"
580
- size="sm"
581
- className="h-8 w-full gap-1 text-xs"
582
- onClick={addFilterRow}
583
- >
584
- <Plus className="h-3.5 w-3.5" />
585
- Add filter
586
- </Button>
587
  </div>
588
  <div className="space-y-2">
589
  {filterRows.map((row) => (
@@ -677,6 +665,16 @@ export default function Contacts() {
677
  </div>
678
  ))}
679
  </div>
 
 
 
 
 
 
 
 
 
 
680
  </div>
681
  );
682
 
 
569
 
570
  const filtersBlock = (
571
  <div className="space-y-2 text-xs">
572
+ <div className="flex items-start gap-1.5 text-slate-600 font-medium leading-snug">
573
+ <SlidersHorizontal className="h-3.5 w-3.5 mt-0.5 shrink-0" />
574
+ <span>Filters (AND)</span>
 
 
 
 
 
 
 
 
 
 
 
 
575
  </div>
576
  <div className="space-y-2">
577
  {filterRows.map((row) => (
 
665
  </div>
666
  ))}
667
  </div>
668
+ <Button
669
+ type="button"
670
+ variant="outline"
671
+ size="sm"
672
+ className="h-8 w-full gap-1 text-xs"
673
+ onClick={addFilterRow}
674
+ >
675
+ <Plus className="h-3.5 w-3.5" />
676
+ Add filter
677
+ </Button>
678
  </div>
679
  );
680