Skip to content

Commit c518b49

Browse files
ashwin31ashwin31
committed
feat: refactor status and priority icon rendering for improved consistency across task and user components
1 parent f9f5192 commit c518b49

File tree

7 files changed

+95
-53
lines changed

7 files changed

+95
-53
lines changed

‎src/routes/(app)/app/cases/[caseId]/+page.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@
3131
default: return AlertCircle;
3232
}
3333
}
34+
35+
// Reactive declarations for components
36+
$: StatusIcon = getStatusIcon(data.caseItem.status);
3437
</script>
3538

3639
<section class="min-h-screen bg-gray-50 dark:bg-gray-900">
@@ -185,7 +188,7 @@
185188
<div>
186189
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</p>
187190
<div class="flex items-center gap-2">
188-
<svelte:component this={getStatusIcon(data.caseItem.status)} class="w-4 h-4" />
191+
<StatusIcon class="w-4 h-4" />
189192
<span class="px-3 py-1 rounded-full text-sm font-medium border {getStatusColor(data.caseItem.status)}">
190193
{data.caseItem.status.replace('_', ' ')}
191194
</span>

‎src/routes/(app)/app/leads/open/+page.svelte‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,11 @@
392392
</td>
393393
<td class="px-4 py-4">
394394
<div class="flex items-center gap-2">
395-
<svelte:component this={statusConfig.icon} class="w-4 h-4 {statusConfig.color.split(' ')[1]} flex-shrink-0" />
395+
{#snippet statusIcon(config)}
396+
{@const StatusIcon = config.icon}
397+
<StatusIcon class="w-4 h-4 {config.color.split(' ')[1]} flex-shrink-0" />
398+
{/snippet}
399+
{@render statusIcon(statusConfig)}
396400
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border {statusConfig.color} whitespace-nowrap">
397401
{lead.status}
398402
</span>
@@ -457,7 +461,11 @@
457461
</div>
458462
</div>
459463
<div class="flex items-center gap-2">
460-
<svelte:component this={statusConfig.icon} class="w-4 h-4 {statusConfig.color.split(' ')[1]}" />
464+
{#snippet statusIcon(config)}
465+
{@const StatusIcon = config.icon}
466+
<StatusIcon class="w-4 h-4 {config.color.split(' ')[1]}" />
467+
{/snippet}
468+
{@render statusIcon(statusConfig)}
461469
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border {statusConfig.color}">
462470
{lead.status}
463471
</span>

‎src/routes/(app)/app/opportunities/[opportunityId]/edit/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
7171
<!-- Form Card -->
7272
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
73-
<form on:submit={handleSubmit} class="p-6 sm:p-8">
73+
<form onsubmit={handleSubmit} class="p-6 sm:p-8">
7474
<!-- Basic Information Section -->
7575
<div class="mb-8">
7676
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">

‎src/routes/(app)/app/tasks/calendar/+page.svelte‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -212,10 +212,13 @@
212212
>
213213
<div class="flex items-start justify-between mb-2">
214214
<h4 class="font-medium text-gray-900 dark:text-white overflow-hidden text-ellipsis" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">{task.title}</h4>
215-
<svelte:component
216-
this={getStatusIcon(task.status)}
217-
class="w-4 h-4 text-gray-400 dark:text-gray-500 flex-shrink-0 ml-2"
218-
/>
215+
{#snippet statusIcon(status)}
216+
{@const StatusIcon = getStatusIcon(status)}
217+
<StatusIcon
218+
class="w-4 h-4 text-gray-400 dark:text-gray-500 flex-shrink-0 ml-2"
219+
/>
220+
{/snippet}
221+
{@render statusIcon(task.status)}
219222
</div>
220223
221224
{#if task.description}
@@ -231,7 +234,11 @@
231234
{task.priority === 'High' ? 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300' :
232235
task.priority === 'Medium' ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300' :
233236
'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300'}">
234-
<svelte:component this={getPriorityIcon(task.priority)} class="w-3 h-3" />
237+
{#snippet priorityIcon(priority)}
238+
{@const PriorityIcon = getPriorityIcon(priority)}
239+
<PriorityIcon class="w-3 h-3" />
240+
{/snippet}
241+
{@render priorityIcon(task.priority)}
235242
{task.priority}
236243
</span>
237244
</div>

‎src/routes/(app)/app/tasks/list/+page.svelte‎

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -118,17 +118,20 @@
118118
</td>
119119
<td class="px-6 py-4">
120120
<div class="flex items-center gap-2">
121-
<svelte:component
122-
this={getStatusIcon(task.status)}
123-
size={16}
124-
class={
125-
task.status === 'Completed' ? 'text-green-500 dark:text-green-400' :
126-
task.status === 'In Progress' ? 'text-yellow-500 dark:text-yellow-400' :
127-
task.status === 'Not Started' ? 'text-gray-400 dark:text-gray-500' :
128-
task.status === 'Waiting on someone else' ? 'text-purple-500 dark:text-purple-400' :
129-
task.status === 'Deferred' ? 'text-pink-500 dark:text-pink-400' : 'text-gray-400 dark:text-gray-500'
130-
}
131-
/>
121+
{#snippet statusIcon(status)}
122+
{@const StatusIcon = getStatusIcon(status)}
123+
<StatusIcon
124+
size={16}
125+
class={
126+
status === 'Completed' ? 'text-green-500 dark:text-green-400' :
127+
status === 'In Progress' ? 'text-yellow-500 dark:text-yellow-400' :
128+
status === 'Not Started' ? 'text-gray-400 dark:text-gray-500' :
129+
status === 'Waiting on someone else' ? 'text-purple-500 dark:text-purple-400' :
130+
status === 'Deferred' ? 'text-pink-500 dark:text-pink-400' : 'text-gray-400 dark:text-gray-500'
131+
}
132+
/>
133+
{/snippet}
134+
{@render statusIcon(task.status)}
132135
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
133136
{task.status === 'Completed' ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' : ''}
134137
{task.status === 'In Progress' ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300' : ''}
@@ -142,15 +145,18 @@
142145
</td>
143146
<td class="px-6 py-4">
144147
<div class="flex items-center gap-2">
145-
<svelte:component
146-
this={getPriorityIcon(task.priority)}
147-
size={16}
148-
class={
149-
task.priority === 'High' ? 'text-red-500 dark:text-red-400' :
150-
task.priority === 'Normal' ? 'text-blue-500 dark:text-blue-400' :
151-
task.priority === 'Low' ? 'text-gray-400 dark:text-gray-500' : 'text-gray-400 dark:text-gray-500'
152-
}
153-
/>
148+
{#snippet priorityIcon(priority)}
149+
{@const PriorityIcon = getPriorityIcon(priority)}
150+
<PriorityIcon
151+
size={16}
152+
class={
153+
priority === 'High' ? 'text-red-500 dark:text-red-400' :
154+
priority === 'Normal' ? 'text-blue-500 dark:text-blue-400' :
155+
priority === 'Low' ? 'text-gray-400 dark:text-gray-500' : 'text-gray-400 dark:text-gray-500'
156+
}
157+
/>
158+
{/snippet}
159+
{@render priorityIcon(task.priority)}
154160
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
155161
{task.priority === 'High' ? 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300' : ''}
156162
{task.priority === 'Normal' ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300' : ''}
@@ -235,17 +241,20 @@
235241

236242
<div class="flex flex-wrap gap-2 mb-3">
237243
<div class="flex items-center gap-1">
238-
<svelte:component
239-
this={getStatusIcon(task.status)}
240-
size={14}
241-
class={
242-
task.status === 'Completed' ? 'text-green-500 dark:text-green-400' :
243-
task.status === 'In Progress' ? 'text-yellow-500 dark:text-yellow-400' :
244-
task.status === 'Not Started' ? 'text-gray-400 dark:text-gray-500' :
245-
task.status === 'Waiting on someone else' ? 'text-purple-500 dark:text-purple-400' :
246-
task.status === 'Deferred' ? 'text-pink-500 dark:text-pink-400' : 'text-gray-400 dark:text-gray-500'
247-
}
248-
/>
244+
{#snippet statusIconCard(status)}
245+
{@const StatusIcon = getStatusIcon(status)}
246+
<StatusIcon
247+
size={14}
248+
class={
249+
status === 'Completed' ? 'text-green-500 dark:text-green-400' :
250+
status === 'In Progress' ? 'text-yellow-500 dark:text-yellow-400' :
251+
status === 'Not Started' ? 'text-gray-400 dark:text-gray-500' :
252+
status === 'Waiting on someone else' ? 'text-purple-500 dark:text-purple-400' :
253+
status === 'Deferred' ? 'text-pink-500 dark:text-pink-400' : 'text-gray-400 dark:text-gray-500'
254+
}
255+
/>
256+
{/snippet}
257+
{@render statusIconCard(task.status)}
249258
<span class="text-xs px-2 py-1 rounded-full font-medium
250259
{task.status === 'Completed' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' : ''}
251260
{task.status === 'In Progress' ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300' : ''}
@@ -258,15 +267,18 @@
258267
</div>
259268

260269
<div class="flex items-center gap-1">
261-
<svelte:component
262-
this={getPriorityIcon(task.priority)}
263-
size={14}
264-
class={
265-
task.priority === 'High' ? 'text-red-500 dark:text-red-400' :
266-
task.priority === 'Normal' ? 'text-blue-500 dark:text-blue-400' :
267-
task.priority === 'Low' ? 'text-gray-400 dark:text-gray-500' : 'text-gray-400 dark:text-gray-500'
268-
}
269-
/>
270+
{#snippet priorityIconCard(priority)}
271+
{@const PriorityIcon = getPriorityIcon(priority)}
272+
<PriorityIcon
273+
size={14}
274+
class={
275+
priority === 'High' ? 'text-red-500 dark:text-red-400' :
276+
priority === 'Normal' ? 'text-blue-500 dark:text-blue-400' :
277+
priority === 'Low' ? 'text-gray-400 dark:text-gray-500' : 'text-gray-400 dark:text-gray-500'
278+
}
279+
/>
280+
{/snippet}
281+
{@render priorityIconCard(task.priority)}
270282
<span class="text-xs px-2 py-1 rounded-full font-medium
271283
{task.priority === 'High' ? 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300' : ''}
272284
{task.priority === 'Normal' ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ''}

‎src/routes/(app)/app/users/+page.svelte‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,11 @@
306306
<td class="px-6 py-4 whitespace-nowrap">
307307
{#if user.isSelf}
308308
<span class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium {roleColors[user.role]}">
309-
<svelte:component this={roleIcons[user.role] || User} class="h-3.5 w-3.5" />
309+
{#snippet roleIcon(role)}
310+
{@const RoleIcon = roleIcons[role] || User}
311+
<RoleIcon class="h-3.5 w-3.5" />
312+
{/snippet}
313+
{@render roleIcon(user.role)}
310314
{user.role}
311315
</span>
312316
{:else}
@@ -348,7 +352,11 @@
348352
onclick={() => { users[i].editingRole = true }}
349353
title="Click to edit role"
350354
>
351-
<svelte:component this={roleIcons[user.role] || User} class="h-3.5 w-3.5" />
355+
{#snippet roleIcon(role)}
356+
{@const RoleIcon = roleIcons[role] || User}
357+
<RoleIcon class="h-3.5 w-3.5" />
358+
{/snippet}
359+
{@render roleIcon(user.role)}
352360
{user.role}
353361
<Edit class="h-3 w-3" />
354362
</button>
@@ -366,7 +374,7 @@
366374
method="POST"
367375
action="?/remove_user"
368376
class="inline"
369-
on:submit={(e) => {
377+
onsubmit={(e) => {
370378
if (!confirm('Remove this user from the organization?')) {
371379
e.preventDefault();
372380
}

‎src/routes/(no-layout)/login/+page.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,11 @@
106106
<div class="flex items-center p-3 bg-white/10 backdrop-blur-sm rounded-xl border border-white/20"
107107
in:fly="{{ y: 30, duration: 600, delay: 600 + (i * 100) }}">
108108
<div class="rounded-lg bg-white/20 p-2 mr-3">
109-
<svelte:component this={feature.icon} class="w-5 h-5" />
109+
{#snippet featureIcon(icon)}
110+
{@const FeatureIcon = icon}
111+
<FeatureIcon class="w-5 h-5" />
112+
{/snippet}
113+
{@render featureIcon(feature.icon)}
110114
</div>
111115
<span class="text-sm font-medium">{feature.text}</span>
112116
</div>

0 commit comments

Comments
 (0)