From c6383aa4dd1d05f9fe8fed6807be85ff58d1c849 Mon Sep 17 00:00:00 2001
From: Quick <31828688+Quick104@users.noreply.github.com>
Date: Sat, 1 Aug 2026 16:17:17 +0000
Subject: [PATCH] fix(settings): mark sqlite user database unavailable

---
 .../admin-settings/DatabaseSettings.test.tsx  |  9 +++++
 .../pages/admin-settings/DatabaseSettings.tsx |  6 ++--
 .../admin-settings/SettingField.test.tsx      | 35 +++++++++++++++++++
 web/src/pages/admin-settings/SettingField.tsx |  3 +-
 .../admin-settings/databaseSettingOptions.ts  |  4 +++
 5 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 web/src/pages/admin-settings/SettingField.test.tsx
 create mode 100644 web/src/pages/admin-settings/databaseSettingOptions.ts

diff --git a/web/src/pages/admin-settings/DatabaseSettings.test.tsx b/web/src/pages/admin-settings/DatabaseSettings.test.tsx
index 872bc4a0..7eca8438 100644
--- a/web/src/pages/admin-settings/DatabaseSettings.test.tsx
+++ b/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"));
 
diff --git a/web/src/pages/admin-settings/DatabaseSettings.tsx b/web/src/pages/admin-settings/DatabaseSettings.tsx
index 84371b6d..7c7d52f8 100644
--- a/web/src/pages/admin-settings/DatabaseSettings.tsx
+++ b/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)}
           />
diff --git a/web/src/pages/admin-settings/SettingField.test.tsx b/web/src/pages/admin-settings/SettingField.test.tsx
new file mode 100644
index 00000000..c7cce560
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/web/src/pages/admin-settings/SettingField.tsx b/web/src/pages/admin-settings/SettingField.tsx
index 81346d6e..9b1ca728 100644
--- a/web/src/pages/admin-settings/SettingField.tsx
+++ b/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>
             ))}
diff --git a/web/src/pages/admin-settings/databaseSettingOptions.ts b/web/src/pages/admin-settings/databaseSettingOptions.ts
new file mode 100644
index 00000000..a65d2916
--- /dev/null
+++ b/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 },
+];