chore: import upstream snapshot with attribution

2026-07-13 13:32:57 +08:00
commit cd420f9332
4811 changed files with 884702 additions and 0 deletions
@@ -0,0 +1,71 @@
+import { useSubmit } from "@remix-run/react";
+import { InputGroup } from "~/components/primitives/InputGroup";
+import { Label } from "~/components/primitives/Label";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { Select, SelectItem } from "~/components/primitives/Select";
+import type { SessionDurationOption } from "~/services/sessionDuration.server";
+
+interface SessionDurationSettingProps {
+  currentValue: number;
+  options: SessionDurationOption[];
+  orgCapSeconds: number | null;
+}
+
+export function SessionDurationSetting({
+  currentValue,
+  options,
+  orgCapSeconds,
+}: SessionDurationSettingProps) {
+  const submit = useSubmit();
+
+  const orgCapOption =
+    orgCapSeconds === null ? null : options.find((o) => o.value === orgCapSeconds);
+
+  return (
+    <div className="w-full">
+      <div className="flex w-full items-center justify-between gap-4">
+        <InputGroup className="flex-1">
+          <Label>Automatic logout</Label>
+          <Paragraph variant="small">
+            Automatically log out after a period of time.
+            {orgCapSeconds !== null ? (
+              <>
+                {" "}
+                Your organization caps this at {orgCapOption?.label ?? `${orgCapSeconds} seconds`}.
+              </>
+            ) : null}
+          </Paragraph>
+        </InputGroup>
+        <div className="flex flex-none items-center">
+          <Select
+            name="sessionDuration"
+            variant="secondary/small"
+            defaultValue={String(currentValue)}
+            setValue={(value) => {
+              const next = Array.isArray(value) ? value[0] : value;
+              if (typeof next !== "string" || next === String(currentValue)) return;
+              submit(
+                { sessionDuration: next },
+                { method: "post", action: "/resources/account/session-duration" }
+              );
+            }}
+            text={(value: string) =>
+              options.find((o) => String(o.value) === value)?.label ?? "Select a duration"
+            }
+            dropdownIcon
+          >
+            {options.map((option) => (
+              <SelectItem
+                key={option.value}
+                value={String(option.value)}
+                className="text-text-bright"
+              >
+                {option.label}
+              </SelectItem>
+            ))}
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+}