fix(settings): mark sqlite user database unavailable

web/src/pages/admin-settings/DatabaseSettings.test.tsx

@@ -2,6 +2,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 
 import DatabaseSettings from "./DatabaseSettings";
+import { USER_DATABASE_BACKEND_OPTIONS } from "./databaseSettingOptions";
 
 const useSettingsFormMock = vi.fn();
 const useCheckAdminSettingsConnectionMock = vi.fn();
@@ -50,6 +51,14 @@ describe("DatabaseSettings", () => {
     expect(markup).not.toContain("Connection URL");
   });
 
+  it("marks the unimplemented SQLite backend as unavailable", () => {
+    expect(USER_DATABASE_BACKEND_OPTIONS).toContainEqual({
+      value: "sqlite",
+      label: "SQLite (TBD)",
+      disabled: true,
+    });
+  });
+
   it("shows the Redis connection URL when Redis is enabled", () => {
     useSettingsFormMock.mockReturnValue(makeForm("redis://cache:6379"));
 

web/src/pages/admin-settings/DatabaseSettings.tsx

@@ -7,6 +7,7 @@ import { useSettingsForm } from "@/hooks/useSettingsForm";
 import { SettingField } from "./SettingField";
 import { SaveBar } from "./SaveBar";
 import { FieldGroup } from "./FieldGroup";
+import { USER_DATABASE_BACKEND_OPTIONS } from "./databaseSettingOptions";
 
 const REDIS_KEYS = ["redis.url"];
 
@@ -128,10 +129,7 @@ export default function DatabaseSettings() {
           <SettingField
             label="User DB Backend"
             type="select"
-            options={[
-              { value: "postgres", label: "PostgreSQL" },
-              { value: "sqlite", label: "SQLite" },
-            ]}
+            options={USER_DATABASE_BACKEND_OPTIONS}
             value={form.getValue("userdb.backend")}
             onChange={(v) => form.setValue("userdb.backend", v)}
           />

web/src/pages/admin-settings/SettingField.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { SettingField } from "./SettingField";
+
+vi.mock("@/components/ui/select", () => ({
+  Select: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  SelectContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  SelectItem: ({ children, disabled }: { children: ReactNode; disabled?: boolean }) => (
+    <button disabled={disabled}>{children}</button>
+  ),
+  SelectTrigger: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  SelectValue: () => null,
+}));
+
+describe("SettingField", () => {
+  it("renders unavailable select options as disabled", () => {
+    render(
+      <SettingField
+        label="User DB Backend"
+        type="select"
+        options={[
+          { value: "postgres", label: "PostgreSQL" },
+          { value: "sqlite", label: "SQLite (TBD)", disabled: true },
+        ]}
+        value="postgres"
+        onChange={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "PostgreSQL" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "SQLite (TBD)" })).toBeDisabled();
+  });
+});

web/src/pages/admin-settings/SettingField.tsx

@@ -13,6 +13,7 @@ import {
 interface SelectOption {
   value: string;
   label: string;
+  disabled?: boolean;
 }
 
 interface SettingFieldProps {
@@ -81,7 +82,7 @@ export function SettingField({
           </SelectTrigger>
           <SelectContent>
             {options.map((opt) => (
-              <SelectItem key={opt.value} value={opt.value}>
+              <SelectItem key={opt.value} value={opt.value} disabled={opt.disabled}>
                 {opt.label}
               </SelectItem>
             ))}

web/src/pages/admin-settings/databaseSettingOptions.ts

@@ -0,0 +1,4 @@
+export const USER_DATABASE_BACKEND_OPTIONS = [
+  { value: "postgres", label: "PostgreSQL" },
+  { value: "sqlite", label: "SQLite (TBD)", disabled: true },
+];