.eslintrc.json

@@ -9,6 +9,7 @@
       "plugins": ["simple-import-sort", "unused-imports"],
       "rules": {
         // eslint
+        "no-console": "error",
         "no-return-await": "off",
 
         // simple-import-sort

.github/workflows/lint-test-build.yml

@@ -19,33 +19,30 @@ jobs:
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.2.2
         with:
           fetch-depth: 2
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.1.0
         with:
           cache: "pnpm"
-          node-version: 20.17.0
+          node-version: 22
 
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Lint
-        run: pnpm lint
+        run: pnpm run lint
 
       - name: Format
-        run: pnpm format:check
+        run: pnpm run format:check
 
       - name: Test
-        run: pnpm test
+        run: pnpm run test
 
       - name: Build
-        run: pnpm build
-        env:
-          NODE_ENV: production
-          NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+        run: pnpm run build

apps/client/src/libs/lingui.ts

@@ -17,7 +17,8 @@ export async function dynamicActivate(locale: string) {
     if (dayjsLocales[locale]) {
       dayjs.locale(await dayjsLocales[locale]());
     }
-  } catch (error) {
-    console.error(error);
+  } catch {
+    // eslint-disable-next-line lingui/no-unlocalized-strings
+    throw new Error(`Failed to load messages for locale: ${locale}`);
   }
 }

apps/client/src/pages/builder/sidebars/left/dialogs/awards.tsx

@@ -104,7 +104,13 @@ export const AwardsDialog = () => {
                   {...field}
                   content={field.value}
                   footer={(editor) => (
-                    <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+                    <AiActions
+                      value={editor.getText()}
+                      onChange={(value) => {
+                        editor.commands.setContent(value, true);
+                        field.onChange(value);
+                      }}
+                    />
                   )}
                   onChange={(value) => {
                     field.onChange(value);

apps/client/src/pages/builder/sidebars/left/dialogs/certifications.tsx

@@ -98,7 +98,13 @@ export const CertificationsDialog = () => {
                   {...field}
                   content={field.value}
                   footer={(editor) => (
-                    <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+                    <AiActions
+                      value={editor.getText()}
+                      onChange={(value) => {
+                        editor.commands.setContent(value, true);
+                        field.onChange(value);
+                      }}
+                    />
                   )}
                   onChange={(value) => {
                     field.onChange(value);

apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx

@@ -131,7 +131,13 @@ export const CustomSectionDialog = () => {
                   {...field}
                   content={field.value}
                   footer={(editor) => (
-                    <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+                    <AiActions
+                      value={editor.getText()}
+                      onChange={(value) => {
+                        editor.commands.setContent(value, true);
+                        field.onChange(value);
+                      }}
+                    />
                   )}
                   onChange={(value) => {
                     field.onChange(value);

apps/client/src/pages/builder/sidebars/left/dialogs/education.tsx

@@ -141,7 +141,13 @@ export const EducationDialog = () => {
                   {...field}
                   content={field.value}
                   footer={(editor) => (
-                    <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+                    <AiActions
+                      value={editor.getText()}
+                      onChange={(value) => {
+                        editor.commands.setContent(value, true);
+                        field.onChange(value);
+                      }}
+                    />
                   )}
                   onChange={(value) => {
                     field.onChange(value);

apps/client/src/pages/builder/sidebars/left/dialogs/experience.tsx

@@ -117,7 +117,13 @@ export const ExperienceDialog = () => {
                   {...field}
                   content={field.value}
                   footer={(editor) => (
-                    <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+                    <AiActions
+                      value={editor.getText()}
+                      onChange={(value) => {
+                        editor.commands.setContent(value, true);
+                        field.onChange(value);
+                      }}
+                    />
                   )}
                   onChange={(value) => {
                     field.onChange(value);

apps/client/src/pages/builder/sidebars/left/dialogs/languages.tsx

@@ -74,10 +74,10 @@ export const LanguagesDialog = () => {
                     }}
                   />
 
-                  {field.value === 0 ? (
-                    <span className="text-base font-bold">{t`Hidden`}</span>
-                  ) : (
+                  {field.value > 0 ? (
                     <span className="text-base font-bold">{field.value}</span>
+                  ) : (
+                    <span className="text-base font-bold">{t`Hidden`}</span>
                   )}
                 </div>
               </FormControl>

apps/client/src/pages/builder/sidebars/left/dialogs/profiles.tsx

@@ -51,7 +51,7 @@ export const ProfilesDialog = () => {
               <FormLabel>{t`Network`}</FormLabel>
               <FormControl>
                 {/* eslint-disable-next-line lingui/no-unlocalized-strings */}
-                <Input {...field} placeholder="LinkedIn" />
+                <Input {...field} placeholder="GitHub" />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -79,7 +79,7 @@ export const ProfilesDialog = () => {
             <FormItem className="sm:col-span-2">
               <FormLabel>{t`Website`}</FormLabel>
               <FormControl>
-                <URLInput {...field} placeholder="https://linkedin.com/in/johndoe" />
+                <URLInput {...field} placeholder="https://github.com/johndoe" />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -100,7 +100,7 @@ export const ProfilesDialog = () => {
                   <Input
                     {...field}
                     id="iconSlug"
-                    placeholder="linkedin"
+                    placeholder="github"
                     onChange={(event) => {
                       field.onChange(event);
                       handleIconChange(event);

apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx

@@ -111,7 +111,13 @@ export const ProjectsDialog = () => {
                   {...field}
                   content={field.value}
                   footer={(editor) => (
-                    <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+                    <AiActions
+                      value={editor.getText()}
+                      onChange={(value) => {
+                        editor.commands.setContent(value, true);
+                        field.onChange(value);
+                      }}
+                    />
                   )}
                   onChange={(value) => {
                     field.onChange(value);

apps/client/src/pages/builder/sidebars/left/dialogs/publications.tsx

@@ -98,7 +98,13 @@ export const PublicationsDialog = () => {
                   {...field}
                   content={field.value}
                   footer={(editor) => (
-                    <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+                    <AiActions
+                      value={editor.getText()}
+                      onChange={(value) => {
+                        editor.commands.setContent(value, true);
+                        field.onChange(value);
+                      }}
+                    />
                   )}
                   onChange={(value) => {
                     field.onChange(value);

apps/client/src/pages/builder/sidebars/left/dialogs/references.tsx

@@ -84,7 +84,13 @@ export const ReferencesDialog = () => {
                   {...field}
                   content={field.value}
                   footer={(editor) => (
-                    <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+                    <AiActions
+                      value={editor.getText()}
+                      onChange={(value) => {
+                        editor.commands.setContent(value, true);
+                        field.onChange(value);
+                      }}
+                    />
                   )}
                   onChange={(value) => {
                     field.onChange(value);

apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx

@@ -88,10 +88,10 @@ export const SkillsDialog = () => {
                     }}
                   />
 
-                  {field.value === 0 ? (
-                    <span className="text-base font-bold">{t`Hidden`}</span>
-                  ) : (
+                  {field.value > 0 ? (
                     <span className="text-base font-bold">{field.value}</span>
+                  ) : (
+                    <span className="text-base font-bold">{t`Hidden`}</span>
                   )}
                 </div>
               </FormControl>

apps/client/src/pages/builder/sidebars/left/dialogs/volunteer.tsx

@@ -112,7 +112,13 @@ export const VolunteerDialog = () => {
                   {...field}
                   content={field.value}
                   footer={(editor) => (
-                    <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+                    <AiActions
+                      value={editor.getText()}
+                      onChange={(value) => {
+                        editor.commands.setContent(value, true);
+                        field.onChange(value);
+                      }}
+                    />
                   )}
                   onChange={(value) => {
                     field.onChange(value);

apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx

@@ -1,4 +1,4 @@
-import { t } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { createId } from "@paralleldrive/cuid2";
 import { DotsSixVertical, Envelope, Plus, X } from "@phosphor-icons/react";
 import { CustomField as ICustomField } from "@reactive-resume/schema";
@@ -37,10 +37,10 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -50 }}
     >
-      <div className="flex items-end justify-between space-x-2">
+      <div className="flex items-end justify-between">
         <Button
           size="icon"
-          variant="link"
+          variant="ghost"
           className="shrink-0"
           onPointerDown={(event) => {
             controls.start(event);
@@ -52,32 +52,48 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
         <Popover>
           <Tooltip content={t`Icon`}>
             <PopoverTrigger asChild>
-              <Button size="icon" variant="ghost">
+              <Button size="icon" variant="ghost" className="shrink-0">
                 {field.icon ? <i className={cn(`ph ph-${field.icon}`)} /> : <Envelope />}
               </Button>
             </PopoverTrigger>
           </Tooltip>
-          <PopoverContent className="p-1.5">
+          <PopoverContent side="bottom" align="start" className="flex flex-col gap-y-1.5 p-1.5">
             <Input
               value={field.icon}
               placeholder={t`Enter Phosphor Icon`}
               onChange={(event) => {
                 onChange({ ...field, icon: event.target.value });
               }}
             />
+
+            <p className="text-xs opacity-80">
+              <Trans>
+                Visit{" "}
+                <a
+                  href="https://phosphoricons.com/"
+                  target="_blank"
+                  className="underline"
+                  rel="noopener noreferrer nofollow"
+                >
+                  Phosphor Icons
+                </a>{" "}
+                for a list of available icons
+              </Trans>
+            </p>
           </PopoverContent>
         </Popover>
 
         <Input
+          className="mx-2"
           placeholder={t`Name`}
           value={field.name}
-          className="!ml-0"
           onChange={(event) => {
             handleChange("name", event.target.value);
           }}
         />
 
         <Input
+          className="mx-2"
           placeholder={t`Value`}
           value={field.value}
           onChange={(event) => {
@@ -87,8 +103,8 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
 
         <Button
           size="icon"
-          variant="link"
-          className="!ml-0 shrink-0"
+          variant="ghost"
+          className="shrink-0"
           onClick={() => {
             onRemove(field.id);
           }}
@@ -111,7 +127,7 @@ export const CustomFieldsSection = ({ className }: Props) => {
   const onAddCustomField = () => {
     setValue("basics.customFields", [
       ...customFields,
-      { id: createId(), icon: "", name: "", value: "" },
+      { id: createId(), icon: "envelope", name: "", value: "" },
     ]);
   };
 

apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx

@@ -70,12 +70,15 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
   const onCreate = () => {
     open("create", { id });
   };
+
   const onUpdate = (item: T) => {
     open("update", { id, item });
   };
+
   const onDuplicate = (item: T) => {
     open("duplicate", { id, item });
   };
+
   const onDelete = (item: T) => {
     open("delete", { id, item });
   };

apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx

@@ -1,6 +1,7 @@
 import { t } from "@lingui/macro";
 import { createId } from "@paralleldrive/cuid2";
 import { CopySimple, PencilSimple, Plus } from "@phosphor-icons/react";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { SectionItem, SectionWithItem } from "@reactive-resume/schema";
 import {
   AlertDialog,
@@ -14,6 +15,7 @@ import {
   Button,
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -158,6 +160,10 @@ export const SectionDialog = <T extends SectionItem>({
                   </h2>
                 </div>
               </DialogTitle>
+
+              <VisuallyHidden>
+                <DialogDescription />
+              </VisuallyHidden>
             </DialogHeader>
 
             {children}