InnoPeak/organizrr
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 💄 add title to preview pane and improve general styling
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/promote/production Build is passing
Details

Browse Source
This commit is contained in:
RaviAnand Mohabir 2025-04-08 09:42:12 +02:00
parent 47adacb590
commit abf37b286a
1 changed files with 37 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/Organizrr.tsx
View File

@ -2,15 +2,12 @@ import {
ActionIcon, ActionIcon,
AppShell, AppShell,
Autocomplete, Autocomplete,
Box,
Burger, Burger,
Button, Button,
Group, Group,
Indicator,
Loader, Loader,
Pagination, Pagination,
Paper, Paper,
Progress,
ScrollArea, ScrollArea,
Select, Select,
Stack, Stack,
@ -20,7 +17,6 @@ import {
Tooltip, Tooltip,
} from "@mantine/core"; } from "@mantine/core";
import { Document, Page } from "react-pdf"; import { Document, Page } from "react-pdf";
import { Form, isNotEmpty, useForm } from "@mantine/form";
import { import {
IconDownload, IconDownload,
IconEye, IconEye,
@ -29,7 +25,6 @@ import {
IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftCollapse,
IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftExpand,
IconRestore, IconRestore,
IconRobotFace,
IconTrash, IconTrash,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { import {
@ -38,6 +33,7 @@ import {
getFileDataUrl, getFileDataUrl,
systemMessage, systemMessage,
} from "./utils"; } from "./utils";
import { isNotEmpty, useForm } from "@mantine/form";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import { ChatCompletionMessageParam } from "@mlc-ai/web-llm"; import { ChatCompletionMessageParam } from "@mlc-ai/web-llm";
@ -281,7 +277,7 @@ function Organizrr() {
hiddenFrom="sm" hiddenFrom="sm"
size="sm" size="sm"
/> />
<Stack> <Stack gap="xs">
<Title c="white" order={1}> <Title c="white" order={1}>
Organizrr Organizrr
</Title> </Title>
@ -418,8 +414,6 @@ function Organizrr() {
(d, idx) => ( (d, idx) => (
<Stack <Stack
key={`${d.id}-${idx}`} key={`${d.id}-${idx}`}
h={500}
mah={500}
w={300} w={300}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
onClick={() => { onClick={() => {
@ -453,20 +447,18 @@ function Organizrr() {
{form.values.documents {form.values.documents
.find((_d) => _d.id === d.id) .find((_d) => _d.id === d.id)
?.file.name.endsWith(".pdf") && ( ?.file.name.endsWith(".pdf") && (
<Box style={{ flexGrow: 1, minHeight: 0 }}> <ScrollArea h={400} w="100%">
<ScrollArea h="100%"> <Document
<Document file={
file={ form.values.documents.find(
form.values.documents.find( (_d) => _d.id === d.id
(_d) => _d.id === d.id )?.file
)?.file }
} className={classNames.pdfPreview}
className={classNames.pdfPreview} >
> <Page pageNumber={1} scale={0.5} />
<Page pageNumber={1} scale={0.5} /> </Document>
</Document> </ScrollArea>
</ScrollArea>
</Box>
)} )}
<TextInput <TextInput
label="Selected pages" label="Selected pages"
@ -518,24 +510,29 @@ function Organizrr() {
</AppShell.Main> </AppShell.Main>
<AppShell.Aside p="md" bg="var(--mantine-primary-color-1)"> <AppShell.Aside p="md" bg="var(--mantine-primary-color-1)">
{activeDocument && activeDocument.file.name.endsWith(".pdf") && ( <Stack align="center">
<Stack align="center"> <Group style={{ alignSelf: "start" }}>
<Text>{activeDocument.file.name}</Text> <IconEye /> <Title order={3}>Vorschau</Title>
<ScrollArea w="100%"> </Group>
<Document {activeDocument && activeDocument.file.name.endsWith(".pdf") && (
file={activeDocument.file} <>
onLoadSuccess={onDocumentLoadSuccess} <Text>{activeDocument.file.name}</Text>
> <ScrollArea w="100%">
<Page pageNumber={pageNumber} scale={0.8} /> <Document
</Document> file={activeDocument.file}
</ScrollArea> onLoadSuccess={onDocumentLoadSuccess}
<Pagination >
value={pageNumber} <Page pageNumber={pageNumber} scale={0.8} />
onChange={setPageNumber} </Document>
total={numPages ?? 0} </ScrollArea>
/> <Pagination
</Stack> value={pageNumber}
)} onChange={setPageNumber}
total={numPages ?? 0}
/>
</>
)}
</Stack>
</AppShell.Aside> </AppShell.Aside>
<AppShell.Footer p="md"> <AppShell.Footer p="md">