@neurocode-ai/app 1.18.8

package/src/components/settings-v2/dialog-server-v2.tsx

@@ -0,0 +1,134 @@
+import { ButtonV2 } from "@neurocode-ai/ui/v2/button-v2"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@neurocode-ai/ui/v2/dialog-v2"
+import { DividerV2 } from "@neurocode-ai/ui/v2/divider-v2"
+import { TextInputV2 } from "@neurocode-ai/ui/v2/text-input-v2"
+import { useDialog } from "@neurocode-ai/ui/context/dialog"
+import { type Component, Show, createEffect, createSignal, onCleanup, onMount } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { type ServerConnection } from "@/context/server"
+import { useServerManagementController } from "../dialog-select-server"
+import "./settings-v2.css"
+
+export const DialogServerV2: Component<{
+  mode: "add" | "edit"
+  server?: ServerConnection.Http
+}> = (props) => {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const controller = useServerManagementController({
+    onSelect: () => dialog.close(),
+    navigateOnAdd: false,
+  })
+  const [opened, setOpened] = createSignal(false)
+
+  onMount(() => {
+    if (props.mode === "add") controller.startAdd()
+    if (props.mode === "edit" && props.server) controller.startEdit(props.server)
+    setOpened(true)
+  })
+
+  onCleanup(() => {
+    controller.resetForm()
+  })
+
+  createEffect(() => {
+    if (!opened()) return
+    if (controller.isFormMode()) return
+    dialog.close()
+  })
+
+  const keyDown = (event: KeyboardEvent) => {
+    if (event.key !== "Enter" || event.isComposing) return
+    event.preventDefault()
+    controller.submitForm()
+  }
+
+  const title = () =>
+    props.mode === "add" ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")
+
+  const submitLabel = () => {
+    if (controller.formBusy()) return language.t("dialog.server.add.checking")
+    if (props.mode === "add") return language.t("dialog.server.add.button")
+    return language.t("common.save")
+  }
+
+  return (
+    <Dialog fit class="settings-v2-server-dialog">
+      <DialogHeader hideClose={true}>
+        <DialogTitle>{title()}</DialogTitle>
+      </DialogHeader>
+      <DividerV2 />
+      <DialogBody class="flex w-full min-w-0 flex-1 flex-col px-4 pt-4 pb-2">
+        <div class="flex w-full min-w-0 flex-col gap-6">
+          <div class="flex w-full min-w-0 flex-col gap-2">
+            <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.url")}</label>
+            <TextInputV2
+              type="text"
+              appearance="large"
+              class="!w-full self-stretch"
+              value={controller.formValue()}
+              placeholder={language.t("dialog.server.add.placeholder")}
+              invalid={!!controller.formError()}
+              disabled={controller.formBusy()}
+              autofocus
+              onInput={(event) => controller.handleFormChange()(event.currentTarget.value)}
+              onKeyDown={keyDown}
+            />
+            <Show when={controller.formError()}>
+              <span class="settings-v2-server-dialog-error">{controller.formError()}</span>
+            </Show>
+          </div>
+          <div class="flex w-full min-w-0 flex-col gap-2">
+            <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.name")}</label>
+            <TextInputV2
+              type="text"
+              appearance="large"
+              class="!w-full self-stretch"
+              value={controller.formName()}
+              placeholder={language.t("dialog.server.add.namePlaceholder")}
+              disabled={controller.formBusy()}
+              onInput={(event) => controller.handleFormNameChange()(event.currentTarget.value)}
+              onKeyDown={keyDown}
+            />
+          </div>
+          <div class="grid w-full min-w-0 grid-cols-2 gap-4">
+            <div class="flex min-w-0 flex-col gap-2">
+              <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.username")}</label>
+              <TextInputV2
+                type="text"
+                appearance="large"
+                class="!w-full self-stretch"
+                value={controller.formUsername()}
+                placeholder={language.t("dialog.server.add.usernamePlaceholder")}
+                disabled={controller.formBusy()}
+                onInput={(event) => controller.handleFormUsernameChange()(event.currentTarget.value)}
+                onKeyDown={keyDown}
+              />
+            </div>
+            <div class="flex min-w-0 flex-col gap-2">
+              <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.password")}</label>
+              <TextInputV2
+                type="password"
+                appearance="large"
+                class="!w-full self-stretch"
+                value={controller.formPassword()}
+                placeholder={language.t("dialog.server.add.passwordPlaceholder")}
+                disabled={controller.formBusy()}
+                onInput={(event) => controller.handleFormPasswordChange()(event.currentTarget.value)}
+                onKeyDown={keyDown}
+              />
+            </div>
+          </div>
+        </div>
+      </DialogBody>
+      <DialogFooter>
+        <ButtonV2 variant="neutral" disabled={controller.formBusy()} onClick={() => dialog.close()}>
+          {language.t("common.cancel")}
+        </ButtonV2>
+        <ButtonV2 variant="contrast" disabled={controller.formBusy()} onClick={controller.submitForm}>
+          {submitLabel()}
+        </ButtonV2>
+      </DialogFooter>
+    </Dialog>
+  )
+}

package/src/components/settings-v2/dialog-settings-v2.tsx

@@ -0,0 +1,98 @@
+import { Component, createSignal, startTransition } from "solid-js"
+import { Dialog } from "@neurocode-ai/ui/v2/dialog-v2"
+import { TabsV2 } from "@neurocode-ai/ui/v2/tabs-v2"
+import { Icon } from "@neurocode-ai/ui/icon"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { SettingsGeneralV2 } from "./general"
+import { SettingsKeybinds } from "../settings-keybinds"
+import { SettingsProvidersV2 } from "./providers"
+import { SettingsModelsV2 } from "./models"
+import "./settings-v2.css"
+import { SettingsServersV2 } from "./servers"
+import { useDialog } from "@neurocode-ai/ui/context/dialog"
+
+export const DialogSettings: Component<{
+  sessionID?: string
+  defaultValue?: string
+}> = (props) => {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const [tab, setTab] = createSignal(props.defaultValue ?? "general")
+
+  const showProviders = () => {
+    void dialog.show(() => <DialogSettings sessionID={props.sessionID} defaultValue="providers" />)
+  }
+
+  return (
+    <Dialog size="x-large" variant="settings" class="settings-v2-dialog">
+      <TabsV2
+        orientation="vertical"
+        variant="settings"
+        value={tab()}
+        onChange={(value) => void startTransition(() => setTab(value))}
+        class="settings-v2"
+      >
+        <TabsV2.List>
+          <div class="flex flex-col justify-between h-full w-full">
+            <div class="flex flex-col gap-3 w-full">
+              <div class="flex flex-col gap-3">
+                <div class="flex flex-col gap-1.5">
+                  <TabsV2.SectionTitle>{language.t("settings.section.desktop")}</TabsV2.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <TabsV2.Trigger value="general">
+                      <Icon name="sliders" />
+                      {language.t("settings.tab.general")}
+                    </TabsV2.Trigger>
+                    <TabsV2.Trigger value="shortcuts">
+                      <Icon name="keyboard" />
+                      {language.t("settings.tab.shortcuts")}
+                    </TabsV2.Trigger>
+                  </div>
+                </div>
+
+                <div class="flex flex-col gap-1.5">
+                  <TabsV2.SectionTitle>{language.t("settings.section.server")}</TabsV2.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <TabsV2.Trigger value="servers">
+                      <Icon name="server" />
+                      {language.t("status.popover.tab.servers")}
+                    </TabsV2.Trigger>
+                    <TabsV2.Trigger value="providers">
+                      <Icon name="providers" />
+                      {language.t("settings.providers.title")}
+                    </TabsV2.Trigger>
+                    <TabsV2.Trigger value="models">
+                      <Icon name="models" />
+                      {language.t("settings.models.title")}
+                    </TabsV2.Trigger>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="settings-v2-nav-footer">
+              <span>{language.t("app.name.desktop")}</span>
+              <span>v{platform.version}</span>
+            </div>
+          </div>
+        </TabsV2.List>
+        <TabsV2.Content value="general" class="settings-v2-panel">
+          <SettingsGeneralV2 sessionID={props.sessionID} />
+        </TabsV2.Content>
+        <TabsV2.Content value="shortcuts" class="settings-v2-panel">
+          <SettingsKeybinds v2 />
+        </TabsV2.Content>
+        <TabsV2.Content value="servers" class="settings-v2-panel">
+          <SettingsServersV2 />
+        </TabsV2.Content>
+        <TabsV2.Content value="providers" class="settings-v2-panel">
+          <SettingsProvidersV2 onBack={showProviders} />
+        </TabsV2.Content>
+        <TabsV2.Content value="models" class="settings-v2-panel">
+          <SettingsModelsV2 />
+        </TabsV2.Content>
+      </TabsV2>
+    </Dialog>
+  )
+}