@allbluecn/web-app 0.3.0

package/src/components/forms/app-submit.tsx

@@ -0,0 +1,65 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Loader2 } from "lucide-react"
+import type { ReactNode } from "react"
+import type { AnyReactFormApi } from "@tanstack/react-form"
+
+export function AppSubmit({
+  form,
+  isSubmitting,
+  children,
+  disabled = false,
+}: {
+  form?: AnyReactFormApi
+  isSubmitting?: boolean
+  children: ReactNode
+  disabled?: boolean
+}) {
+  if (form && isSubmitting === undefined) {
+    return (
+      <form.Subscribe<boolean>
+selector={(state: any) => state.isSubmitting}
+         children={(isSub: boolean) => (
+          <button
+            type="submit"
+            disabled={isSub || disabled}
+            className="inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 disabled:opacity-50"
+          >
+            {isSub ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : null}
+            {children}
+          </button>
+        )}
+      />
+    )
+  }
+
+  return (
+    <button
+      type="submit"
+      disabled={isSubmitting ?? disabled}
+      className="inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 disabled:opacity-50"
+    >
+      {isSubmitting ? (
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+      ) : null}
+      {children}
+    </button>
+  )
+}

package/src/components/forms/app-switch.tsx

@@ -0,0 +1,60 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { AnyReactFormApi } from "@tanstack/react-form"
+import { Switch as ShadcnSwitch } from "@/components/ui/switch"
+import { AppField, type AppFieldProps } from "./app-field"
+
+export interface AppSwitchProps {
+  name: string
+  form: AnyReactFormApi
+  label?: string
+  description?: string
+  validators?: AppFieldProps<boolean>["validators"]
+}
+
+export function AppSwitch({
+  name,
+  form,
+  label,
+  description,
+  validators,
+}: AppSwitchProps) {
+  return (
+    <AppField
+      name={name}
+      form={form}
+      description={description}
+      validators={validators}
+    >
+      {(field) => (
+        <div className="flex items-center gap-2">
+          <ShadcnSwitch
+            id={field.name}
+            checked={field.value ?? false}
+            onCheckedChange={(c) => field.handleChange(!!c)}
+          />
+          {label && (
+            <label htmlFor={field.name} className="text-sm text-muted-foreground cursor-pointer">
+              {label}
+            </label>
+          )}
+        </div>
+      )}
+    </AppField>
+  )
+}

package/src/components/forms/app-textarea.tsx

@@ -0,0 +1,64 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { AnyReactFormApi } from "@tanstack/react-form"
+import { Textarea as ShadcnTextarea } from "@/components/ui/textarea"
+import { AppField, type AppFieldProps } from "./app-field"
+
+export interface AppTextareaProps {
+  name: string
+  form: AnyReactFormApi
+  label?: string
+  description?: string
+  placeholder?: string
+  disabled?: boolean
+  rows?: number
+  validators?: AppFieldProps<string>["validators"]
+}
+
+export function AppTextarea({
+  name,
+  form,
+  label,
+  description,
+  placeholder,
+  disabled,
+  rows = 4,
+  validators,
+}: AppTextareaProps) {
+  return (
+    <AppField
+      name={name}
+      form={form}
+      label={label}
+      description={description}
+      validators={validators}
+    >
+      {(field) => (
+        <ShadcnTextarea
+          id={field.name}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={rows}
+          value={field.value ?? ""}
+          onChange={(e) => field.handleChange(e.target.value)}
+          onBlur={field.handleBlur}
+        />
+      )}
+    </AppField>
+  )
+}

package/src/components/forms/hooks/use-form-submit.ts

@@ -0,0 +1,55 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState, useCallback } from "react"
+import { useQueryClient } from "@tanstack/react-query"
+import { toast } from "@/components/ui/sonner"
+import { getClientI18n } from "@/lib/i18n/client"
+import type { FormSubmitConfig } from "../types"
+
+export function useFormSubmit<TData, TResult>(
+  serverFn: (data: { data: TData }) => Promise<TResult>,
+  config?: FormSubmitConfig,
+) {
+  const queryClient = useQueryClient()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const submit = useCallback(
+    async (data: TData) => {
+      setIsSubmitting(true)
+      try {
+        await serverFn({ data })
+        if (config?.toastSuccess) toast.success(config.toastSuccess)
+        if (config?.invalidateQueries) {
+          for (const queryKey of config.invalidateQueries) {
+            queryClient.invalidateQueries({ queryKey })
+          }
+        }
+        return true
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : getClientI18n().t('common:form.operationFailed')
+        toast.error(config?.toastError ?? msg)
+        return false
+      } finally {
+        setIsSubmitting(false)
+      }
+    },
+    [serverFn, config, queryClient],
+  )
+
+  return { submit, isSubmitting }
+}

package/src/components/forms/index.ts

@@ -0,0 +1,31 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export { AppField } from "./app-field"
+export { AppInput } from "./app-input"
+export { AppTextarea } from "./app-textarea"
+export { AppCheckbox } from "./app-checkbox"
+export { AppSwitch } from "./app-switch"
+export { AppSelect, type SelectOption } from "./app-select"
+export { AppCombobox } from "./app-combobox"
+export { AppDatePicker } from "./app-date-picker"
+export { AppArrayField, type AppArrayFieldProps } from "./app-array-field"
+export { AppSection } from "./app-section"
+export { AppSubmit } from "./app-submit"
+export { AppFormDialog } from "./app-form-dialog"
+export { useFormSubmit } from "./hooks/use-form-submit"
+export type { FormSubmitConfig, AsyncValidator } from "./types"

package/src/components/forms/schemas/common.ts

@@ -0,0 +1,28 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { z } from "zod"
+import { getClientI18n } from "@/lib/i18n/client"
+
+const t = (key: string) => getClientI18n().t(key)
+
+export const emailSchema = z.string().email(t("form.invalidEmail"))
+export const passwordSchema = z.string().min(6, t("form.passwordMin"))
+export const requiredTextSchema = z
+  .string()
+  .min(1, t("form.required"))
+  .transform((v) => v.trim())

package/src/components/forms/types.ts

@@ -0,0 +1,34 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export interface FormSubmitConfig {
+  toastSuccess?: string
+  toastError?: string
+  resetOnSuccess?: boolean
+  redirectTo?: string
+  invalidateQueries?: string[][]
+}
+
+export interface FieldError {
+  message: string
+}
+
+export type ValidationError = string | null | undefined
+
+export type AsyncValidator<T> = (
+  input: { value: T },
+) => Promise<ValidationError>

package/src/components/hotkeys/shortcut-badge.tsx

@@ -0,0 +1,48 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import * as React from "react"
+import { formatWithLabels, parseHotkey } from "@tanstack/hotkeys"
+import { cn } from "@/lib/utils"
+
+function Kbd({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <kbd
+      className={cn(
+        "inline-flex items-center rounded border border-border bg-muted/60 px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground",
+        className
+      )}
+    >
+      {children}
+    </kbd>
+  )
+}
+
+export function ShortcutBadge({ keys, className }: { keys: string; className?: string }) {
+  const parts = keys.split(" ")
+  if (parts.length === 2) {
+    return (
+      <span className={cn("inline-flex items-center gap-1", className)}>
+        <Kbd>{formatWithLabels(parseHotkey(parts[0]))}</Kbd>
+        <span className="text-[11px] text-muted-foreground">→</span>
+        <Kbd>{formatWithLabels(parseHotkey(parts[1]))}</Kbd>
+      </span>
+    )
+  }
+  const display = formatWithLabels(parseHotkey(keys))
+  return <Kbd className={className}>{display}</Kbd>
+}

package/src/components/hotkeys/shortcuts-panel.tsx

@@ -0,0 +1,91 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useCallback, useState } from "react"
+import { useHotkey } from "@tanstack/react-hotkeys"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { KeyboardMusic, X } from "lucide-react"
+import { ShortcutBadge } from "./shortcut-badge"
+import { HOTKEY_REGISTRY, CATEGORY_ORDER } from "@/lib/hotkeys/registry"
+import { useTranslation } from "react-i18next"
+
+export function ShortcutsPanel() {
+  const { t } = useTranslation("common")
+  const [open, setOpen] = useState(false)
+
+  useHotkey("Mod+/", () => setOpen((prev) => !prev), {
+    ignoreInputs: false,
+  })
+
+  const grouped = useCallback(() => {
+    const map = new Map<string, (typeof HOTKEY_REGISTRY)[0][]>()
+    for (const category of CATEGORY_ORDER) {
+      const items = HOTKEY_REGISTRY.filter((h) => h.category === category)
+      if (items.length > 0) {
+        map.set(category, items)
+      }
+    }
+    return map
+  }, [])
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-md gap-4">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <KeyboardMusic className="size-4" />
+            {t("hotkey.title")}
+          </DialogTitle>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-4 top-4"
+            onClick={() => setOpen(false)}
+          >
+            <X className="size-4" />
+          </Button>
+        </DialogHeader>
+        <div className="max-h-[60vh] overflow-y-auto space-y-4">
+          {Array.from(grouped()).map(([category, shortcuts]) => (
+            <div key={category}>
+              <h4 className="mb-2 text-xs font-medium text-muted-foreground">
+                {category}
+              </h4>
+              <div className="space-y-1.5">
+                {shortcuts.map((h) => (
+                  <div
+                    key={h.id}
+                    className="flex items-center justify-between rounded-md px-2 py-1.5 hover:bg-muted/50"
+                  >
+                    <span className="text-sm">{h.description}</span>
+                    <ShortcutBadge keys={h.keys} />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}