design nosepass template, add tests, add template previews

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

@@ -10,7 +10,6 @@ import {
   Input,
   Slider,
 } from "@reactive-resume/ui";
-import { getCEFRLevel } from "@reactive-resume/utils";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -44,11 +43,11 @@ export const LanguagesDialog = () => {
         />
 
         <FormField
-          name="fluency"
+          name="description"
           control={form.control}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t`Fluency`}</FormLabel>
+              <FormLabel>{t`Description`}</FormLabel>
               <FormControl>
                 <Input {...field} />
               </FormControl>
@@ -58,22 +57,26 @@ export const LanguagesDialog = () => {
         />
 
         <FormField
-          name="fluencyLevel"
+          name="level"
           control={form.control}
           render={({ field }) => (
             <FormItem className="sm:col-span-2">
-              <FormLabel>{t`Fluency (CEFR)`}</FormLabel>
+              <FormLabel>{t`Level`}</FormLabel>
               <FormControl className="py-2">
                 <div className="flex items-center gap-x-4">
                   <Slider
                     {...field}
-                    min={1}
-                    max={6}
+                    min={0}
+                    max={5}
                     value={[field.value]}
                     onValueChange={(value) => field.onChange(value[0])}
                   />
 
-                  <span className="text-base font-bold">{getCEFRLevel(field.value)}</span>
+                  {field.value === 0 ? (
+                    <span className="text-base font-bold">{t`Hidden`}</span>
+                  ) : (
+                    <span className="text-base font-bold">{field.value}</span>
+                  )}
                 </div>
               </FormControl>
               <FormMessage />

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

@@ -71,14 +71,18 @@ export const SkillsDialog = () => {
                 <div className="flex items-center gap-x-4">
                   <Slider
                     {...field}
-                    min={1}
+                    min={0}
                     max={5}
                     value={[field.value]}
                     orientation="horizontal"
                     onValueChange={(value) => field.onChange(value[0])}
                   />
 
-                  <span className="text-base font-bold">{field.value}</span>
+                  {field.value === 0 ? (
+                    <span className="text-base font-bold">{t`Hidden`}</span>
+                  ) : (
+                    <span className="text-base font-bold">{field.value}</span>
+                  )}
                 </div>
               </FormControl>
               <FormMessage />

apps/client/src/pages/builder/sidebars/left/index.tsx

@@ -16,7 +16,6 @@ import {
   Volunteer,
 } from "@reactive-resume/schema";
 import { Button, ScrollArea, Separator } from "@reactive-resume/ui";
-import { getCEFRLevel } from "@reactive-resume/utils";
 import { Fragment, useRef } from "react";
 import { Link } from "react-router-dom";
 
@@ -57,21 +56,21 @@ export const LeftSidebar = () => {
             name={t({
               message: "Basics",
               context:
-                "The Basics section of a Resume consists of User's Picture, Full Name, Location etc.",
+                "The basics section of a resume consists of User's Picture, Full Name, Location etc.",
             })}
           />
           <SectionIcon id="summary" onClick={() => scrollIntoView("#summary")} />
           <SectionIcon id="profiles" onClick={() => scrollIntoView("#profiles")} />
           <SectionIcon id="experience" onClick={() => scrollIntoView("#experience")} />
           <SectionIcon id="education" onClick={() => scrollIntoView("#education")} />
+          <SectionIcon id="skills" onClick={() => scrollIntoView("#skills")} />
+          <SectionIcon id="languages" onClick={() => scrollIntoView("#languages")} />
           <SectionIcon id="awards" onClick={() => scrollIntoView("#awards")} />
           <SectionIcon id="certifications" onClick={() => scrollIntoView("#certifications")} />
           <SectionIcon id="interests" onClick={() => scrollIntoView("#interests")} />
-          <SectionIcon id="languages" onClick={() => scrollIntoView("#languages")} />
-          <SectionIcon id="volunteer" onClick={() => scrollIntoView("#volunteer")} />
           <SectionIcon id="projects" onClick={() => scrollIntoView("#projects")} />
           <SectionIcon id="publications" onClick={() => scrollIntoView("#publications")} />
-          <SectionIcon id="skills" onClick={() => scrollIntoView("#skills")} />
+          <SectionIcon id="volunteer" onClick={() => scrollIntoView("#volunteer")} />
           <SectionIcon id="references" onClick={() => scrollIntoView("#references")} />
 
           <SectionIcon
@@ -118,6 +117,21 @@ export const LeftSidebar = () => {
             description={(item) => item.area}
           />
           <Separator />
+          <SectionBase<Skill>
+            id="skills"
+            title={(item) => item.name}
+            description={(item) => {
+              if (item.description) return item.description;
+              if (item.keywords.length > 0) return `${item.keywords.length} keywords`;
+            }}
+          />
+          <Separator />
+          <SectionBase<Language>
+            id="languages"
+            title={(item) => item.name}
+            description={(item) => item.description}
+          />
+          <Separator />
           <SectionBase<Award>
             id="awards"
             title={(item) => item.title}
@@ -138,18 +152,6 @@ export const LeftSidebar = () => {
             }}
           />
           <Separator />
-          <SectionBase<Language>
-            id="languages"
-            title={(item) => item.name}
-            description={(item) => item.fluency || getCEFRLevel(item.fluencyLevel)}
-          />
-          <Separator />
-          <SectionBase<Volunteer>
-            id="volunteer"
-            title={(item) => item.organization}
-            description={(item) => item.position}
-          />
-          <Separator />
           <SectionBase<Project>
             id="projects"
             title={(item) => item.name}
@@ -162,13 +164,10 @@ export const LeftSidebar = () => {
             description={(item) => item.publisher}
           />
           <Separator />
-          <SectionBase<Skill>
-            id="skills"
-            title={(item) => item.name}
-            description={(item) => {
-              if (item.description) return item.description;
-              if (item.keywords.length > 0) return `${item.keywords.length} keywords`;
-            }}
+          <SectionBase<Volunteer>
+            id="volunteer"
+            title={(item) => item.organization}
+            description={(item) => item.position}
           />
           <Separator />
           <SectionBase<Reference>

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

@@ -1,8 +1,7 @@
 import { t } from "@lingui/macro";
-import { Aperture, UploadSimple } from "@phosphor-icons/react";
+import { Aperture, Trash, UploadSimple } from "@phosphor-icons/react";
 import {
   Avatar,
-  AvatarFallback,
   AvatarImage,
   buttonVariants,
   Input,
@@ -11,8 +10,8 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@reactive-resume/ui";
-import { cn, getInitials } from "@reactive-resume/utils";
-import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "@reactive-resume/utils";
+import { motion } from "framer-motion";
 import { useMemo, useRef } from "react";
 import { z } from "zod";
 
@@ -23,10 +22,9 @@ import { PictureOptions } from "./options";
 
 export const PictureSection = () => {
   const inputRef = useRef<HTMLInputElement>(null);
-  const { uploadImage, loading } = useUploadImage();
+  const { uploadImage } = useUploadImage();
 
   const setValue = useResumeStore((state) => state.setValue);
-  const name = useResumeStore((state) => state.resume.data.basics.name);
   const picture = useResumeStore((state) => state.resume.data.basics.picture);
 
   const isValidUrl = useMemo(() => z.string().url().safeParse(picture.url).success, [picture.url]);
@@ -41,16 +39,37 @@ export const PictureSection = () => {
     }
   };
 
+  const onAvatarClick = () => {
+    if (isValidUrl) {
+      setValue("basics.picture.url", "");
+    } else {
+      inputRef.current?.click();
+    }
+  };
+
   return (
     <div className="flex items-center gap-x-4">
-      <Avatar className="h-14 w-14">
-        {isValidUrl && <AvatarImage src={picture.url} />}
-        <AvatarFallback className="text-lg font-bold">{getInitials(name)}</AvatarFallback>
-      </Avatar>
+      <div className="group relative cursor-pointer" onClick={onAvatarClick}>
+        <Avatar className="h-14 w-14 bg-secondary">
+          <AvatarImage src={picture.url} />
+        </Avatar>
+
+        {isValidUrl ? (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-background/30 opacity-0 transition-opacity group-hover:opacity-100">
+            <Trash size={16} weight="bold" />
+          </div>
+        ) : (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-background/30 opacity-0 transition-opacity group-hover:opacity-100">
+            <UploadSimple size={16} weight="bold" />
+          </div>
+        )}
+      </div>
 
       <div className="flex w-full flex-col gap-y-1.5">
         <Label htmlFor="basics.picture.url">{t`Picture`}</Label>
         <div className="flex items-center gap-x-2">
+          <input hidden type="file" ref={inputRef} onChange={onSelectImage} />
+
           <Input
             id="basics.picture.url"
             placeholder="https://..."
@@ -58,44 +77,23 @@ export const PictureSection = () => {
             onChange={(event) => setValue("basics.picture.url", event.target.value)}
           />
 
-          <AnimatePresence>
-            {/* Show options button if picture exists */}
-            {isValidUrl && (
-              <Popover>
-                <PopoverTrigger asChild>
-                  <motion.button
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className={cn(buttonVariants({ size: "icon", variant: "ghost" }))}
-                  >
-                    <Aperture />
-                  </motion.button>
-                </PopoverTrigger>
-                <PopoverContent className="w-[360px]">
-                  <PictureOptions />
-                </PopoverContent>
-              </Popover>
-            )}
-
-            {/* Show upload button if picture doesn't exist, else show remove button to delete picture */}
-            {!isValidUrl && (
-              <>
-                <input hidden type="file" ref={inputRef} onChange={onSelectImage} />
-
+          {isValidUrl && (
+            <Popover>
+              <PopoverTrigger asChild>
                 <motion.button
-                  disabled={loading}
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
-                  onClick={() => inputRef.current?.click()}
                   className={cn(buttonVariants({ size: "icon", variant: "ghost" }))}
                 >
-                  <UploadSimple />
+                  <Aperture />
                 </motion.button>
-              </>
-            )}
-          </AnimatePresence>
+              </PopoverTrigger>
+              <PopoverContent className="w-[360px]">
+                <PictureOptions />
+              </PopoverContent>
+            </Popover>
+          )}
         </div>
       </div>
     </div>