Skip to content
This repository was archived by the owner on Feb 3, 2025. It is now read-only.

Commit 45980ec

Browse files
oaeoae
committed
feat: add settings ui
1 parent 7d6fe34 commit 45980ec

13 files changed

+923
-8
lines changed

‎.env.example

-5
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,3 @@ DATABASE_URL=postgresql://${DATABASE_USER}:${DATABASE_PASSWORD}@${DATABASE_HOST}
1212
# Redis
1313
REDIS_HOST=localhost
1414
REDIS_PORT=6379
15-
16-
# Notification
17-
TELEGRAM_TOKEN=
18-
TELEGRAM_CHAT_ID=
19-
TELEGRAM_SEND_SILENTLY=0

‎.eslintrc.json

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@typescript-eslint/no-unused-vars": [
3030
"error",
3131
{
32+
"ignoreRestSiblings": true,
3233
"argsIgnorePattern": "^_",
3334
"varsIgnorePattern": "^_",
3435
"caughtErrorsIgnorePattern": "^_"

‎README.md

-3
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,6 @@ services:
2828
- KAIZOKU_PORT=3000
2929
- REDIS_HOST=redis
3030
- REDIS_PORT=6379
31-
- TELEGRAM_TOKEN=<token> # Don't set if you don't want telegram notifications.
32-
- TELEGRAM_CHAT_ID=<chat_id>
33-
- TELEGRAM_SEND_SILENTLY=0
3431
- PUID=<host user puid>
3532
- PGID=<host user guid>
3633
- TZ=Europe/Istanbul

‎docker-compose.yml

+4
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,7 @@ services:
4949
- db:/var/lib/postgresql/data
5050
ports:
5151
- "${DATABASE_PORT:-5432}:5432"
52+
apprise:
53+
image: caronc/apprise:latest
54+
ports:
55+
- "9292:8000"

‎public/brand/apprise.png

42.3 KB
Loading

‎public/brand/komga.png

23.6 KB
Loading

‎public/brand/telegram.png

19.2 KB
Loading

‎src/components/settings/integration.tsx

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import { Accordion, Box, Breadcrumbs, createStyles, Group, Image, Text } from '@mantine/core';
2+
import { trpc } from '../../utils/trpc';
3+
import { SwitchItem, TextItem } from './mangal';
4+
5+
const useStyles = createStyles((theme) => ({
6+
item: {
7+
'&': {
8+
paddingTop: theme.spacing.sm,
9+
marginTop: theme.spacing.sm,
10+
borderTop: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]}`,
11+
},
12+
},
13+
14+
switch: {
15+
'& *': {
16+
cursor: 'pointer',
17+
},
18+
},
19+
20+
numberInput: {
21+
maxWidth: 60,
22+
},
23+
24+
textInput: {
25+
maxWidth: 120,
26+
},
27+
28+
title: {
29+
lineHeight: 1,
30+
},
31+
}));
32+
33+
export function IntegrationSettings() {
34+
const { classes } = useStyles();
35+
const update = trpc.settings.update.useMutation();
36+
const settings = trpc.settings.query.useQuery();
37+
38+
const handleUpdate = async (key: string, value: boolean | string | number) => {
39+
await update.mutateAsync({
40+
key,
41+
value,
42+
updateType: 'app',
43+
});
44+
await settings.refetch();
45+
};
46+
47+
if (settings.isLoading || !settings.data) {
48+
return null;
49+
}
50+
51+
return (
52+
<Accordion variant="contained">
53+
<Accordion.Item value="komga">
54+
<Accordion.Control icon={<Image src="/brand/komga.png" width={20} height={20} />}>Komga</Accordion.Control>
55+
<Accordion.Panel>
56+
<Group position="apart" className={classes.item} spacing="xl" noWrap>
57+
<Box>
58+
<Breadcrumbs
59+
separator="/"
60+
styles={{
61+
separator: {
62+
marginLeft: 4,
63+
marginRight: 4,
64+
},
65+
breadcrumb: {
66+
textTransform: 'capitalize',
67+
fontSize: 13,
68+
fontWeight: 500,
69+
},
70+
root: {
71+
marginBottom: 5,
72+
},
73+
}}
74+
>
75+
Enabled
76+
</Breadcrumbs>
77+
<Text size="xs" color="dimmed">
78+
Enable Komga integration to trigger library scan and metadata refresh tasks
79+
</Text>
80+
</Box>
81+
<SwitchItem
82+
configKey="komgaEnabled"
83+
onUpdate={handleUpdate}
84+
initialValue={settings.data.appConfig.komgaEnabled}
85+
/>
86+
</Group>
87+
<Group position="apart" className={classes.item} spacing="xl" noWrap>
88+
<Box>
89+
<Breadcrumbs
90+
separator="/"
91+
styles={{
92+
separator: {
93+
marginLeft: 4,
94+
marginRight: 4,
95+
},
96+
breadcrumb: {
97+
textTransform: 'capitalize',
98+
fontSize: 13,
99+
fontWeight: 500,
100+
},
101+
root: {
102+
marginBottom: 5,
103+
},
104+
}}
105+
>
106+
Host
107+
</Breadcrumbs>
108+
<Text size="xs" color="dimmed">
109+
Komga host or ip
110+
</Text>
111+
</Box>
112+
<TextItem configKey="komgaHost" onUpdate={handleUpdate} initialValue={settings.data.appConfig.komgaHost} />
113+
</Group>
114+
<Group position="apart" className={classes.item} spacing="xl" noWrap>
115+
<Box>
116+
<Breadcrumbs
117+
separator="/"
118+
styles={{
119+
separator: {
120+
marginLeft: 4,
121+
marginRight: 4,
122+
},
123+
breadcrumb: {
124+
textTransform: 'capitalize',
125+
fontSize: 13,
126+
fontWeight: 500,
127+
},
128+
root: {
129+
marginBottom: 5,
130+
},
131+
}}
132+
>
133+
Email
134+
</Breadcrumbs>
135+
<Text size="xs" color="dimmed">
136+
Komga user
137+
</Text>
138+
</Box>
139+
<TextItem configKey="komgaUser" onUpdate={handleUpdate} initialValue={settings.data.appConfig.komgaUser} />
140+
</Group>
141+
<Group position="apart" className={classes.item} spacing="xl" noWrap>
142+
<Box>
143+
<Breadcrumbs
144+
separator="/"
145+
styles={{
146+
separator: {
147+
marginLeft: 4,
148+
marginRight: 4,
149+
},
150+
breadcrumb: {
151+
textTransform: 'capitalize',
152+
fontSize: 13,
153+
fontWeight: 500,
154+
},
155+
root: {
156+
marginBottom: 5,
157+
},
158+
}}
159+
>
160+
Password
161+
</Breadcrumbs>
162+
<Text size="xs" color="dimmed">
163+
Komga user password
164+
</Text>
165+
</Box>
166+
<TextItem
167+
configKey="komgaPassword"
168+
onUpdate={handleUpdate}
169+
initialValue={settings.data.appConfig.komgaPassword}
170+
/>
171+
</Group>
172+
</Accordion.Panel>
173+
</Accordion.Item>
174+
</Accordion>
175+
);
176+
}

0 commit comments

Comments
 (0)