Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-08-23 23:02:17 +10:00
Code Issues Packages Projects Releases Wiki Activity

chore: lint using react-doctor, update translations, dynamic imports

Browse Source
This commit is contained in:
Amruth Pillai
2026-05-21 09:56:26 +02:00
parent 3596102c63
commit 39e88dd365
208 changed files with 5876 additions and 4778 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/routes/builder/$resumeId/-components/dock.tsx
+5 -5
View File
@@ -15,7 +15,7 @@ import {
MagnifyingGlassPlusIcon,
} from "@phosphor-icons/react";
import { useNavigate } from "@tanstack/react-router";
import { motion } from "motion/react";
import { m } from "motion/react";
import { useCallback, useMemo, useState } from "react";
import { useControls } from "react-zoom-pan-pinch";
import { toast } from "sonner";
@@ -96,7 +96,7 @@ export function BuilderDock({ pageLayout, onTogglePageLayout }: BuilderDockProps
return (
<div className="fixed inset-x-0 bottom-4 flex items-center justify-center">
<motion.div
<m.div
initial={{ opacity: 0, y: -18 }}
animate={{ opacity: 0.6, y: 0 }}
whileHover={{ opacity: 1, y: -2, scale: 1.01 }}
@@ -130,7 +130,7 @@ export function BuilderDock({ pageLayout, onTogglePageLayout }: BuilderDockProps
icon={isPrinting ? CircleNotchIcon : FilePdfIcon}
iconClassName={cn(isPrinting && "animate-spin")}
/>
</motion.div>
</m.div>
</div>
);
}
@@ -149,7 +149,7 @@ function DockIcon({ icon: Icon, title, disabled, onClick, iconClassName, active
<Tooltip>
<TooltipTrigger
render={
<motion.div
<m.div
className="will-change-transform"
whileHover={disabled ? undefined : { y: -1, scale: 1.04 }}
whileTap={disabled ? undefined : { scale: 0.97 }}
@@ -165,7 +165,7 @@ function DockIcon({ icon: Icon, title, disabled, onClick, iconClassName, active
>
<Icon className={cn("size-4", iconClassName)} />
</Button>
</motion.div>
</m.div>
}
/>
apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/picture.tsx
+351 -303
View File
@@ -2,8 +2,8 @@ import type z from "zod";
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
import { EyeIcon, EyeSlashIcon, TrashSimpleIcon, UploadSimpleIcon } from "@phosphor-icons/react";
import { useMutation } from "@tanstack/react-query";
import { useEffect, useRef, useState } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useEffect, useRef } from "react";
import { toast } from "sonner";
import { pictureSchema } from "@reactive-resume/schema/resume/data";
import { Button } from "@reactive-resume/ui/components/button";
@@ -32,6 +32,306 @@ export function PictureSectionBuilder() {
);
}
function PicturePreviewControls({
fileInputRef,
form,
normalizedPictureUrl,
picture,
pictureSrc,
onAutoSave,
onDeletePicture,
onSelectPicture,
onUploadPicture,
}: {
fileInputRef: React.RefObject<HTMLInputElement | null>;
form: PictureSettingsForm;
normalizedPictureUrl: string;
picture: PictureValues;
pictureSrc: string;
onAutoSave: () => void;
onDeletePicture: () => void;
onSelectPicture: () => void;
onUploadPicture: (event: React.ChangeEvent<HTMLInputElement>) => void;
}) {
return (
<div className="flex items-center gap-x-4">
<input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={onUploadPicture} />
<button
type="button"
onClick={picture.url ? onDeletePicture : onSelectPicture}
aria-label={picture.url ? t`Delete picture` : t`Upload picture`}
className="group/picture relative size-18 cursor-pointer overflow-hidden rounded-md bg-secondary transition-colors hover:bg-secondary/50"
>
{(pictureSrc || normalizedPictureUrl) && (
<img
alt=""
src={pictureSrc || normalizedPictureUrl}
className="fade-in relative z-10 size-full animate-in rounded-md object-cover transition-opacity group-hover/picture:opacity-20"
/>
)}
<div className="absolute inset-0 z-0 flex size-full items-center justify-center">
{picture.url ? <TrashSimpleIcon className="size-6" /> : <UploadSimpleIcon className="size-6" />}
</div>
</button>
<form.Field name="url">
{(field) => (
<FormItem className="flex-1" hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
<FormLabel>
<Trans>URL</Trans>
</FormLabel>
<div className="flex items-center gap-x-2">
<FormControl
render={
<Input
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(event) => {
field.handleChange(event.target.value);
onAutoSave();
}}
/>
}
/>
<Button
size="icon"
variant="ghost"
onClick={() => {
form.setFieldValue("hidden", !picture.hidden);
onAutoSave();
}}
>
{picture.hidden ? <EyeSlashIcon /> : <EyeIcon />}
</Button>
</div>
</FormItem>
)}
</form.Field>
</div>
);
}
function PictureGeometryFields({ form, onAutoSave }: { form: PictureSettingsForm; onAutoSave: () => void }) {
return (
<>
<form.Field name="size">
{(field) => (
<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
<FormLabel>
<Trans>Size</Trans>
</FormLabel>
<InputGroup>
<InputGroupInput
name={field.name}
value={field.state.value}
type="number"
min={32}
max={512}
step={1}
onBlur={field.handleBlur}
onChange={(e) => {
const value = e.target.value;
if (value === "") field.handleChange("" as unknown as number);
else field.handleChange(Number(value));
onAutoSave();
}}
/>
<InputGroupAddon align="inline-end">
<InputGroupText>pt</InputGroupText>
</InputGroupAddon>
</InputGroup>
<FormMessage errors={field.state.meta.errors} />
</FormItem>
)}
</form.Field>
<form.Field name="rotation">
{(field) => (
<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
<FormLabel>
<Trans>Rotation</Trans>
</FormLabel>
<InputGroup>
<FormControl
render={
<InputGroupInput
name={field.name}
value={field.state.value}
type="number"
min={0}
max={360}
step={5}
onBlur={field.handleBlur}
onChange={(e) => {
const value = e.target.value;
if (value === "") field.handleChange("" as unknown as number);
else field.handleChange(Number(value));
onAutoSave();
}}
/>
}
/>
<InputGroupAddon align="inline-end">
<InputGroupText>°</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormItem>
)}
</form.Field>
<form.Field name="aspectRatio">
{(field) => (
<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
<FormLabel>
<Trans>Aspect Ratio</Trans>
</FormLabel>
<div className="flex items-center gap-x-2">
<FormControl
render={
<Input
name={field.name}
value={field.state.value}
type="number"
min={0.5}
max={2.5}
step={0.1}
onBlur={field.handleBlur}
onChange={(e) => {
const value = e.target.value;
if (value === "") field.handleChange("" as unknown as number);
else field.handleChange(Number(value));
onAutoSave();
}}
/>
}
/>
<ButtonGroup className="shrink-0">
<Button
size="icon"
variant="outline"
title={t({
comment: "Preset button for setting picture aspect ratio to square",
message: "Square",
})}
onClick={() => {
field.handleChange(1);
onAutoSave();
}}
>
<div className="aspect-square min-h-3 min-w-3 border border-primary" />
</Button>
<Button
size="icon"
variant="outline"
title={t({
comment: "Preset button for setting picture aspect ratio to landscape orientation",
message: "Landscape",
})}
onClick={() => {
field.handleChange(1.5);
onAutoSave();
}}
>
<div className="aspect-1.5/1 min-h-3 min-w-3 border border-primary" />
</Button>
<Button
size="icon"
variant="outline"
title={t({
comment: "Preset button for setting picture aspect ratio to portrait orientation",
message: "Portrait",
})}
onClick={() => {
field.handleChange(0.5);
onAutoSave();
}}
>
<div className="aspect-1/1.5 min-h-3 min-w-3 border border-primary" />
</Button>
</ButtonGroup>
</div>
</FormItem>
)}
</form.Field>
<form.Field name="borderRadius">
{(field) => (
<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
<FormLabel>
<Trans>Border Radius</Trans>
</FormLabel>
<div className="flex items-center gap-x-2">
<InputGroup>
<FormControl
render={
<InputGroupInput
name={field.name}
value={field.state.value}
type="number"
min={0}
max={100}
step={1}
onBlur={field.handleBlur}
onChange={(e) => {
const value = Number(e.target.value);
field.handleChange(value);
onAutoSave();
}}
/>
}
/>
<InputGroupAddon align="inline-end">pt</InputGroupAddon>
</InputGroup>
<ButtonGroup className="shrink-0">
<Button
size="icon"
variant="outline"
title="0pt"
onClick={() => {
field.handleChange(0);
onAutoSave();
}}
>
<div className="size-3 rounded-none border border-primary" />
</Button>
<Button
size="icon"
variant="outline"
title="10pt"
onClick={() => {
field.handleChange(10);
onAutoSave();
}}
>
<div className="size-3 rounded-[10%] border border-primary" />
</Button>
<Button
size="icon"
variant="outline"
title="100pt"
onClick={() => {
field.handleChange(100);
onAutoSave();
}}
>
<div className="size-3 rounded-full border border-primary" />
</Button>
</ButtonGroup>
</div>
</FormItem>
)}
</form.Field>
</>
);
}
type PictureValues = z.infer<typeof pictureSchema>;
function normalizePictureUrl(url: string, origin: string): string {
@@ -48,6 +348,32 @@ function normalizePictureUrl(url: string, origin: string): string {
}
}
async function createPicturePreviewUrl(url: string, signal: AbortSignal) {
const response = await fetch(url, { signal });
if (!response.ok) {
throw new Error(`Failed to fetch image: ${response.status}`);
}
const blob = await response.blob();
return URL.createObjectURL(blob);
}
function usePictureSettingsForm(picture: PictureValues, persist: (data: PictureValues) => void) {
const form = useAppForm({
defaultValues: picture,
validators: { onChange: pictureSchema },
onSubmit: ({ value }) => {
persist(value);
},
});
useSyncFormValues(form, picture);
return form;
}
type PictureSettingsForm = ReturnType<typeof usePictureSettingsForm>;
function PictureSectionForm() {
const fileInputRef = useRef<HTMLInputElement>(null);
const appOrigin = typeof window === "undefined" ? "" : window.location.origin;
@@ -55,7 +381,13 @@ function PictureSectionForm() {
const resume = useCurrentResume();
const picture = resume.data.picture;
const normalizedPictureUrl = normalizePictureUrl(picture.url, appOrigin);
const [pictureSrc, setPictureSrc] = useState("");
const picturePreviewQuery = useQuery({
queryKey: ["resume-picture-preview", normalizedPictureUrl],
queryFn: ({ signal }) => createPicturePreviewUrl(normalizedPictureUrl, signal),
enabled: Boolean(normalizedPictureUrl),
gcTime: 0,
});
const pictureSrc = picturePreviewQuery.data ?? normalizedPictureUrl;
const updateResumeData = useUpdateResumeData();
const { mutate: uploadFile } = useMutation(orpc.storage.uploadFile.mutationOptions({ meta: { noInvalidate: true } }));
@@ -67,14 +399,7 @@ function PictureSectionForm() {
});
};
const form = useAppForm({
defaultValues: picture,
validators: { onChange: pictureSchema },
onSubmit: ({ value }) => {
persist(value);
},
});
useSyncFormValues(form, picture);
const form = usePictureSettingsForm(picture, persist);
const handleAutoSave = () => {
persist(form.state.values);
@@ -106,7 +431,7 @@ function PictureSectionForm() {
const file = e.target.files?.[0];
if (!file) return;
const toastId = toast.loading(t`Uploading picture...`);
const toastId = toast.loading(t`Uploading picture…`);
uploadFile(file, {
onSuccess: ({ url }) => {
@@ -131,33 +456,12 @@ function PictureSectionForm() {
};
useEffect(() => {
if (!normalizedPictureUrl) {
setPictureSrc("");
return;
}
const controller = new AbortController();
let objectUrl = "";
void fetch(normalizedPictureUrl, { signal: controller.signal })
.then(async (response) => {
if (!response.ok) throw new Error(`Failed to fetch image: ${response.status}`);
const blob = await response.blob();
objectUrl = URL.createObjectURL(blob);
setPictureSrc(objectUrl);
})
.catch(() => {
if (controller.signal.aborted) return;
setPictureSrc(normalizedPictureUrl);
});
const objectUrl = picturePreviewQuery.data;
return () => {
controller.abort();
if (objectUrl) URL.revokeObjectURL(objectUrl);
};
}, [normalizedPictureUrl]);
}, [picturePreviewQuery.data]);
return (
<form
@@ -168,276 +472,20 @@ function PictureSectionForm() {
void form.handleSubmit();
}}
>
<div className="flex items-center gap-x-4">
<input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={onUploadPicture} />
<button
type="button"
onClick={picture.url ? onDeletePicture : onSelectPicture}
aria-label={picture.url ? t`Delete picture` : t`Upload picture`}
className="group/picture relative size-18 cursor-pointer overflow-hidden rounded-md bg-secondary transition-colors hover:bg-secondary/50"
>
{(pictureSrc || normalizedPictureUrl) && (
<img
alt=""
src={pictureSrc || normalizedPictureUrl}
className="fade-in relative z-10 size-full animate-in rounded-md object-cover transition-opacity group-hover/picture:opacity-20"
/>
)}
<div className="absolute inset-0 z-0 flex size-full items-center justify-center">
{picture.url ? <TrashSimpleIcon className="size-6" /> : <UploadSimpleIcon className="size-6" />}
</div>
</button>
<form.Field name="url">
{(field) => (
<FormItem className="flex-1" hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
<FormLabel>
<Trans>URL</Trans>
</FormLabel>
<div className="flex items-center gap-x-2">
<FormControl
render={
<Input
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(event) => {
field.handleChange(event.target.value);
handleAutoSave();
}}
/>
}
/>
<Button
size="icon"
variant="ghost"
onClick={() => {
form.setFieldValue("hidden", !picture.hidden);
handleAutoSave();
}}
>
{picture.hidden ? <EyeSlashIcon /> : <EyeIcon />}
</Button>
</div>
</FormItem>
)}
</form.Field>
</div>
<PicturePreviewControls
fileInputRef={fileInputRef}
form={form}
normalizedPictureUrl={normalizedPictureUrl}
picture={picture}
pictureSrc={pictureSrc}
onAutoSave={handleAutoSave}
onDeletePicture={onDeletePicture}
onSelectPicture={onSelectPicture}
onUploadPicture={onUploadPicture}
/>
<div className="grid @md:grid-cols-2 grid-cols-1 gap-4">
<form.Field name="size">
{(field) => (
<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
<FormLabel>
<Trans>Size</Trans>
</FormLabel>
<InputGroup>
<InputGroupInput
name={field.name}
value={field.state.value}
type="number"
min={32}
max={512}
step={1}
onBlur={field.handleBlur}
onChange={(e) => {
const value = e.target.value;
if (value === "") field.handleChange("" as unknown as number);
else field.handleChange(Number(value));
handleAutoSave();
}}
/>
<InputGroupAddon align="inline-end">
<InputGroupText>pt</InputGroupText>
</InputGroupAddon>
</InputGroup>
<FormMessage errors={field.state.meta.errors} />
</FormItem>
)}
</form.Field>
<form.Field name="rotation">
{(field) => (
<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
<FormLabel>
<Trans>Rotation</Trans>
</FormLabel>
<InputGroup>
<FormControl
render={
<InputGroupInput
name={field.name}
value={field.state.value}
type="number"
min={0}
max={360}
step={5}
onBlur={field.handleBlur}
onChange={(e) => {
const value = e.target.value;
if (value === "") field.handleChange("" as unknown as number);
else field.handleChange(Number(value));
handleAutoSave();
}}
/>
}
/>
<InputGroupAddon align="inline-end">
<InputGroupText>°</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormItem>
)}
</form.Field>
<form.Field name="aspectRatio">
{(field) => (
<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
<FormLabel>
<Trans>Aspect Ratio</Trans>
</FormLabel>
<div className="flex items-center gap-x-2">
<FormControl
render={
<Input
name={field.name}
value={field.state.value}
type="number"
min={0.5}
max={2.5}
step={0.1}
onBlur={field.handleBlur}
onChange={(e) => {
const value = e.target.value;
if (value === "") field.handleChange("" as unknown as number);
else field.handleChange(Number(value));
handleAutoSave();
}}
/>
}
/>
<ButtonGroup className="shrink-0">
<Button
size="icon"
variant="outline"
title={t({
comment: "Preset button for setting picture aspect ratio to square",
message: "Square",
})}
onClick={() => {
field.handleChange(1);
handleAutoSave();
}}
>
<div className="aspect-square min-h-3 min-w-3 border border-primary" />
</Button>
<Button
size="icon"
variant="outline"
title={t({
comment: "Preset button for setting picture aspect ratio to landscape orientation",
message: "Landscape",
})}
onClick={() => {
field.handleChange(1.5);
handleAutoSave();
}}
>
<div className="aspect-1.5/1 min-h-3 min-w-3 border border-primary" />
</Button>
<Button
size="icon"
variant="outline"
title={t({
comment: "Preset button for setting picture aspect ratio to portrait orientation",
message: "Portrait",
})}
onClick={() => {
field.handleChange(0.5);
handleAutoSave();
}}
>
<div className="aspect-1/1.5 min-h-3 min-w-3 border border-primary" />
</Button>
</ButtonGroup>
</div>
</FormItem>
)}
</form.Field>
<form.Field name="borderRadius">
{(field) => (
<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
<FormLabel>
<Trans>Border Radius</Trans>
</FormLabel>
<div className="flex items-center gap-x-2">
<InputGroup>
<FormControl
render={
<InputGroupInput
name={field.name}
value={field.state.value}
type="number"
min={0}
max={100}
step={1}
onBlur={field.handleBlur}
onChange={(e) => {
const value = Number(e.target.value);
field.handleChange(value);
handleAutoSave();
}}
/>
}
/>
<InputGroupAddon align="inline-end">pt</InputGroupAddon>
</InputGroup>
<ButtonGroup className="shrink-0">
<Button
size="icon"
variant="outline"
title="0pt"
onClick={() => {
field.handleChange(0);
handleAutoSave();
}}
>
<div className="size-3 rounded-none border border-primary" />
</Button>
<Button
size="icon"
variant="outline"
title="10pt"
onClick={() => {
field.handleChange(10);
handleAutoSave();
}}
>
<div className="size-3 rounded-[10%] border border-primary" />
</Button>
<Button
size="icon"
variant="outline"
title="100pt"
onClick={() => {
field.handleChange(100);
handleAutoSave();
}}
>
<div className="size-3 rounded-full border border-primary" />
</Button>
</ButtonGroup>
</div>
</FormItem>
)}
</form.Field>
<PictureGeometryFields form={form} onAutoSave={handleAutoSave} />
<div className="flex items-end gap-x-3">
<form.Field name="borderColor">
apps/web/src/routes/builder/$resumeId/-sidebar/left/shared/section-base.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export function SectionBase({ type, className, ...props }: Props) {
<div className="flex flex-1 items-center gap-x-4">
{getSectionIcon(type)}
<h2 className="line-clamp-1 font-bold text-2xl tracking-tight">
<h2 className="line-clamp-1 font-semibold text-2xl tracking-tight">
{("title" in section && section.title) || getSectionTitle(type)}
</h2>
</div>
apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
+6 -6
View File
@@ -1,7 +1,7 @@
import type z from "zod";
import { Trans } from "@lingui/react/macro";
import { useStore } from "@tanstack/react-form";
import { AnimatePresence, motion } from "motion/react";
import { AnimatePresence, m } from "motion/react";
import { colorDesignSchema, levelDesignSchema } from "@reactive-resume/schema/resume/data";
import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
import { Input } from "@reactive-resume/ui/components/input";
@@ -231,15 +231,15 @@ function QuickColorCircle({ color, active, onSelect, className, ...props }: Quic
<AnimatePresence>
{active && (
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
exit={{ scale: 0 }}
<m.div
initial={{ scale: 0.95, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.95, opacity: 0 }}
transition={{ duration: 0.16, ease: "easeOut" }}
className="absolute inset-0 flex size-8 items-center justify-center will-change-transform"
>
<div className="size-4 rounded-md bg-foreground" />
</motion.div>
</m.div>
)}
</AnimatePresence>
</button>
apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
+30 -31
View File
@@ -1,5 +1,5 @@
import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
import type { CSSProperties, HTMLAttributes } from "react";
import type { CSSProperties, HTMLAttributes, Ref } from "react";
import {
closestCorners,
DndContext,
@@ -14,7 +14,7 @@ import { CSS } from "@dnd-kit/utilities";
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
import { DotsSixVerticalIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
import { forwardRef, useCallback, useId, useState } from "react";
import { useCallback, useId, useState } from "react";
import { match } from "ts-pattern";
import { Button } from "@reactive-resume/ui/components/button";
import { Switch } from "@reactive-resume/ui/components/switch";
@@ -95,8 +95,10 @@ export function LayoutPages() {
// Search through all pages
for (let pageIndex = 0; pageIndex < layout.pages.length; pageIndex++) {
const page = layout.pages[pageIndex];
if (page.main.includes(id)) return { pageIndex, columnId: "main" };
if (page.sidebar.includes(id)) return { pageIndex, columnId: "sidebar" };
const mainSections = new Set(page.main);
const sidebarSections = new Set(page.sidebar);
if (mainSections.has(id)) return { pageIndex, columnId: "main" };
if (sidebarSections.has(id)) return { pageIndex, columnId: "sidebar" };
}
return null;
@@ -395,35 +397,32 @@ function SortableLayoutItem({ id }: SortableLayoutItemProps) {
type LayoutItemContentProps = HTMLAttributes<HTMLDivElement> & {
id: string;
ref?: Ref<HTMLDivElement>;
isDragging?: boolean;
isOverlay?: boolean;
};
const LayoutItemContent = forwardRef<HTMLDivElement, LayoutItemContentProps>(
({ id, isDragging, isOverlay, className, style, ...rest }, ref) => {
const resume = useCurrentResume();
const title = resume ? resolveLayoutSectionTitle(resume.data, id) : id;
function LayoutItemContent({ id, ref, isDragging, isOverlay, className, style, ...rest }: LayoutItemContentProps) {
const resume = useCurrentResume();
const title = resume ? resolveLayoutSectionTitle(resume.data, id) : id;
return (
<div
ref={ref}
style={style}
data-overlay={isOverlay ? "true" : undefined}
data-dragging={isDragging ? "true" : undefined}
className={cn(
"group/item flex cursor-grab touch-none select-none items-center gap-x-2 rounded-md border border-border bg-background px-2 py-1.5 font-medium text-sm transition-all duration-200 ease-out",
"hover:bg-secondary/40 active:cursor-grabbing active:border-primary/60 active:bg-secondary/40",
"data-[overlay=true]:cursor-grabbing data-[overlay=true]:border-primary/60 data-[overlay=true]:bg-background",
"data-[dragging=true]:cursor-grabbing data-[dragging=true]:border-primary/60 data-[dragging=true]:bg-background",
className,
)}
{...rest}
>
<DotsSixVerticalIcon className="opacity-40 transition-opacity group-hover/item:opacity-100" />
<span className="truncate">{title}</span>
</div>
);
},
);
LayoutItemContent.displayName = "LayoutItemContent";
return (
<div
ref={ref}
style={style}
data-overlay={isOverlay ? "true" : undefined}
data-dragging={isDragging ? "true" : undefined}
className={cn(
"group/item flex cursor-grab touch-none select-none items-center gap-x-2 rounded-md border border-border bg-background px-2 py-1.5 font-medium text-sm transition-all duration-200 ease-out",
"hover:bg-secondary/40 active:cursor-grabbing active:border-primary/60 active:bg-secondary/40",
"data-[overlay=true]:cursor-grabbing data-[overlay=true]:border-primary/60 data-[overlay=true]:bg-background",
"data-[dragging=true]:cursor-grabbing data-[dragging=true]:border-primary/60 data-[dragging=true]:bg-background",
className,
)}
{...rest}
>
<DotsSixVerticalIcon className="opacity-40 transition-opacity group-hover/item:opacity-100" />
<span className="truncate">{title}</span>
</div>
);
}
apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/resume-analysis.tsx
+11 -5
View File
@@ -3,7 +3,7 @@ import { Trans } from "@lingui/react/macro";
import { ArrowRightIcon, InfoIcon, LightningIcon, SparkleIcon } from "@phosphor-icons/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import { useMemo } from "react";
import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import { match } from "ts-pattern";
import { Alert, AlertDescription } from "@reactive-resume/ui/components/alert";
@@ -90,7 +90,9 @@ export function ResumeAnalysisSectionBuilder() {
const analysis = analysisQuery.data;
const score = analysis?.overallScore ?? null;
const analyzeLabel = isPending ? t`Analyzing...` : t`Analyze Resume`;
const updatedAt = analysis?.updatedAt ?? null;
const [updatedAtLabel, setUpdatedAtLabel] = useState<string | null>(null);
const analyzeLabel = isPending ? t`Analyzing…` : t`Analyze Resume`;
const scoreTone = useMemo(() => {
if (score == null) return "bg-muted";
@@ -99,6 +101,10 @@ export function ResumeAnalysisSectionBuilder() {
return "bg-rose-600";
}, [score]);
useEffect(() => {
setUpdatedAtLabel(updatedAt ? new Date(updatedAt).toLocaleString() : null);
}, [updatedAt]);
const onAnalyze = () => {
if (!resume) return;
@@ -153,11 +159,11 @@ export function ResumeAnalysisSectionBuilder() {
);
})}
</div>
{analysis?.updatedAt && (
{updatedAtLabel ? (
<p className="text-muted-foreground text-xs leading-none">
<Trans>Last analyzed on {new Date(analysis.updatedAt).toLocaleString()}</Trans>
<Trans>Last analyzed on {updatedAtLabel}</Trans>
</p>
)}
) : null}
</div>
</div>
</div>
apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/statistics.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ type StatisticsItemProps = {
function StatisticsItem({ label, value, timestamp }: StatisticsItemProps) {
return (
<div>
<h4 className="mb-1 font-bold font-mono text-4xl">{value}</h4>
<h4 className="mb-1 font-mono font-semibold text-4xl">{value}</h4>
<p className="font-medium text-muted-foreground leading-none">{label}</p>
{timestamp && <span className="text-muted-foreground text-xs">{timestamp}</span>}
</div>
apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/template.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ function TemplateSectionForm() {
</div>
</Button>
<div className="flex flex-1 flex-col space-y-4 @md:pt-1 @md:pb-3">
<div className="flex flex-1 flex-col gap-y-4 @md:pt-1 @md:pb-3">
<div className="space-y-1">
<h3 className="font-semibold text-2xl capitalize tracking-tight">{metadata.name}</h3>
<p className="text-muted-foreground text-sm">{i18n.t(metadata.description)}</p>
apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/typography.tsx
+13 -14
View File
@@ -1,3 +1,4 @@
import type { ReactNode } from "react";
import type z from "zod";
import { Trans } from "@lingui/react/macro";
import { useStore } from "@tanstack/react-form";
@@ -66,13 +67,7 @@ function TypographySectionForm() {
void form.handleSubmit();
}}
>
<div className="col-span-full flex items-center gap-x-2">
<Separator className="basis-[16px]" />
<div className="shrink-0 font-medium text-base leading-none">
<Trans context="Body Text (paragraphs, lists, etc.)">Body</Trans>
</div>
<Separator className="flex-1" />
</div>
<TypographyFieldGroup label={<Trans context="Body Text (paragraphs, lists, etc.)">Body</Trans>} />
<form.Field name="body.fontFamily">
{(field) => (
@@ -198,13 +193,7 @@ function TypographySectionForm() {
)}
</form.Field>
<div className="col-span-full flex items-center gap-x-2">
<Separator className="basis-[16px]" />
<div className="shrink-0 font-medium text-base leading-none">
<Trans context="Headings or Titles (H1, H2, H3, H4, H5, H6)">Heading</Trans>
</div>
<Separator className="flex-1" />
</div>
<TypographyFieldGroup label={<Trans context="Headings or Titles (H1, H2, H3, H4, H5, H6)">Heading</Trans>} />
<form.Field name="heading.fontFamily">
{(field) => (
@@ -332,3 +321,13 @@ function TypographySectionForm() {
</form>
);
}
function TypographyFieldGroup({ label }: { label: ReactNode }) {
return (
<div className="col-span-full flex items-center gap-x-2">
<Separator className="basis-[16px]" />
<div className="shrink-0 font-medium text-base leading-none">{label}</div>
<Separator className="flex-1" />
</div>
);
}
apps/web/src/routes/builder/$resumeId/-sidebar/right/shared/section-base.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export function SectionBase({ type, className, ...props }: Props) {
<div className="flex flex-1 items-center gap-x-4">
{getSectionIcon(type)}
<h2 className="line-clamp-1 font-bold text-2xl tracking-tight">{getSectionTitle(type)}</h2>
<h2 className="line-clamp-1 font-semibold text-2xl tracking-tight">{getSectionTitle(type)}</h2>
</div>
</div>
apps/web/src/routes/builder/$resumeId/-store/sidebar.ts
+3 -11
View File
@@ -87,17 +87,9 @@ export function useBuilderSidebar<T = UseBuilderSidebarReturn>(selector?: (build
const isMobile = useIsMobile();
const { width } = useWindowSize();
const maxSidebarSize = useMemo((): string | number => {
if (!width) return 0;
return isMobile ? "95%" : "45%";
}, [width, isMobile]);
const collapsedSidebarSize = useMemo((): number => {
if (!width) return 0;
return isMobile ? 0 : 48;
}, [width, isMobile]);
const expandSize = useMemo(() => (isMobile ? "95%" : "30%"), [isMobile]);
const maxSidebarSize: string | number = !width ? 0 : isMobile ? "95%" : "45%";
const collapsedSidebarSize = !width ? 0 : isMobile ? 0 : 48;
const expandSize = isMobile ? "95%" : "30%";
const isCollapsed = useCallback((side: "left" | "right") => {
const sidebar =