feat(KAN-70): integrate native workspace and update settings

resources/js/layouts/settings/Layout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
 import {
+    AppWindow,
     GitBranch,
     KeyRound,
     Palette,
@@ -10,6 +11,8 @@ import {
 } from 'lucide-vue-next';
 import { computed } from 'vue';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
+import { useNativeApp } from '@/composables/useNativeApp';
+import { edit as editNativeApp } from '@/routes/native-app';
 import { useLocalization } from '@/composables/useLocalization';
 import { toUrl } from '@/lib/utils';
 import { edit as editAppearance } from '@/routes/appearance/index';
@@ -20,6 +23,7 @@ import { edit as editSecurity } from '@/routes/security/index';
 import type { NavItem } from '@/types';
 
 const { t } = useLocalization();
+const { state: nativeApp } = useNativeApp();
 const sidebarNavItems = computed<NavItem[]>(() => [
     {
         title: t('navigation.profile'),
@@ -41,6 +45,15 @@ const sidebarNavItems = computed<NavItem[]>(() => [
         href: editApplications(),
         icon: KeyRound,
     },
+    ...(nativeApp.value
+        ? [
+              {
+                  title: t('nativeApp.title'),
+                  href: editNativeApp(),
+                  icon: AppWindow,
+              },
+          ]
+        : []),
     {
         title: t('navigation.appearance'),
         href: editAppearance(),