feat: 💄 add title to preview pane and improve general styling
This commit is contained in:
parent
47adacb590
commit
abf37b286a
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user