Skip to content

Commit afd5838

Browse files
codebestiacodebestia
authored
Merge pull request #194 from DanielEmmanuel1/work
Work
2 parents ce81319 + 201276e commit afd5838

28 files changed

+1738
-421
lines changed

‎frontend/app/account/[address]/Sidebar.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ const Sidebar = ({
167167
? `fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 transform transition-transform duration-300 z-30 ${
168168
isExpanded ? 'translate-x-0' : '-translate-x-full'
169169
}`
170-
: `fixed top-16 left-0 h-[calc(100vh-4rem)] flex-shrink-0 transition-all duration-300 z-20 ${isExpanded ? 'w-64' : 'w-16'}`
170+
: `fixed top-[5.3rem] left-0 h-[calc(100vh-4rem)] flex-shrink-0 transition-all duration-300 z-20 ${isExpanded ? 'w-64' : 'w-16'}`
171171
} sidebar-bg text-theme border-r border-theme-border sidebar-transition overflow-x-hidden`}
172172
onMouseEnter={() =>
173173
!isMobile && !isUltraWide && !isPinned && setExpanded(true)
@@ -191,26 +191,22 @@ const Sidebar = ({
191191

192192
{/* Logo - Simple and Always Visible */}
193193
<div
194-
className={`flex items-center justify-center flex-shrink-0 ${
195-
isExpanded ? 'py-6 px-4' : 'py-4 px-2'
196-
}`}
194+
className={`flex items-center justify-center flex-shrink-0 py-4 px-2`}
197195
>
198196
<Image
199197
src={logo}
200198
alt="Spherre Logo"
201199
width={40}
202200
height={40}
203201
priority
204-
className={`transition-all duration-300 ${
205-
isExpanded ? 'w-10 h-10' : 'w-8 h-8'
206-
}`}
202+
className={`transition-all duration-300 w-8 h-8`}
207203
/>
208204
</div>
209205

210206
{/* Menu Items - Fill remaining space between logo and profile */}
211207
<div className="flex-1 min-h-0 flex flex-col">
212208
<ul
213-
className={`flex flex-col ${isExpanded ? 'gap-5' : 'gap-6 mt-3'} text-[16px] flex-1 overflow-y-auto overflow-x-hidden`}
209+
className={`flex flex-col gap-5 text-[16px] flex-1 overflow-y-auto overflow-x-hidden`}
214210
>
215211
{navItems.map((item, index) => (
216212
<li
@@ -223,7 +219,7 @@ const Sidebar = ({
223219
{isExpanded ? (
224220
<Link
225221
href={item?.route ?? `/account/${accountAddress}/`}
226-
className={`flex items-center p-3 rounded-lg mx-2 sidebar-transition sidebar-menu-item ${
222+
className={`flex items-center p-2 rounded-lg mx-2 sidebar-transition sidebar-menu-item ${
227223
selectedPage === item.name
228224
? 'active'
229225
: 'text-theme-secondary hover:text-theme'
@@ -234,8 +230,8 @@ const Sidebar = ({
234230
<Image
235231
src={item.icon}
236232
alt={item.name}
237-
width={24}
238-
height={24}
233+
width={20}
234+
height={20}
239235
className="sidebar-transition"
240236
/>
241237
{item.notification && (
@@ -244,7 +240,7 @@ const Sidebar = ({
244240
</span>
245241
)}
246242
</div>
247-
<span className="truncate">{item.name}</span>
243+
<span className="truncate text-sm">{item.name}</span>
248244
{item.comingSoon && (
249245
<span className="text-[10px] text-green-400 border-[0.5px] bg-green-400/10 border-green-400/40 px-2 py-[0.5px] rounded-xl ml-auto flex-shrink-0">
250246
Coming soon
@@ -255,18 +251,23 @@ const Sidebar = ({
255251
<Tooltip content={item.name}>
256252
<Link
257253
href={item?.route ?? `/${accountAddress}/`}
258-
className={`flex items-center justify-center mx-auto rounded-lg sidebar-transition sidebar-menu-item ${
254+
className={`flex flex-col items-center justify-center mx-auto rounded-lg sidebar-transition sidebar-menu-item ${
259255
selectedPage === item.name
260256
? 'active'
261257
: 'text-theme-secondary hover:text-theme'
262258
}`}
263259
style={{
264-
width: '32px',
265-
height: '32px',
260+
width: '40px',
261+
height: '40px',
262+
paddingTop: '6px',
263+
paddingBottom: '6px',
266264
}}
267265
onClick={() => isMobile && setSidebarExpanded(false)}
268266
>
269-
<div className="relative flex items-center justify-center">
267+
<div
268+
className="relative flex items-center justify-center"
269+
style={{ minHeight: '24px' }}
270+
>
270271
<Image
271272
src={item.icon}
272273
alt={item.name}
@@ -290,9 +291,7 @@ const Sidebar = ({
290291

291292
{/* Pin/Unpin Toggle Button - Only visible on desktop (not mobile or ultra-wide) */}
292293
{!isMobile && !isUltraWide && (
293-
<div
294-
className={`mb-40 ${isExpanded ? 'px-3' : 'flex justify-center'}`}
295-
>
294+
<div className={`${isExpanded ? '' : 'hidden'}`}>
296295
<button
297296
onClick={() => setIsPinned(!isPinned)}
298297
className={`p-2 rounded-lg transition-colors duration-200 hover:bg-theme-tertiary ${

‎frontend/app/account/[address]/members/components/member-card.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ function MemberCardBase({
127127
const isLoading = perms.isLoading
128128

129129
useEffect(() => {
130-
if (perms.permissions.length > 0) {
130+
if (Array.isArray(perms.permissions) && perms.permissions.length > 0) {
131131
setCurrentMember({ ...member, permissions: perms.permissions })
132132
}
133133
}, [perms.permissions, member])
@@ -343,17 +343,19 @@ function MemberCardBase({
343343
<p className="text-theme-secondary text-xs sm:text-[14px] font-semibold">
344344
Roles:
345345
</p>
346-
{(perms.permissions || []).map((role) => {
347-
const roleStyle = roleStyleMap[role] ?? ''
348-
return (
349-
<div
350-
key={role}
351-
className={`flex items-center justify-center text-[10px] sm:text-[12px] px-1 sm:px-2 py-[1px] sm:py-[2px] border-[1px] rounded-3xl ${roleStyle}`}
352-
>
353-
{role}
354-
</div>
355-
)
356-
})}
346+
{(Array.isArray(perms.permissions) ? perms.permissions : []).map(
347+
(role) => {
348+
const roleStyle = roleStyleMap[role] ?? ''
349+
return (
350+
<div
351+
key={role}
352+
className={`flex items-center justify-center text-[10px] sm:text-[12px] px-1 sm:px-2 py-[1px] sm:py-[2px] border-[1px] rounded-3xl ${roleStyle}`}
353+
>
354+
{role}
355+
</div>
356+
)
357+
},
358+
)}
357359
</div>
358360

359361
{/* Date added section */}

‎frontend/app/account/[address]/members/components/member-details-modal.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -276,23 +276,25 @@ export default function MemberDetailsModal({
276276
<div className="flex flex-wrap items-center gap-3 mb-5">
277277
<div className="text-sm text-theme-secondary">Roles:</div>
278278
<div className="flex items-center gap-2 flex-wrap">
279-
{(perms.permissions || []).map((role) => {
280-
let styles = 'border-theme-border text-theme-secondary'
281-
if (role === 'Voter')
282-
styles = 'bg-[#FF7BE9]/10 text-[#FF7BE9] border-[#FF7BE9]'
283-
if (role === 'Proposer')
284-
styles = 'bg-[#FF8A25]/10 text-[#FF8A25] border-[#FF8A25]'
285-
if (role === 'Executor')
286-
styles = 'bg-[#19B360]/10 text-[#19B360] border-[#19B360]'
287-
return (
288-
<span
289-
key={role}
290-
className={`text-xs px-2 py-0.5 rounded-2xl border ${styles}`}
291-
>
292-
{role}
293-
</span>
294-
)
295-
})}
279+
{(Array.isArray(perms.permissions) ? perms.permissions : []).map(
280+
(role) => {
281+
let styles = 'border-theme-border text-theme-secondary'
282+
if (role === 'Voter')
283+
styles = 'bg-[#FF7BE9]/10 text-[#FF7BE9] border-[#FF7BE9]'
284+
if (role === 'Proposer')
285+
styles = 'bg-[#FF8A25]/10 text-[#FF8A25] border-[#FF8A25]'
286+
if (role === 'Executor')
287+
styles = 'bg-[#19B360]/10 text-[#19B360] border-[#19B360]'
288+
return (
289+
<span
290+
key={role}
291+
className={`text-xs px-2 py-0.5 rounded-2xl border ${styles}`}
292+
>
293+
{role}
294+
</span>
295+
)
296+
},
297+
)}
296298
</div>
297299
</div>
298300

‎frontend/app/account/[address]/members/page.tsx‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ interface Member {
3535
permissionMask: number
3636
}
3737

38+
const ZERO_ADDRESS =
39+
'0x0000000000000000000000000000000000000000000000000000000000000000'
40+
3841
const Members = () => {
3942
useTheme()
4043
const router = useRouter()
@@ -91,38 +94,44 @@ const Members = () => {
9194
const transformedMembers = useMemo(() => {
9295
if (!contractMembers || contractMembers.length === 0) return []
9396

94-
return contractMembers.map((memberFelt: string, index: number) => {
95-
let memberAddress: string
96-
try {
97-
memberAddress = feltToAddress(memberFelt)
98-
} catch (error) {
99-
console.warn('Failed to convert felt to address:', memberFelt, error)
100-
memberAddress = memberFelt
101-
}
102-
103-
const truncatedAddress =
104-
memberAddress.length > 10
105-
? `${memberAddress.slice(0, 6)}...${memberAddress.slice(-4)}`
106-
: memberAddress
107-
108-
// Placeholder roles/mask/date for layout; MemberCard replaces with real data
109-
const roles: string[] = []
110-
const permissionMask = ALL_PERMISSIONS_MASK
111-
const avatarIndex = (index % 3) + 1
112-
const image = `/member${avatarIndex}.svg`
113-
114-
return {
115-
id: index + 1,
116-
name: `Member ${index + 1}`,
117-
address: truncatedAddress,
118-
fullAddress: memberAddress,
119-
roles,
120-
dateAdded: '—',
121-
image,
122-
permissions: roles,
123-
permissionMask,
124-
} as Member
125-
})
97+
return contractMembers
98+
.map((memberFelt: string, index: number) => {
99+
let memberAddress: string
100+
try {
101+
memberAddress = feltToAddress(memberFelt)
102+
} catch (error) {
103+
console.warn('Failed to convert felt to address:', memberFelt, error)
104+
memberAddress = memberFelt
105+
}
106+
107+
if (memberAddress.toLowerCase() === ZERO_ADDRESS) {
108+
return null
109+
}
110+
111+
const truncatedAddress =
112+
memberAddress.length > 10
113+
? `${memberAddress.slice(0, 6)}...${memberAddress.slice(-4)}`
114+
: memberAddress
115+
116+
// Placeholder roles/mask/date for layout; MemberCard replaces with real data
117+
const roles: string[] = []
118+
const permissionMask = ALL_PERMISSIONS_MASK
119+
const avatarIndex = (index % 3) + 1
120+
const image = `/member${avatarIndex}.svg`
121+
122+
return {
123+
id: index + 1,
124+
name: `Member ${index + 1}`,
125+
address: truncatedAddress,
126+
fullAddress: memberAddress,
127+
roles,
128+
dateAdded: '—',
129+
image,
130+
permissions: roles,
131+
permissionMask,
132+
} as Member
133+
})
134+
.filter((member): member is Member => member !== null)
126135
}, [contractMembers])
127136

128137
// Update members when transformed members change

0 commit comments

Comments
 (0)