-
- {(field) => (
- 0}
- >
- {
- field.handleChange(icon === "" ? "none" : icon);
- }}
- className="rounded-r-none border-input border-e-0"
- />
- }
- />
-
- )}
-
-
-
- {(field) => (
- 0}>
-
- Title
-
- field.handleChange(event.target.value)}
- />
- }
- />
-
- )}
-
-
-
-
-
- {(field) => (
- 0}
- >
- {
- field.handleChange(icon === "" ? "none" : icon);
- }}
- className="rounded-r-none border-input border-e-0"
- />
- }
- />
-
- )}
-
-
-
- {(field) => (
- 0}>
-
- Title
-
- field.handleChange(event.target.value)}
- />
- }
- />
-
- )}
-
-
-
-
-
-
- {hasRoles && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {(field) => (
- 0}>
-
- Position
-
- field.handleChange(event.target.value)}
- />
- }
- />
-
- )}
-
-
-
- {(field) => (
- 0}>
-
- Period
-
- field.handleChange(event.target.value)}
- />
- }
- />
-
- )}
-
-
-
- {(field) => (
- 0}
- >
-
- Description
-
- field.handleChange(v)} />} />
-
- )}
-
-
-
-
- {(field) => (
-
- {
- field.handleChange(icon);
- }}
- popoverProps={{ modal: true }}
- className="rounded-r-none border-input border-e-0"
- />
- }
- />
-
- )}
-
-
-
- {(field) => (
- 0}>
-
- Name
-
- field.handleChange(event.target.value)}
- />
- }
- />
-
- )}
-
-
-
- {(field) => (
-
- {
- field.handleChange(v);
- }}
- trigger={
-
-
-
- }
- />
- }
- />
-
- )}
-
-
-
-
-
- {(field) => (
-
- {
- field.handleChange(icon);
- }}
- popoverProps={{ modal: true }}
- className="rounded-r-none border-input border-e-0"
- />
- }
- />
-
- )}
-
-
-
- {(field) => (
- 0}>
-
- Network
-
- field.handleChange(event.target.value)}
- />
- }
- />
-
- )}
-
-
-
- {(field) => (
-
- {
- field.handleChange(v);
- }}
- trigger={
-
-
-
- }
- />
- }
- />
-
- )}
-
-
-
-
-
- {(field) => (
-
- {
- field.handleChange(icon);
- }}
- popoverProps={{ modal: true }}
- className="rounded-r-none border-input border-e-0"
- />
- }
- />
-
- )}
-
-
-
- {(field) => (
- 0}>
-
- Name
-
- field.handleChange(event.target.value)}
- />
- }
- />
-
- )}
-
-
-
- {(field) => (
-
- {
- field.handleChange(v);
- }}
- trigger={
-
-
-
- }
- />
- }
- />
-
- )}
-
-
-
- -
- {hiddenSections.map(({ sectionId }) => {
- const title = resolveLayoutSectionTitle(data, sectionId);
-
- return (
-
- );
- })}
-
+
+ );
+}
diff --git a/apps/web/src/features/resume/editor/write/basics-card.tsx b/apps/web/src/features/resume/editor/write/basics-card.tsx
new file mode 100644
index 000000000..d16083f72
--- /dev/null
+++ b/apps/web/src/features/resume/editor/write/basics-card.tsx
@@ -0,0 +1,239 @@
+import type { Basics, CustomField } from "@reactive-resume/schema/resume/data";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
+import { IconButton } from "@reactive-resume/ui/components/icon-button";
+import { Input } from "@reactive-resume/ui/components/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui/components/popover";
+import { generateId, getInitials } from "@reactive-resume/utils/string";
+import { cn } from "@reactive-resume/utils/style";
+import { IconPicker } from "@/components/input/icon-picker";
+import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
+import { useEditorStore } from "../store";
+import { TextField, validateEmail, WebsiteField } from "./fields";
+import { PictureSettings } from "./picture-settings";
+
+type TextKey = "name" | "headline" | "email" | "phone" | "location";
+
+function useBasicsWriter() {
+ const updateResumeData = useUpdateResumeData();
+ return (key: string, mutate: (basics: Basics) => void) =>
+ updateResumeData((draft) => mutate(draft.basics), { coalesceKey: `basics.${key}` });
+}
+
+/**
+ * The Basics card: name and "headline · location" with an initials avatar, opening to the photo, contact
+ * fields and custom fields. The page header selects it.
+ */
+export function BasicsCard({ locked }: { locked: boolean }) {
+ const basics = useCurrentBuilderResumeSelector((resume) => resume.data.basics);
+ const open = useEditorStore((state) => state.basicsOpen);
+ const setOpen = useEditorStore((state) => state.setBasicsOpen);
+ const selected = useEditorStore((state) => state.selection?.kind === "header");
+ const write = useBasicsWriter();
+
+ const text = (key: TextKey) => ({
+ value: basics[key],
+ onChange: (value: string) =>
+ write(key, (target) => {
+ target[key] = value;
+ }),
+ });
+
+ return (
+
+ );
+}
+
+function PhotoRow({ locked }: { locked: boolean }) {
+ const picture = useCurrentBuilderResumeSelector((resume) => resume.data.picture);
+ const hasPhoto = Boolean(picture.url);
+
+ return (
+
+
+ {SUGGESTED.map((type) => (
+
+ ))}
+
+
+
+ {hasPhoto ? (
+ 
+ ) : (
+
+
+
+ {hasPhoto ? Edit : Add }
+
+ }
+ />
+
+
+
+
+ );
+}
+
+/** Extra contact details (icon, text and an optional link), as "Add field" under Website. */
+function CustomFields({ fields }: { fields: CustomField[] }) {
+ const updateResumeData = useUpdateResumeData();
+
+ const edit = (key: string, mutate: (list: CustomField[]) => void) =>
+ updateResumeData((draft) => mutate(draft.basics.customFields), { coalesceKey: `basics.customFields.${key}` });
+
+ return (
+
+ {!hasPhoto ? (
+
+ {fields.map((field, index) => (
+
+ );
+}
diff --git a/apps/web/src/features/resume/editor/write/dates-field.test.tsx b/apps/web/src/features/resume/editor/write/dates-field.test.tsx
new file mode 100644
index 000000000..3d1703658
--- /dev/null
+++ b/apps/web/src/features/resume/editor/write/dates-field.test.tsx
@@ -0,0 +1,59 @@
+// @vitest-environment happy-dom
+import type { ResumeDates } from "@reactive-resume/schema/resume/dates";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { i18n } from "@lingui/core";
+import { I18nProvider } from "@lingui/react";
+import { DatesField, readTypedDate } from "./dates-field";
+
+beforeAll(() => {
+ i18n.loadAndActivate({ locale: "en-US", messages: {} });
+});
+
+describe("readTypedDate", () => {
+ it.each([
+ ["Mar 2022", "2022-03"],
+ ["03/2022", "2022-03"],
+ ["2022-03", "2022-03"],
+ ["2022", "2022"],
+ ["", null],
+ ["soon", undefined],
+ ])("reads %j as %j", (text, expected) => {
+ expect(readTypedDate(text, "en-US")).toBe(expected);
+ });
+});
+
+describe("DatesField", () => {
+ const renderField = (dates: ResumeDates, onChange = vi.fn()) => {
+ render(
+
+
+ edit(`${field.id}.icon`, (list) => {
+ const target = list[index];
+ if (target) target.icon = icon;
+ })
+ }
+ />
+
+ edit(`${field.id}.text`, (list) => {
+ const target = list[index];
+ if (target) target.text = event.target.value;
+ })
+ }
+ />
+
+
+
+ edit(`${field.id}.link`, (list) => {
+ const target = list[index];
+ if (target) target.link = event.target.value;
+ })
+ }
+ />
+
+
+ edit(`${field.id}.move`, (list) => list.splice(index - 1, 0, ...list.splice(index, 1)))}
+ />
+ edit(`${field.id}.remove`, (list) => list.splice(index, 1))}
+ />
+
+ ))}
+
+
+
+ );
+}
+
+type DatesFieldProps = DateSettings & {
+ dates: ResumeDates;
+ /** Awards, certifications and publications have one date. */
+ single?: boolean;
+ onChange: (dates: ResumeDates) => void;
+ className?: string;
+};
+
+/**
+ * Structured dates: start – end with a Present switch, or a single date. Editing any part clears the
+ * "needs a look" note left by text that couldn't be read exactly.
+ */
+export function DatesField({ dates, single = false, locale, format, onChange, className }: DatesFieldProps) {
+ const id = useId();
+ const [invalid, setInvalid] = useState
+ {label ?? t`Description`}
+
+ write(field, (target) => {
+ target[field] = html;
+ })
+ }
+ />
+
+ );
+}
+
+function Keywords({ entry, write, label }: FieldSetProps & { label: ReactNode }) {
+ return (
+
+
+ write("icon", (target) => {
+ target.icon = icon;
+ })
+ }
+ popoverProps={{ modal: true }}
+ />
+
+ write("iconColor", (target) => {
+ target.iconColor = color;
+ })
+ }
+ trigger={
+
+
+ Icon colour
+
+ }
+ />
+
+ );
+}
+
+function Roles({ entry, write, page }: FieldSetProps) {
+ const roles = valuesOf(entry).roles ?? [];
+
+ const writeRoles = (key: string, mutate: (roles: RoleItem[]) => void) =>
+ write(`roles:${key}`, (target) => {
+ mutate(target.roles as RoleItem[]);
+ });
+
+ return (
+
+ {roles.map((role, index) => (
+
+ );
+}
+
+/** The fields each entry type edits, in a two-column grid. The first field takes focus on a new draft. */
+export function EntryFields({
+ type,
+ autoFocus,
+ ...props
+}: FieldSetProps & { type: CustomSectionType; autoFocus?: boolean }) {
+ const hasRoles = (valuesOf(props.entry).roles?.length ?? 0) > 0;
+
+ switch (type) {
+ case "experience":
+ return (
+ <>
+
+ Position}
+ value={role.position}
+ wide
+ onChange={(value) =>
+ writeRoles(`${role.id}:position`, (list) => {
+ const target = list[index];
+ if (target) target.position = value;
+ })
+ }
+ />
+
+ writeRoles(`${role.id}:dates`, (list) => {
+ const target = list[index];
+ if (target) target.dates = dates;
+ })
+ }
+ />
+
+ ))}
+
+
+
+
+ Role {index + 1}
+
+
+
+
+ writeRoles(`move-${role.id}`, (list) => list.splice(index - 1, 0, ...list.splice(index, 1)))
+ }
+ />
+
+ writeRoles(`move-${role.id}`, (list) => list.splice(index + 1, 0, ...list.splice(index, 1)))
+ }
+ />
+ writeRoles(`remove-${role.id}`, (list) => list.splice(index, 1))}
+ />
+
+
+
+ Description
+
+
+ writeRoles(`${role.id}:description`, (list) => {
+ const target = list[index];
+ if (target) target.description = html;
+ })
+ }
+ />
+
+ {i18n._(hint)}
} +
+ deleteEntry(section, entryId)}
+ onBack={() => select(null)}
+ >
+ {fields}
+
+ )}
+
+ );
+}
+
+type PhoneEntryScreenProps = {
+ section: WriteSection;
+ title: string;
+ locked: boolean;
+ onBack: () => void;
+ onDelete: () => void;
+ children: ReactNode;
+};
+
+/** Phones: an open entry pushes in full screen, with a back label naming its section and 44px fields. */
+function PhoneEntryScreen({ section, title, locked, onBack, onDelete, children }: PhoneEntryScreenProps) {
+ const sectionTitle = useSectionTitle(section);
+
+ return (
+
+ {!locked && (
+
+ )}
+
+
+ {open && !locked && (
+ deleteEntry(section, entryId)}
+ />
+ )}
+ {!locked &&
+
+ {open && !isPhone && (
+
+ )}
+
+ {open && isPhone && (
+
+
+ );
+}
+
+function deleteEntry(section: WriteSection, entryId: string) {
+ const { updateResumeData, undo } = useResumeStore.getState();
+ updateResumeData(
+ (draft) => {
+ const entries = getEntries(draft, section);
+ const index = entries.findIndex((entry) => entry.id === entryId);
+ if (index !== -1) entries.splice(index, 1);
+ },
+ { newStep: true },
+ );
+ useEditorStore.getState().select(null);
+ toast.add({ description: t`Entry deleted`, actionProps: { children: t`Undo`, onClick: undo } });
+}
+
+type EntryMenuProps = { section: WriteSection; entry: Entry };
+
+/** Hide from page, Duplicate, Move to… and Delete. */
+function EntryMenu({ section, entry }: EntryMenuProps) {
+ const resume = useCurrentResume();
+ const updateResumeData = useUpdateResumeData();
+ const customSectionId = section.kind === "custom" ? section.id : undefined;
+ const moveTargets = useMemo(
+ () => getCompatibleMoveTargets(resume.data, section.type, customSectionId),
+ [resume.data, section.type, customSectionId],
+ );
+ const sourceTitle = useMemo(
+ () => getSourceSectionTitle(resume.data, section.type, customSectionId),
+ [resume.data, section.type, customSectionId],
+ );
+
+ const move = (target: Parameters
+
+
+ {!locked && (
+
+
+
+
+ {label ?? Link }
+ setTouched(true)} />
+ }
+ />
+
+
+ {allowInlineLink && (
+ // biome-ignore lint/a11y/noLabelWithoutControl: Base UI's Checkbox is the control; wrapping it in a label is its documented pattern.
+
+ )}
+
+ );
+}
+
+type MoreOptionsProps = { children: ReactNode };
+
+/** Secondary fields (level, icon, colour) stay out of the way until asked for. */
+export function MoreOptions({ children }: MoreOptionsProps) {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/apps/web/src/features/resume/editor/write/model.test.ts b/apps/web/src/features/resume/editor/write/model.test.ts
new file mode 100644
index 000000000..fbb75414b
--- /dev/null
+++ b/apps/web/src/features/resume/editor/write/model.test.ts
@@ -0,0 +1,164 @@
+import type { ResumeData } from "@reactive-resume/schema/resume/data";
+import { describe, expect, it } from "vitest";
+import { produce } from "immer";
+import { customSectionItemDefinitionByType } from "@reactive-resume/schema/resume/data";
+import { defaultResumeData } from "@reactive-resume/schema/resume/default";
+import {
+ addBuiltinSection,
+ addCustomSection,
+ CUSTOM_SECTION_TYPES,
+ countEntriesToCheck,
+ createEntry,
+ describeEntry,
+ getOutlineRows,
+ isDraftEntry,
+ isSectionInUse,
+ moveSection,
+ resolveSection,
+} from "./model";
+
+const resume = (edit?: (data: ResumeData) => void) => {
+ const data = structuredClone(defaultResumeData);
+ data.metadata.layout.pages = [
+ { fullWidth: false, main: ["summary", "experience", "education"], sidebar: ["skills"] },
+ ];
+ edit?.(data);
+ return data;
+};
+
+const withEntries = (data: ResumeData, ...types: ("experience" | "education" | "skills")[]) => {
+ for (const type of types) {
+ const entry = createEntry(type) as { name?: string; company?: string; school?: string };
+ if (type === "experience") entry.company = "Lumen";
+ if (type === "education") entry.school = "UdK";
+ if (type === "skills") entry.name = "Figma";
+ (data.sections[type].items as unknown[]).push(entry);
+ }
+};
+
+describe("createEntry", () => {
+ it.each(CUSTOM_SECTION_TYPES)("makes a %s entry the schema accepts", (type) => {
+ const entry = createEntry(type);
+ expect(customSectionItemDefinitionByType[type].schema.safeParse(entry).success).toBe(true);
+ });
+});
+
+describe("drafts", () => {
+ it("treats an entry without its primary field as a draft", () => {
+ expect(isDraftEntry("experience", createEntry("experience"))).toBe(true);
+ expect(isDraftEntry("experience", { ...createEntry("experience"), company: "Lumen" } as never)).toBe(false);
+ expect(isDraftEntry("summary", createEntry("summary"))).toBe(false);
+ });
+});
+
+describe("describeEntry", () => {
+ it("titles experience by position, then company · location · dates", () => {
+ const entry = {
+ ...createEntry("experience"),
+ position: "Designer",
+ company: "Lumen",
+ location: "Berlin",
+ period: "Mar 2022 – Present",
+ };
+ expect(describeEntry("experience", entry as never)).toEqual({
+ title: "Designer",
+ meta: "Lumen · Berlin · Mar 2022 – Present",
+ });
+ });
+});
+
+describe("outline", () => {
+ it("lists sections in use in print order: main, then sidebar", () => {
+ const data = resume((draft) => withEntries(draft, "skills", "education"));
+ expect(getOutlineRows(data)).toEqual([
+ { id: "education", page: 0, column: "main" },
+ { id: "skills", page: 0, column: "sidebar" },
+ ]);
+ });
+
+ it("keeps just-added and custom sections, and lists unplaced sections last", () => {
+ const data = resume((draft) => {
+ withEntries(draft, "experience");
+ draft.sections.projects.items = [createEntry("projects") as never];
+ draft.customSections = [{ ...structuredClone(draft.sections.skills), id: "custom-1", type: "skills" } as never];
+ });
+
+ expect(getOutlineRows(data, new Set(["summary"])).map((row) => row.id)).toEqual([
+ "summary",
+ "experience",
+ "projects",
+ "custom-1",
+ ]);
+ expect(isSectionInUse(data, "summary")).toBe(false);
+ });
+
+ it("moves a section before a row when moving up and after it when moving down", () => {
+ const data = resume((draft) => withEntries(draft, "experience", "education", "skills"));
+ const up = produce(data, (draft) =>
+ moveSection(draft, "education", { id: "experience", page: 0, column: "main" }, "up"),
+ );
+ expect(up.metadata.layout.pages[0]?.main).toEqual(["summary", "education", "experience"]);
+
+ const down = produce(data, (draft) =>
+ moveSection(draft, "experience", { id: "education", page: 0, column: "main" }, "down"),
+ );
+ expect(down.metadata.layout.pages[0]?.main).toEqual(["summary", "education", "experience"]);
+ });
+
+ it("changes column when a section moves across the sidebar divider", () => {
+ const data = resume((draft) => withEntries(draft, "experience", "skills"));
+ const moved = produce(data, (draft) =>
+ moveSection(draft, "skills", { id: "experience", page: 0, column: "main" }, "up"),
+ );
+ expect(moved.metadata.layout.pages[0]).toMatchObject({
+ main: ["summary", "skills", "experience", "education"],
+ sidebar: [],
+ });
+ });
+});
+
+describe("add section", () => {
+ it("shows and places a built-in section with one draft entry", () => {
+ const data = resume((draft) => {
+ draft.sections.projects.hidden = true;
+ });
+ let entryId: string | null = null;
+ const next = produce(data, (draft) => {
+ entryId = addBuiltinSection(draft, "projects");
+ });
+
+ expect(next.sections.projects.hidden).toBe(false);
+ expect(next.metadata.layout.pages[0]?.main).toContain("projects");
+ expect(next.sections.projects.items).toHaveLength(1);
+ expect(next.sections.projects.items[0]?.id).toBe(entryId);
+ expect(isDraftEntry("projects", next.sections.projects.items[0] as never)).toBe(true);
+ });
+
+ it("creates a custom section of a type, named and placed, with one draft entry", () => {
+ let ids = { sectionId: "", entryId: "" };
+ const next = produce(resume(), (draft) => {
+ ids = addCustomSection(draft, "awards", "Honours");
+ });
+
+ expect(resolveSection(next, ids.sectionId)).toEqual({ id: ids.sectionId, kind: "custom", type: "awards" });
+ expect(next.customSections[0]).toMatchObject({ title: "Honours", items: [{ id: ids.entryId }] });
+ expect(next.metadata.layout.pages[0]?.main.at(-1)).toBe(ids.sectionId);
+ });
+});
+
+describe("countEntriesToCheck", () => {
+ it("counts entries whose dates, or whose roles' dates, still carry text to review", () => {
+ const raw = { start: null, end: null, present: false, raw: "Summer 2016" };
+ const exact = { start: "2016", end: null, present: false };
+ const entries = [
+ { ...createEntry("experience"), dates: raw },
+ {
+ ...createEntry("experience"),
+ dates: exact,
+ roles: [{ id: "r", position: "", period: "", description: "", dates: raw }],
+ },
+ { ...createEntry("experience"), dates: exact },
+ ];
+ expect(countEntriesToCheck(entries as never)).toBe(2);
+ });
+});
diff --git a/apps/web/src/features/resume/editor/write/model.ts b/apps/web/src/features/resume/editor/write/model.ts
new file mode 100644
index 000000000..2bca81f61
--- /dev/null
+++ b/apps/web/src/features/resume/editor/write/model.ts
@@ -0,0 +1,334 @@
+import type {
+ CustomSection,
+ CustomSectionItem,
+ CustomSectionType,
+ ResumeData,
+ SectionType,
+} from "@reactive-resume/schema/resume/data";
+import type { WritableDraft } from "immer";
+import { EMPTY_RESUME_DATES } from "@reactive-resume/schema/resume/dates";
+import { generateId, stripHtml } from "@reactive-resume/utils/string";
+
+type Data = ResumeData | WritableDraft
+
+ More options
+
+ {children}
+
+ {rows.map((row, index) => {
+ const previous = rows[index - 1];
+ const newPage = multiPage && row.page !== previous?.page;
+ const sidebarStarts = row.column === "sidebar" && (previous?.column !== "sidebar" || newPage);
+
+ return (
+
+ {newPage && Page {row.page + 1}} />}
+ {sidebarStarts && Sidebar} subtle />}
+ move(row.id, rows[direction === "up" ? index - 1 : index + 1], direction)}
+ />
+
+ );
+ })}
+
+
+
+ {label}
+
+
+
+ );
+}
+
+type OutlineSectionProps = {
+ sectionId: string;
+ locked: boolean;
+ page: PageSettings;
+ onMove: (direction: "up" | "down") => void;
+};
+
+function OutlineSection({ sectionId, locked, page, onMove }: OutlineSectionProps) {
+ const { i18n } = useLingui();
+ // Select the type (a string) rather than a new section object, so the row renders only when it changes.
+ const type = useCurrentBuilderResumeSelector((resume) => getSectionType(resume.data, sectionId) ?? null);
+ const stableSection = useMemo
+ {focused && !readOnlyTable && (
+
+ );
+}
diff --git a/apps/web/src/features/resume/editor/write/section-row.tsx b/apps/web/src/features/resume/editor/write/section-row.tsx
new file mode 100644
index 000000000..595219055
--- /dev/null
+++ b/apps/web/src/features/resume/editor/write/section-row.tsx
@@ -0,0 +1,385 @@
+import type { SectionType } from "@reactive-resume/schema/resume/data";
+import type { KeyboardEvent, ReactNode } from "react";
+import type { WriteSection } from "./model";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { plural, t } from "@lingui/core/macro";
+import { Plural, Trans } from "@lingui/react/macro";
+import { useState } from "react";
+import { sortSectionItemsByPeriod } from "@reactive-resume/resume/section-sort";
+import { Badge } from "@reactive-resume/ui/components/badge";
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+} from "@reactive-resume/ui/components/dropdown-menu";
+import { Icon } from "@reactive-resume/ui/components/icon";
+import { IconButton } from "@reactive-resume/ui/components/icon-button";
+import { toast } from "@reactive-resume/ui/components/toast";
+import { cn } from "@reactive-resume/utils/style";
+import { IconPicker } from "@/components/input/icon-picker";
+import { useCurrentBuilderResumeSelector, useResumeStore, useUpdateResumeData } from "@/features/resume/builder/draft";
+import { usePrompt } from "@/hooks/use-prompt";
+import { getSectionTitle } from "@/libs/resume/section";
+import { useEditorStore } from "../store";
+import { addEntryTo } from "./actions";
+import { countEntriesToCheck, getEntries, getSectionObject } from "./model";
+
+/** The printed title: the one the user gave, else the section type's name. */
+export function useSectionTitle(section: WriteSection) {
+ const title = useCurrentBuilderResumeSelector((resume) => getSectionObject(resume.data, section)?.title ?? "");
+ return (
+ title.trim() || getSectionTitle(section.kind === "custom" ? section.type : (section.id as SectionType | "summary"))
+ );
+}
+
+type SectionRowProps = {
+ section: WriteSection;
+ locked: boolean;
+ /** ⌥↑ / ⌥↓ on the focused title. */
+ onMove: (direction: "up" | "down") => void;
+ children: ReactNode;
+};
+
+/**
+ * An outline row: drag handle, title (opens the section), entry count, the eye (hidden sections keep their
+ * content but aren't printed), the chevron and the ⋯ menu. Open, it shows the section's entries.
+ */
+export function SectionRow({ section, locked, onMove, children }: SectionRowProps) {
+ const title = useSectionTitle(section);
+ const hidden = useCurrentBuilderResumeSelector((resume) => getSectionObject(resume.data, section)?.hidden ?? false);
+ const count = useCurrentBuilderResumeSelector((resume) => getEntries(resume.data, section).length);
+ // Dates read from text that wasn't exact ask for a look (they print as typed until then).
+ const toCheck = useCurrentBuilderResumeSelector((resume) => countEntriesToCheck(getEntries(resume.data, section)));
+ const open = useEditorStore((state) => state.openSections.includes(section.id));
+ const setOpen = useEditorStore((state) => state.setSectionOpen);
+ const updateResumeData = useUpdateResumeData();
+ const sortable = useSortable({ id: section.id, disabled: locked });
+
+ const toggleHidden = () =>
+ updateResumeData(
+ (draft) => {
+ const target = getSectionObject(draft, section);
+ if (target) target.hidden = !target.hidden;
+ },
+ { newStep: true },
+ );
+
+ const onTitleKeyDown = (event: KeyboardEvent
+ {actions.map((action, index) => (
+
+ ))}
+
+ )}
+
+ {readOnlyTable && (
+
+
+ {hint ?? Markdown shortcuts on }
+
+
+ )}
+
+ {locked &&
+ );
+}
+
+/** Locked resumes read as they print; Unlock is one click and reversible. */
+function LockedNote() {
+ const resume = useCurrentResume();
+ const patchResume = usePatchResume();
+ const { mutate: setLocked, isPending } = useMutation(orpc.resume.setLocked.mutationOptions());
+
+ const unlock = () =>
+ setLocked(
+ { id: resume.id, isLocked: false },
+ {
+ onSuccess: () =>
+ patchResume((draft) => {
+ draft.isLocked = false;
+ }),
+ onError: (error) => toast.add({ type: "error", description: getResumeErrorMessage(error) }),
+ },
+ );
+
+ return (
+
+ openDialog("resume.import", undefined)} />
+ ) : (
+
+
+
+
+
{
+ // Fields only: buttons (an entry's title, the chevrons) change the selection themselves.
+ if (!event.target.matches("input, textarea, select, [contenteditable='true']")) return;
const selection = selectionFromPanelElement(event.target);
if (selection) select(selection);
}}
>
-
);
}
@@ -69,7 +71,7 @@ export function ModePanel({ mode }: { mode: EditorMode }) {
return (
<>
- {isLocked &&
- );
-}
-
-function LockBanner() {
- const resume = useCurrentResume();
- const patchResume = usePatchResume();
- const { mutate: setLocked, isPending } = useMutation(orpc.resume.setLocked.mutationOptions());
-
- const handleUnlock = () => {
- setLocked(
- { id: resume.id, isLocked: false },
- {
- onSuccess: () => {
- patchResume((draft) => {
- draft.isLocked = false;
- });
- },
- onError: (error) => {
- toast.add({ type: "error", description: getResumeErrorMessage(error) });
- },
- },
- );
- };
-
- return (
-
-
- );
-}
diff --git a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/basics.tsx b/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/basics.tsx
deleted file mode 100644
index f74950dbd..000000000
--- a/apps/web/src/routes/builder/$resumeId/-sidebar/left/sections/basics.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import type z from "zod";
-import { Trans } from "@lingui/react/macro";
-import { basicsSchema } 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";
-import { URLInput } from "@/components/input/url-input";
-import { useCurrentBuilderResumeSelector, useUpdateResumeData } from "@/features/resume/builder/draft";
-import { useSyncFormValues } from "@/hooks/use-sync-form-values";
-import { useAppForm } from "@/libs/tanstack-form";
-import { SectionBase } from "../shared/section-base";
-import { CustomFieldsSection } from "./custom-fields";
-
-export function BasicsSectionBuilder() {
- return (
-
-
-
-
-
-
-
-
- {
- linkField.handleChange(e.target.value);
- }}
- />
-
- {children}
,
-}));
-vi.mock("../shared/section-item", () => ({
- SectionAddItemButton: ({ children }: SectionAddItemButtonProps) => ,
- SectionItem: ({ title, subtitle }: SectionItemProps) => (
-
- {title}
- {subtitle}
-
- ),
-}));
-
-const { ItemsSection } = await import("../shared/items-section");
-const EducationSectionBuilder = () =>
- {children}
-
- ),
-}));
-vi.mock("../shared/section-item", () => ({
- SectionAddItemButton: ({ children }: SectionAddItemButtonProps) => (
-
- ),
- SectionItem: ({ title, subtitle }: SectionItemProps) => (
-
- {title}
- {subtitle}
-
- ),
-}));
-
-const { ItemsSection } = await import("../shared/items-section");
-const AwardsSectionBuilder = () =>
- {children}
-
- ),
-}));
-vi.mock("../shared/section-item", () => ({
- SectionAddItemButton: ({ children }: SectionAddItemButtonProps) => ,
- SectionItem: ({ title, subtitle }: SectionItemProps) => (
-
- {title}
- {subtitle}
-
- ),
-}));
-
-const { ItemsSection } = await import("../shared/items-section");
-const ProfilesSectionBuilder = () => {children}
,
-}));
-vi.mock("../shared/section-item", () => ({
- SectionAddItemButton: ({ children }: SectionAddItemButtonProps) => ,
- SectionItem: ({ title, subtitle }: SectionItemProps) => (
-
- {title}
- {subtitle ?? ""}
-
- ),
-}));
-
-const { ItemsSection } = await import("../shared/items-section");
-const ProjectsSectionBuilder = () =>
- {children}
-
- ),
-}));
-vi.mock("../shared/section-item", () => ({
- SectionAddItemButton: ({ children }: SectionAddItemButtonProps) => ,
- SectionItem: ({ title, subtitle }: SectionItemProps) => (
-
- {title}
- {subtitle}
-
- ),
-}));
-
-const { ItemsSection } = await import("../shared/items-section");
-const SkillsSectionBuilder = () =>
-
-
-
-
- {hasSectionIcon ? (
-
-
- {!["picture", "basics", "custom"].includes(type) && (
- {sectionTitle}
- {
- e.preventDefault();
- controls.start(e);
- }}
- >
-
-
-
-
-