feat(client): add dev-tools overlay

apps/papra-client/src/index.tsx

@@ -9,6 +9,7 @@ import { render, Suspense } from 'solid-js/web';
 import { CommandPaletteProvider } from './modules/command-palette/command-palette.provider';
 import { ConfigProvider } from './modules/config/config.provider';
 import { DemoIndicator } from './modules/demo/demo.provider';
+import { DevTools } from './modules/dev-tools/components/dev-tools.components';
 import { I18nProvider } from './modules/i18n/i18n.provider';
 import { ConfirmModalProvider } from './modules/shared/confirm';
 import { queryClient } from './modules/shared/query/query-client';
@@ -33,6 +34,7 @@ render(
           <QueryClientProvider client={queryClient}>
             <PageViewTracker />
             <IdentifyUser />
+            <DevTools />
 
             <Suspense>
               <I18nProvider>

apps/papra-client/src/modules/dev-tools/components/dev-tools-overlay.component.tsx

@@ -0,0 +1,43 @@
+import type { Component } from 'solid-js';
+import { Button } from '@/modules/ui/components/button';
+import { makePersisted } from '@solid-primitives/storage';
+import { createSignal, Show } from 'solid-js';
+import { Portal } from 'solid-js/web';
+
+export const DevToolsOverlayComponent: Component = () => {
+  const [isCollapsed, setIsCollapsed] = makePersisted(createSignal<boolean>(true), { name: 'papra-dev-tools-collapsed', storage: localStorage });
+
+  return (
+    <Portal>
+      <Show
+        when={!isCollapsed()}
+        fallback={(
+          <Button
+            onClick={() => setIsCollapsed(false)}
+            variant="secondary"
+            class="fixed bottom-0 left-50% -translate-x-1/2 z-50 rounded-b-none shadow"
+          >
+            <div class="i-tabler-chevron-up size-5" />
+          </Button>
+        )}
+      >
+        <div class="fixed bottom-0 left-50% -translate-x-1/2 z-50 bg-card rounded-t-xl shadow w-full max-w-500px border border-b-none">
+          <div class="flex items-center justify-between py-2 px-5">
+            <span class="text-sm font-medium">
+              Dev Tools
+            </span>
+
+            <Button
+              onClick={() => setIsCollapsed(true)}
+              variant="ghost"
+              size="icon"
+            >
+              <div class="i-tabler-chevron-down size-5" />
+            </Button>
+          </div>
+
+        </div>
+      </Show>
+    </Portal>
+  );
+};

apps/papra-client/src/modules/dev-tools/components/dev-tools.components.tsx

@@ -0,0 +1,12 @@
+import type { Component } from 'solid-js';
+import { lazy, Show } from 'solid-js';
+
+const DevToolsOverlay = lazy(() => import('./dev-tools-overlay.component').then(m => ({ default: m.DevToolsOverlayComponent })));
+
+export const DevTools: Component = () => {
+  return (
+    <Show when={import.meta.env.DEV}>
+      <DevToolsOverlay />
+    </Show>
+  );
+};