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

This commit is contained in:
RaviAnand Mohabir 2025-04-08 09:42:12 +02:00
parent 47adacb590
commit abf37b286a

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,8 +447,7 @@ 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(
@ -466,7 +459,6 @@ function Organizrr() {
<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,8 +510,12 @@ 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" }}>
<IconEye /> <Title order={3}>Vorschau</Title>
</Group>
{activeDocument && activeDocument.file.name.endsWith(".pdf") && (
<>
<Text>{activeDocument.file.name}</Text> <Text>{activeDocument.file.name}</Text>
<ScrollArea w="100%"> <ScrollArea w="100%">
<Document <Document
@ -534,8 +530,9 @@ function Organizrr() {
onChange={setPageNumber} onChange={setPageNumber}
total={numPages ?? 0} total={numPages ?? 0}
/> />
</Stack> </>
)} )}
</Stack>
</AppShell.Aside> </AppShell.Aside>
<AppShell.Footer p="md"> <AppShell.Footer p="md">