feat(experience): add role progression to show career advancement within a company (#2761)

* feat(experience): add role progression support for career advancement

* fix(experience): remove indent and border from role progression items

* refactor(experience): enhance role progression UI and functionality

- Updated the ExperienceItem component to improve role display and styling.
- Refactored the CreateExperienceDialog and UpdateExperienceDialog to support role reordering using drag-and-drop.
- Added role handling in JSON and ReactiveResume importers.
- Enhanced experience schema to include roles, ensuring better data structure for career progression.
- Improved overall user experience with clearer role management in the experience section.

---------

Co-authored-by: root <root@reactive-resume-dev.one.one.one.one>
Co-authored-by: Amruth Pillai <im.amruth@gmail.com>

src/routes/builder/$resumeId/-sidebar/left/sections/experience.tsx

@@ -1,3 +1,4 @@
+import { plural } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { AnimatePresence, Reorder } from "motion/react";
 import type z from "zod";
@@ -21,9 +22,17 @@ export function ExperienceSectionBuilder() {
 		<SectionBase type="experience" className={cn("rounded-md border", section.items.length === 0 && "border-dashed")}>
 			<Reorder.Group axis="y" values={section.items} onReorder={handleReorder}>
 				<AnimatePresence>
-					{section.items.map((item) => (
-						<SectionItem key={item.id} type="experience" item={item} title={item.company} subtitle={item.position} />
-					))}
+					{section.items.map((item) => {
+						return (
+							<SectionItem
+								key={item.id}
+								type="experience"
+								item={item}
+								title={item.company}
+								subtitle={item.position || plural(item.roles.length, { one: "# role", other: "# roles" })}
+							/>
+						);
+					})}
 				</AnimatePresence>
 			</Reorder.Group>