();
return (
-
-
-
-
+
+
+ {
}
/>
- {
}
/>
-
-
+
+
-
-
-
+ {
}
/>
- {
}
/>
-
-
+
+
-
-
-
-
+
+ {
}
/>
- {
}
/>
- {
}
/>
-
+
-
-
-
+
+
-
+
-
-
+
-
+
-
-
+ {
}
/>
-
-
-
+
+
+
@@ -172,8 +173,8 @@ export const Music = () => {
-
-
+ {
This is what you want in 90% of cases (instead of options above).
-
-
-
+
+
+
);
}
diff --git a/web/src/screens/filters/sections/_components.tsx b/web/src/screens/filters/sections/_components.tsx
index 2ba2263..56b543f 100644
--- a/web/src/screens/filters/sections/_components.tsx
+++ b/web/src/screens/filters/sections/_components.tsx
@@ -24,41 +24,41 @@ type OwningComponent = {
const VerticalGap = "gap-y-6 sm:gap-y-4";
-export const NormalGridGapClass = `gap-x-0.5 sm:gap-x-3 ${VerticalGap}`;
-export const TightGridGapClass = `gap-x-0.5 sm:gap-x-1.5 ${VerticalGap}`;
-export const WideGridGapClass = `gap-x-0.5 sm:gap-x-6 ${VerticalGap}`;
+export const FilterNormalGridGapClass = `gap-x-0.5 sm:gap-x-3 ${VerticalGap}`;
+export const FilterTightGridGapClass = `gap-x-0.5 sm:gap-x-1.5 ${VerticalGap}`;
+export const FilterWideGridGapClass = `gap-x-0.5 sm:gap-x-6 ${VerticalGap}`;
-export const LayoutClass = "grid grid-cols-12 col-span-12";
+export const FilterLayoutClass = "grid grid-cols-12 col-span-12";
-export const Layout = ({
+export const FilterLayout = ({
children,
className = "",
- gap = NormalGridGapClass
+ gap = FilterNormalGridGapClass
}: OwningComponent) => (
- {children}
+ {children}
);
-export const Row = ({
+export const FilterRow = ({
children,
className = "",
- gap = NormalGridGapClass
+ gap = FilterNormalGridGapClass
}: OwningComponent) => (
{children}
);
-export const HalfRow = ({
+export const FilterHalfRow = ({
children,
className = "",
- gap = NormalGridGapClass
+ gap = FilterNormalGridGapClass
}: OwningComponent) => (
{children}
);
-export const Section = ({
+export const FilterSection = ({
title,
subtitle,
children,
- gap = NormalGridGapClass
+ gap = FilterNormalGridGapClass
}: FilterSectionProps) => (
(
@@ -108,7 +108,7 @@ export const CollapsibleSection = ({
children,
defaultOpen = false,
noBottomBorder = false,
- childClassName = NormalGridGapClass
+ childClassName = FilterNormalGridGapClass
}: CollapsibleSectionProps) => {
const [isOpen, toggleOpen] = useToggle(defaultOpen);
diff --git a/web/src/screens/filters/sections/action_components/ActionDeluge.tsx b/web/src/screens/filters/sections/action_components/ActionDeluge.tsx
index 0bbbb68..e21e7ea 100644
--- a/web/src/screens/filters/sections/action_components/ActionDeluge.tsx
+++ b/web/src/screens/filters/sections/action_components/ActionDeluge.tsx
@@ -3,77 +3,75 @@
* SPDX-License-Identifier: GPL-2.0-or-later
*/
-import * as Input from "@components/inputs";
-
-import { CollapsibleSection } from "../_components";
-import * as FilterSection from "../_components";
+import { CollapsibleSection, FilterHalfRow, FilterLayout, FilterSection } from "../_components";
+import { DownloadClientSelect, NumberField, SwitchGroup, TextAreaAutoResize, TextField } from "@components/inputs";
export const Deluge = ({ idx, action, clients }: ClientActionProps) => (
<>
- Select the specific instance which you want to handle this release filter.
}
>
-
-
-
+
+
-
-
-
+
+
-
+
-
-
+
-
-
-
+
+
-
-
-
+
+ This will only work on Deluge v2.
}
/>
-
-
+
+
-
-
-
+
);
diff --git a/web/src/screens/filters/sections/action_components/ActionPorla.tsx b/web/src/screens/filters/sections/action_components/ActionPorla.tsx
index d01f3af..d80954f 100644
--- a/web/src/screens/filters/sections/action_components/ActionPorla.tsx
+++ b/web/src/screens/filters/sections/action_components/ActionPorla.tsx
@@ -3,29 +3,27 @@
* SPDX-License-Identifier: GPL-2.0-or-later
*/
-import * as Input from "@components/inputs";
-
-import { CollapsibleSection } from "../_components";
-import * as FilterSection from "../_components";
+import { CollapsibleSection, FilterHalfRow, FilterLayout, FilterSection } from "../_components";
+import { DownloadClientSelect, NumberField, TextAreaAutoResize, TextField } from "@components/inputs";
export const Porla = ({ idx, action, clients }: ClientActionProps) => (
<>
- Select the specific instance which you want to handle this release filter.
}
>
-
-
-
+
+
-
-
-
+
+ (
A case-sensitive preset name as configured in Porla.
}
/>
-
-
+
+
- (
title="Limits"
subtitle="Configure your speed/ratio/seed time limits"
>
-
-
+
-
-
-
+
+
-
+
-
+
);
diff --git a/web/src/screens/filters/sections/action_components/ActionQBittorrent.tsx b/web/src/screens/filters/sections/action_components/ActionQBittorrent.tsx
index a2984bc..f64d1e3 100644
--- a/web/src/screens/filters/sections/action_components/ActionQBittorrent.tsx
+++ b/web/src/screens/filters/sections/action_components/ActionQBittorrent.tsx
@@ -7,31 +7,37 @@ import { Link } from "@tanstack/react-router";
import { DocsLink } from "@components/ExternalLink";
import { ActionContentLayoutOptions, ActionPriorityOptions } from "@domain/constants";
-import * as Input from "@components/inputs";
-import { CollapsibleSection } from "../_components";
-import * as FilterSection from "../_components";
+import { CollapsibleSection, FilterHalfRow, FilterLayout, FilterSection, FilterWideGridGapClass } from "../_components";
+import {
+ DownloadClientSelect,
+ NumberField,
+ Select,
+ SwitchGroup,
+ TextAreaAutoResize,
+ TextField
+} from "@components/inputs";
export const QBittorrent = ({ idx, action, clients }: ClientActionProps) => (
<>
- Select the specific instance which you want to handle this release filter.
}
>
-
-
-
+
+
-
-
+
+
-
-
+ (
}
/>
- (
}
/>
-
+
-
-
+ (
}
/>
-
+
-
-
+ (
}
className="py-2 pb-4"
/>
-
- (
}
/>
-
+
-
-
+
-
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
-
-
+
+
-
-
+
-
+
);
diff --git a/web/src/screens/filters/sections/action_components/ActionRTorrent.tsx b/web/src/screens/filters/sections/action_components/ActionRTorrent.tsx
index 19d33e4..b5787d4 100644
--- a/web/src/screens/filters/sections/action_components/ActionRTorrent.tsx
+++ b/web/src/screens/filters/sections/action_components/ActionRTorrent.tsx
@@ -4,59 +4,59 @@
*/
import { ActionRtorrentRenameOptions } from "@domain/constants";
-import * as Input from "@components/inputs";
+import { FilterHalfRow, FilterLayout, FilterSection } from "@screens/filters/sections/_components.tsx";
+import { DownloadClientSelect, Select, SwitchGroup, TextAreaAutoResize, TextField } from "@components/inputs";
-import * as FilterSection from "../_components";
export const RTorrent = ({ idx, action, clients }: ClientActionProps) => (
<>
- Select the specific instance which you want to handle this release filter.
}
>
-
-
-
+
+
-
+
-
-
+
-
-
+
+
-
-
-
-
+
+
-
-
-
-
+
+
+
);
diff --git a/web/src/screens/filters/sections/action_components/ActionTransmission.tsx b/web/src/screens/filters/sections/action_components/ActionTransmission.tsx
index 9a00281..2a3c264 100644
--- a/web/src/screens/filters/sections/action_components/ActionTransmission.tsx
+++ b/web/src/screens/filters/sections/action_components/ActionTransmission.tsx
@@ -3,119 +3,117 @@
* SPDX-License-Identifier: GPL-2.0-or-later
*/
-import * as Input from "@components/inputs";
-
-import { CollapsibleSection } from "../_components";
-import * as FilterSection from "../_components";
+import { CollapsibleSection, FilterHalfRow, FilterLayout, FilterSection, FilterWideGridGapClass } from "../_components";
+import { DownloadClientSelect, NumberField, SwitchGroup, TextAreaAutoResize, TextField } from "@components/inputs";
export const Transmission = ({ idx, action, clients }: ClientActionProps) => (
<>
- Select the specific instance which you want to handle this release filter.
}
>
-
-
-
+
+
-
-
-
+
+
-
-
+
+
-
-
-
-
+
+
-
-
+
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
-
-
+
+
-
-
+
-
+
);
diff --git a/web/src/screens/filters/sections/action_components/OtherActions.tsx b/web/src/screens/filters/sections/action_components/OtherActions.tsx
index dff5097..8e82143 100644
--- a/web/src/screens/filters/sections/action_components/OtherActions.tsx
+++ b/web/src/screens/filters/sections/action_components/OtherActions.tsx
@@ -4,36 +4,36 @@
*/
import { WarningAlert } from "@components/alerts";
-import * as Input from "@components/inputs";
+import { FilterHalfRow, FilterLayout, FilterSection } from "@screens/filters/sections/_components.tsx";
+import { DownloadClientSelect, NumberField, TextAreaAutoResize, TextField } from "@components/inputs";
-import * as FilterSection from "../_components";
export const SABnzbd = ({ idx, action, clients }: ClientActionProps) => (
- Select the specific instance which you want to handle this release filter.
}
>
-
-
-
+
+
-
-
-
+
+ Category must exist already.}
/>
-
-
-
+
+
+
);
export const Test = () => (
@@ -46,49 +46,49 @@ export const Test = () => (
);
export const Exec = ({ idx }: ClientActionProps) => (
-
-
-
+
-
-
+
-
+
);
export const WatchFolder = ({ idx }: ClientActionProps) => (
-
-
-
+
-
-
+
+
);
export const WebHook = ({ idx }: ClientActionProps) => (
-
-
-
+ (
URL or IP to your API. Pass params and set API tokens etc.
}
/>
-
-
+
-
+
);
export const Arr = ({ idx, action, clients }: ClientActionProps) => (
- Select the specific instance which you want to handle this release filter.
}
>
-
-
-
+
+
-
+
-
+
- (
}
/>
- (
}
/>
-
-
-
+
+
+
);
diff --git a/web/src/screens/releases/ReleaseTable.tsx b/web/src/screens/releases/ReleaseTable.tsx
index 9febb46..16e04fb 100644
--- a/web/src/screens/releases/ReleaseTable.tsx
+++ b/web/src/screens/releases/ReleaseTable.tsx
@@ -19,13 +19,11 @@ import {
import { ReleasesRoute } from "@app/routes";
import { ReleasesListQueryOptions } from "@api/queries";
import { RandomLinuxIsos } from "@utils";
-
-import * as Icons from "@components/Icons";
-import { RingResizeSpinner } from "@components/Icons";
-import * as DataTable from "@components/data-table";
-
+import { RingResizeSpinner, SortDownIcon, SortIcon, SortUpIcon } from "@components/Icons";
import { IndexerSelectColumnFilter, PushStatusSelectColumnFilter, SearchColumnFilter } from "./ReleaseFilters";
import { EmptyListState } from "@components/emptystates";
+import { TableButton, TablePageButton } from "@components/data-table/Buttons.tsx";
+import { AgeCell, IndexerCell, LinksCell, NameCell, ReleaseStatusCell } from "@components/data-table";
type TableState = {
queryPageIndex: number;
@@ -100,30 +98,30 @@ export const ReleaseTable = () => {
{
Header: "Age",
accessor: "timestamp",
- Cell: DataTable.AgeCell
+ Cell: AgeCell
},
{
Header: "Release",
accessor: "name",
- Cell: DataTable.NameCell,
+ Cell: NameCell,
Filter: SearchColumnFilter
},
{
Header: "Links",
accessor: (row) => ({ download_url: row.download_url, info_url: row.info_url }),
id: "links",
- Cell: DataTable.LinksCell
+ Cell: LinksCell
},
{
Header: "Actions",
accessor: "action_status",
- Cell: DataTable.ReleaseStatusCell,
+ Cell: ReleaseStatusCell,
Filter: PushStatusSelectColumnFilter
},
{
Header: "Indexer",
accessor: "indexer.identifier",
- Cell: DataTable.IndexerCell,
+ Cell: IndexerCell,
Filter: IndexerSelectColumnFilter,
filter: "equal"
}
@@ -303,12 +301,12 @@ export const ReleaseTable = () => {
{column.isSorted ? (
column.isSortedDesc ? (
-
+
) : (
-
+
)
) : (
-
+
)}
@@ -350,8 +348,8 @@ export const ReleaseTable = () => {
{/* Pagination */}
-
previousPage()} disabled={!canPreviousPage}>Previous
-
nextPage()} disabled={!canNextPage}>Next
+
previousPage()} disabled={!canPreviousPage}>Previous
+
nextPage()} disabled={!canNextPage}>Next
@@ -378,37 +376,37 @@ export const ReleaseTable = () => {