@svadmin/ui 0.34.10 → 0.36.0

package/dist/components/SettingsPage.svelte

@@ -1,118 +1,151 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
-  import { User, Palette, Info, Shield, FileSearch } from '@lucide/svelte';
-  import ProfilePage from './ProfilePage.svelte';
-  import AppearanceSettings from './AppearanceSettings.svelte';
-  import AboutSettings from './AboutSettings.svelte';
-  import RolesSettings from './RolesSettings.svelte';
-  import AuditLogViewer from './AuditLogViewer.svelte';
-  import { getAuthProvider } from '@svadmin/core';
+  import type { Component, Snippet } from "svelte";
+  import { t } from "@svadmin/core/i18n";
+  import { navigate } from "@svadmin/core/router";
+  import { User, Info, FileSearch, Lock, Puzzle } from "@lucide/svelte";
+  import ProfilePage from "./ProfilePage.svelte";
+  import AppearanceSettings from "./AppearanceSettings.svelte";
+  import AboutSettings from "./AboutSettings.svelte";
+  import RolesSettings from "./RolesSettings.svelte";
+  import AuditLogViewer from "./AuditLogViewer.svelte";
+  import SecuritySettings from "./SecuritySettings.svelte";
+  import IntegrationsSettings from "./IntegrationsSettings.svelte";
+  import NotificationsSettings from "./NotificationsSettings.svelte";
+  import ApiSettings from "./ApiSettings.svelte";
+  import { getAuthProvider } from "@svadmin/core";
 
   const authProvider = getAuthProvider({ optional: true });
 
-  const sections = [
+  interface SettingsItem {
+    key: string;
+    path: string;
+    icon: Component;
+    label: string;
+  }
+
+  interface SettingsSection {
+    group: string;
+    items: SettingsItem[];
+  }
+
+  interface Props {
+    customSections?: SettingsSection[];
+    profile?: Snippet;
+    appearance?: Snippet;
+    roles?: Snippet;
+    security?: Snippet;
+    integrations?: Snippet;
+    notifications?: Snippet;
+    api?: Snippet;
+    audit?: Snippet;
+    about?: Snippet;
+    content?: Snippet<[string]>;
+  }
+
+  let {
+    customSections,
+    profile,
+    appearance,
+    roles,
+    security,
+    integrations,
+    notifications,
+    api,
+    audit,
+    about,
+    content,
+  }: Props = $props();
+
+  const defaultSections = [
     {
-      group: 'settings.general',
+      group: "settings.general",
       items: [
-        { key: 'profile', path: '/settings/profile', icon: User, label: 'settings.profile' },
-        { key: 'appearance', path: '/settings/appearance', icon: Palette, label: 'settings.appearance' },
+        { key: "account", path: "/settings/account", icon: User, label: "settings.accountPreferences" },
       ],
     },
     {
-      group: 'settings.system',
+      group: "settings.workspace",
+      items: [
+        { key: "access", path: "/settings/access", icon: Lock, label: "settings.accessSecurity" },
+        { key: "developer", path: "/settings/developer", icon: Puzzle, label: "settings.integrationApi" },
+      ],
+    },
+    {
+      group: "settings.developer",
       items: [
         ...(authProvider ? [
-          { key: 'roles', path: '/settings/roles', icon: Shield, label: 'settings.rolesAndPermissions' },
-          { key: 'audit', path: '/settings/audit', icon: FileSearch, label: 'settings.auditLogs' },
+          { key: "audit", path: "/settings/audit", icon: FileSearch, label: "settings.auditLogs" },
         ] : []),
-        { key: 'about', path: '/settings/about', icon: Info, label: 'settings.about' },
+        { key: "about", path: "/settings/about", icon: Info, label: "settings.about" },
       ],
     },
   ];
 
-  import { getParams, getRoute } from '../router-state.svelte.js';
+  const resolvedSections = $derived(customSections ?? defaultSections);
+  const sectionKeys = $derived(new Set(resolvedSections.flatMap((section) => section.items.map((item) => item.key))));
+
+  import { getParams, getRoute } from "../router-state.svelte.js";
+
+  function normalizeKey(tab: string | undefined): string {
+    if (!tab) return "account";
+    if (["profile", "appearance", "notifications"].includes(tab)) return "account";
+    if (["security", "roles"].includes(tab)) return "access";
+    if (["integrations", "api"].includes(tab)) return "developer";
+    return tab;
+  }
+
+  function pathForKey(key: string): string {
+    return `/settings/${key}`;
+  }
 
   let activeKey = $derived.by(() => {
     const tab = getParams().tab;
-    if (tab === 'appearance') return 'appearance';
-    if (tab === 'roles') return 'roles';
-    if (tab === 'audit') return 'audit';
-    if (tab === 'about') return 'about';
-    return 'profile';
+    const normalized = normalizeKey(tab);
+    if (sectionKeys.has(normalized)) return normalized;
+    return content ? normalized : "account";
   });
 
-  // Default redirect to profile
   $effect(() => {
-    if (getRoute() === '/settings') {
-      navigate('/settings/profile');
+    if (getRoute() === "/settings") {
+      navigate("/settings/account");
+      return;
+    }
+
+    const tab = getParams().tab;
+    const normalized = normalizeKey(tab);
+    if (tab && tab !== normalized && sectionKeys.has(normalized)) {
+      navigate(pathForKey(normalized));
     }
   });
 </script>
 
-<div class="flex flex-col lg:flex-row gap-0 min-h-full">
-  <!-- Left sidebar navigation -->
-  <nav class="w-full lg:w-56 shrink-0 bg-muted/10 shadow-[inset_0_-1px_0_rgba(0,0,0,0.05)] lg:shadow-[inset_-1px_0_0_rgba(0,0,0,0.05)] dark:shadow-[inset_-1px_0_0_rgba(255,255,255,0.05)]">
-    <!-- Mobile: horizontal scroll tabs -->
-    <div class="flex lg:hidden overflow-x-auto px-4 py-2 gap-1">
-      {#each sections as section, _i (_i)}
-        {#each section.items as item, _i (_i)}
-          {@const active = activeKey === item.key}
-          <button
-            class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap transition-colors
-              {active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-background/50'}"
-            onclick={() => navigate(item.path)}
-          >
-            <item.icon class="h-4 w-4" />
-            {t(item.label)}
-          </button>
-        {/each}
-      {/each}
-    </div>
-
-    <!-- Desktop: vertical nav with groups -->
-    <div class="hidden lg:block py-6 px-3 space-y-6">
-      <div class="px-3">
-        <h2 class="text-lg font-semibold text-foreground">{t('settings.title')}</h2>
-        <p class="text-xs text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
-      </div>
-      {#each sections as section, _i (_i)}
-        <div>
-          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
-            {t(section.group)}
-          </h3>
-          <div class="space-y-0.5">
-            {#each section.items as item, _i (_i)}
-              {@const active = activeKey === item.key}
-              <button
-                class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all
-                  {active
-                    ? 'bg-primary/10 text-primary font-medium'
-                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
-                onclick={() => navigate(item.path)}
-              >
-                <item.icon class="h-4 w-4 shrink-0" />
-                {t(item.label)}
-              </button>
-            {/each}
-          </div>
-        </div>
-      {/each}
+<div class="min-h-full max-w-6xl">
+  <div class="mb-6 border-b border-border/70 pb-4">
+    <div class="min-w-0">
+      <h2 class="text-2xl font-semibold tracking-tight text-foreground">{t("settings.title")}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t("settings.settingsDescription")}</p>
     </div>
-  </nav>
+  </div>
 
-  <!-- Right content area -->
-  <div class="flex-1 p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' ? 'max-w-6xl' : 'max-w-3xl'}">
-    {#if activeKey === 'profile'}
-      <ProfilePage />
-    {:else if activeKey === 'appearance'}
-      <AppearanceSettings />
-    {:else if activeKey === 'roles'}
-      <RolesSettings />
-    {:else if activeKey === 'audit'}
-      <AuditLogViewer />
-    {:else if activeKey === 'about'}
-      <AboutSettings />
+  <div class="{activeKey === 'access' || activeKey === 'audit' || activeKey === 'developer' ? 'max-w-6xl' : 'max-w-3xl'} space-y-6">
+    {#if activeKey === "account"}
+      {#if profile}{@render profile()}{:else}<ProfilePage />{/if}
+      {#if appearance}{@render appearance()}{:else}<AppearanceSettings />{/if}
+      {#if notifications}{@render notifications()}{:else}<NotificationsSettings />{/if}
+    {:else if activeKey === "access"}
+      {#if security}{@render security()}{:else}<SecuritySettings />{/if}
+      {#if authProvider}
+        {#if roles}{@render roles()}{:else}<RolesSettings />{/if}
+      {/if}
+    {:else if activeKey === "developer"}
+      {#if integrations}{@render integrations()}{:else}<IntegrationsSettings />{/if}
+      {#if api}{@render api()}{:else}<ApiSettings />{/if}
+    {:else if activeKey === "audit"}
+      {#if audit}{@render audit()}{:else}<AuditLogViewer />{/if}
+    {:else if activeKey === "about"}
+      {#if about}{@render about()}{:else}<AboutSettings />{/if}
+    {:else if content}
+      {@render content(activeKey)}
     {/if}
   </div>
 </div>

package/dist/components/SettingsPage.svelte.d.ts

@@ -1,3 +1,27 @@
-declare const SettingsPage: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Component, Snippet } from "svelte";
+interface SettingsItem {
+    key: string;
+    path: string;
+    icon: Component;
+    label: string;
+}
+interface SettingsSection {
+    group: string;
+    items: SettingsItem[];
+}
+interface Props {
+    customSections?: SettingsSection[];
+    profile?: Snippet;
+    appearance?: Snippet;
+    roles?: Snippet;
+    security?: Snippet;
+    integrations?: Snippet;
+    notifications?: Snippet;
+    api?: Snippet;
+    audit?: Snippet;
+    about?: Snippet;
+    content?: Snippet<[string]>;
+}
+declare const SettingsPage: Component<Props, {}, "">;
 type SettingsPage = ReturnType<typeof SettingsPage>;
 export default SettingsPage;

package/dist/components/ShowPage.svelte

@@ -38,10 +38,10 @@
   </PageHeader>
 
   {#if query.isLoading}
-    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
-      <Card.Content class="p-0">
+    <Card.Root class="overflow-hidden border-border/60 bg-card shadow-none" data-svadmin-show-card>
+      <Card.Content class="space-y-3 p-4 sm:p-5">
         {#each showFields.slice(0, 6) as _, i (i)}
-          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
+          <div class="flex flex-col border-b border-border/50 px-1 py-4 sm:flex-row sm:py-4">
             <Skeleton class="h-4 w-1/2 sm:w-1/4" />
             <Skeleton class="h-4 w-3/4 sm:w-2/5 mt-1 sm:mt-0 sm:ml-auto" />
           </div>
@@ -49,14 +49,14 @@
       </Card.Content>
     </Card.Root>
   {:else if query.data?.data}
-    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
-      <Card.Content class="p-0">
+    <Card.Root class="overflow-hidden border-border/60 bg-card shadow-none" data-svadmin-show-card>
+      <Card.Content class="space-y-3 p-4 sm:p-5">
         {#each showFields as field, i (i)}
           {@const value = ((query.data as { data: Record<string, unknown> }).data as Record<string, unknown>)[field.key]}
           {@const DisplayComponent = getDisplayComponent(field.type)}
-          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
-            <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>
-            <div class="sm:w-2/3 text-sm text-foreground">
+          <div class="flex flex-col border-b border-border/50 px-1 py-4 transition-colors hover:bg-muted/20 sm:flex-row sm:items-start sm:py-4 {i % 2 === 1 ? 'bg-muted/10' : ''}">
+            <div class="mb-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground sm:mb-0 sm:w-1/3">{field.label}</div>
+            <div class="text-sm text-foreground sm:w-2/3">
               {#if DisplayComponent && value != null}
                 <DisplayComponent
                   {value}
@@ -72,7 +72,7 @@
       </Card.Content>
     </Card.Root>
   {:else}
-    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+    <Card.Root class="overflow-hidden border-border/60 bg-card shadow-none" data-svadmin-show-card>
       <Card.Content class="p-8 text-center">
         <p class="text-muted-foreground">{t('common.noData')}</p>
         {#if query.isError}