feat: add swagger and graphql links to appbar for developers

Author: myieye

frontend/src/lib/layout/AppBar.svelte

@@ -7,6 +7,8 @@
   import type {LexAuthUser} from '$lib/user';
   import {page} from '$app/state';
   import AppLogo from '$lib/icons/AppLogo.svelte';
+  import DevContent from './DevContent.svelte';
+  import IconButton from '$lib/components/IconButton.svelte';
 
   onMount(() => {
     isPlaywright = localStorage.getItem('isPlaywright') === 'true';
@@ -40,7 +42,23 @@
         </span>
       </div>
     </a>
-    <div>
+    <div class="flex gap-2">
+      <DevContent>
+        <IconButton
+          icon="i-mdi-api"
+          variant="btn-primary"
+          class="glass"
+          title="Swagger"
+          onclick={() => window.open('/api/swagger', '_blank')}
+        />
+        <IconButton
+          icon="i-mdi-graphql"
+          variant="btn-primary"
+          class="glass"
+          title="GraphQL"
+          onclick={() => window.open('/api/graphql/ui', '_blank')}
+        />
+      </DevContent>
       {#if user}
         <!-- using a label means it works before hydration is complete -->
         <label for="drawer-toggle" class="btn btn-primary glass px-2">