fix: close sidebar on adding widget

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-03-20T22:01:28.568Z\n"
-"PO-Revision-Date: 2025-03-20T22:01:28.568Z\n"
+"POT-Creation-Date: 2025-11-15T14:56:01.306Z\n"
+"PO-Revision-Date: 2025-11-15T14:56:01.306Z\n"
 
 msgid "Data store keys created!"
 msgstr "Data store keys created!"
@@ -35,6 +35,36 @@ msgstr "Do you want to create them?"
 msgid "Create keys"
 msgstr "Create keys"
 
+msgid "Export Enrollment Overview"
+msgstr "Export Enrollment Overview"
+
+msgid "Review your enrollment overview configuration before exporting."
+msgstr "Review your enrollment overview configuration before exporting."
+
+msgid "Export Add Event Page"
+msgstr "Export Add Event Page"
+
+msgid "Review your add event page configuration before exporting."
+msgstr "Review your add event page configuration before exporting."
+
+msgid "Export Edit Event Page"
+msgstr "Export Edit Event Page"
+
+msgid "Review your edit event page configuration before exporting."
+msgstr "Review your edit event page configuration before exporting."
+
+msgid "Enrollment Overview"
+msgstr "Enrollment Overview"
+
+msgid "Add Event Page"
+msgstr "Add Event Page"
+
+msgid "Edit Event Page"
+msgstr "Edit Event Page"
+
+msgid "Export"
+msgstr "Export"
+
 msgid "Dashboard"
 msgstr "Dashboard"
 
@@ -151,18 +181,23 @@ msgstr "Edit event"
 msgid "Edit"
 msgstr "Edit"
 
-msgid "Default layout"
-msgstr "Default layout"
+msgid "Make the enrollment page your own"
+msgstr "Make the enrollment page your own"
 
 msgid ""
-"You are currently using the default layout for this page. Click on the "
-"button below to start customizing."
+"Switch to edit mode to build a layout that surfaces the data your team "
+"needs most. Rearrange widgets, spotlight key indicators, and guide users "
+"with a tailored flow."
 msgstr ""
-"You are currently using the default layout for this page. Click on the "
-"button below to start customizing."
+"Switch to edit mode to build a layout that surfaces the data your team "
+"needs most. Rearrange widgets, spotlight key indicators, and guide users "
+"with a tailored flow."
+
+msgid "Start designing"
+msgstr "Start designing"
 
-msgid "Start"
-msgstr "Start"
+msgid "You can always revert back to the default layout later."
+msgstr "You can always revert back to the default layout later."
 
 msgid "Quick actions"
 msgstr "Quick actions"

src/components/Pages/EditEnrollmentOverview/FormComponents/AddComponent/AddComponent.tsx

@@ -63,6 +63,7 @@ export const AddComponent = ({ columnName, availablePlugins, availableWidgets, a
         });
 
         setValue(columnName, newValues);
+        setOpen(false);
     }
 
     const addPluginToColumn = ({ id, pluginLaunchUrl }: { id: string, pluginLaunchUrl: string }) => {
@@ -84,6 +85,7 @@ export const AddComponent = ({ columnName, availablePlugins, availableWidgets, a
         }
 
         setValue(columnName, newValues);
+        setOpen(false);
     }
 
     return (

src/components/Pages/EditEnrollmentOverview/ViewModePage/ViewModePage.tsx

@@ -8,6 +8,8 @@ import { FormattedEnrollmentDataStoreInfo } from "../../EnrollmentOverview/hooks
 import { WidgetTypes } from "../EditModePage/hooks/useDefaultValues";
 import { PluginSchema } from "../../FormFieldConfigurator/FormController";
 import { ItemDisplay } from "./ItemDisplay";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../../../ui/empty";
+import { LayoutTemplate } from "lucide-react";
 
 type Props = {
     goBackToTableView: () => void;
@@ -110,27 +112,27 @@ export const ViewModePage = (
                         </div>
                     </div>
                 ) : (
-                    <div
-                        className={'text-center space-y-3 mt-4 border border-gray-300 bg-white p-4 rounded max-w-xl mx-auto'}
-                    >
-                        <h3
-                            className={'text-lg font-bold text-gray-800'}
-                        >
-                            {i18n.t('Default layout')}
-                        </h3>
-
-                        <p className={'text-gray-700'}>
-                            {i18n.t('You are currently using the default layout for this page. Click on the button below to start customizing.')}
-                        </p>
-
-                        <Button
-                            onClick={initEditMode}
-                            size={'sm'}
-                            variant={'outline'}
-                        >
-                            {i18n.t('Start')}
-                        </Button>
-                    </div>
+                    <Empty className={'mt-8 bg-muted/30 max-w-3xl mx-auto'}>
+                        <EmptyHeader>
+                            <EmptyMedia variant={'icon'}>
+                                <LayoutTemplate className={'size-6 text-muted-foreground/80'} />
+                            </EmptyMedia>
+                            <EmptyTitle>
+                                {i18n.t('No custom layout yet')}
+                            </EmptyTitle>
+                            <EmptyDescription>
+                                {i18n.t('This page still uses the default layout. Jump into edit mode to add widgets, reorder columns and create an experience that fits your workflows.')}
+                            </EmptyDescription>
+                        </EmptyHeader>
+                        <EmptyContent>
+                            <Button
+                                onClick={initEditMode}
+                                variant={'outline'}
+                            >
+                                {i18n.t('Start')}
+                            </Button>
+                        </EmptyContent>
+                    </Empty>
                 )}
             </CardContent>
         </>

src/components/ui/empty.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}