perf: 🎨 remove fragment imports, optimize templates

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

@@ -12,7 +12,6 @@ import {
   FormMessage,
   Input,
   RichInput,
-  Slider,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
 import { useForm } from "react-hook-form";
@@ -88,13 +87,13 @@ export const CustomSectionDialog = () => {
         />
 
         <FormField
-          name="url"
+          name="location"
           control={form.control}
           render={({ field }) => (
             <FormItem className="col-span-1">
-              <FormLabel>Website</FormLabel>
+              <FormLabel>Location</FormLabel>
               <FormControl>
-                <URLInput {...field} />
+                <Input {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -102,24 +101,13 @@ export const CustomSectionDialog = () => {
         />
 
         <FormField
-          name="level"
+          name="url"
           control={form.control}
           render={({ field }) => (
             <FormItem className="col-span-2">
-              <FormLabel>Level</FormLabel>
-              <FormControl className="py-2">
-                <div className="flex items-center gap-x-4">
-                  <Slider
-                    {...field}
-                    min={0}
-                    max={5}
-                    value={[field.value]}
-                    orientation="horizontal"
-                    onValueChange={(value) => field.onChange(value[0])}
-                  />
-
-                  <span className="text-base font-bold">{field.value}</span>
-                </div>
+              <FormLabel>Website</FormLabel>
+              <FormControl>
+                <URLInput {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>

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

@@ -16,7 +16,7 @@ type CustomFieldProps = {
 export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) => {
   const controls = useDragControls();
 
-  const handleChange = (key: "name" | "value", value: string) =>
+  const handleChange = (key: "icon" | "name" | "value", value: string) =>
     onChange({ ...field, [key]: value });
 
   return (
@@ -28,7 +28,7 @@ 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-4">
+      <div className="flex items-end justify-between space-x-2">
         <Button
           size="icon"
           variant="ghost"
@@ -38,9 +38,15 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
           <DotsSixVertical />
         </Button>
 
+        <Input
+          placeholder="Icon"
+          value={field.icon}
+          className="!ml-0"
+          onChange={(event) => handleChange("icon", event.target.value)}
+        />
+
         <Input
           placeholder="Name"
-          className="!ml-2"
           value={field.name}
           onChange={(event) => handleChange("name", event.target.value)}
         />
@@ -54,7 +60,7 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
         <Button
           size="icon"
           variant="ghost"
-          className="!ml-2 shrink-0"
+          className="!ml-0 shrink-0"
           onClick={() => onRemove(field.id)}
         >
           <X />
@@ -73,7 +79,10 @@ export const CustomFieldsSection = ({ className }: Props) => {
   const customFields = useResumeStore((state) => state.resume.data.basics.customFields);
 
   const onAddCustomField = () => {
-    setValue("basics.customFields", [...customFields, { id: createId(), name: "", value: "" }]);
+    setValue("basics.customFields", [
+      ...customFields,
+      { id: createId(), icon: "", name: "", value: "" },
+    ]);
   };
 
   const onChangeCustomField = (field: ICustomField) => {

apps/client/src/pages/builder/sidebars/right/sections/template.tsx

@@ -1,4 +1,5 @@
-import { Button } from "@reactive-resume/ui";
+import { templatesList } from "@reactive-resume/templates";
+import { Button, HoverCard, HoverCardContent, HoverCardTrigger } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 
 import { useResumeStore } from "@/client/stores/resume";
@@ -6,9 +7,6 @@ import { useResumeStore } from "@/client/stores/resume";
 import { getSectionIcon } from "../shared/section-icon";
 
 export const TemplateSection = () => {
-  // TODO: Import templates from @reactive-resume/templates
-  const templateList = ["rhyhorn"];
-
   const setValue = useResumeStore((state) => state.setValue);
   const currentTemplate = useResumeStore((state) => state.resume.data.metadata.template);
 
@@ -21,20 +19,31 @@ export const TemplateSection = () => {
         </div>
       </header>
 
-      <main className="grid grid-cols-2 gap-y-4">
-        {templateList.map((template) => (
-          <Button
-            key={template}
-            variant="outline"
-            disabled={template === currentTemplate}
-            onClick={() => setValue("metadata.template", template)}
-            className={cn(
-              "flex h-12 items-center justify-center overflow-hidden rounded border text-center text-sm capitalize ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100",
-              template === currentTemplate && "ring-1",
-            )}
-          >
-            {template}
-          </Button>
+      <main className="grid grid-cols-2 gap-4">
+        {templatesList.map(({ id, name }) => (
+          <HoverCard key={id} openDelay={0} closeDelay={0}>
+            <HoverCardTrigger asChild>
+              <Button
+                variant="outline"
+                onClick={() => setValue("metadata.template", id)}
+                className={cn(
+                  "flex h-12 items-center justify-center overflow-hidden rounded border text-center text-sm capitalize ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100",
+                  id === currentTemplate && "ring-1",
+                )}
+              >
+                {name}
+              </Button>
+            </HoverCardTrigger>
+
+            <HoverCardContent className="max-w-xs overflow-hidden border-none bg-white p-0">
+              <img
+                alt={name}
+                loading="lazy"
+                src={`/templates/${id}.jpg`}
+                className="aspect-[1/1.4142]"
+              />
+            </HoverCardContent>
+          </HoverCard>
         ))}
       </main>
     </section>

apps/client/src/pages/builder/sidebars/right/sections/theme.tsx

@@ -48,7 +48,7 @@ export const ThemeSection = () => {
                   style={{ backgroundColor: theme.primary }}
                 />
               </PopoverTrigger>
-              <PopoverContent asChild className="rounded-lg border-none bg-transparent p-0">
+              <PopoverContent className="rounded-lg border-none bg-transparent p-0">
                 <HexColorPicker
                   color={theme.primary}
                   onChange={(color) => {