Skip to content

Commit d3fa66f

Browse files
semohrsemohr
authored
Merge pull request #73 from pSpitzner/rc1_inbox_view_improvements
Tweaks to inbox view: - moved inboxCard from index.tsx to its own file. - path line breaks and icon fixed - should still do something about these buttons :P
2 parents d5560d0 + ab49685 commit d3fa66f

File tree

4 files changed

+169
-144
lines changed

4 files changed

+169
-144
lines changed

‎frontend/src/components/common/icons.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export function FolderTypeIcon({
5757
style={{
5858
transform: isOpen ? "rotate(90deg)" : "",
5959
transition: "transform 0.15s ease-in-out",
60+
flexShrink: 0,
6061
}}
6162
{...props}
6263
/>

‎frontend/src/components/frontpage/statsCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ export function CardHeader({
272272
paddingLeft: reverse ? 1 : 4,
273273
paddingRight: reverse ? 4 : 1,
274274
display: "flex",
275-
alignItems: "flex-start",
275+
alignItems: "flex-end",
276276
justifyContent: "space-between",
277277
zIndex: 1,
278278
flexDirection: reverse ? "row-reverse" : "row",

‎frontend/src/components/inbox/cards/inboxCard.tsx‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import { useMemo } from "react";
2+
import { Box, Card, CardContent, Tooltip, Typography } from "@mui/material";
3+
4+
import { useConfig } from "@/api/config";
5+
import { InboxTypeIcon } from "@/components/common/icons";
6+
import { CardHeader } from "@/components/frontpage/statsCard";
7+
import { FolderActionDesktopBar } from "@/components/inbox/actions";
8+
import {
9+
FolderComponent,
10+
GridWrapper,
11+
SelectedStats,
12+
} from "@/components/inbox/fileTree";
13+
import { Folder } from "@/pythonTypes";
14+
15+
export function InboxCard({ folder }: { folder: Folder }) {
16+
const config = useConfig();
17+
18+
// configuration for this inbox folder
19+
const folderConfig = useMemo<(typeof config)["gui"]["inbox"]["folders"][0]>(() => {
20+
const fc = Object.entries(config.gui.inbox.folders).find(
21+
([_k, v]) => v.path === folder.full_path
22+
);
23+
24+
return fc
25+
? fc[1]
26+
: {
27+
name: "Inbox",
28+
autotag: false,
29+
path: folder.full_path,
30+
};
31+
}, [config, folder.full_path]);
32+
33+
const innerFolders = useMemo(() => {
34+
// Filter out folders that are not albums or files
35+
return folder.children.filter((f) => f.type === "directory");
36+
}, [folder.children]);
37+
38+
const threshold = folderConfig.auto_threshold ?? config.match.strong_rec_thresh;
39+
40+
let tooltip: string;
41+
switch (folderConfig.autotag) {
42+
case "auto":
43+
tooltip =
44+
"Automatic tagging and import enabled. " +
45+
(1 - threshold) * 100 +
46+
"% threshold.";
47+
break;
48+
case "preview":
49+
tooltip = "Automatic tagging enabled, but no import.";
50+
break;
51+
case "bootleg":
52+
tooltip = "Import as-is, and split albums by meta-data.";
53+
break;
54+
default:
55+
tooltip = "No automatic tagging or import enabled.";
56+
break;
57+
}
58+
59+
return (
60+
<Card sx={{ width: "100%", padding: 2 }}>
61+
<CardHeader
62+
key={folder.full_path}
63+
icon={
64+
<Tooltip title={tooltip}>
65+
<InboxTypeIcon
66+
size={24}
67+
type={folderConfig.autotag || undefined}
68+
/>
69+
</Tooltip>
70+
}
71+
dividerPos="70%"
72+
color="secondary.main"
73+
>
74+
<Box
75+
sx={{
76+
display: "flex",
77+
alignItems: "flex-end",
78+
width: "100%",
79+
justifyContent: "space-between",
80+
position: "relative",
81+
paddingBottom: 2.5,
82+
paddingLeft: 1,
83+
}}
84+
>
85+
{/* file path */}
86+
<Box
87+
sx={{
88+
display: "flex",
89+
flexWrap: "wrap",
90+
flexDirection: "row",
91+
alignItems: "flex-end",
92+
width: "100%",
93+
94+
columnGap: 0.5,
95+
rowGap: 0.1,
96+
}}
97+
>
98+
{folderConfig.path
99+
.split("/")
100+
.filter(Boolean)
101+
.map((segment, idx, arr) => (
102+
<Typography
103+
variant="body2"
104+
key={idx}
105+
component="span"
106+
sx={{
107+
display: "inline-flex",
108+
whiteSpace: "nowrap",
109+
}}
110+
>
111+
{`/ ${segment}${idx === arr.length - 1 && folderConfig.path.endsWith("/") ? " /" : ""}`}
112+
</Typography>
113+
))}
114+
</Box>
115+
116+
{/* inbox name */}
117+
<Typography
118+
variant="body1"
119+
sx={{
120+
fontWeight: "bold",
121+
flexShrink: 0,
122+
m: 0,
123+
p: 0,
124+
}}
125+
>
126+
{folderConfig.name}
127+
</Typography>
128+
</Box>
129+
</CardHeader>
130+
<CardContent
131+
sx={{
132+
paddingInline: 1,
133+
paddingTop: 1,
134+
m: 0,
135+
paddingBottom: "0 !important",
136+
}}
137+
>
138+
<GridWrapper>
139+
{/* Only show inner folders */}
140+
{innerFolders.map((innerFolder) => (
141+
<FolderComponent
142+
key={innerFolder.full_path}
143+
folder={innerFolder}
144+
/>
145+
))}
146+
{innerFolders.length === 0 && (
147+
<Box
148+
sx={{
149+
gridColumn: "1 / -1",
150+
textAlign: "center",
151+
color: "secondary.muted",
152+
}}
153+
>
154+
No folders in this inbox.
155+
</Box>
156+
)}
157+
</GridWrapper>
158+
<SelectedStats />
159+
</CardContent>
160+
<FolderActionDesktopBar />
161+
{/* <FolderActionsSpeedDial /> */}
162+
</Card>
163+
);
164+
}

‎frontend/src/routes/inbox/index.tsx‎

Lines changed: 3 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,31 @@ import {
88
TerminalIcon,
99
Trash2Icon,
1010
} from "lucide-react";
11-
import { useMemo, useState } from "react";
11+
import { useState } from "react";
1212
import {
1313
Box,
1414
BoxProps,
15-
Card,
16-
CardContent,
1715
DialogContent,
1816
IconButton,
19-
Tooltip,
2017
Typography,
2118
useTheme,
2219
} from "@mui/material";
2320
import { useSuspenseQuery } from "@tanstack/react-query";
2421
import { createFileRoute } from "@tanstack/react-router";
2522

26-
import { useConfig } from "@/api/config";
2723
import { inboxQueryOptions } from "@/api/inbox";
2824
import { MatchChip, StyledChip } from "@/components/common/chips";
2925
import { Dialog } from "@/components/common/dialogs";
3026
import {
3127
FileTypeIcon,
3228
FolderStatusIcon,
3329
FolderTypeIcon,
34-
InboxTypeIcon,
3530
PenaltyTypeIcon,
3631
SourceTypeIcon,
3732
} from "@/components/common/icons";
3833
import { PageWrapper } from "@/components/common/page";
39-
import { CardHeader } from "@/components/frontpage/statsCard";
40-
import {
41-
FolderActionDesktopBar,
42-
RefreshAllFoldersButton,
43-
} from "@/components/inbox/actions";
44-
import {
45-
FolderComponent,
46-
GridWrapper,
47-
SelectedStats,
48-
} from "@/components/inbox/fileTree";
34+
import { RefreshAllFoldersButton } from "@/components/inbox/actions";
35+
import { InboxCard } from "@/components/inbox/cards/inboxCard";
4936
import { FolderSelectionProvider } from "@/components/inbox/folderSelectionContext";
5037
import { Folder } from "@/pythonTypes";
5138

@@ -163,133 +150,6 @@ function PageHeader({ inboxes, ...props }: { inboxes: Folder[] } & BoxProps) {
163150
);
164151
}
165152

166-
function InboxCard({ folder }: { folder: Folder }) {
167-
const config = useConfig();
168-
169-
// configuration for this inbox folder
170-
const folderConfig = useMemo<(typeof config)["gui"]["inbox"]["folders"][0]>(() => {
171-
const fc = Object.entries(config.gui.inbox.folders).find(
172-
([_k, v]) => v.path === folder.full_path
173-
);
174-
175-
return fc
176-
? fc[1]
177-
: {
178-
name: "Inbox",
179-
autotag: false,
180-
path: folder.full_path,
181-
};
182-
}, [config, folder.full_path]);
183-
184-
const innerFolders = useMemo(() => {
185-
// Filter out folders that are not albums or files
186-
return folder.children.filter((f) => f.type === "directory");
187-
}, [folder.children]);
188-
189-
const threshold = folderConfig.auto_threshold ?? config.match.strong_rec_thresh;
190-
191-
let tooltip: string;
192-
switch (folderConfig.autotag) {
193-
case "auto":
194-
tooltip =
195-
"Automatic tagging and import enabled. " +
196-
(1 - threshold) * 100 +
197-
"% threshold.";
198-
break;
199-
case "preview":
200-
tooltip = "Automatic tagging enabled, but no import.";
201-
break;
202-
case "bootleg":
203-
tooltip = "Import as-is, and split albums by meta-data.";
204-
break;
205-
default:
206-
tooltip = "No automatic tagging or import enabled.";
207-
break;
208-
}
209-
210-
return (
211-
<Card sx={{ width: "100%", padding: 2 }}>
212-
<CardHeader
213-
key={folder.full_path}
214-
icon={
215-
<Tooltip title={tooltip}>
216-
<InboxTypeIcon
217-
size={24}
218-
type={folderConfig.autotag || undefined}
219-
/>
220-
</Tooltip>
221-
}
222-
dividerPos="70%"
223-
color="secondary.main"
224-
>
225-
<Box
226-
sx={{
227-
display: "flex",
228-
alignItems: "flex-end",
229-
width: "100%",
230-
justifyContent: "space-between",
231-
}}
232-
>
233-
<Typography
234-
variant="body2"
235-
sx={{
236-
flexGrow: 1,
237-
m: 0,
238-
p: 0,
239-
fontWeight: "bold",
240-
paddingLeft: 2,
241-
}}
242-
>
243-
{folderConfig.path.replaceAll("/", " / ")}
244-
</Typography>
245-
<Typography
246-
variant="body1"
247-
sx={{
248-
fontWeight: "bold",
249-
m: 0,
250-
p: 0,
251-
}}
252-
>
253-
{folderConfig.name}
254-
</Typography>
255-
</Box>
256-
</CardHeader>
257-
<CardContent
258-
sx={{
259-
paddingInline: 1,
260-
paddingTop: 1,
261-
m: 0,
262-
paddingBottom: "0 !important",
263-
}}
264-
>
265-
<GridWrapper>
266-
{/* Only show inner folders */}
267-
{innerFolders.map((innerFolder) => (
268-
<FolderComponent
269-
key={innerFolder.full_path}
270-
folder={innerFolder}
271-
/>
272-
))}
273-
{innerFolders.length === 0 && (
274-
<Box
275-
sx={{
276-
gridColumn: "1 / -1",
277-
textAlign: "center",
278-
color: "secondary.muted",
279-
}}
280-
>
281-
No folders in this inbox.
282-
</Box>
283-
)}
284-
</GridWrapper>
285-
<SelectedStats />
286-
</CardContent>
287-
<FolderActionDesktopBar />
288-
{/* <FolderActionsSpeedDial /> */}
289-
</Card>
290-
);
291-
}
292-
293153
/** Description of the inbox page, shown as modal on click */
294154
function InfoDescription() {
295155
const theme = useTheme();

0 commit comments

Comments
 (0)