Skip to content

Commit b73f510

Browse files
Sahil2004Sahil2004
committed
chore: formatting in pictique.
1 parent ca607eb commit b73f510

File tree

4 files changed

+113
-77
lines changed

4 files changed

+113
-77
lines changed

‎platforms/pictique/src/lib/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,4 +77,4 @@ export type GroupInfo = {
7777
id: string;
7878
name: string;
7979
avatar: string;
80-
};
80+
};

‎platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte‎

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import Settings from '$lib/icons/Settings.svelte';
88
import { clickOutside } from '$lib/utils';
99
import { Pen01FreeIcons } from '@hugeicons/core-free-icons';
10-
import {HugeiconsIcon} from "@hugeicons/svelte"
10+
import { HugeiconsIcon } from '@hugeicons/svelte';
1111
1212
let messagesContainer: HTMLDivElement;
1313
let messageValue = $state('');
@@ -20,9 +20,19 @@
2020
avatar: 'https://i.pravatar.cc/150?img=15',
2121
description: 'Discuss all design-related tasks and updates here.',
2222
members: [
23-
{ id: 'user-1', name: 'Alice', avatar: 'https://i.pravatar.cc/150?img=1', role: 'owner' },
23+
{
24+
id: 'user-1',
25+
name: 'Alice',
26+
avatar: 'https://i.pravatar.cc/150?img=1',
27+
role: 'owner'
28+
},
2429
{ id: 'user-2', name: 'Bob', avatar: 'https://i.pravatar.cc/150?img=2', role: 'admin' },
25-
{ id: 'user-3', name: 'Charlie', avatar: 'https://i.pravatar.cc/150?img=3', role: 'member' }
30+
{
31+
id: 'user-3',
32+
name: 'Charlie',
33+
avatar: 'https://i.pravatar.cc/150?img=3',
34+
role: 'member'
35+
}
2636
]
2737
});
2838
@@ -75,7 +85,7 @@
7585
let groupImageDataUrl = $state(group.avatar);
7686
let groupImageFiles = $state<FileList | undefined>();
7787
78-
$effect(()=> {
88+
$effect(() => {
7989
if (groupImageFiles?.[0]) {
8090
const file = groupImageFiles[0];
8191
const reader = new FileReader();
@@ -86,8 +96,8 @@
8696
};
8797
reader.readAsDataURL(file);
8898
}
89-
})
90-
99+
});
100+
91101
function saveGroupInfo() {
92102
group.name = groupName;
93103
group.description = groupDescription;
@@ -99,7 +109,9 @@
99109
const canEdit = currentUser?.role === 'admin' || currentUser?.role === 'owner';
100110
</script>
101111

102-
<section class="flex flex-col md:flex-row items-center justify-between gap-4 px-2 md:px-4 py-3 border-b border-gray-200">
112+
<section
113+
class="flex flex-col items-center justify-between gap-4 border-b border-gray-200 px-2 py-3 md:flex-row md:px-4"
114+
>
103115
<div class="flex items-center gap-4">
104116
<Avatar src={group.avatar} />
105117
<div>
@@ -120,15 +132,15 @@
120132
</Button>
121133
<button
122134
onclick={() => (openEditDialog = true)}
123-
class="border border-brand-burnt-orange-900 rounded-full p-2"
135+
class="border-brand-burnt-orange-900 rounded-full border p-2"
124136
>
125137
<Settings size="24px" color="var(--color-brand-burnt-orange)" />
126138
</button>
127139
</div>
128140
</section>
129141

130142
<section class="chat relative px-0">
131-
<div class="h-[calc(100vh-300px)] mt-4 overflow-auto" bind:this={messagesContainer}>
143+
<div class="mt-4 h-[calc(100vh-300px)] overflow-auto" bind:this={messagesContainer}>
132144
{#each messages as msg (msg.id)}
133145
<ChatMessage
134146
isOwn={msg.isOwn}
@@ -152,14 +164,14 @@
152164
open={openEditDialog}
153165
use:clickOutside={() => (openEditDialog = false)}
154166
onclose={() => (openEditDialog = false)}
155-
class="w-[90vw] md:max-w-[30vw] z-50 absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-4 border border-gray-400 rounded-3xl bg-white shadow-xl"
167+
class="absolute start-[50%] top-[50%] z-50 w-[90vw] translate-x-[-50%] translate-y-[-50%] rounded-3xl border border-gray-400 bg-white p-4 shadow-xl md:max-w-[30vw]"
156168
>
157169
<div class="flex flex-col gap-6">
158-
<div class="relative w-[96px] h-[96px] self-center">
170+
<div class="relative h-[96px] w-[96px] self-center">
159171
<img
160172
src={groupImageDataUrl || '/images/avatar-placeholder.png'}
161173
alt="Group Avatar"
162-
class="w-full h-full object-cover rounded-full border border-gray-300"
174+
class="h-full w-full rounded-full border border-gray-300 object-cover"
163175
/>
164176
{#if canEdit}
165177
<input
@@ -174,8 +186,11 @@
174186
}
175187
}}
176188
/>
177-
<label for="group-avatar-input" class="absolute bottom-0 right-0 bg-brand-burnt-orange border border-brand-burnt-orange rounded-full p-1 shadow cursor-pointer">
178-
<HugeiconsIcon icon={Pen01FreeIcons} color="white"/>
189+
<label
190+
for="group-avatar-input"
191+
class="bg-brand-burnt-orange border-brand-burnt-orange absolute right-0 bottom-0 cursor-pointer rounded-full border p-1 shadow"
192+
>
193+
<HugeiconsIcon icon={Pen01FreeIcons} color="white" />
179194
</label>
180195
{/if}
181196
</div>
@@ -193,8 +208,13 @@
193208
<Label>Description</Label>
194209
{#if canEdit}
195210
<!-- svelte-ignore element_invalid_self_closing_tag -->
196-
<textarea rows="2"
197-
maxlength="260" placeholder="Edit group description" class="w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent" bind:value={groupDescription} />
211+
<textarea
212+
rows="2"
213+
maxlength="260"
214+
placeholder="Edit group description"
215+
class="bg-grey text-black-800 font-geist placeholder:text-black-600 invalid:border-red invalid:text-red focus:invalid:text-black-800 w-full rounded-4xl border border-transparent px-6 py-3.5 text-[15px] font-normal outline-0 focus:invalid:border-transparent"
216+
bind:value={groupDescription}
217+
/>
198218
{:else}
199219
<p class="text-gray-700">{group.description}</p>
200220
{/if}
@@ -203,11 +223,16 @@
203223
<hr class="text-grey" />
204224

205225
<div class="flex items-center gap-2">
206-
<Button size="sm" variant="primary" callback={() => {(openEditDialog = false)}}>Cancel</Button>
226+
<Button
227+
size="sm"
228+
variant="primary"
229+
callback={() => {
230+
openEditDialog = false;
231+
}}>Cancel</Button
232+
>
207233
{#if canEdit}
208234
<Button size="sm" variant="secondary" callback={saveGroupInfo}>Save Changes</Button>
209235
{/if}
210236
</div>
211237
</div>
212238
</dialog>
213-

‎platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte‎

Lines changed: 68 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,27 @@
55
66
let groupId = page.params.id;
77
8-
let userId = 'user-1';
8+
let userId = 'user-1';
99
1010
let group = $state({
1111
id: groupId,
1212
name: 'Design Team',
1313
avatar: 'https://i.pravatar.cc/150?img=15',
1414
description: 'Discuss all design-related tasks and updates here.',
1515
members: [
16-
{ id: 'user-1', name: 'Alice', avatar: 'https://i.pravatar.cc/150?img=1', role: 'owner' },
16+
{
17+
id: 'user-1',
18+
name: 'Alice',
19+
avatar: 'https://i.pravatar.cc/150?img=1',
20+
role: 'owner'
21+
},
1722
{ id: 'user-2', name: 'Bob', avatar: 'https://i.pravatar.cc/150?img=2', role: 'admin' },
18-
{ id: 'user-3', name: 'Charlie', avatar: 'https://i.pravatar.cc/150?img=3', role: 'member' }
23+
{
24+
id: 'user-3',
25+
name: 'Charlie',
26+
avatar: 'https://i.pravatar.cc/150?img=3',
27+
role: 'member'
28+
}
1929
]
2030
});
2131
@@ -25,7 +35,7 @@
2535
return group.members.find((m) => m.id === userId)?.role;
2636
}
2737
28-
function canManage(member: { id?: string; name?: string; avatar?: string; role: any; }) {
38+
function canManage(member: { id?: string; name?: string; avatar?: string; role: any }) {
2939
const current = currentUserRole();
3040
if (member.role === 'owner') return false;
3141
if (current === 'owner') return true;
@@ -58,72 +68,73 @@
5868
}
5969
</script>
6070

61-
<section class="mx-auto w-full h-[80vh] flex flex-col justify-between">
71+
<section class="mx-auto flex h-[80vh] w-full flex-col justify-between">
6272
<div>
63-
<div class="flex items-center gap-4 mb-6">
64-
<Avatar src={group.avatar} />
65-
<div>
66-
<h1 class="text-xl font-semibold">{group.name}</h1>
67-
<p class="text-sm text-gray-600">{group.description}</p>
73+
<div class="mb-6 flex items-center gap-4">
74+
<Avatar src={group.avatar} />
75+
<div>
76+
<h1 class="text-xl font-semibold">{group.name}</h1>
77+
<p class="text-sm text-gray-600">{group.description}</p>
78+
</div>
6879
</div>
69-
</div>
7080

71-
<div class="space-y-6">
72-
{#each group.members as member (member.id)}
73-
<div class="flex items-center justify-between">
74-
<div class="flex items-center gap-3">
75-
<Avatar src={member.avatar} size="sm" />
76-
<div>
77-
<p class="text-sm font-medium">{member.name}</p>
78-
{#if member.role !== 'member'}
79-
<p class="text-xs text-gray-500">{member.role}</p>
80-
{/if}
81+
<div class="space-y-6">
82+
{#each group.members as member (member.id)}
83+
<div class="flex items-center justify-between">
84+
<div class="flex items-center gap-3">
85+
<Avatar src={member.avatar} size="sm" />
86+
<div>
87+
<p class="text-sm font-medium">{member.name}</p>
88+
{#if member.role !== 'member'}
89+
<p class="text-xs text-gray-500">{member.role}</p>
90+
{/if}
91+
</div>
8192
</div>
82-
</div>
8393

84-
{#if canManage(member)}
85-
<div class="relative" use:clickOutside={() => (openMenuId = null)}>
86-
<button
87-
onclick={() => (openMenuId = openMenuId === member.id ? null : member.id)}
88-
>
89-
⋮
90-
</button>
94+
{#if canManage(member)}
95+
<div class="relative" use:clickOutside={() => (openMenuId = null)}>
96+
<button
97+
onclick={() =>
98+
(openMenuId = openMenuId === member.id ? null : member.id)}
99+
>
100+
⋮
101+
</button>
91102

92-
{#if openMenuId === member.id}
93-
<div class="absolute right-0 mt-2 w-40 rounded-md bg-white shadow-lg border z-10">
94-
<!-- svelte-ignore a11y_click_events_have_key_events -->
95-
<ul class="text-sm">
96-
{#if currentUserRole() === 'owner' && member.role === 'member'}
103+
{#if openMenuId === member.id}
104+
<div
105+
class="absolute right-0 z-10 mt-2 w-40 rounded-md border bg-white shadow-lg"
106+
>
107+
<!-- svelte-ignore a11y_click_events_have_key_events -->
108+
<ul class="text-sm">
109+
{#if currentUserRole() === 'owner' && member.role === 'member'}
110+
<!-- svelte-ignore a11y_click_events_have_key_events -->
111+
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
112+
<li
113+
class="cursor-pointer px-4 py-2 hover:bg-gray-100"
114+
onclick={() => promoteToAdmin(member.id)}
115+
>
116+
Make admin
117+
</li>
118+
{/if}
97119
<!-- svelte-ignore a11y_click_events_have_key_events -->
98120
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
99121
<li
100-
class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
101-
onclick={() => promoteToAdmin(member.id)}
122+
class="cursor-pointer px-4 py-2 text-red-600 hover:bg-red-50"
123+
onclick={() => removeMember(member.id)}
102124
>
103-
Make admin
125+
Remove member
104126
</li>
105-
{/if}
106-
<!-- svelte-ignore a11y_click_events_have_key_events -->
107-
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
108-
<li
109-
class="px-4 py-2 hover:bg-red-50 text-red-600 cursor-pointer"
110-
onclick={() => removeMember(member.id)}
111-
>
112-
Remove member
113-
</li>
114-
</ul>
115-
</div>
116-
{/if}
117-
</div>
118-
{/if}
119-
</div>
120-
{/each}
121-
</div>
127+
</ul>
128+
</div>
129+
{/if}
130+
</div>
131+
{/if}
132+
</div>
133+
{/each}
134+
</div>
122135
</div>
123136

124137
<div class="flex justify-center">
125-
<Button size="sm" variant="secondary" class="mt-6" callback={addMember}>
126-
Add Member
127-
</Button>
138+
<Button size="sm" variant="secondary" class="mt-6" callback={addMember}>Add Member</Button>
128139
</div>
129140
</section>

‎platforms/pictique/src/routes/(protected)/messages/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125
{/if}
126126

127127
{#if groups.length > 0}
128-
<h3 class="text-md mb-2 mt-6 font-semibold text-gray-700">Groups</h3>
128+
<h3 class="text-md mt-6 mb-2 font-semibold text-gray-700">Groups</h3>
129129
{#each groups as group}
130130
<Group
131131
name={group.name || 'New Group'}

0 commit comments

Comments
 (0)