From 4999836a57078f47a2f15bbfdcc46871c231d671 Mon Sep 17 00:00:00 2001 From: AlacrisDevs Date: Sat, 7 Feb 2026 11:23:49 +0200 Subject: [PATCH] ui: overhaul org settings components (General, Members, Roles, Integrations) - SettingsGeneral: border-based cards, compact danger zone with error border - SettingsMembers: Avatar component, icon buttons, border-based list - SettingsRoles: icon buttons for edit/delete, smaller permission badges - SettingsIntegrations: compact integration cards, Material Symbols for coming-soon - Removed unused Card imports from all settings components - svelte-check: 0 errors, vitest: 112/112 passed --- .../settings/SettingsGeneral.svelte | 145 ++++++----- .../settings/SettingsIntegrations.svelte | 238 ++++++------------ .../settings/SettingsMembers.svelte | 151 +++++------ .../components/settings/SettingsRoles.svelte | 118 ++++----- 4 files changed, 261 insertions(+), 391 deletions(-) diff --git a/src/lib/components/settings/SettingsGeneral.svelte b/src/lib/components/settings/SettingsGeneral.svelte index a3881c5..644f12a 100644 --- a/src/lib/components/settings/SettingsGeneral.svelte +++ b/src/lib/components/settings/SettingsGeneral.svelte @@ -124,93 +124,88 @@ } -
+
-

Organization details

+
+

Organization details

-
-
- -
- Avatar -
- -
- + +
+ Avatar +
+ +
+ + + {#if avatarUrl} - {#if avatarUrl} - - {/if} -
+ {/if}
- - +
+ + +
+ +
+
+ + + {#if isOwner} +
+

Danger Zone

+

+ Permanently delete this organization and all its data. +

- Delete Organization
+ {/if} - - {#if isOwner} -
-

Danger Zone

-

- Permanently delete this organization and all its data. -

-
- -
+ + {#if !isOwner} +
+

Leave Organization

+

+ Leave this organization. You will need to be re-invited to rejoin. +

+
+
- {/if} - - - {#if !isOwner} -
-

- Leave Organization -

-

- Leave this organization. You will need to be re-invited to - rejoin. -

-
- -
-
- {/if} -
+
+ {/if}
diff --git a/src/lib/components/settings/SettingsIntegrations.svelte b/src/lib/components/settings/SettingsIntegrations.svelte index ee12a1c..91d5702 100644 --- a/src/lib/components/settings/SettingsIntegrations.svelte +++ b/src/lib/components/settings/SettingsIntegrations.svelte @@ -1,5 +1,5 @@ -
- -
-
-
- - - - - - -
-
-

- Google Calendar -

-

- Sync events between your organization and Google - Calendar. -

+
+ +
+
+
+ + + + + + +
+
+

Google Calendar

+

+ Sync events between your organization and Google Calendar. +

- {#if orgCalendar} -
-
-
-

- Connected -

-

- {orgCalendar.calendar_name || - "Google Calendar"} -

-

- {orgCalendar.calendar_id} -

-

- Events sync both ways — create here or - in Google Calendar. -

- - - - - - - Open in Google Calendar - -
- +
+
+

Connected

+

{orgCalendar.calendar_name || "Google Calendar"}

+

{orgCalendar.calendar_id}

+

Events sync both ways.

+ + open_in_new + Open in Google Calendar +
+
- {:else if !serviceAccountEmail} -
-

- Setup required -

-

- A server administrator needs to configure the GOOGLE_SERVICE_ACCOUNT_KEY environment variable before calendars can be connected. -

-
- {:else} -
- -
- {/if} -
+
+ {:else if !serviceAccountEmail} +
+

Setup required

+

+ A server administrator needs to configure the GOOGLE_SERVICE_ACCOUNT_KEY environment variable. +

+
+ {:else} +
+ +
+ {/if}
- +
- -
-
-
- - - -
-
-

Discord

-

- Get notifications in your Discord server. -

-

Coming soon

-
+ +
+
+
+ forum +
+
+

Discord

+

Get notifications in your Discord server.

+

Coming soon

- +
- -
-
-
- - - -
-
-

Slack

-

- Get notifications in your Slack workspace. -

-

Coming soon

-
+ +
+
+
+ tag +
+
+

Slack

+

Get notifications in your Slack workspace.

+

Coming soon

- +
diff --git a/src/lib/components/settings/SettingsMembers.svelte b/src/lib/components/settings/SettingsMembers.svelte index 7ffa104..b5a4d58 100644 --- a/src/lib/components/settings/SettingsMembers.svelte +++ b/src/lib/components/settings/SettingsMembers.svelte @@ -2,7 +2,6 @@ import { Button, Modal, - Card, Input, Select, Avatar, @@ -169,113 +168,97 @@ } -
+
-

- {m.settings_members_title({ - count: String(members.length), - })} -

-
{#if invites.length > 0} - -
-

- {m.settings_members_pending()} -

-
- {#each invites as invite} -
-
-

{invite.email}

-

- Invited as {invite.role} • Expires {new Date( - invite.expires_at, - ).toLocaleDateString()} -

-
-
- - -
+
+

+ {m.settings_members_pending()} +

+
+ {#each invites as invite} +
+
+

{invite.email}

+

+ Invited as {invite.role} • Expires {new Date( + invite.expires_at, + ).toLocaleDateString()} +

- {/each} -
+
+ + +
+
+ {/each}
- +
{/if} - -
+
+
{#each members as member} {@const rawProfile = member.profiles} {@const profile = Array.isArray(rawProfile) ? rawProfile[0] : rawProfile}
-
- {(profile?.full_name || - profile?.email || - "?")[0].toUpperCase()} -
+
-

+

{profile?.full_name || profile?.email || "Unknown User"}

-

+

{profile?.email || "No email"}

-
+
{member.role} {#if member.user_id !== userId && member.role !== "owner"} - + edit + {/if}
{/each}
- +
diff --git a/src/lib/components/settings/SettingsRoles.svelte b/src/lib/components/settings/SettingsRoles.svelte index 13115b6..4a775f7 100644 --- a/src/lib/components/settings/SettingsRoles.svelte +++ b/src/lib/components/settings/SettingsRoles.svelte @@ -1,5 +1,5 @@ -
+
-

Roles

-

+

Roles

+

Create custom roles with specific permissions.

-
-
+
{#each roles as role} - -
-
-
-
- {role.name} - {#if role.is_system} - System - {/if} - {#if role.is_default} - Default - {/if} -
-
- {#if !role.is_system || role.name !== "Owner"} - - {/if} - {#if !role.is_system} - - {/if} -
+
+
+
+
+ {role.name} + {#if role.is_system} + System + {/if} + {#if role.is_default} + Default + {/if}
-
- {#if role.permissions.includes("*")} - All Permissions + {#if !role.is_system || role.name !== "Owner"} + + {/if} + {#if !role.is_system} + {/if}
- +
+ {#if role.permissions.includes("*")} + All Permissions + {:else} + {#each role.permissions.slice(0, 6) as perm} + {perm} + {/each} + {#if role.permissions.length > 6} + +{role.permissions.length - 6} more + {/if} + {/if} +
+
{/each}