@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/components/HomePage/NavigationCard.tsx

@@ -0,0 +1,79 @@
+import { ArrowForwardIcon, Card, cls, Markdown, Typography, } from "@rebasepro/ui";
+import React from "react"; // Import React
+
+export type NavigationCardProps = {
+    name: string,
+    description?: string;
+    actions: React.ReactNode;
+    icon: React.ReactNode;
+    onClick?: () => void,
+    shrink?: boolean
+};
+
+// Wrap the component with React.memo
+export const NavigationCard = React.memo(function NavigationCard({
+    name,
+    description,
+    icon,
+    actions,
+    onClick,
+    shrink
+}: NavigationCardProps) {
+
+    return (
+        <Card
+            className={cls(
+                "group h-full p-5 cursor-pointer transition-all duration-200 ease-in-out",
+                "border-surface-200/40 dark:border-surface-700/40",
+                "hover:-translate-y-0.5 hover:shadow-md hover:shadow-primary/5",
+                "hover:border-primary/30 dark:hover:border-primary/20",
+                shrink && "w-full max-w-full min-h-0 scale-75"
+            )}
+            onClick={() => {
+                onClick?.();
+            }}
+        >
+
+            <div className="flex flex-col h-full">
+                {/* Header: title + icon left, actions right */}
+                <div className="flex items-center w-full justify-between mb-1">
+                    <div className="flex items-center gap-4">
+                        <div className="flex items-center justify-center w-7 h-7 rounded-lg bg-primary/8 dark:bg-primary/10 text-primary/70 dark:text-primary/60 transition-colors duration-200 group-hover:bg-primary/12 dark:group-hover:bg-primary/15 group-hover:text-primary dark:group-hover:text-primary/80">
+                            {icon}
+                        </div>
+                        <Typography variant="subtitle1"
+                            component="h2">
+                            {name}
+                        </Typography>
+                    </div>
+
+                    <div
+                        className="flex items-center gap-0.5"
+                        onClick={(event: React.MouseEvent) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }}>
+                        {actions}
+                    </div>
+                </div>
+
+                {/* Description */}
+                <div className="grow pl-[44px]">
+                    {description && <Typography variant="caption"
+                        color="secondary"
+                        component="div">
+                        <Markdown source={description} size={"small"} />
+                    </Typography>}
+                </div>
+
+                {/* Arrow */}
+                <div className="self-end mt-1">
+                    <div className={"transition-transform duration-200 group-hover:translate-x-0.5"}>
+                        <ArrowForwardIcon className="text-primary" size={"small"} />
+                    </div>
+                </div>
+
+            </div>
+
+        </Card>)
+});

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -0,0 +1,110 @@
+import type { NavigationEntry } from "@rebasepro/types";
+import { useNavigate } from "react-router-dom";
+;
+import { IconButton, StarIcon, Tooltip, WarningIcon } from "@rebasepro/ui";
+import { NavigationCard } from "./NavigationCard";
+import { SmallNavigationCard } from "./SmallNavigationCard";
+import React from "react";
+import { useRebaseContext, useSlot } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/core";
+import { useUserConfigurationPersistence } from "@rebasepro/core";
+
+/**
+ * This is the component used in the home page to render a card for each
+ * collection or view.
+ * @group Components
+ * @param view
+ * @param path
+ * @param collection
+ * @param url
+ * @param name
+ * @param description
+ * @param onClick
+
+ */
+export function NavigationCardBinding({
+    slug,
+    collection,
+    view,
+    url,
+    name,
+    description,
+    onClick,
+    type,
+    shrink
+}: NavigationEntry & {
+    onClick?: () => void,
+    shrink?: boolean // <-- add shrink prop type
+}) {
+
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+    const collectionIcon = <IconForView collectionOrView={collection ?? view} />;
+
+    const navigate = useNavigate();
+    const context = useRebaseContext();
+
+    const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(slug);
+
+    const actionsArray: React.ReactNode[] = userConfigurationPersistence
+        ? [
+            <IconButton
+                key={"favourite"}
+                size={"small"}
+                onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (favourite) {
+                        userConfigurationPersistence.setFavouritePaths(
+                            userConfigurationPersistence.favouritePaths.filter(p => p !== slug)
+                        );
+                    } else {
+                        userConfigurationPersistence.setFavouritePaths(
+                            [...userConfigurationPersistence.favouritePaths, slug]
+                        );
+                    }
+                }}>
+                <StarIcon
+                    size={"small"}
+                    className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"} />
+            </IconButton>
+        ]
+        : [];
+
+    const pluginCardActions = useSlot("home.collection.actions", {
+        slug: slug,
+        collection: collection!,
+        context
+    });
+
+    if ((collection as any)?.isTableMissing) {
+        actionsArray.unshift(
+            <Tooltip key="warning" title={`Table mapped to "${collection?.slug || collection?.name}" is missing in the database. Run migrations.`}>
+                <div>
+                    <WarningIcon size="small" className="text-red-600 dark:text-red-400" />
+                </div>
+            </Tooltip>
+        );
+    }
+
+    const actions: React.ReactNode | undefined = <>
+        {actionsArray}
+        {pluginCardActions}
+    </>
+
+    return <NavigationCard
+        icon={collectionIcon}
+        name={name}
+        description={description}
+        actions={actions}
+        onClick={() => {
+            onClick?.();
+            navigate(url);
+            if (userConfigurationPersistence) {
+                userConfigurationPersistence.setRecentlyVisitedPaths(
+                    [slug, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== slug)]
+                );
+            }
+        }}
+        shrink={shrink}
+    />;
+}

package/src/components/HomePage/NavigationGroup.tsx

@@ -0,0 +1,156 @@
+import React, { PropsWithChildren, useState } from "react";
+import { cls, EditIcon, IconButton, Typography, ExpandablePanel } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
+
+export function NavigationGroup({
+    children,
+    group,
+    minimised,
+    isPreview,
+    isPotentialCardDropTarget,
+    onEditGroup,
+    dndDisabled,
+    collapsed,
+    onToggleCollapsed
+}: PropsWithChildren<{
+    group: string | undefined,
+    minimised?: boolean,
+    isPreview?: boolean,
+    isPotentialCardDropTarget?: boolean,
+    onEditGroup?: (groupName: string) => void;
+    dndDisabled?: boolean;
+    collapsed?: boolean;
+    onToggleCollapsed?: () => void;
+}>) {
+
+    const { t } = useTranslation();
+    const [isHovered, setIsHovered] = useState(false);
+    const currentGroupName = group ?? t("views_group");
+
+    // Show caret only when not in preview and there is a toggle handler
+    const showCaret = !isPreview && !!onToggleCollapsed;
+
+    // Helper for the title content (left side)
+    const TitleContent = (
+        <div className={cls("flex items-center", isPreview ? "px-1 py-0.5" : "")}
+        >
+            <Typography
+                variant={isPreview ? "body2" : "caption"}
+                component={"h2"}
+                color="secondary"
+                className={cls(
+                    "p-4 py-2 rounded",
+                    "font-medium uppercase text-sm text-surface-600 dark:text-surface-400"
+                )}
+            >
+                {currentGroupName}
+            </Typography>
+            {!isPreview && onEditGroup && !dndDisabled && (
+                <IconButton
+                    size="smallest"
+                    onClick={(e) => {
+                        e.stopPropagation(); // Prevent toggle on click
+                        onEditGroup(currentGroupName);
+                    }}
+                    className={cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100")}
+                >
+                    <EditIcon size="smallest" />
+                </IconButton>
+            )}
+        </div>
+    );
+
+    return (
+        <div className={cls(
+            !isPotentialCardDropTarget ? "my-10" : "my-6",
+            "transition-all duration-200 ease-in-out"
+        )}
+        >
+            {/* Preview: static header + content (no caret / no collapse) */}
+            {isPreview && (
+                <>
+                    <div
+                        className={cls(
+                            "flex items-center justify-between w-full",
+                            "p-4 py-2"
+                        )}
+                        onMouseEnter={() => setIsHovered(true)}
+                        onMouseLeave={() => setIsHovered(false)}
+                    >
+                        {TitleContent}
+                    </div>
+                    {children}
+                </>
+            )}
+
+            {/* Interactive collapsible version when a toggle handler is provided */}
+            {!isPreview && showCaret && (
+                <ExpandablePanel
+                    invisible
+                    expanded={!collapsed}
+                    onExpandedChange={(open) => {
+                        if (open !== !collapsed) {
+                            onToggleCollapsed?.();
+                        }
+                    }}
+                    className={cls("mt-6")}
+                    titleClassName={cls(
+                        "min-h-0 p-0 border-none",
+                        "rounded flex items-center justify-between w-full",
+                        "hover:bg-transparent",
+                        "cursor-pointer select-none",
+                        collapsed && "bg-surface-100 dark:bg-surface-800/50"
+                    )}
+                    innerClassName={cls("mt-4", !minimised ? "pt-0" : "")}
+                    title={
+                        <div
+                            onMouseEnter={() => setIsHovered(true)}
+                            onMouseLeave={() => setIsHovered(false)}
+                            className="flex items-center"
+                        >
+                            {TitleContent}
+                        </div>
+                    }
+                >
+                    {minimised ? (
+                        <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
+                            style={{ minHeight: "50px" }}>
+                        </div>
+                    ) : (
+                        <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
+                            {children}
+                        </div>
+                    )}
+                </ExpandablePanel>
+            )}
+
+            {/* Non-collapsible (no caret) runtime, keep old behavior */}
+            {!isPreview && !showCaret && (
+                <>
+                    <div
+                        className={cls(
+                            "flex items-center justify-between w-full",
+                            "mt-6"
+                        )}
+                        onMouseEnter={() => setIsHovered(true)}
+                        onMouseLeave={() => setIsHovered(false)}
+                    >
+                        {TitleContent}
+                    </div>
+
+                    {!collapsed && (
+                        minimised ? (
+                            <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
+                                style={{ minHeight: "50px" }}>
+                            </div>
+                        ) : (
+                            <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
+                                {children}
+                            </div>
+                        )
+                    )}
+                </>
+            )}
+        </div>
+    );
+}

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
+
+interface RenameGroupDialogProps {
+    open: boolean;
+    initialName: string;
+    existingGroupNames: string[]; // Names of other existing groups to check for duplicates
+    onClose: () => void;
+    onRename: (newName: string) => void;
+}
+
+export function RenameGroupDialog({
+    open,
+    initialName,
+    existingGroupNames,
+    onClose,
+    onRename
+}: RenameGroupDialogProps) {
+    const { t } = useTranslation();
+    const [name, setName] = useState(initialName);
+    const [error, setError] = useState<string | null>(null);
+    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null); // Create a ref for the input
+
+    useEffect(() => {
+        if (open) {
+            setName(initialName);
+            setError(null);
+            // Focus and select text when dialog opens
+            setTimeout(() => { // setTimeout to ensure the input is rendered and focusable
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                    inputRef.current.select();
+                }
+            }, 100);
+        }
+    }, [initialName, open]);
+
+    const handleNameChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const newName = event.target.value;
+        setName(newName);
+        if (!newName.trim()) {
+            setError(t("group_name_empty_error"));
+        } else if (existingGroupNames.includes(newName.trim())) {
+            setError(t("group_name_exists_error"));
+        } else {
+            setError(null);
+        }
+    };
+
+    const handleSave = () => {
+        const trimmedName = name.trim();
+        if (!trimmedName) {
+            setError(t("group_name_empty_error"));
+            return;
+        }
+        if (existingGroupNames.includes(trimmedName)) {
+            setError(t("group_name_exists_error"));
+            return;
+        }
+        if (!error) {
+            onRename(trimmedName);
+            onClose();
+        }
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (event.key === "Enter") {
+            event.preventDefault(); // Prevent default form submission behavior
+            const trimmedName = name.trim();
+            // We need to check the error state directly as well,
+            // because the error state might not have updated if the user types and immediately hits enter.
+            let currentError = null;
+            if (!trimmedName) {
+                currentError = t("group_name_empty_error");
+            } else if (existingGroupNames.includes(trimmedName)) {
+                currentError = t("group_name_exists_error");
+            }
+
+            if (!currentError && trimmedName) {
+                handleSave();
+            } else if (currentError) {
+                setError(currentError); // Ensure error is displayed if trying to submit with Enter
+            }
+        }
+    };
+
+    const handleClose = () => {
+        setName(initialName);
+        setError(null);
+        onClose();
+    };
+
+    if (!open) return null;
+
+    return (
+        <Dialog open={open}>
+            <DialogTitle>{t("rename_group")}</DialogTitle>
+            <DialogContent>
+                <TextField
+                    inputRef={inputRef} // Pass the ref to the TextField
+                    label={t("group_name_label")}
+                    value={name}
+                    onChange={handleNameChange}
+                    onKeyDown={handleKeyDown} // Added onKeyDown handler
+                    error={!!error}
+                    aria-describedby={error ? "group-name-error" : undefined}
+                />
+                {error && <p id="group-name-error" style={{ display: "none" }}>{error}</p>}
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}
+                    variant="text">
+                    {t("cancel")}
+                </Button>
+                <Button onClick={handleSave}
+                    disabled={!!error || !name.trim()}>
+                    {t("save")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -0,0 +1,45 @@
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, Typography, } from "@rebasepro/ui";
+
+import { Link } from "react-router-dom";
+
+export type SmallNavigationCardProps = {
+    name: string,
+    url: string;
+    icon: React.ReactElement;
+};
+
+export function SmallNavigationCard({
+    name,
+    url,
+    icon,
+}: SmallNavigationCardProps) {
+
+    return (
+        <>
+
+            <Link
+                tabIndex={0}
+                className={cls(cardMixin,
+                    cardClickableMixin,
+                    "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit dark:visited:text-inherit hover:text-inherit dark:hover:text-inherit ")}
+                to={url}
+            >
+
+                <div className="flex flex-row items-center grow gap-2 ">
+                    {icon}
+
+                    <Typography gutterBottom variant="subtitle1"
+                        component="h2"
+                        className="mb-0 ml-3">
+                        {name}
+                    </Typography>
+                </div>
+
+                <div className={"p-2"}>
+                    <ArrowForwardIcon color="primary" size={"small"} />
+                </div>
+            </Link>
+
+        </>);
+}
+

package/src/components/HomePage/index.tsx

@@ -0,0 +1,5 @@
+export * from "./ContentHomePage";
+export * from "./NavigationGroup";
+export * from "./NavigationCard";
+export * from "./SmallNavigationCard";
+