feat: basic admin interface

app/components/Sidenav/NavSettings.vue

@@ -3,10 +3,21 @@ import { providerIcons } from '~/utils/model-mapping';
 
 const route = useRoute();
 const { providers } = await useModels();
+const { isAdmin } = useAuth();
 
-const groups = [
+const ADMIN_GROUP = {
+    label: 'Instance',
+    adminOnly: true,
+    items: [
+        { to: '/settings/instance/users', name: 'Users', icon: 'i-mynaui-users' },
+        { to: '/settings/instance', name: 'Instance', icon: 'i-tabler-server' },
+    ],
+};
+
+const BASE_GROUPS = [
     {
         label: 'Account',
+        adminOnly: false,
         items: [
             { to: '/settings/profile', name: 'Profile', icon: 'i-mynaui-user' },
             { to: '/settings/security', name: 'Security', icon: 'i-mynaui-shield' },
@@ -14,6 +25,7 @@ const groups = [
     },
     {
         label: 'App',
+        adminOnly: false,
         items: [
             { to: '/settings/general', name: 'General', icon: 'i-mynaui-cog-four' },
             { to: '/settings/appearance', name: 'Appearance', icon: 'i-tabler-palette' },
@@ -23,6 +35,8 @@ const groups = [
     },
 ];
 
+const groups = computed(() => isAdmin.value ? [...BASE_GROUPS, ADMIN_GROUP] : BASE_GROUPS);
+
 const inProviders = computed(() => route.path.startsWith('/settings/providers'));
 
 // enabled providers first, same order the provider list uses
@@ -35,8 +49,13 @@ const sortedProviders = computed(() => [
 <template>
     <nav aria-label="Settings" class="flex flex-col gap-1 overflow-auto">
         <template v-for="group in groups" :key="group.label">
-            <div class="px-2 pt-3 pb-0.5 text-sm md:text-xs font-medium uppercase tracking-wider">
+            <div
+                class="flex items-center justify-between px-2 pt-3 pb-0.5 text-sm md:text-xs font-medium uppercase tracking-wider">
                 {{ group.label }}
+                <span v-if="group.adminOnly"
+                    class="px-1.5 py-0.25 rounded border border-[var(--color-border-active)] text-[10px] tracking-wide">
+                    Admin only
+                </span>
             </div>
 
             <template v-for="item in group.items" :key="item.to">