Merge branch 'develop' into develop

2026-09-24 20:50:26 +01:00 · 2026-08-28 07:57:25 +10:00
parent fc8b1eb1fb a75eb467ca
commit ece5dea0ad
85 changed files with 3368 additions and 1991 deletions
@@ -1,92 +1,75 @@
 {
-    "$schema": "https://biomejs.dev/schemas/2.4.15/schema.json",
-    "vcs": {
-        "enabled": true,
-        "clientKind": "git",
-        "useIgnoreFile": true
-    },
-    "files": {
-        "ignoreUnknown": false,
-        "includes": [
-            "**/*.ts",
-            "**/*.tsx",
-            "**/*.js",
-            "**/*.jsx",
-            "!**/dist/**/*"
-        ]
-    },
-    "formatter": {
-        "enabled": true,
-        "indentStyle": "tab",
-        "indentWidth": 4,
-        "lineWidth": 120,
-        "formatWithErrors": true
-    },
-    "assist": {
-        "actions": {
-            "source": {
-                "organizeImports": {
-                    "level": "on",
-                    "options": {
-                        "groups": [
-                            ":BUN:",
-                            ":NODE:",
-                            [
-                                "npm:*",
-                                "npm:*/**"
-                            ],
-                            ":PACKAGE_WITH_PROTOCOL:",
-                            ":URL:",
-                            ":PACKAGE:",
-                            [
-                                "/src/*",
-                                "/src/**"
-                            ],
-                            [
-                                "/**"
-                            ],
-                            [
-                                "#*",
-                                "#*/**"
-                            ],
-                            ":PATH:"
-                        ]
-                    }
-                }
-            }
-        }
-    },
-    "linter": {
-        "enabled": true,
-        "rules": {
-            "recommended": true,
-            "correctness": {
-                "useUniqueElementIds": "off"
-            },
-            "suspicious": {
-                "noExplicitAny": "off",
-                "noArrayIndexKey": "off"
-            },
-            "performance": {
-                "noDelete": "off"
-            },
-            "nursery": "off",
-            "a11y": {
-                "useSemanticElements": "off",
-                "useValidAnchor": "off"
-            },
-            "style": {
-                "noParameterAssign": "error",
-                "useAsConstAssertion": "error",
-                "useDefaultParameterLast": "error",
-                "useEnumInitializers": "error",
-                "useSelfClosingElements": "error",
-                "useSingleVarDeclarator": "error",
-                "noUnusedTemplateLiteral": "error",
-                "useNumberNamespace": "error",
-                "noInferrableTypes": "error",
-                "noUselessElse": "error"
-            }
-        }
-    }
+	"$schema": "https://biomejs.dev/schemas/2.5.10/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"includes": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "!**/dist/**/*"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab",
+		"indentWidth": 4,
+		"lineWidth": 120,
+		"formatWithErrors": true
+	},
+	"assist": {
+		"actions": {
+			"source": {
+				"organizeImports": {
+					"level": "on",
+					"options": {
+						"groups": [
+							":BUN:",
+							":NODE:",
+							["npm:*", "npm:*/**"],
+							":PACKAGE_WITH_PROTOCOL:",
+							":URL:",
+							":PACKAGE:",
+							["/src/*", "/src/**"],
+							["/**"],
+							["#*", "#*/**"],
+							":PATH:"
+						]
+					}
+				}
+			}
+		}
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"preset": "recommended",
+			"correctness": {
+				"useUniqueElementIds": "off"
+			},
+			"suspicious": {
+				"noExplicitAny": "off",
+				"noArrayIndexKey": "off"
+			},
+			"performance": {
+				"noDelete": "off"
+			},
+			"nursery": "off",
+			"a11y": {
+				"useSemanticElements": "off",
+				"useValidAnchor": "off"
+			},
+			"style": {
+				"noParameterAssign": "error",
+				"useAsConstAssertion": "error",
+				"useDefaultParameterLast": "error",
+				"useEnumInitializers": "error",
+				"useSelfClosingElements": "error",
+				"useSingleVarDeclarator": "error",
+				"noUnusedTemplateLiteral": "error",
+				"useNumberNamespace": "error",
+				"noInferrableTypes": "error",
+				"noUselessElse": "error"
+			}
+		}
+	}
 }
@@ -29,6 +29,7 @@ const allLocales = [
  ["tr", "tr-TR"],
  ["hu", "hu-HU"],
  ["no", "no-NO"],
+  ["uk", "uk-UA"],
 ];

 const ignoreUnused = [/^.*$/];
@@ -17,50 +17,51 @@
 	},
 	"dependencies": {
 		"@tabler/core": "^1.4.0",
-		"@tabler/icons-react": "^3.44.0",
-		"@tanstack/react-query": "^5.101.0",
-		"@tanstack/react-table": "^8.21.3",
+		"@tabler/icons-react": "^3.46.0",
+		"@tanstack/react-query": "^5.101.4",
+		"@tanstack/react-table": "^9.1.2",
 		"@uiw/react-textarea-code-editor": "^3.1.1",
 		"classnames": "^2.5.1",
-		"country-flag-icons": "^1.6.17",
+		"country-flag-icons": "^1.6.20",
 		"date-fns": "^4.4.0",
 		"ez-modal-react": "^1.0.5",
 		"formik": "^2.4.9",
 		"generate-password-browser": "^1.1.0",
 		"humps": "^2.0.1",
-		"query-string": "^9.4.0",
-		"react": "^19.2.7",
+		"query-string": "^9.5.0",
+		"react": "^19.2.8",
 		"react-bootstrap": "^2.10.10",
-		"react-dom": "^19.2.7",
-		"react-intl": "^10.1.11",
+		"react-dom": "^19.2.8",
+		"react-intl": "^10.1.22",
 		"react-markdown": "^10.1.0",
-		"react-router-dom": "^7.16.0",
+		"react-qr-code": "^2.2.0",
+		"react-router-dom": "^7.18.2",
 		"react-select": "^5.10.2",
 		"react-toastify": "^11.1.0",
-		"rooks": "^9.8.0"
+		"rooks": "^9.9.0"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.4.15",
-		"@formatjs/cli": "^6.16.6",
-		"@tanstack/react-query-devtools": "^5.100.14",
+		"@biomejs/biome": "^2.5.10",
+		"@formatjs/cli": "^6.16.19",
+		"@tanstack/react-query-devtools": "^5.101.4",
 		"@testing-library/dom": "^10.4.1",
-		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/jest-dom": "^7.0.1",
 		"@testing-library/react": "^16.3.2",
 		"@types/country-flag-icons": "^1.2.2",
 		"@types/humps": "^2.0.6",
-		"@types/node": "^25.9.1",
-		"@types/react": "^19.2.16",
-		"@types/react-dom": "^19.2.3",
+		"@types/node": "^26.2.0",
+		"@types/react": "^19.2.18",
+		"@types/react-dom": "^19.2.4",
 		"@types/react-table": "^7.7.20",
-		"@vitejs/plugin-react": "^6.0.2",
-		"happy-dom": "^20.9.0",
-		"postcss": "^8.5.15",
+		"@vitejs/plugin-react": "^6.1.0",
+		"happy-dom": "^20.11.6",
+		"postcss": "^8.5.26",
 		"postcss-simple-vars": "^7.0.1",
-		"sass": "^1.100.0",
+		"sass": "^1.103.1",
 		"tmp": "^0.2.7",
-		"typescript": "6.0.3",
-		"vite": "^8.0.16",
-		"vite-plugin-checker": "^0.14.1",
-		"vitest": "^4.1.8"
+		"typescript": "7.0.2",
+		"vite": "^8.2.2",
+		"vite-plugin-checker": "^0.14.5",
+		"vitest": "^4.1.11"
 	}
 }
@@ -1,12 +1,13 @@
-import type { Table as ReactTable } from "@tanstack/react-table";
+import type { Table as ReactTable, RowData } from "@tanstack/react-table";
 import cn from "classnames";
 import type { ReactNode } from "react";
 import { Button, HasPermission } from "src/components";
+import type { Features } from "src/components/Table/features";
 import { T } from "src/locale";
 import { type ADMIN, MANAGE, type Permission, type Section } from "src/modules/Permissions";

-interface Props {
-	tableInstance: ReactTable<any>;
+interface Props<TData extends RowData> {
+	tableInstance: ReactTable<Features, TData>;
 	onNew?: () => void;
 	isFiltered?: boolean;
 	object: string;
@@ -16,7 +17,7 @@ interface Props {
 	permissionSection?: Section | typeof ADMIN;
 	permission?: Permission;
 }
-function EmptyData({
+function EmptyData<TData extends RowData>({
 	tableInstance,
 	onNew,
 	isFiltered,
@@ -26,7 +27,7 @@ function EmptyData({
 	customAddBtn,
 	permissionSection,
 	permission,
-}: Props) {
+}: Props<TData>) {
 	return (
 		<tr>
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
@@ -65,8 +65,12 @@ export function AccessClientFields({ initialValues, name = "clients" }: Props) {
 									value={client.directive}
 									onChange={(e) => handleChange(idx, "directive", e.target.value)}
 								>
-									<option value="allow"><T id="action.allow" /></option>
-									<option value="deny"><T id="action.deny" /></option>
+									<option value="allow">
+										<T id="action.allow" />
+									</option>
+									<option value="deny">
+										<T id="action.deny" />
+									</option>
 								</select>
 							</span>
 							<input
@@ -81,16 +85,13 @@ export function AccessClientFields({ initialValues, name = "clients" }: Props) {
 						</div>
 					</div>
 					<div className="col-1">
-						<a
-							role="button"
+						<button
+							type="button"
 							className="btn btn-ghost btn-danger p-0"
-							onClick={(e) => {
-								e.preventDefault();
-								handleRemove(idx);
-							}}
+							onClick={() => handleRemove(idx)}
 						>
 							<IconX size={16} />
-						</a>
+						</button>
 					</div>
 				</div>
 			))}
@@ -112,7 +113,9 @@ export function AccessClientFields({ initialValues, name = "clients" }: Props) {
 								value="deny"
 								disabled
 							>
-								<option value="deny"><T id="action.deny" /></option>
+								<option value="deny">
+									<T id="action.deny" />
+								</option>
 							</select>
 						</span>
 						<input
@@ -82,16 +82,13 @@ export function BasicAuthFields({ initialValues, name = "items" }: Props) {
 						/>
 					</div>
 					<div className="col-1">
-						<a
-							role="button"
+						<button
+							type="button"
 							className="btn btn-ghost btn-danger p-0"
-							onClick={(e) => {
-								e.preventDefault();
-								handleRemove(idx);
-							}}
+							onClick={() => handleRemove(idx)}
 						>
 							<IconX size={16} />
-						</a>
+						</button>
 					</div>
 				</div>
 			))}
@@ -1,3 +1,51 @@
+/* card-active points --tblr-card-border-color at --tblr-primary, which both the
+   card outline and the card header's bottom border are drawn from. Tabler's
+   stylesheet is loaded after this one, so the override needs !important. */
 .locationCard {
-	border-color: light-dark(var(--tblr-gray-200), var(--tblr-gray-700)) !important;
+	--tblr-card-border-color: light-dark(var(--tblr-gray-200), var(--tblr-gray-700)) !important;
+}
+
+.filter {
+	max-width: 20rem;
+}
+
+/* The header is a plain toggle rather than a button-styled control, so that a
+   list of collapsed locations reads as rows instead of a stack of buttons. */
+.toggle {
+	display: flex;
+	flex: 1 1 auto;
+	align-self: stretch;
+	align-items: center;
+	min-width: 0;
+	padding: 0;
+	color: inherit;
+	text-align: left;
+	background: transparent;
+	border: 0;
+}
+
+.toggle:focus-visible {
+	outline: 2px solid var(--tblr-primary);
+	outline-offset: -2px;
+}
+
+/* Keeps the marker on one line next to the delete button, and lets it drop out
+   of the way before the path does when the row runs out of room. */
+.marker {
+	display: flex;
+	flex: 0 1 auto;
+	align-items: center;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.path {
+	font-weight: 500;
+	white-space: nowrap;
+}
+
+.summary {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
@@ -1,20 +1,43 @@
-import { IconSettings } from "@tabler/icons-react";
+import {
+	IconChevronDown,
+	IconChevronRight,
+	IconPlus,
+	IconSearch,
+	IconSettings,
+	IconTrash,
+	IconX,
+} from "@tabler/icons-react";
 import CodeEditor from "@uiw/react-textarea-code-editor";
 import cn from "classnames";
 import { useFormikContext } from "formik";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import type { ProxyLocation } from "src/api/backend";
 import { intl, T } from "src/locale";
 import styles from "./LocationsFields.module.css";

+// Below this many locations the list is short enough to scan by eye, and the
+// filter would only take up space.
+const FILTER_THRESHOLD = 5;
+
+// Locations are identified by a client-side id rather than their array index,
+// so that expanded/advanced state stays with the right row when one is removed.
+interface Row {
+	id: number;
+	value: ProxyLocation;
+}
+
 interface Props {
 	initialValues: ProxyLocation[];
 	name?: string;
 }
 export function LocationsFields({ initialValues, name = "locations" }: Props) {
-	const [values, setValues] = useState<ProxyLocation[]>(initialValues || []);
+	const [rows, setRows] = useState<Row[]>(() => (initialValues || []).map((value, id) => ({ id, value })));
 	const { setFieldValue } = useFormikContext();
+	const [expanded, setExpanded] = useState<number[]>([]);
 	const [advVisible, setAdvVisible] = useState<number[]>([]);
+	const [filter, setFilter] = useState("");
+	const nextId = useRef(rows.length);
+	const scrollToId = useRef<number | null>(null);

 	const blankItem: ProxyLocation = {
 		path: "",
@@ -24,32 +47,62 @@ export function LocationsFields({ initialValues, name = "locations" }: Props) {
 		forwardPort: 80,
 	};

-	const toggleAdvVisible = (idx: number) => {
-		setAdvVisible(advVisible.includes(idx) ? advVisible.filter((i) => i !== idx) : [...advVisible, idx]);
+	const toggleExpanded = (id: number) => {
+		setExpanded(expanded.includes(id) ? expanded.filter((i) => i !== id) : [...expanded, id]);
+	};
+
+	const toggleAdvVisible = (id: number) => {
+		setAdvVisible(advVisible.includes(id) ? advVisible.filter((i) => i !== id) : [...advVisible, id]);
 	};

 	const handleAdd = () => {
-		setValues([...values, blankItem]);
+		const id = nextId.current++;
+		setRows([...rows, { id, value: blankItem }]);
+		// A new location starts empty, so open it and make sure an active filter
+		// doesn't hide the row that was just added.
+		setExpanded([...expanded, id]);
+		setFilter("");
+		scrollToId.current = id;
 	};

-	const handleRemove = (idx: number) => {
-		const newValues = values.filter((_: ProxyLocation, i: number) => i !== idx);
-		setValues(newValues);
-		setFormField(newValues);
+	const handleRemove = (id: number) => {
+		const newRows = rows.filter((r: Row) => r.id !== id);
+		setRows(newRows);
+		setExpanded(expanded.filter((i) => i !== id));
+		setAdvVisible(advVisible.filter((i) => i !== id));
+		setFormField(newRows);
 	};

-	const handleChange = (idx: number, field: string, fieldValue: string) => {
-		const newValues = values.map((v: ProxyLocation, i: number) => (i === idx ? { ...v, [field]: fieldValue } : v));
-		setValues(newValues);
-		setFormField(newValues);
+	const handleChange = (id: number, field: string, fieldValue: string) => {
+		const newRows = rows.map((r: Row) => (r.id === id ? { ...r, value: { ...r.value, [field]: fieldValue } } : r));
+		setRows(newRows);
+		setFormField(newRows);
 	};

-	const setFormField = (newValues: ProxyLocation[]) => {
-		const filtered = newValues.filter((v: ProxyLocation) => v?.path?.trim() !== "");
+	const setFormField = (newRows: Row[]) => {
+		const filtered = newRows.map((r: Row) => r.value).filter((v: ProxyLocation) => v?.path?.trim() !== "");
 		setFieldValue(name, filtered);
 	};

-	if (values.length === 0) {
+	const forwardSummary = (item: ProxyLocation) => {
+		if (!item.forwardHost) {
+			return "";
+		}
+		return `${item.forwardScheme}://${item.forwardHost}${item.forwardPort ? `:${item.forwardPort}` : ""}`;
+	};
+
+	// Matches the path as well as the destination, so a location can be found by
+	// the host or port it forwards to and not just by its path.
+	const matchesFilter = (item: ProxyLocation, query: string) =>
+		[item.path, item.forwardScheme, item.forwardHost, item.forwardPort, forwardSummary(item)]
+			.join(" ")
+			.toLowerCase()
+			.includes(query);
+
+	const query = filter.trim().toLowerCase();
+	const visibleRows = query ? rows.filter((r: Row) => matchesFilter(r.value, query)) : rows;
+
+	if (rows.length === 0) {
 		return (
 			<div className="text-center">
 				<button type="button" className="btn my-3" onClick={handleAdd}>
@@ -61,125 +114,217 @@ export function LocationsFields({ initialValues, name = "locations" }: Props) {

 	return (
 		<>
-			{values.map((item: ProxyLocation, idx: number) => (
-				<div key={idx} className={cn("card", "card-active", "mb-3", styles.locationCard)}>
-					<div className="card-body">
-						<div className="row">
-							<div className="col-md-10">
-								<div className="input-group mb-3">
-									<span className="input-group-text">Location</span>
-									<input
-										type="text"
-										className="form-control"
-										placeholder="/path"
-										autoComplete="off"
-										value={item.path}
-										onChange={(e) => handleChange(idx, "path", e.target.value)}
-									/>
-								</div>
-							</div>
-							<div className="col-md-2 text-end">
-								<button
-									type="button"
-									className="btn p-0"
-									title="Advanced"
-									onClick={() => toggleAdvVisible(idx)}
-								>
-									<IconSettings size={20} />
-								</button>
-							</div>
-						</div>
-						<div className="row">
-							<div className="col-md-3">
-								<div className="mb-3">
-									<label className="form-label" htmlFor="forwardScheme">
-										<T id="host.forward-scheme" />
-									</label>
-									<select
-										id="forwardScheme"
-										className="form-control"
-										value={item.forwardScheme}
-										onChange={(e) => handleChange(idx, "forwardScheme", e.target.value)}
-									>
-										<option value="http">http</option>
-										<option value="https">https</option>
-									</select>
-								</div>
-							</div>
-							<div className="col-md-6">
-								<div className="mb-3">
-									<label className="form-label" htmlFor="forwardHost">
-										<T id="proxy-host.forward-host" />
-									</label>
-									<input
-										id="forwardHost"
-										type="text"
-										className="form-control"
-										required
-										placeholder="eg: 10.0.0.1/path/"
-										value={item.forwardHost}
-										onChange={(e) => handleChange(idx, "forwardHost", e.target.value)}
-									/>
-								</div>
-							</div>
-							<div className="col-md-3">
-								<div className="mb-3">
-									<label className="form-label" htmlFor="forwardPort">
-										<T id="host.forward-port" />
-									</label>
-									<input
-										id="forwardPort"
-										type="number"
-										min={1}
-										max={65535}
-										className="form-control"
-										required
-										placeholder="eg: 8081"
-										value={item.forwardPort}
-										onChange={(e) => handleChange(idx, "forwardPort", e.target.value)}
-									/>
-								</div>
-							</div>
-						</div>
-						{advVisible.includes(idx) && (
-							<div className="">
-								<CodeEditor
-									language="nginx"
-									placeholder={intl.formatMessage({ id: "nginx-config.placeholder" })}
-									padding={15}
-									data-color-mode="dark"
-									minHeight={170}
-									indentWidth={2}
-									value={item.advancedConfig}
-									onChange={(e) => handleChange(idx, "advancedConfig", e.target.value)}
-									style={{
-										fontFamily:
-											"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
-										borderRadius: "0.3rem",
-										minHeight: "170px",
-									}}
-								/>
-							</div>
-						)}
-						<div className="mt-1">
-							<a
-								href="#"
-								onClick={(e) => {
-									e.preventDefault();
-									handleRemove(idx);
-								}}
+			<div className="d-flex align-items-center mb-3">
+				{rows.length >= FILTER_THRESHOLD && (
+					<div className={cn("input-group", styles.filter)}>
+						<span className="input-group-text">
+							<IconSearch size={16} />
+						</span>
+						<input
+							type="text"
+							className="form-control"
+							autoComplete="off"
+							placeholder={intl.formatMessage({ id: "location.filter" })}
+							aria-label={intl.formatMessage({ id: "location.filter" })}
+							value={filter}
+							onChange={(e) => setFilter(e.target.value)}
+						/>
+						{filter ? (
+							<button
+								type="button"
+								className="btn btn-icon"
+								title={intl.formatMessage({ id: "action.clear" })}
+								aria-label={intl.formatMessage({ id: "action.clear" })}
+								onClick={() => setFilter("")}
 							>
-								<T id="action.delete" />
-							</a>
-						</div>
+								<IconX size={16} />
+							</button>
+						) : null}
 					</div>
-				</div>
-			))}
-			<div>
-				<button type="button" className="btn btn-sm" onClick={handleAdd}>
+				)}
+				<button type="button" className="btn ms-auto" onClick={handleAdd}>
+					<IconPlus size={16} className="me-1" />
 					<T id="action.add-location" />
 				</button>
 			</div>
+			{visibleRows.length === 0 ? (
+				<div className="text-secondary text-center my-3">
+					<T id="empty-search" />
+				</div>
+			) : (
+				visibleRows.map((row: Row) => {
+					const item = row.value;
+					const isOpen = expanded.includes(row.id);
+					const bodyId = `location-body-${row.id}`;
+					return (
+						<div
+							key={row.id}
+							ref={(node) => {
+								if (node && scrollToId.current === row.id) {
+									scrollToId.current = null;
+									node.scrollIntoView({ block: "nearest" });
+								}
+							}}
+							className={cn("card", "card-active", "mb-2", styles.locationCard)}
+						>
+							<div className={cn("card-header", "p-2", !isOpen && "border-bottom-0")}>
+								<button
+									type="button"
+									className={styles.toggle}
+									aria-expanded={isOpen}
+									aria-controls={bodyId}
+									onClick={() => toggleExpanded(row.id)}
+								>
+									{isOpen ? <IconChevronDown size={16} /> : <IconChevronRight size={16} />}
+									<span className={cn("ms-2", styles.path)}>{item.path}</span>
+									<span className={cn("ms-2", "text-secondary", styles.summary)}>
+										{forwardSummary(item)}
+									</span>
+								</button>
+								{item.advancedConfig ? (
+									// Deliberately the same icon as the advanced-config toggle in the
+									// body below, so the marker reads as "this row has that section
+									// filled in" rather than as a decoration of its own.
+									<span
+										className={cn("ms-2", "text-secondary", styles.marker)}
+										role="img"
+										title={intl.formatMessage({ id: "location.advanced-config" })}
+										aria-label={intl.formatMessage({ id: "location.advanced-config" })}
+									>
+										<IconSettings size={16} />
+									</span>
+								) : null}
+								<button
+									type="button"
+									className="btn btn-action ms-2"
+									title={intl.formatMessage({ id: "action.delete" })}
+									aria-label={intl.formatMessage({ id: "action.delete" })}
+									onClick={() => handleRemove(row.id)}
+								>
+									<IconTrash size={16} className="icon" />
+								</button>
+							</div>
+							{isOpen && (
+								<div className="card-body" id={bodyId}>
+									<div className="row">
+										<div className="col-md-10">
+											<div className="input-group mb-3">
+												<span className="input-group-text">Location</span>
+												<input
+													type="text"
+													className="form-control"
+													placeholder="/path"
+													autoComplete="off"
+													value={item.path}
+													onChange={(e) => handleChange(row.id, "path", e.target.value)}
+												/>
+											</div>
+										</div>
+										<div className="col-md-2 text-end">
+											<button
+												type="button"
+												className="btn p-0"
+												title="Advanced"
+												aria-expanded={advVisible.includes(row.id)}
+												onClick={() => toggleAdvVisible(row.id)}
+											>
+												<IconSettings size={20} />
+											</button>
+										</div>
+									</div>
+									<div className="row">
+										<div className="col-md-3">
+											<div className="mb-3">
+												<label
+													className="form-label"
+													htmlFor={`location-forwardScheme-${row.id}`}
+												>
+													<T id="host.forward-scheme" />
+												</label>
+												<select
+													id={`location-forwardScheme-${row.id}`}
+													className="form-control"
+													value={item.forwardScheme}
+													onChange={(e) =>
+														handleChange(row.id, "forwardScheme", e.target.value)
+													}
+												>
+													<option value="http">http</option>
+													<option value="https">https</option>
+												</select>
+											</div>
+										</div>
+										<div className="col-md-6">
+											<div className="mb-3">
+												<label
+													className="form-label"
+													htmlFor={`location-forwardHost-${row.id}`}
+												>
+													<T id="proxy-host.forward-host" />
+												</label>
+												<input
+													id={`location-forwardHost-${row.id}`}
+													type="text"
+													className="form-control"
+													required
+													placeholder="eg: 10.0.0.1/path/"
+													value={item.forwardHost}
+													onChange={(e) =>
+														handleChange(row.id, "forwardHost", e.target.value)
+													}
+												/>
+											</div>
+										</div>
+										<div className="col-md-3">
+											<div className="mb-3">
+												<label
+													className="form-label"
+													htmlFor={`location-forwardPort-${row.id}`}
+												>
+													<T id="host.forward-port" />
+												</label>
+												<input
+													id={`location-forwardPort-${row.id}`}
+													type="number"
+													min={1}
+													max={65535}
+													className="form-control"
+													required
+													placeholder="eg: 8081"
+													value={item.forwardPort}
+													onChange={(e) =>
+														handleChange(row.id, "forwardPort", e.target.value)
+													}
+												/>
+											</div>
+										</div>
+									</div>
+									{advVisible.includes(row.id) && (
+										<div className="">
+											<CodeEditor
+												language="nginx"
+												placeholder={intl.formatMessage({ id: "nginx-config.placeholder" })}
+												padding={15}
+												data-color-mode="dark"
+												minHeight={170}
+												indentWidth={2}
+												value={item.advancedConfig}
+												onChange={(e) => handleChange(row.id, "advancedConfig", e.target.value)}
+												style={{
+													fontFamily:
+														"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+													borderRadius: "0.3rem",
+													minHeight: "170px",
+												}}
+											/>
+										</div>
+									)}
+								</div>
+							)}
+						</div>
+					);
+				})
+			)}
 		</>
 	);
 }
@@ -10,7 +10,13 @@ interface Props {
 	requireDomainNames?: boolean; // used for streams
 	color?: string;
 }
-export function SSLOptionsFields({ forHttp = true, forProxyHost = false, forceDNSForNew, requireDomainNames, color = "bg-cyan" }: Props) {
+export function SSLOptionsFields({
+	forHttp = true,
+	forProxyHost = false,
+	forceDNSForNew,
+	requireDomainNames,
+	color = "bg-cyan",
+}: Props) {
 	const { values, setFieldValue } = useFormikContext();
 	const v: any = values || {};

@@ -116,10 +122,12 @@ export function SSLOptionsFields({ forHttp = true, forProxyHost = false, forceDN
 		</div>
 	);

-	const getHttpAdvancedOptions = () =>(
+	const getHttpAdvancedOptions = () => (
 		<div>
 			<details>
-				<summary className="mb-1"><T id="domains.advanced" /></summary>
+				<summary className="mb-1">
+					<T id="domains.advanced" />
+				</summary>
 				<div className="row">
 					<div className="col-12">
 						<Field name="trustForwardedProto">
@@ -72,7 +72,10 @@ export function SiteHeader() {
 							<div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
 								<div className="d-md-none">
 									{/* biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: This div is not interactive. */}
-									<div className="p-2 pb-1 pe-1 d-flex align-items-center" onClick={e => e.stopPropagation()}>
+									<div
+										className="p-2 pb-1 pe-1 d-flex align-items-center"
+										onClick={(e) => e.stopPropagation()}
+									>
 										<div className="ps-2 pe-1 me-auto">
 											<div>{currentUser?.nickname}</div>
 											<div className="mt-1 small text-secondary text-nowrap">
@@ -143,7 +143,6 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
 					className="nav-link dropdown-toggle"
 					href={item.to}
 					data-bs-toggle="dropdown"
-					data-bs-auto-close="outside"
 					aria-expanded="false"
 					role="button"
 				>
@@ -176,13 +175,14 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
 };

 export function SiteMenu() {
-	const closeMenu = () => setTimeout(() => {
-		const navbarToggler = document.querySelector<HTMLElement>(".navbar-toggler");
-		const navbarMenu = document.querySelector("#navbar-menu");
-		if (navbarToggler && navbarMenu?.classList.contains("show")) {
-			navbarToggler.click();
-		}
-	}, 300);
+	const closeMenu = () =>
+		setTimeout(() => {
+			const navbarToggler = document.querySelector<HTMLElement>(".navbar-toggler");
+			const navbarMenu = document.querySelector("#navbar-menu");
+			if (navbarToggler && navbarMenu?.classList.contains("show")) {
+				navbarToggler.click();
+			}
+		}, 300);

 	return (
 		<header className="navbar-expand-md">
@@ -1,9 +1,10 @@
-import type { Table as ReactTable } from "@tanstack/react-table";
+import type { Table as ReactTable, RowData } from "@tanstack/react-table";
+import type { Features } from "./features";

-interface Props {
-	tableInstance: ReactTable<any>;
+interface Props<TData extends RowData> {
+	tableInstance: ReactTable<Features, TData>;
 }
-function EmptyRow({ tableInstance }: Props) {
+function EmptyRow<TData extends RowData>({ tableInstance }: Props<TData>) {
 	return (
 		<tr>
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
@@ -1,8 +1,8 @@
-import { flexRender } from "@tanstack/react-table";
+import { flexRender, type RowData } from "@tanstack/react-table";
 import type { TableLayoutProps } from "src/components";
 import { EmptyRow } from "./EmptyRow";

-function TableBody<T>(props: TableLayoutProps<T>) {
+function TableBody<T extends RowData>(props: TableLayoutProps<T>) {
 	const { tableInstance, extraStyles, emptyState } = props;
 	const rows = tableInstance.getRowModel().rows;

@@ -1,8 +1,8 @@
 import { IconArrowsSort, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
-import { flexRender } from "@tanstack/react-table";
+import { flexRender, type RowData } from "@tanstack/react-table";
 import type { TableLayoutProps } from "src/components";

-function TableHeader<T>(props: TableLayoutProps<T>) {
+function TableHeader<T extends RowData>(props: TableLayoutProps<T>) {
 	const { tableInstance } = props;
 	const headerGroups = tableInstance.getHeaderGroups();

@@ -61,4 +61,4 @@ const tableEventReducer = (state: any, { type, payload }: any) => {
 	}
 };

-export { tableEvents, tableEventReducer };
+export { tableEventReducer, tableEvents };
@@ -1,15 +1,16 @@
-import type { Table as ReactTable } from "@tanstack/react-table";
+import type { Table as ReactTable, RowData } from "@tanstack/react-table";
+import type { Features } from "./features";
 import { TableBody } from "./TableBody";
 import { TableHeader } from "./TableHeader";

-interface TableLayoutProps<TFields> {
-	tableInstance: ReactTable<TFields>;
+interface TableLayoutProps<TFields extends RowData> {
+	tableInstance: ReactTable<Features, TFields>;
 	emptyState?: React.ReactNode;
 	extraStyles?: {
 		row: (rowData: TFields) => any | undefined;
 	};
 }
-function TableLayout<TFields>(props: TableLayoutProps<TFields>) {
+function TableLayout<TFields extends RowData>(props: TableLayoutProps<TFields>) {
 	const hasRows = props.tableInstance.getRowModel().rows.length > 0;
 	return (
 		<div className="table-responsive">
@@ -0,0 +1,35 @@
+import {
+	columnVisibilityFeature,
+	createSortedRowModel,
+	metaHelper,
+	rowSortingFeature,
+	tableFeatures,
+} from "@tanstack/react-table";
+
+interface ColumnMeta {
+	className?: string;
+}
+
+interface TableMeta {
+	isFetching?: boolean;
+}
+
+/**
+ * Shared TanStack Table v9 feature registration for every table in the app.
+ * Sorting and column visibility are used (or their APIs are called
+ * unconditionally, e.g. `getVisibleFlatColumns`/`getVisibleCells`) by the
+ * shared TableLayout/TableHeader/TableBody/EmptyData components, so every
+ * table instance must register them even when a particular table doesn't
+ * wire up controlled sorting state itself.
+ */
+const features = tableFeatures({
+	rowSortingFeature,
+	sortedRowModel: createSortedRowModel(),
+	columnVisibilityFeature,
+	columnMeta: metaHelper<ColumnMeta>(),
+	tableMeta: metaHelper<TableMeta>(),
+});
+
+type Features = typeof features;
+
+export { type ColumnMeta, type Features, features, type TableMeta };
@@ -1,4 +1,5 @@
 export * from "./Formatter";
+export * from "./features";
 export * from "./TableHeader";
 export * from "./TableHelpers";
 export * from "./TableLayout";
@@ -21,49 +21,51 @@ import langZh from "./lang/zh.json";
 import langTr from "./lang/tr.json";
 import langHu from "./lang/hu.json";
 import langNo from "./lang/no.json";
+import langUk from "./lang/uk.json";
 import langList from "./lang/lang-list.json";

 // first item of each array should be the language code,
 // not the country code
 // Remember when adding to this list, also update check-locales.js script
 const localeOptions = [
-  ["en", "en-US", langEn],
-  ["de", "de-DE", langDe],
-  ["es", "es-ES", langEs],
-  ["et", "et-EE", langEt],
-  ["pt", "pt-PT", langPt],
-  ["fr", "fr-FR", langFr],
-  ["ga", "ga-IE", langGa],
-  ["ja", "ja-JP", langJa],
-  ["it", "it-IT", langIt],
-  ["nl", "nl-NL", langNl],
-  ["pl", "pl-PL", langPl],
-  ["ru", "ru-RU", langRu],
-  ["sk", "sk-SK", langSk],
-  ["cs", "cs-CZ", langCs],
-  ["vi", "vi-VN", langVi],
-  ["zh", "zh-CN", langZh],
-  ["ko", "ko-KR", langKo],
-  ["bg", "bg-BG", langBg],
-  ["id", "id-ID", langId],
-  ["tr", "tr-TR", langTr],
-  ["hu", "hu-HU", langHu],
-  ["no", "no-NO", langNo],
+	["en", "en-US", langEn],
+	["de", "de-DE", langDe],
+	["es", "es-ES", langEs],
+	["et", "et-EE", langEt],
+	["pt", "pt-PT", langPt],
+	["fr", "fr-FR", langFr],
+	["ga", "ga-IE", langGa],
+	["ja", "ja-JP", langJa],
+	["it", "it-IT", langIt],
+	["nl", "nl-NL", langNl],
+	["pl", "pl-PL", langPl],
+	["ru", "ru-RU", langRu],
+	["sk", "sk-SK", langSk],
+	["cs", "cs-CZ", langCs],
+	["vi", "vi-VN", langVi],
+	["zh", "zh-CN", langZh],
+	["ko", "ko-KR", langKo],
+	["bg", "bg-BG", langBg],
+	["id", "id-ID", langId],
+	["tr", "tr-TR", langTr],
+	["hu", "hu-HU", langHu],
+	["no", "no-NO", langNo],
+	["uk", "uk-UA", langUk],
 ];

 const loadMessages = (locale?: string): typeof langList & typeof langEn => {
-  const thisLocale = (locale || "en").slice(0, 2);
+	const thisLocale = (locale || "en").slice(0, 2);

-  // ensure this lang exists in localeOptions above, otherwise fallback to en
-  if (thisLocale === "en" || !localeOptions.some(([code]) => code === thisLocale)) {
-    return Object.assign({}, langList, langEn);
-  }
+	// ensure this lang exists in localeOptions above, otherwise fallback to en
+	if (thisLocale === "en" || !localeOptions.some(([code]) => code === thisLocale)) {
+		return Object.assign({}, langList, langEn);
+	}

-  return Object.assign({}, langList, langEn, localeOptions.find(([code]) => code === thisLocale)?.[2]);
+	return Object.assign({}, langList, langEn, localeOptions.find(([code]) => code === thisLocale)?.[2]);
 };

 const getFlagCodeForLocale = (locale?: string) => {
-  const thisLocale = (locale || "en").slice(0, 2);
+	const thisLocale = (locale || "en").slice(0, 2);

  // only add to this if your flag is different from the locale code
  const specialCases: Record<string, string> = {
@@ -74,27 +76,28 @@ const getFlagCodeForLocale = (locale?: string) => {
    cs: "cz", // Czechia
    ga: "ie", // Ireland (Irish)
    et: "ee", // Estonia
+    uk: "ua", // Ukraine
  };

-  if (specialCases[thisLocale]) {
-    return specialCases[thisLocale].toUpperCase();
-  }
-  return thisLocale.toUpperCase();
+	if (specialCases[thisLocale]) {
+		return specialCases[thisLocale].toUpperCase();
+	}
+	return thisLocale.toUpperCase();
 };

 const getLocale = (short = false) => {
-  let loc = window.localStorage.getItem("locale");
-  if (!loc) {
-    loc = document.documentElement.lang;
-  }
-  if (short) {
-    return loc.slice(0, 2);
-  }
-  // finally, fallback
-  if (!loc) {
-    loc = "en";
-  }
-  return loc;
+	let loc = window.localStorage.getItem("locale");
+	if (!loc) {
+		loc = document.documentElement.lang;
+	}
+	if (short) {
+		return loc.slice(0, 2);
+	}
+	// finally, fallback
+	if (!loc) {
+		loc = "en";
+	}
+	return loc;
 };

 const cache = createIntlCache();
@@ -103,41 +106,41 @@ const initialMessages = loadMessages(getLocale());
 let intl = createIntl({ locale: getLocale(), messages: initialMessages }, cache);

 const changeLocale = (locale: string): void => {
-  const messages = loadMessages(locale);
-  intl = createIntl({ locale, messages }, cache);
-  window.localStorage.setItem("locale", locale);
-  document.documentElement.lang = locale;
+	const messages = loadMessages(locale);
+	intl = createIntl({ locale, messages }, cache);
+	window.localStorage.setItem("locale", locale);
+	document.documentElement.lang = locale;
 };

 // This is a translation component that wraps the translation in a span with a data
 // attribute so devs can inspect the element to see the translation ID
 const T = ({
-  id,
-  data,
-  tData,
+	id,
+	data,
+	tData,
 }: {
-  id: string;
-  data?: Record<string, string | number | undefined>;
-  tData?: Record<string, string>;
+	id: string;
+	data?: Record<string, string | number | undefined>;
+	tData?: Record<string, string>;
 }) => {
-  const translatedData: Record<string, string> = {};
-  if (tData) {
-    // iterate over tData and translate each value
-    Object.entries(tData).forEach(([key, value]) => {
-      translatedData[key] = intl.formatMessage({ id: value });
-    });
-  }
-  return (
-    <span data-translation-id={id}>
-      {intl.formatMessage(
-        { id },
-        {
-          ...data,
-          ...translatedData,
-        },
-      )}
-    </span>
-  );
+	const translatedData: Record<string, string> = {};
+	if (tData) {
+		// iterate over tData and translate each value
+		Object.entries(tData).forEach(([key, value]) => {
+			translatedData[key] = intl.formatMessage({ id: value });
+		});
+	}
+	return (
+		<span data-translation-id={id}>
+			{intl.formatMessage(
+				{ id },
+				{
+					...data,
+					...translatedData,
+				},
+			)}
+		</span>
+	);
 };

 //console.log("L:", localeOptions);
@@ -1,9 +1,4 @@
-import {
-	fromUnixTime,
-	type IntlFormatFormatOptions,
-	intlFormat,
-	parseISO,
-} from "date-fns";
+import { fromUnixTime, type IntlFormatFormatOptions, intlFormat, parseISO } from "date-fns";

 const isUnixTimestamp = (value: unknown): boolean => {
 	if (typeof value !== "number" && typeof value !== "string") return false;
@@ -3,4 +3,4 @@ export * as Certificates from "./Certificates.md";
 export * as DeadHosts from "./DeadHosts.md";
 export * as ProxyHosts from "./ProxyHosts.md";
 export * as RedirectionHosts from "./RedirectionHosts.md";
-export * as Streams from "./Streams.md";
+export * as Streams from "./Streams.md";
@@ -19,21 +19,21 @@ import * as vi from "./vi/index";
 import * as zh from "./zh/index";
 import * as tr from "./tr/index";
 import * as hu from "./hu/index";
+import * as uk from "./uk/index";

-const items: any = { en, de, pt, es, et, ja, sk, cs, zh, pl, ru, it, vi, nl, bg, ko, ga, id, fr, tr, hu };
-
+const items: any = { en, de, pt, es, et, ja, sk, cs, zh, pl, ru, it, vi, nl, bg, ko, ga, id, fr, tr, hu, uk };

 const fallbackLang = "en";

 export const getHelpFile = (lang: string, section: string): string => {
-  if (typeof items[lang] !== "undefined" && typeof items[lang][section] !== "undefined") {
-    return items[lang][section].default;
-  }
-  // Fallback to English
-  if (typeof items[fallbackLang] !== "undefined" && typeof items[fallbackLang][section] !== "undefined") {
-    return items[fallbackLang][section].default;
-  }
-  throw new Error(`Cannot load help doc for ${lang}-${section}`);
+	if (typeof items[lang] !== "undefined" && typeof items[lang][section] !== "undefined") {
+		return items[lang][section].default;
+	}
+	// Fallback to English
+	if (typeof items[fallbackLang] !== "undefined" && typeof items[fallbackLang][section] !== "undefined") {
+		return items[fallbackLang][section].default;
+	}
+	throw new Error(`Cannot load help doc for ${lang}-${section}`);
 };

 export default items;
@@ -4,4 +4,3 @@ export * as DeadHosts from "./DeadHosts.md";
 export * as ProxyHosts from "./ProxyHosts.md";
 export * as RedirectionHosts from "./RedirectionHosts.md";
 export * as Streams from "./Streams.md";
-
@@ -4,4 +4,3 @@ export * as DeadHosts from "./DeadHosts.md";
 export * as ProxyHosts from "./ProxyHosts.md";
 export * as RedirectionHosts from "./RedirectionHosts.md";
 export * as Streams from "./Streams.md";
-
@@ -0,0 +1,7 @@
+## Що таке список доступу?
+
+Списки доступу дають змогу створити список дозволених або заборонених IP-адрес клієнтів, а також налаштувати автентифікацію для проксі-хостів за допомогою базової HTTP-автентифікації.
+
+Для одного списку доступу можна налаштувати кілька правил для клієнтів, імен користувачів і паролів, а потім застосувати його до одного або кількох _проксі-хостів_.
+
+Це особливо корисно для проксійованих вебсервісів, які не мають власних механізмів автентифікації, або коли потрібно захистити їх від невідомих клієнтів.
@@ -0,0 +1,21 @@
+## Довідка щодо сертифікатів
+
+### HTTP-сертифікат
+
+Під час перевірки сертифіката через HTTP сервери Let's Encrypt спробують отримати доступ до ваших доменів через HTTP (не HTTPS!). Якщо перевірка буде успішною, вони видадуть сертифікат.
+
+Для цього методу потрібно створити _проксі-хост_ для відповідних доменів. Він має бути доступним через HTTP і вказувати на цей екземпляр Nginx. Після отримання сертифіката можна налаштувати _проксі-хост_ на використання цього сертифіката для HTTPS-з'єднань. Однак для автоматичного поновлення сертифіката _проксі-хост_ і надалі має бути доступним через HTTP.
+
+Цей спосіб _не підтримує_ підстановчі домени.
+
+### DNS-сертифікат
+
+Для перевірки сертифіката через DNS потрібно використати плагін DNS-провайдера. За допомогою цього плагіна буде створено тимчасові записи у вашому домені. Let's Encrypt перевірить ці записи, щоб підтвердити, що домен належить вам, і в разі успішної перевірки видасть сертифікат.
+
+Перед запитом такого сертифіката не потрібно створювати _проксі-хост_ або налаштовувати для нього доступ через HTTP.
+
+Цей спосіб _підтримує_ підстановчі домени.
+
+### Власний сертифікат
+
+Скористайтеся цим варіантом, щоб завантажити власний SSL-сертифікат, виданий вашим центром сертифікації.
@@ -0,0 +1,7 @@
+## Що таке 404-хост?
+
+404-хост — це хост, налаштований для показу сторінки з помилкою 404.
+
+Він може бути корисним, якщо ваш домен проіндексовано пошуковими системами й ви хочете показати зрозумілішу сторінку помилки або повідомити пошуковим роботам, що сторінки домену більше не існують.
+
+Також цей хост дає змогу відстежувати звернення до нього в журналах і переглядати джерела переходів.
@@ -0,0 +1,7 @@
+## Що таке проксі-хост?
+
+Проксі-хост — це вхідна точка для вебсервісу, до якого потрібно перенаправляти запити.
+
+Він дає змогу за потреби завершувати SSL-з'єднання для сервісу, який може не мати вбудованої підтримки SSL.
+
+Проксі-хости — найпоширеніший спосіб використання Nginx Proxy Manager.
@@ -0,0 +1,5 @@
+## Що таке редирект-хост?
+
+Редирект-хост перенаправляє запити з вхідного домену на інший домен.
+
+Найчастіше такий хост використовують після зміни домену вебсайту, коли в пошукових системах або на інших сайтах ще залишилися посилання на старий домен.
@@ -0,0 +1,5 @@
+## Що таке потік?
+
+Потік — це відносно нова функція Nginx, яка дає змогу перенаправляти TCP/UDP-трафік безпосередньо на інший комп'ютер у мережі.
+
+Це може бути корисним, якщо ви використовуєте ігрові, FTP- або SSH-сервери.
@@ -0,0 +1,6 @@
+export * as AccessLists from "./AccessLists.md";
+export * as Certificates from "./Certificates.md";
+export * as DeadHosts from "./DeadHosts.md";
+export * as ProxyHosts from "./ProxyHosts.md";
+export * as RedirectionHosts from "./RedirectionHosts.md";
+export * as Streams from "./Streams.md";
@@ -1,4 +1,61 @@
 {
+	"2fa.backup-codes-remaining": {
+		"defaultMessage": "Verbleibende Backup-Codes: {count}"
+	},
+	"2fa.backup-warning": {
+		"defaultMessage": "Bewahre diese Backup-Codes an einem sicheren Ort auf. Jeder Code kann nur einmal verwendet werden."
+	},
+	"2fa.disable": {
+		"defaultMessage": "Zwei-Faktor-Authentifizierung deaktivieren"
+	},
+	"2fa.disable-confirm": {
+		"defaultMessage": "2FA deaktivieren"
+	},
+	"2fa.disable-warning": {
+		"defaultMessage": "Das Deaktivieren der Zwei-Faktor-Authentifizierung macht dein Konto weniger sicher."
+	},
+	"2fa.disabled": {
+		"defaultMessage": "Deaktiviert"
+	},
+	"2fa.done": {
+		"defaultMessage": "Ich habe meine Backup-Codes gespeichert"
+	},
+	"2fa.enable": {
+		"defaultMessage": "Zwei-Faktor-Authentifizierung aktivieren"
+	},
+	"2fa.enabled": {
+		"defaultMessage": "Aktiviert"
+	},
+	"2fa.enter-code": {
+		"defaultMessage": "Verifizierungscode eingeben"
+	},
+	"2fa.enter-code-disable": {
+		"defaultMessage": "Verifizierungscode zum Deaktivieren eingeben"
+	},
+	"2fa.regenerate": {
+		"defaultMessage": "Neu generieren"
+	},
+	"2fa.regenerate-backup": {
+		"defaultMessage": "Backup-Codes neu generieren"
+	},
+	"2fa.regenerate-instructions": {
+		"defaultMessage": "Gib einen Verifizierungscode ein, um neue Backup-Codes zu generieren. Deine alten Codes werden dadurch ungültig."
+	},
+	"2fa.secret-key": {
+		"defaultMessage": "Geheimer Schlüssel"
+	},
+	"2fa.setup-instructions": {
+		"defaultMessage": "Scanne diesen QR-Code mit deiner Authenticator-App oder gib den geheimen Schlüssel manuell ein."
+	},
+	"2fa.status": {
+		"defaultMessage": "Status"
+	},
+	"2fa.title": {
+		"defaultMessage": "Zwei-Faktor-Authentifizierung"
+	},
+	"2fa.verify-enable": {
+		"defaultMessage": "Verifizieren und aktivieren"
+	},
 	"access-list": {
 		"defaultMessage": "Zugriffsliste"
 	},
@@ -23,6 +80,9 @@
 	"access-list.public.subtitle": {
 		"defaultMessage": "Keine Authentifizierung erforderlich"
 	},
+	"access-list.rule-source.placeholder": {
+		"defaultMessage": "192.168.1.100 oder 192.168.1.0/24 oder 2001:0db8::/32"
+	},
 	"access-list.satisfy-any": {
 		"defaultMessage": "Satisfy Any"
 	},
@@ -38,12 +98,18 @@
 	"action.add-location": {
 		"defaultMessage": "Pfad hinzufügen"
 	},
+	"action.allow": {
+		"defaultMessage": "Erlauben"
+	},
 	"action.close": {
 		"defaultMessage": "Schließen"
 	},
 	"action.delete": {
 		"defaultMessage": "Löschen"
 	},
+	"action.deny": {
+		"defaultMessage": "Verweigern"
+	},
 	"action.disable": {
 		"defaultMessage": "Deaktivieren"
 	},
@@ -68,6 +134,9 @@
 	"auditlogs": {
 		"defaultMessage": "Protokolle"
 	},
+	"auto": {
+		"defaultMessage": "Automatisch"
+	},
 	"cancel": {
 		"defaultMessage": "Abbrechen"
 	},
@@ -128,6 +197,9 @@
 	"certificates.dns.provider": {
 		"defaultMessage": "DNS Provider"
 	},
+	"certificates.dns.provider.placeholder": {
+		"defaultMessage": "Anbieter auswählen..."
+	},
 	"certificates.dns.warning": {
 		"defaultMessage": "Dieser Abschnitt erfordert einige Kenntnisse über Certbot und seine DNS-Plugins. Bitte konsultieren Sie die jeweilige Plugin-Dokumentation."
 	},
@@ -275,6 +347,9 @@
 	"domain-names.wildcards-not-supported": {
 		"defaultMessage": "Wildcards werden für diese Zertifizierungsstelle nicht unterstützt."
 	},
+	"domains.advanced": {
+		"defaultMessage": "Erweitert"
+	},
 	"domains.force-ssl": {
 		"defaultMessage": "Erzwinge SSL"
 	},
@@ -287,6 +362,9 @@
 	"domains.http2-support": {
 		"defaultMessage": "HTTP/2 Support"
 	},
+	"domains.trust-forwarded-proto": {
+		"defaultMessage": "Upstream Forwarded-Proto-Header vertrauen"
+	},
 	"domains.use-dns": {
 		"defaultMessage": "Nutze DNS Challenge"
 	},
@@ -354,7 +432,7 @@
 		"defaultMessage": "Pfad beibehalten"
 	},
 	"host.flags.protocols": {
-		"defaultMessage": "Protokole"
+		"defaultMessage": "Protokolle"
 	},
 	"host.flags.websockets-upgrade": {
 		"defaultMessage": "Websockets Support"
@@ -383,6 +461,21 @@
 	"loading": {
 		"defaultMessage": "Laden…"
 	},
+	"login.2fa-code": {
+		"defaultMessage": "Verifizierungscode"
+	},
+	"login.2fa-code-placeholder": {
+		"defaultMessage": "Code eingeben"
+	},
+	"login.2fa-description": {
+		"defaultMessage": "Gib den Code aus deiner Authenticator-App ein"
+	},
+	"login.2fa-title": {
+		"defaultMessage": "Zwei-Faktor-Authentifizierung"
+	},
+	"login.2fa-verify": {
+		"defaultMessage": "Verifizieren"
+	},
 	"login.title": {
 		"defaultMessage": "Anmelden"
 	},
@@ -530,6 +623,24 @@
 	"redirection-hosts.count": {
 		"defaultMessage": "{count} {count, plural, one {Redirection Host} other {Redirection Hosts}}"
 	},
+	"redirection-hosts.http-code.300": {
+		"defaultMessage": "300 Mehrere Auswahlmöglichkeiten"
+	},
+	"redirection-hosts.http-code.301": {
+		"defaultMessage": "301 Dauerhaft verschoben"
+	},
+	"redirection-hosts.http-code.302": {
+		"defaultMessage": "302 Vorübergehend verschoben"
+	},
+	"redirection-hosts.http-code.303": {
+		"defaultMessage": "303 Siehe andere"
+	},
+	"redirection-hosts.http-code.307": {
+		"defaultMessage": "307 Temporäre Umleitung"
+	},
+	"redirection-hosts.http-code.308": {
+		"defaultMessage": "308 Permanente Umleitung"
+	},
 	"role.admin": {
 		"defaultMessage": "Administrator"
 	},
@@ -587,6 +698,9 @@
 	"stream.forward-host": {
 		"defaultMessage": "Forward Host"
 	},
+	"stream.forward-host.placeholder": {
+		"defaultMessage": "example.com oder 10.0.0.1 oder 2001:db8:3333:4444:5555:6666:7777:8888"
+	},
 	"stream.incoming-port": {
 		"defaultMessage": "Incoming Port"
 	},
@@ -605,6 +719,9 @@
 	"test": {
 		"defaultMessage": "Test"
 	},
+	"update-available": {
+		"defaultMessage": "Update verfügbar: {latestVersion}"
+	},
 	"user": {
 		"defaultMessage": "User"
 	},
@@ -647,10 +764,13 @@
 	"user.switch-light": {
 		"defaultMessage": "Zum Light Mode wechseln"
 	},
+	"user.two-factor": {
+		"defaultMessage": "Zwei-Faktor-Auth"
+	},
 	"username": {
 		"defaultMessage": "Benutzername"
 	},
 	"users": {
 		"defaultMessage": "Benutzer"
 	}
-}
+}
@@ -101,6 +101,9 @@
 	"action.allow": {
 		"defaultMessage": "Allow"
 	},
+	"action.clear": {
+		"defaultMessage": "Clear"
+	},
 	"action.close": {
 		"defaultMessage": "Close"
 	},
@@ -461,6 +464,12 @@
 	"loading": {
 		"defaultMessage": "Loading…"
 	},
+	"location.advanced-config": {
+		"defaultMessage": "Has custom Nginx configuration"
+	},
+	"location.filter": {
+		"defaultMessage": "Filter by path or destination"
+	},
 	"login.2fa-code": {
 		"defaultMessage": "Verification Code"
 	},
@@ -64,5 +64,8 @@
  },
  "locale-no-NO": {
    "defaultMessage": "Norsk"
+  },
+  "locale-uk-UA": {
+    "defaultMessage": "Українська"
  }
 }
@@ -44,6 +44,9 @@
 	"action.allow": {
 		"defaultMessage": "İzin Ver"
 	},
+	"action.clear": {
+		"defaultMessage": "Temizle"
+	},
 	"action.close": {
 		"defaultMessage": "Kapat"
 	},
@@ -386,6 +389,12 @@
 	"loading": {
 		"defaultMessage": "Yükleniyor…"
 	},
+	"location.advanced-config": {
+		"defaultMessage": "Özel Nginx yapılandırması var"
+	},
+	"location.filter": {
+		"defaultMessage": "Yol veya hedefe göre filtrele"
+	},
 	"login.title": {
 		"defaultMessage": "Hesabınıza giriş yapın"
 	},
@@ -0,0 +1,785 @@
+{
+	"2fa.backup-codes-remaining": {
+		"defaultMessage": "Резервних кодів залишилося: {count}"
+	},
+	"2fa.backup-warning": {
+		"defaultMessage": "Збережіть ці резервні коди в безпечному місці. Кожен код можна використати лише один раз."
+	},
+	"2fa.disable": {
+		"defaultMessage": "Вимкнути двофакторну автентифікацію"
+	},
+	"2fa.disable-confirm": {
+		"defaultMessage": "Вимкнути 2FA"
+	},
+	"2fa.disable-warning": {
+		"defaultMessage": "Вимкнення двофакторної автентифікації знизить рівень безпеки вашого облікового запису."
+	},
+	"2fa.disabled": {
+		"defaultMessage": "Вимкнено"
+	},
+	"2fa.done": {
+		"defaultMessage": "Резервні коди збережено"
+	},
+	"2fa.enable": {
+		"defaultMessage": "Увімкнути двофакторну автентифікацію"
+	},
+	"2fa.enabled": {
+		"defaultMessage": "Увімкнено"
+	},
+	"2fa.enter-code": {
+		"defaultMessage": "Введіть код підтвердження"
+	},
+	"2fa.enter-code-disable": {
+		"defaultMessage": "Введіть код підтвердження для вимкнення"
+	},
+	"2fa.regenerate": {
+		"defaultMessage": "Згенерувати повторно"
+	},
+	"2fa.regenerate-backup": {
+		"defaultMessage": "Повторно згенерувати резервні коди"
+	},
+	"2fa.regenerate-instructions": {
+		"defaultMessage": "Введіть код підтвердження, щоб згенерувати нові резервні коди. Ваші старі коди стануть недійсними."
+	},
+	"2fa.secret-key": {
+		"defaultMessage": "Секретний ключ"
+	},
+	"2fa.setup-instructions": {
+		"defaultMessage": "Відскануйте цей QR-код у застосунку-автентифікаторі або введіть секретний ключ вручну."
+	},
+	"2fa.status": {
+		"defaultMessage": "Статус"
+	},
+	"2fa.title": {
+		"defaultMessage": "Двофакторна автентифікація"
+	},
+	"2fa.verify-enable": {
+		"defaultMessage": "Підтвердити й увімкнути"
+	},
+	"access-list": {
+		"defaultMessage": "Список доступу"
+	},
+	"access-list.access-count": {
+		"defaultMessage": "{count} {count, plural, one {правило} few {правила} many {правил} other {правила}}"
+	},
+	"access-list.auth-count": {
+		"defaultMessage": "{count} {count, plural, one {користувач} few {користувача} many {користувачів} other {користувача}}"
+	},
+	"access-list.help-rules-last": {
+		"defaultMessage": "Якщо є хоча б одне правило, правило 'заборонити все' буде додано останнім"
+	},
+	"access-list.help.rules-order": {
+		"defaultMessage": "Зверніть увагу: дозволяючі та забороняючі директиви застосовуються в порядку їх визначення."
+	},
+	"access-list.pass-auth": {
+		"defaultMessage": "Передавати авторизацію на upstream-сервер"
+	},
+	"access-list.public": {
+		"defaultMessage": "Загальнодоступний"
+	},
+	"access-list.public.subtitle": {
+		"defaultMessage": "Без аутентифікації"
+	},
+	"access-list.rule-source.placeholder": {
+		"defaultMessage": "192.168.1.100 або 192.168.1.0/24 або 2001:0db8::/32"
+	},
+	"access-list.satisfy-any": {
+		"defaultMessage": "Будь-який збіг"
+	},
+	"access-list.subtitle": {
+		"defaultMessage": "{users} {users, plural, one {користувач} few {користувача} many {користувачів} other {користувача}}, {rules} {rules, plural, one {правило} few {правила} many {правил} other {правила}} - створено: {date}"
+	},
+	"access-lists": {
+		"defaultMessage": "Списки доступу"
+	},
+	"action.add": {
+		"defaultMessage": "Додати"
+	},
+	"action.add-location": {
+		"defaultMessage": "Додати маршрут"
+	},
+	"action.allow": {
+		"defaultMessage": "Дозволити"
+	},
+	"action.clear": {
+		"defaultMessage": "Очистити"
+	},
+	"action.close": {
+		"defaultMessage": "Закрити"
+	},
+	"action.delete": {
+		"defaultMessage": "Видалити"
+	},
+	"action.deny": {
+		"defaultMessage": "Заборонити"
+	},
+	"action.disable": {
+		"defaultMessage": "Вимкнути"
+	},
+	"action.download": {
+		"defaultMessage": "Завантажити"
+	},
+	"action.edit": {
+		"defaultMessage": "Змінити"
+	},
+	"action.enable": {
+		"defaultMessage": "Увімкнути"
+	},
+	"action.permissions": {
+		"defaultMessage": "Дозволи"
+	},
+	"action.renew": {
+		"defaultMessage": "Продовжити"
+	},
+	"action.view-details": {
+		"defaultMessage": "Переглянути відомості"
+	},
+	"auditlogs": {
+		"defaultMessage": "Журнал аудиту"
+	},
+	"auto": {
+		"defaultMessage": "Автоматично"
+	},
+	"cancel": {
+		"defaultMessage": "Скасувати"
+	},
+	"certificate": {
+		"defaultMessage": "Сертифікат"
+	},
+	"certificate.custom-certificate": {
+		"defaultMessage": "Сертифікат"
+	},
+	"certificate.custom-certificate-key": {
+		"defaultMessage": "Ключ сертифіката"
+	},
+	"certificate.custom-intermediate": {
+		"defaultMessage": "Проміжний сертифікат"
+	},
+	"certificate.in-use": {
+		"defaultMessage": "Використовується"
+	},
+	"certificate.none.subtitle": {
+		"defaultMessage": "Сертифікат не призначено"
+	},
+	"certificate.none.subtitle.for-http": {
+		"defaultMessage": "Цей хост не використовуватиме HTTPS"
+	},
+	"certificate.none.title": {
+		"defaultMessage": "Немає"
+	},
+	"certificate.not-in-use": {
+		"defaultMessage": "Не використовується"
+	},
+	"certificate.renew": {
+		"defaultMessage": "Продовжити сертифікат"
+	},
+	"certificates": {
+		"defaultMessage": "Сертифікати"
+	},
+	"certificates.custom": {
+		"defaultMessage": "Власний сертифікат"
+	},
+	"certificates.custom.warning": {
+		"defaultMessage": "Файли ключів, захищені паролем, не підтримуються."
+	},
+	"certificates.dns.credentials": {
+		"defaultMessage": "Вміст файлу облікових даних"
+	},
+	"certificates.dns.credentials-note": {
+		"defaultMessage": "Цей плагін потребує файл конфігурації, що містить API-токен або інші облікові дані вашого провайдера"
+	},
+	"certificates.dns.credentials-warning": {
+		"defaultMessage": "Ці дані зберігатимуться у незашифрованому вигляді в базі даних та файлі!"
+	},
+	"certificates.dns.propagation-seconds": {
+		"defaultMessage": "Очікування поширення (сек.)"
+	},
+	"certificates.dns.propagation-seconds-note": {
+		"defaultMessage": "Залиште порожнім для значення за замовчуванням плагіна. Секунди очікування поширення DNS."
+	},
+	"certificates.dns.provider": {
+		"defaultMessage": "DNS-провайдер"
+	},
+	"certificates.dns.provider.placeholder": {
+		"defaultMessage": "Виберіть провайдера…"
+	},
+	"certificates.dns.warning": {
+		"defaultMessage": "Цей розділ потребує знань про Certbot та його DNS-плагіни. Будь ласка, зверніться до документації відповідних плагінів."
+	},
+	"certificates.http.reachability-404": {
+		"defaultMessage": "На цьому домені знайдено сервер, але, схоже, це не Nginx Proxy Manager. Переконайтеся, що ваш домен вказує на IP-адресу, де запущено ваш екземпляр NPM."
+	},
+	"certificates.http.reachability-failed-to-check": {
+		"defaultMessage": "Не вдалося перевірити доступність через помилку зв'язку з site24x7.com."
+	},
+	"certificates.http.reachability-not-resolved": {
+		"defaultMessage": "На цьому домені недоступний сервер. Переконайтеся, що домен існує та вказує на IP-адресу, де запущено ваш екземпляр NPM, і за потреби порт 80 проброшено на вашому роутері."
+	},
+	"certificates.http.reachability-ok": {
+		"defaultMessage": "Сервер доступний, випуск сертифікатів можливий."
+	},
+	"certificates.http.reachability-other": {
+		"defaultMessage": "На цьому домені знайдено сервер, але він повернув неочікуваний статус-код {code}. Це сервер NPM? Переконайтеся, що ваш домен вказує на IP-адресу, де запущено ваш екземпляр NPM."
+	},
+	"certificates.http.reachability-wrong-data": {
+		"defaultMessage": "На цьому домені знайдено сервер, але він повернув неочікувані дані. Це сервер NPM? Переконайтеся, що ваш домен вказує на IP-адресу, де запущено ваш екземпляр NPM."
+	},
+	"certificates.http.test-results": {
+		"defaultMessage": "Результати перевірки"
+	},
+	"certificates.http.warning": {
+		"defaultMessage": "Ці домени мають бути налаштовані та вказувати на цей екземпляр."
+	},
+	"certificates.key-type": {
+		"defaultMessage": "Тип ключа"
+	},
+	"certificates.key-type-description": {
+		"defaultMessage": "RSA широко сумісний, ECDSA швидший і безпечніший, але може не підтримуватися старими системами"
+	},
+	"certificates.key-type-ecdsa": {
+		"defaultMessage": "ECDSA 256"
+	},
+	"certificates.key-type-rsa": {
+		"defaultMessage": "RSA 2048"
+	},
+	"certificates.request.subtitle": {
+		"defaultMessage": "через Let's Encrypt"
+	},
+	"certificates.request.title": {
+		"defaultMessage": "Отримати новий сертифікат"
+	},
+	"column.access": {
+		"defaultMessage": "Доступ"
+	},
+	"column.authorization": {
+		"defaultMessage": "Авторизація"
+	},
+	"column.authorizations": {
+		"defaultMessage": "Авторизації"
+	},
+	"column.custom-locations": {
+		"defaultMessage": "Власні маршрути"
+	},
+	"column.destination": {
+		"defaultMessage": "Призначення"
+	},
+	"column.details": {
+		"defaultMessage": "Відомості"
+	},
+	"column.email": {
+		"defaultMessage": "Ел. пошта"
+	},
+	"column.event": {
+		"defaultMessage": "Подія"
+	},
+	"column.expires": {
+		"defaultMessage": "Закінчується"
+	},
+	"column.http-code": {
+		"defaultMessage": "HTTP-код"
+	},
+	"column.incoming-port": {
+		"defaultMessage": "Вхідний порт"
+	},
+	"column.name": {
+		"defaultMessage": "Ім'я"
+	},
+	"column.protocol": {
+		"defaultMessage": "Протокол"
+	},
+	"column.provider": {
+		"defaultMessage": "Провайдер"
+	},
+	"column.roles": {
+		"defaultMessage": "Ролі"
+	},
+	"column.rules": {
+		"defaultMessage": "Правила"
+	},
+	"column.satisfy": {
+		"defaultMessage": "Умови"
+	},
+	"column.satisfy-all": {
+		"defaultMessage": "Усі"
+	},
+	"column.satisfy-any": {
+		"defaultMessage": "Будь-яке"
+	},
+	"column.scheme": {
+		"defaultMessage": "Схема"
+	},
+	"column.source": {
+		"defaultMessage": "Джерело"
+	},
+	"column.ssl": {
+		"defaultMessage": "SSL"
+	},
+	"column.status": {
+		"defaultMessage": "Статус"
+	},
+	"created-on": {
+		"defaultMessage": "Створено: {date}"
+	},
+	"dashboard": {
+		"defaultMessage": "Огляд"
+	},
+	"dead-host": {
+		"defaultMessage": "404-хост"
+	},
+	"dead-hosts": {
+		"defaultMessage": "404-хости"
+	},
+	"dead-hosts.count": {
+		"defaultMessage": "{count} {count, plural, one {404-хост} few {404-хоста} many {404-хостів} other {404-хоста}}"
+	},
+	"disabled": {
+		"defaultMessage": "Вимкнено"
+	},
+	"domain-names": {
+		"defaultMessage": "Домени"
+	},
+	"domain-names.max": {
+		"defaultMessage": "Максимум {count} доменів"
+	},
+	"domain-names.placeholder": {
+		"defaultMessage": "Почніть вводити, щоб додати домен..."
+	},
+	"domain-names.wildcards-not-permitted": {
+		"defaultMessage": "Підстановчі домени не дозволені для цього типу"
+	},
+	"domain-names.wildcards-not-supported": {
+		"defaultMessage": "Підстановчі домени не підтримуються цим центром сертифікації"
+	},
+	"domains.advanced": {
+		"defaultMessage": "Розширені налаштування"
+	},
+	"domains.force-ssl": {
+		"defaultMessage": "Завжди SSL"
+	},
+	"domains.hsts-enabled": {
+		"defaultMessage": "Підтримка HSTS"
+	},
+	"domains.hsts-subdomains": {
+		"defaultMessage": "Піддомени HSTS"
+	},
+	"domains.http2-support": {
+		"defaultMessage": "Підтримка HTTP/2"
+	},
+	"domains.trust-forwarded-proto": {
+		"defaultMessage": "Довіряти заголовкам X-Forwarded-Proto від upstream-сервера"
+	},
+	"domains.use-dns": {
+		"defaultMessage": "Перевірка через DNS"
+	},
+	"email-address": {
+		"defaultMessage": "Адреса ел. пошти"
+	},
+	"empty-search": {
+		"defaultMessage": "Нічого не знайдено"
+	},
+	"empty-subtitle": {
+		"defaultMessage": "Чому б не створити його?"
+	},
+	"enabled": {
+		"defaultMessage": "Увімкнено"
+	},
+	"error.access.at-least-one": {
+		"defaultMessage": "Потрібна хоча б одна авторизація або одне правило доступу"
+	},
+	"error.access.duplicate-usernames": {
+		"defaultMessage": "Імена користувачів для авторизації мають бути унікальними"
+	},
+	"error.invalid-auth": {
+		"defaultMessage": "Невірна адреса ел. пошти або пароль"
+	},
+	"error.invalid-domain": {
+		"defaultMessage": "Невірний домен: {domain}"
+	},
+	"error.invalid-email": {
+		"defaultMessage": "Невірна адреса ел. пошти"
+	},
+	"error.max-character-length": {
+		"defaultMessage": "Максимальна довжина {max} {max, plural, one {символ} few {символи} many {символів} other {символа}}"
+	},
+	"error.max-domains": {
+		"defaultMessage": "Занадто багато доменів, максимум {max}"
+	},
+	"error.maximum": {
+		"defaultMessage": "Максимум {max}"
+	},
+	"error.min-character-length": {
+		"defaultMessage": "Мінімальна довжина {min} {min, plural, one {символ} few {символи} many {символів} other {символа}}"
+	},
+	"error.minimum": {
+		"defaultMessage": "Мінімум {min}"
+	},
+	"error.passwords-must-match": {
+		"defaultMessage": "Паролі повинні збігатися"
+	},
+	"error.required": {
+		"defaultMessage": "Обов'язкове поле"
+	},
+	"expires.on": {
+		"defaultMessage": "Закінчується: {date}"
+	},
+	"footer.github-fork": {
+		"defaultMessage": "Зробити форк на GitHub"
+	},
+	"host.flags.block-exploits": {
+		"defaultMessage": "Блокувати відомі експлойти"
+	},
+	"host.flags.cache-assets": {
+		"defaultMessage": "Кешувати ресурси"
+	},
+	"host.flags.preserve-path": {
+		"defaultMessage": "Зберігати шлях"
+	},
+	"host.flags.protocols": {
+		"defaultMessage": "Протоколи"
+	},
+	"host.flags.websockets-upgrade": {
+		"defaultMessage": "Підтримка WebSocket"
+	},
+	"host.forward-port": {
+		"defaultMessage": "Порт перенаправлення"
+	},
+	"host.forward-scheme": {
+		"defaultMessage": "Схема"
+	},
+	"hosts": {
+		"defaultMessage": "Хости"
+	},
+	"http-only": {
+		"defaultMessage": "Тільки HTTP"
+	},
+	"lets-encrypt": {
+		"defaultMessage": "Let's Encrypt"
+	},
+	"lets-encrypt-via-dns": {
+		"defaultMessage": "Let's Encrypt через DNS"
+	},
+	"lets-encrypt-via-http": {
+		"defaultMessage": "Let's Encrypt через HTTP"
+	},
+	"loading": {
+		"defaultMessage": "Завантаження…"
+	},
+	"location.advanced-config": {
+		"defaultMessage": "Має власну конфігурацію Nginx"
+	},
+	"location.filter": {
+		"defaultMessage": "Фільтрувати за шляхом або призначенням"
+	},
+	"login.2fa-code": {
+		"defaultMessage": "Код підтвердження"
+	},
+	"login.2fa-code-placeholder": {
+		"defaultMessage": "Введіть код"
+	},
+	"login.2fa-description": {
+		"defaultMessage": "Введіть код із застосунку-автентифікатора"
+	},
+	"login.2fa-title": {
+		"defaultMessage": "Двофакторна автентифікація"
+	},
+	"login.2fa-verify": {
+		"defaultMessage": "Підтвердити"
+	},
+	"login.title": {
+		"defaultMessage": "Авторизація"
+	},
+	"nginx-config.label": {
+		"defaultMessage": "Власна Nginx-конфігурація"
+	},
+	"nginx-config.placeholder": {
+		"defaultMessage": "# Введіть тут свою Nginx-конфігурацію, будьте обережні!"
+	},
+	"no-permission-error": {
+		"defaultMessage": "У вас немає доступу для перегляду."
+	},
+	"notfound.action": {
+		"defaultMessage": "Повернутися на головну"
+	},
+	"notfound.content": {
+		"defaultMessage": "Вибачте, але сторінку, яку ви шукаєте, не знайдено"
+	},
+	"notfound.title": {
+		"defaultMessage": "Ой… Ви потрапили на сторінку помилки"
+	},
+	"notification.error": {
+		"defaultMessage": "Помилка"
+	},
+	"notification.object-deleted": {
+		"defaultMessage": "{object} видалено"
+	},
+	"notification.object-disabled": {
+		"defaultMessage": "{object} вимкнено"
+	},
+	"notification.object-enabled": {
+		"defaultMessage": "{object} увімкнено"
+	},
+	"notification.object-renewed": {
+		"defaultMessage": "{object} продовжено"
+	},
+	"notification.object-saved": {
+		"defaultMessage": "{object} збережено"
+	},
+	"notification.success": {
+		"defaultMessage": "Успішно"
+	},
+	"object.actions-title": {
+		"defaultMessage": "{object} #{id}"
+	},
+	"object.add": {
+		"defaultMessage": "Додати {object}"
+	},
+	"object.delete": {
+		"defaultMessage": "Видалити {object}"
+	},
+	"object.delete.content": {
+		"defaultMessage": "Ви впевнені, що хочете видалити {object}?"
+	},
+	"object.edit": {
+		"defaultMessage": "Змінити {object}"
+	},
+	"object.empty": {
+		"defaultMessage": "{objects} відсутні"
+	},
+	"object.event.created": {
+		"defaultMessage": "{object} створено"
+	},
+	"object.event.deleted": {
+		"defaultMessage": "{object} видалено"
+	},
+	"object.event.disabled": {
+		"defaultMessage": "{object} вимкнено"
+	},
+	"object.event.enabled": {
+		"defaultMessage": "{object} увімкнено"
+	},
+	"object.event.renewed": {
+		"defaultMessage": "{object} продовжено"
+	},
+	"object.event.updated": {
+		"defaultMessage": "{object} оновлено"
+	},
+	"offline": {
+		"defaultMessage": "Офлайн"
+	},
+	"online": {
+		"defaultMessage": "Онлайн"
+	},
+	"options": {
+		"defaultMessage": "Параметри"
+	},
+	"password": {
+		"defaultMessage": "Пароль"
+	},
+	"password.generate": {
+		"defaultMessage": "Згенерувати випадковий пароль"
+	},
+	"password.hide": {
+		"defaultMessage": "Сховати пароль"
+	},
+	"password.show": {
+		"defaultMessage": "Показати пароль"
+	},
+	"permissions.hidden": {
+		"defaultMessage": "Приховано"
+	},
+	"permissions.manage": {
+		"defaultMessage": "Керування"
+	},
+	"permissions.view": {
+		"defaultMessage": "Тільки перегляд"
+	},
+	"permissions.visibility.all": {
+		"defaultMessage": "Усі елементи"
+	},
+	"permissions.visibility.title": {
+		"defaultMessage": "Видимість елементів"
+	},
+	"permissions.visibility.user": {
+		"defaultMessage": "Створені елементи"
+	},
+	"proxy-host": {
+		"defaultMessage": "Проксі-хост"
+	},
+	"proxy-host.forward-host": {
+		"defaultMessage": "Хост / IP перенаправлення"
+	},
+	"proxy-hosts": {
+		"defaultMessage": "Проксі-хости"
+	},
+	"proxy-hosts.count": {
+		"defaultMessage": "{count} {count, plural, one {проксі-хост} few {проксі-хоста} many {проксі-хостів} other {проксі-хоста}}"
+	},
+	"public": {
+		"defaultMessage": "Загальнодоступний"
+	},
+	"redirection-host": {
+		"defaultMessage": "Редирект-хост"
+	},
+	"redirection-host.forward-domain": {
+		"defaultMessage": "Домен перенаправлення"
+	},
+	"redirection-host.forward-http-code": {
+		"defaultMessage": "HTTP-код"
+	},
+	"redirection-hosts": {
+		"defaultMessage": "Редирект-хости"
+	},
+	"redirection-hosts.count": {
+		"defaultMessage": "{count} {count, plural, one {редирект-хост} few {редирект-хоста} many {редирект-хостів} other {редирект-хоста}}"
+	},
+	"redirection-hosts.http-code.300": {
+		"defaultMessage": "300 Кілька варіантів"
+	},
+	"redirection-hosts.http-code.301": {
+		"defaultMessage": "301 Переміщено назавжди"
+	},
+	"redirection-hosts.http-code.302": {
+		"defaultMessage": "302 Тимчасово переміщено"
+	},
+	"redirection-hosts.http-code.303": {
+		"defaultMessage": "303 Переглянути інше"
+	},
+	"redirection-hosts.http-code.307": {
+		"defaultMessage": "307 Тимчасове перенаправлення"
+	},
+	"redirection-hosts.http-code.308": {
+		"defaultMessage": "308 Постійне перенаправлення"
+	},
+	"role.admin": {
+		"defaultMessage": "Адміністратор"
+	},
+	"role.standard-user": {
+		"defaultMessage": "Звичайний користувач"
+	},
+	"save": {
+		"defaultMessage": "Зберегти"
+	},
+	"setting": {
+		"defaultMessage": "Налаштування"
+	},
+	"settings": {
+		"defaultMessage": "Налаштування"
+	},
+	"settings.default-site": {
+		"defaultMessage": "Сторінка за замовчуванням"
+	},
+	"settings.default-site.404": {
+		"defaultMessage": "404-сторінка"
+	},
+	"settings.default-site.444": {
+		"defaultMessage": "Немає відповіді (444)"
+	},
+	"settings.default-site.congratulations": {
+		"defaultMessage": "Сторінка привітання"
+	},
+	"settings.default-site.description": {
+		"defaultMessage": "Що показувати, коли Nginx отримує невідомий хост"
+	},
+	"settings.default-site.html": {
+		"defaultMessage": "Власний HTML"
+	},
+	"settings.default-site.html.placeholder": {
+		"defaultMessage": ""
+	},
+	"settings.default-site.redirect": {
+		"defaultMessage": "Перенаправлення"
+	},
+	"setup.preamble": {
+		"defaultMessage": "Почніть із створення облікового запису адміністратора."
+	},
+	"setup.title": {
+		"defaultMessage": "Ласкаво просимо!"
+	},
+	"sign-in": {
+		"defaultMessage": "Увійти"
+	},
+	"ssl-certificate": {
+		"defaultMessage": "SSL-сертифікат"
+	},
+	"stream": {
+		"defaultMessage": "Потік"
+	},
+	"stream.forward-host": {
+		"defaultMessage": "Хост перенаправлення"
+	},
+	"stream.forward-host.placeholder": {
+		"defaultMessage": "example.com або 10.0.0.1 або 2001:db8:3333:4444:5555:6666:7777:8888"
+	},
+	"stream.incoming-port": {
+		"defaultMessage": "Вхідний порт"
+	},
+	"streams": {
+		"defaultMessage": "Потоки"
+	},
+	"streams.count": {
+		"defaultMessage": "{count} {count, plural, one {потік} few {потоки} many {потоків} other {потока}}"
+	},
+	"streams.tcp": {
+		"defaultMessage": "TCP"
+	},
+	"streams.udp": {
+		"defaultMessage": "UDP"
+	},
+	"test": {
+		"defaultMessage": "Перевірити"
+	},
+	"update-available": {
+		"defaultMessage": "Доступне оновлення: {latestVersion}"
+	},
+	"user": {
+		"defaultMessage": "Користувач"
+	},
+	"user.change-password": {
+		"defaultMessage": "Змінити пароль"
+	},
+	"user.confirm-password": {
+		"defaultMessage": "Повторіть пароль"
+	},
+	"user.current-password": {
+		"defaultMessage": "Поточний пароль"
+	},
+	"user.edit-profile": {
+		"defaultMessage": "Змінити профіль"
+	},
+	"user.full-name": {
+		"defaultMessage": "Повне ім'я"
+	},
+	"user.login-as": {
+		"defaultMessage": "Увійти як {name}"
+	},
+	"user.logout": {
+		"defaultMessage": "Вийти"
+	},
+	"user.new-password": {
+		"defaultMessage": "Новий пароль"
+	},
+	"user.nickname": {
+		"defaultMessage": "Псевдонім"
+	},
+	"user.set-password": {
+		"defaultMessage": "Задати пароль"
+	},
+	"user.set-permissions": {
+		"defaultMessage": "Задати дозволи для {name}"
+	},
+	"user.switch-dark": {
+		"defaultMessage": "Увімкнути темну тему"
+	},
+	"user.switch-light": {
+		"defaultMessage": "Увімкнути світлу тему"
+	},
+	"user.two-factor": {
+		"defaultMessage": "Двофакторна автентифікація"
+	},
+	"username": {
+		"defaultMessage": "Ім'я користувача"
+	},
+	"users": {
+		"defaultMessage": "Користувачі"
+	}
+}
@@ -70,11 +70,7 @@ const DNSCertificateModal = EasyModal.create(({ visible, remove }: InnerModalPro
 												<label htmlFor="keyType" className="form-label">
 													<T id="certificates.key-type" />
 												</label>
-												<select
-													id="keyType"
-													className="form-select"
-													{...field}
-												>
+												<select id="keyType" className="form-select" {...field}>
 													<option value="rsa">
 														<T id="certificates.key-type-rsa" />
 													</option>
@@ -151,11 +151,7 @@ const HTTPCertificateModal = EasyModal.create(({ visible, remove }: InnerModalPr
 												<label htmlFor="keyType" className="form-label">
 													<T id="certificates.key-type" />
 												</label>
-												<select
-													id="keyType"
-													className="form-select"
-													{...field}
-												>
+												<select id="keyType" className="form-select" {...field}>
 													<option value="rsa">
 														<T id="certificates.key-type-rsa" />
 													</option>
@@ -162,7 +162,9 @@ const RedirectionHostModal = EasyModal.create(({ id, visible, remove }: Props) =
 																		required
 																		{...field}
 																	>
-																		<option value="auto"><T id="auto" /></option>
+																		<option value="auto">
+																			<T id="auto" />
+																		</option>
 																		<option value="http">http</option>
 																		<option value="https">https</option>
 																	</select>
@@ -224,12 +226,24 @@ const RedirectionHostModal = EasyModal.create(({ id, visible, remove }: Props) =
 																required
 																{...field}
 															>
-																<option value="300"><T id="redirection-hosts.http-code.300" /></option>
-																<option value="301"><T id="redirection-hosts.http-code.301" /></option>
-																<option value="302"><T id="redirection-hosts.http-code.302" /></option>
-																<option value="303"><T id="redirection-hosts.http-code.303" /></option>
-																<option value="307"><T id="redirection-hosts.http-code.307" /></option>
-																<option value="308"><T id="redirection-hosts.http-code.308" /></option>
+																<option value="300">
+																	<T id="redirection-hosts.http-code.300" />
+																</option>
+																<option value="301">
+																	<T id="redirection-hosts.http-code.301" />
+																</option>
+																<option value="302">
+																	<T id="redirection-hosts.http-code.302" />
+																</option>
+																<option value="303">
+																	<T id="redirection-hosts.http-code.303" />
+																</option>
+																<option value="307">
+																	<T id="redirection-hosts.http-code.307" />
+																</option>
+																<option value="308">
+																	<T id="redirection-hosts.http-code.308" />
+																</option>
 															</select>
 															{form.errors.forwardHttpCode ? (
 																<div className="invalid-feedback">
@@ -154,7 +154,9 @@ const StreamModal = EasyModal.create(({ id, visible, remove }: Props) => {
 																		type="text"
 																		className={`form-control ${form.errors.forwardingHost && form.touched.forwardingHost ? "is-invalid" : ""}`}
 																		required
-																		placeholder={intl.formatMessage({ id: "stream.forward-host.placeholder" })}
+																		placeholder={intl.formatMessage({
+																			id: "stream.forward-host.placeholder",
+																		})}
 																		{...field}
 																	/>
 																	{form.errors.forwardingHost ? (
@@ -0,0 +1,5 @@
+.qrcode {
+	max-width: "200px";
+	height: "auto";
+	border: 6px solid #fff;
+}
@@ -3,16 +3,12 @@ import { Field, Form, Formik } from "formik";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import { Alert } from "react-bootstrap";
 import Modal from "react-bootstrap/Modal";
-import {
-	disable2FA,
-	enable2FA,
-	get2FAStatus,
-	regenerateBackupCodes,
-	start2FASetup,
-} from "src/api/backend";
+import QRCode from "react-qr-code";
+import { disable2FA, enable2FA, get2FAStatus, regenerateBackupCodes, start2FASetup } from "src/api/backend";
 import { Button } from "src/components";
 import { T } from "src/locale";
 import { validateString } from "src/modules/Validations";
+import styles from "./TwoFactorModal.module.css";

 type Step = "loading" | "status" | "setup" | "verify" | "backup" | "disable";

@@ -137,12 +133,7 @@ const TwoFactorModal = EasyModal.create(({ id, visible, remove }: Props) => {
 						)}
 					</div>
 					{!isEnabled ? (
-						<Button
-							fullWidth
-							color="azure"
-							onClick={handleStartSetup}
-							isLoading={isSubmitting}
-						>
+						<Button fullWidth color="azure" onClick={handleStartSetup} isLoading={isSubmitting}>
 							<T id="2fa.enable" />
 						</Button>
 					) : (
@@ -166,12 +157,7 @@ const TwoFactorModal = EasyModal.create(({ id, visible, remove }: Props) => {
 						<T id="2fa.setup-instructions" />
 					</p>
 					<div className="text-center mb-3">
-						<img
-							src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(setupData.otpauthUrl)}`}
-							alt="QR Code"
-							className="img-fluid"
-							style={{ maxWidth: "200px" }}
-						/>
+						<QRCode value={setupData.otpauthUrl} size={200} className={styles.qrcode} />
 					</div>
 					<label className="mb-3 d-block">
 						<span className="form-label small text-muted">
@@ -1,8 +1,9 @@
 import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
-import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { createColumnHelper, useTable } from "@tanstack/react-table";
 import { useMemo } from "react";
 import type { AccessList } from "src/api/backend";
 import { EmptyData, GravatarFormatter, HasPermission, ValueWithDateFormatter } from "src/components";
+import { type Features, features } from "src/components/Table/features";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
 import { ACCESS_LISTS, MANAGE } from "src/modules/Permissions";
@@ -16,7 +17,7 @@ interface Props {
 	onNew?: () => void;
 }
 export default function Table({ data, isFetching, isFiltered, onEdit, onDelete, onNew }: Props) {
-	const columnHelper = createColumnHelper<AccessList>();
+	const columnHelper = createColumnHelper<Features, AccessList>();
 	const columns = useMemo(
 		() => [
 			columnHelper.accessor((row: any) => row.owner, {
@@ -114,11 +115,10 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 		[columnHelper, onEdit, onDelete],
 	);

-	const tableInstance = useReactTable<AccessList>({
+	const tableInstance = useTable({
+		features,
 		columns,
 		data,
-		getCoreRowModel: getCoreRowModel(),
-		rowCount: data.length,
 		meta: {
 			isFetching,
 		},
@@ -1,7 +1,8 @@
-import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { createColumnHelper, useTable } from "@tanstack/react-table";
 import { useMemo } from "react";
 import type { AuditLog } from "src/api/backend";
 import { EventFormatter, GravatarFormatter } from "src/components";
+import { type Features, features } from "src/components/Table/features";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";

@@ -11,10 +12,10 @@ interface Props {
 	onSelectItem?: (id: number) => void;
 }
 export default function Table({ data, isFetching, onSelectItem }: Props) {
-	const columnHelper = createColumnHelper<AuditLog>();
+	const columnHelper = createColumnHelper<Features, AuditLog>();
 	const columns = useMemo(
 		() => [
-			columnHelper.accessor((row: AuditLog) => row.user, {
+			columnHelper.accessor((row: any) => row.user, {
 				id: "user.avatar",
 				cell: (info: any) => {
 					const value = info.getValue();
@@ -24,7 +25,7 @@ export default function Table({ data, isFetching, onSelectItem }: Props) {
 					className: "w-1",
 				},
 			}),
-			columnHelper.accessor((row: AuditLog) => row, {
+			columnHelper.accessor((row: any) => row, {
 				id: "objectType",
 				header: intl.formatMessage({ id: "column.event" }),
 				cell: (info: any) => {
@@ -55,11 +56,10 @@ export default function Table({ data, isFetching, onSelectItem }: Props) {
 		[columnHelper, onSelectItem],
 	);

-	const tableInstance = useReactTable<AuditLog>({
+	const tableInstance = useTable({
+		features,
 		columns,
 		data,
-		getCoreRowModel: getCoreRowModel(),
-		rowCount: data.length,
 		meta: {
 			isFetching,
 		},
@@ -1,5 +1,5 @@
 import { IconDotsVertical, IconDownload, IconRefresh, IconTrash } from "@tabler/icons-react";
-import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { createColumnHelper, useTable } from "@tanstack/react-table";
 import { useMemo } from "react";
 import type { Certificate } from "src/api/backend";
 import {
@@ -10,6 +10,7 @@ import {
 	GravatarFormatter,
 	HasPermission,
 } from "src/components";
+import { type Features, features } from "src/components/Table/features";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
 import { showCustomCertificateModal, showDNSCertificateModal, showHTTPCertificateModal } from "src/modals";
@@ -24,7 +25,7 @@ interface Props {
 	onDownload?: (id: number) => void;
 }
 export default function Table({ data, isFetching, onDelete, onRenew, onDownload, isFiltered }: Props) {
-	const columnHelper = createColumnHelper<Certificate>();
+	const columnHelper = createColumnHelper<Features, Certificate>();
 	const columns = useMemo(
 		() => [
 			columnHelper.accessor((row: any) => row.owner, {
@@ -164,11 +165,10 @@ export default function Table({ data, isFetching, onDelete, onRenew, onDownload,
 		[columnHelper, onDelete, onRenew, onDownload],
 	);

-	const tableInstance = useReactTable<Certificate>({
+	const tableInstance = useTable({
+		features,
 		columns,
 		data,
-		getCoreRowModel: getCoreRowModel(),
-		rowCount: data.length,
 		meta: {
 			isFetching,
 		},
@@ -193,9 +193,7 @@ export default function Login() {
 					</div>
 				</div>
 				<div className="card card-md">
-					<div className="card-body">
-						{twoFactorChallenge ? <TwoFactorForm /> : <LoginForm />}
-					</div>
+					<div className="card-body">{twoFactorChallenge ? <TwoFactorForm /> : <LoginForm />}</div>
 				</div>
 				<div className="text-center text-secondary mt-3">{getVersion()}</div>
 			</div>
@@ -1,11 +1,5 @@
 import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
-import {
-	createColumnHelper,
-	getCoreRowModel,
-	getSortedRowModel,
-	type SortingState,
-	useReactTable,
-} from "@tanstack/react-table";
+import { createColumnHelper, type SortingState, useTable } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 import type { DeadHost } from "src/api/backend";
 import {
@@ -16,6 +10,7 @@ import {
 	HasPermission,
 	TrueFalseFormatter,
 } from "src/components";
+import { type Features, features } from "src/components/Table/features";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
 import { DEAD_HOSTS, MANAGE } from "src/modules/Permissions";
@@ -30,7 +25,7 @@ interface Props {
 	onNew?: () => void;
 }
 export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
-	const columnHelper = createColumnHelper<DeadHost>();
+	const columnHelper = createColumnHelper<Features, DeadHost>();
 	const columns = useMemo(
 		() => [
 			columnHelper.accessor((row: any) => row.owner, {
@@ -47,7 +42,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 			columnHelper.accessor((row: any) => row, {
 				id: "domainNames",
 				header: intl.formatMessage({ id: "column.source" }),
-				sortingFn: (a, b) => {
+				sortFn: (a, b) => {
 					const aVal = a.original.domainNames?.[0] ?? "";
 					const bVal = b.original.domainNames?.[0] ?? "";
 					return aVal.localeCompare(bVal);
@@ -143,14 +138,12 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog

 	const [sorting, setSorting] = useState<SortingState>([]);

-	const tableInstance = useReactTable<DeadHost>({
+	const tableInstance = useTable({
+		features,
 		columns,
 		data,
 		state: { sorting },
 		onSortingChange: setSorting,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		rowCount: data.length,
 		meta: {
 			isFetching,
 		},
@@ -1,11 +1,5 @@
 import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
-import {
-	createColumnHelper,
-	getCoreRowModel,
-	getSortedRowModel,
-	type SortingState,
-	useReactTable,
-} from "@tanstack/react-table";
+import { createColumnHelper, type SortingState, useTable } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 import type { ProxyHost } from "src/api/backend";
 import {
@@ -17,6 +11,7 @@ import {
 	HasPermission,
 	TrueFalseFormatter,
 } from "src/components";
+import { type Features, features } from "src/components/Table/features";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
 import { MANAGE, PROXY_HOSTS } from "src/modules/Permissions";
@@ -31,7 +26,7 @@ interface Props {
 	onNew?: () => void;
 }
 export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
-	const columnHelper = createColumnHelper<ProxyHost>();
+	const columnHelper = createColumnHelper<Features, ProxyHost>();
 	const columns = useMemo(
 		() => [
 			columnHelper.accessor((row: any) => row.owner, {
@@ -48,7 +43,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 			columnHelper.accessor((row: any) => row, {
 				id: "domainNames",
 				header: intl.formatMessage({ id: "column.source" }),
-				sortingFn: (a, b) => {
+				sortFn: (a, b) => {
 					const aVal = a.original.domainNames?.[0] ?? "";
 					const bVal = b.original.domainNames?.[0] ?? "";
 					return aVal.localeCompare(bVal);
@@ -61,7 +56,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 			columnHelper.accessor((row: any) => row, {
 				id: "forwardHost",
 				header: intl.formatMessage({ id: "column.destination" }),
-				sortingFn: (a, b) => {
+				sortFn: (a, b) => {
 					const aVal = `${a.original.forwardHost}:${a.original.forwardPort}`;
 					const bVal = `${b.original.forwardHost}:${b.original.forwardPort}`;
 					return aVal.localeCompare(bVal);
@@ -165,14 +160,12 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog

 	const [sorting, setSorting] = useState<SortingState>([]);

-	const tableInstance = useReactTable<ProxyHost>({
+	const tableInstance = useTable({
+		features,
 		columns,
 		data,
 		state: { sorting },
 		onSortingChange: setSorting,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		rowCount: data.length,
 		meta: {
 			isFetching,
 		},
@@ -1,11 +1,5 @@
 import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
-import {
-	createColumnHelper,
-	getCoreRowModel,
-	getSortedRowModel,
-	type SortingState,
-	useReactTable,
-} from "@tanstack/react-table";
+import { createColumnHelper, type SortingState, useTable } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 import type { RedirectionHost } from "src/api/backend";
 import {
@@ -16,6 +10,7 @@ import {
 	HasPermission,
 	TrueFalseFormatter,
 } from "src/components";
+import { type Features, features } from "src/components/Table/features";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
 import { MANAGE, REDIRECTION_HOSTS } from "src/modules/Permissions";
@@ -30,7 +25,7 @@ interface Props {
 	onNew?: () => void;
 }
 export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
-	const columnHelper = createColumnHelper<RedirectionHost>();
+	const columnHelper = createColumnHelper<Features, RedirectionHost>();
 	const columns = useMemo(
 		() => [
 			columnHelper.accessor((row: any) => row.owner, {
@@ -47,7 +42,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 			columnHelper.accessor((row: any) => row, {
 				id: "domainNames",
 				header: intl.formatMessage({ id: "column.source" }),
-				sortingFn: (a, b) => {
+				sortFn: (a, b) => {
 					const aVal = a.original.domainNames?.[0] ?? "";
 					const bVal = b.original.domainNames?.[0] ?? "";
 					return aVal.localeCompare(bVal);
@@ -164,14 +159,12 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog

 	const [sorting, setSorting] = useState<SortingState>([]);

-	const tableInstance = useReactTable<RedirectionHost>({
+	const tableInstance = useTable({
+		features,
 		columns,
 		data,
 		state: { sorting },
 		onSortingChange: setSorting,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		rowCount: data.length,
 		meta: {
 			isFetching,
 		},
@@ -1,11 +1,5 @@
 import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
-import {
-	createColumnHelper,
-	getCoreRowModel,
-	getSortedRowModel,
-	type SortingState,
-	useReactTable,
-} from "@tanstack/react-table";
+import { createColumnHelper, type SortingState, useTable } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 import type { Stream } from "src/api/backend";
 import {
@@ -16,6 +10,7 @@ import {
 	TrueFalseFormatter,
 	ValueWithDateFormatter,
 } from "src/components";
+import { type Features, features } from "src/components/Table/features";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
 import { MANAGE, STREAMS } from "src/modules/Permissions";
@@ -30,7 +25,7 @@ interface Props {
 	onNew?: () => void;
 }
 export default function Table({ data, isFetching, isFiltered, onEdit, onDelete, onDisableToggle, onNew }: Props) {
-	const columnHelper = createColumnHelper<Stream>();
+	const columnHelper = createColumnHelper<Features, Stream>();
 	const columns = useMemo(
 		() => [
 			columnHelper.accessor((row: any) => row.owner, {
@@ -47,7 +42,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 			columnHelper.accessor((row: any) => row, {
 				id: "incomingPort",
 				header: intl.formatMessage({ id: "column.incoming-port" }),
-				sortingFn: (a, b) => (a.original.incomingPort ?? 0) - (b.original.incomingPort ?? 0),
+				sortFn: (a, b) => (a.original.incomingPort ?? 0) - (b.original.incomingPort ?? 0),
 				cell: (info: any) => {
 					const value = info.getValue();
 					return <ValueWithDateFormatter value={value.incomingPort} createdOn={value.createdOn} />;
@@ -56,7 +51,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 			columnHelper.accessor((row: any) => row, {
 				id: "forwardHttpCode",
 				header: intl.formatMessage({ id: "column.destination" }),
-				sortingFn: (a, b) => {
+				sortFn: (a, b) => {
 					const aVal = `${a.original.forwardingHost}:${a.original.forwardingPort}`;
 					const bVal = `${b.original.forwardingHost}:${b.original.forwardingPort}`;
 					return aVal.localeCompare(bVal);
@@ -174,14 +169,12 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,

 	const [sorting, setSorting] = useState<SortingState>([]);

-	const tableInstance = useReactTable<Stream>({
+	const tableInstance = useTable({
+		features,
 		columns,
 		data,
 		state: { sorting },
 		onSortingChange: setSorting,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		rowCount: data.length,
 		meta: {
 			isFetching,
 		},
@@ -7,7 +7,7 @@ import {
 	IconShield,
 	IconTrash,
 } from "@tabler/icons-react";
-import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { createColumnHelper, useTable } from "@tanstack/react-table";
 import { useMemo } from "react";
 import type { User } from "src/api/backend";
 import {
@@ -18,6 +18,7 @@ import {
 	TrueFalseFormatter,
 	ValueWithDateFormatter,
 } from "src/components";
+import { type Features, features } from "src/components/Table/features";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";

@@ -47,7 +48,7 @@ export default function Table({
 	onNewUser,
 	onLoginAs,
 }: Props) {
-	const columnHelper = createColumnHelper<User>();
+	const columnHelper = createColumnHelper<Features, User>();
 	const columns = useMemo(
 		() => [
 			columnHelper.accessor((row: any) => row, {
@@ -216,11 +217,10 @@ export default function Table({
 		],
 	);

-	const tableInstance = useReactTable<User>({
+	const tableInstance = useTable({
+		features,
 		columns,
 		data,
-		getCoreRowModel: getCoreRowModel(),
-		rowCount: data.length,
 		meta: {
 			isFetching,
 		},