fix

comps/form/field/type/FilePreview.tsx

@@ -3,10 +3,10 @@ import { ReactElement } from "react";
 
 export const ThumbPreview = ({
   url,
-  del,
+  options,
 }: {
   url: string;
-  del: ReactElement;
+  options: ReactElement;
 }) => {
   const file = getFileName(url);
   if (typeof file === "string") return;
@@ -25,16 +25,23 @@ export const ThumbPreview = ({
           font-size: 14px;
           font-weight: black;
           padding: 3px 7px;
-          height: 26px;
+
+          width: 60px;
+          height: 60px;
+
+          &:hover {
+            border: 1px solid #1c4ed8;
+            outline: 1px solid #1c4ed8;
+          }
         `,
-        "c-flex c-items-center"
+        "c-flex c-justify-center c-items-center"
       )}
+      onClick={() => {
+        let _url = siteurl(url || "");
+        window.open(_url, "_blank");
+      }}
     >
       {file.extension}
-
-      <div className="c-ml-1">
-        <ExternalLink size="12px" />
-      </div>
     </div>
   );
 
@@ -44,8 +51,17 @@ export const ThumbPreview = ({
       is_image = true;
       content = (
         <img
+          onClick={() => {
+            let _url = siteurl(url || "");
+            window.open(_url, "_blank");
+          }}
           className={cx(
             "c-rounded-md",
+            css`
+              &:hover {
+                outline: 2px solid #1c4ed8;
+              }
+            `,
             css`
               width: 60px;
               height: 60px;
@@ -75,21 +91,11 @@ export const ThumbPreview = ({
         <div
           className={cx(
             "c-flex c-border c-rounded c-items-start c-px-1 c-relative c-bg-white c-cursor-pointer",
-            css`
+            "c-space-x-1 c-py-1 thumb-preview"
-              &:hover {
-                border: 1px solid #1c4ed8;
-                outline: 1px solid #1c4ed8;
-              }
-            `,
-            "c-space-x-1 c-py-1"
           )}
-          onClick={() => {
-            let _url = siteurl(url || "");
-            window.open(_url, "_blank");
-          }}
         >
           {content}
-          {del}
+          {options}
         </div>
       )}
     </>

comps/form/field/type/TypeUploadMulti.tsx

@@ -1,11 +1,12 @@
 import { useLocal } from "@/utils/use-local";
+import { Spinner } from "lib/comps/ui/field-loading";
+import { Tooltip } from "lib/comps/ui/tooltip";
 import get from "lodash.get";
-import { Trash2, Upload } from "lucide-react";
+import { Check, Trash2, Upload } from "lucide-react";
 import { ChangeEvent, FC } from "react";
 import { FMLocal, FieldLocal, FieldProp } from "../../typings";
+import { ThumbPreview } from "./FilePreview";
 import { PropTypeInput } from "./TypeInput";
-import { FilePreview, ThumbPreview } from "./FilePreview";
-import { Spinner } from "lib/comps/ui/field-loading";
 const w = window as unknown as {
   serverurl: string;
 };
@@ -30,6 +31,11 @@ export const FieldUploadMulti: FC<{
     style: "inline" as "inline" | "full",
   });
 
+  const cover = {
+    field: field.prop.upload?.cover_field || "",
+    text: field.prop.upload?.cover_text,
+  };
+
   const parse_list = () => {
     let list: string[] = [];
     if (value.startsWith("[")) {
@@ -114,46 +120,118 @@ export const FieldUploadMulti: FC<{
           `
         )}
       >
-        {list.map((value, idx) => {
+        {!isEditor &&
-          return (
+          list.map((value, idx) => {
-            <div
+            return (
-              className="c-py-1 c-pr-2"
+              <div
-              onClick={(e) => {
+                className="c-py-1 c-pr-2"
-                e.stopPropagation();
+                onClick={(e) => {
-                e.preventDefault();
+                  e.stopPropagation();
-              }}
+                  e.preventDefault();
-            >
+                }}
-              <div className={cx("c-relative")}>
+              >
-                <ThumbPreview
+                <div
-                  url={value || ""}
+                  className={cx(
-                  del={
+                    "c-relative",
-                    <div
+                    fm.data[cover.field] === value &&
-                      onClick={(e) => {
+                      css`
-                        e.preventDefault();
+                        .thumb-preview {
-                        e.stopPropagation();
+                          border: 1px solid #1c4ed8;
-                        if (confirm("Remove this file ?")) {
+                          outline: 1px solid #1c4ed8;
-                          list.splice(idx, 1);
-                          fm.data[field.name] = JSON.stringify(list);
-                          fm.render();
                         }
-                      }}
+
+                        &:hover {
+                          .cover-field {
+                            opacity: 0;
+                          }
+                        }
+                      `
+                  )}
+                >
+                  {fm.data[cover.field] === value && (
+                    <div
                       className={cx(
-                        "c-flex c-flex-row c-items-center c-px-1 c-rounded c-bg-white c-cursor-pointer hover:c-bg-red-100 transition-all",
+                        "absolute cover-field c-transition-all",
                         css`
-                          border: 1px solid red;
+                          bottom: 0px;
-                          width: 25px;
+                          font-size: 9px;
-                          height: 25px;
+                          z-index: 99;
+                          padding: 0px 7px;
+                          border-radius: 5px;
+                          border-top-left-radius: 0px;
+                          border-bottom-right-radius: 0px;
+                          background: #1c4ed8;
+                          color: white;
                         `
                       )}
                     >
-                      <Trash2 className="c-text-red-500 c-h-4 c-w-4 " />
+                      {cover.text}
                     </div>
-                  }
+                  )}
-                />
+                  <ThumbPreview
+                    url={value || ""}
+                    options={
+                      <div className={cx("c-flex c-flex-col c-space-y-1")}>
+                        <div
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (confirm("Remove this file ?")) {
+                              list.splice(idx, 1);
+                              fm.data[field.name] = JSON.stringify(list);
+                              fm.render();
+                            }
+                          }}
+                          className={cx(
+                            "c-flex c-flex-row c-items-center c-px-1 c-rounded c-bg-white c-cursor-pointer hover:c-bg-red-100 transition-all",
+                            css`
+                              border: 1px solid red;
+                              width: 25px;
+                              height: 25px;
+                            `
+                          )}
+                        >
+                          <Trash2 className="c-text-red-500 c-h-4 c-w-4 " />
+                        </div>
+
+                        {cover.field && (
+                          <Tooltip content={`Mark as ${cover.text}`} placement="right">
+                            <div
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                if (fm.data[cover.field] === value) {
+                                  fm.data[cover.field] = "";
+                                } else {
+                                  fm.data[cover.field] = value;
+                                }
+                                fm.render();
+                              }}
+                              className={cx(
+                                "c-flex c-flex-row c-items-center c-px-1 c-rounded c-bg-white c-cursor-pointer hover:c-bg-blue-100 transition-all",
+                                css`
+                                  border: 1px solid black;
+                                  width: 25px;
+                                  height: 25px;
+                                `
+                              )}
+                            >
+                              {value === fm.data[cover.field] && (
+                                <>
+                                  <Check />
+                                </>
+                              )}
+                            </div>
+                          </Tooltip>
+                        )}
+                      </div>
+                    }
+                  />
+                </div>
               </div>
-            </div>
+            );
-          );
+          })}
-        })}
         {input.uploading.size > 0 && (
           <div
             className={cx(

comps/form/typings.ts

@@ -48,7 +48,12 @@ export type FieldProp = {
   label: string;
   desc?: string;
   props?: any;
-  upload?: { mode: "single-file" | "multi-file"; accept: string };
+  upload?: {
+    mode: "single-file" | "multi-file";
+    accept: string;
+    cover_text: string;
+    cover_field: string;
+  };
   link: {
     text:
       | string

comps/ui/tooltip.tsx

@@ -0,0 +1,251 @@
+import type { Placement } from "@floating-ui/react";
+import {
+  FloatingPortal,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useMergeRefs,
+  useRole,
+} from "@floating-ui/react";
+import * as React from "react";
+
+interface TooltipOptions {
+  initialOpen?: boolean;
+  placement?: Placement;
+  open?: boolean;
+  offset?: number;
+  onOpenChange?: (open: boolean) => void;
+  delay?: number;
+  asChild?: boolean;
+}
+
+export function useTooltip({
+  initialOpen = false,
+  placement = "top",
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+  delay = 1000,
+  offset: tooltipOffset,
+}: TooltipOptions = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
+
+  const arrowRef = React.useRef(null);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(typeof tooltipOffset === "undefined" ? 5 : tooltipOffset),
+      flip({
+        fallbackAxisSideDirection: "start",
+        padding: 5,
+      }),
+      shift({ padding: 5 }),
+      arrow({ element: arrowRef }),
+    ],
+  });
+
+  const context = data.context;
+
+  const hover = useHover(context, {
+    move: false,
+    delay,
+    enabled: controlledOpen == null,
+  });
+  const focus = useFocus(context, {
+    enabled: controlledOpen == null,
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+
+  const interactions = useInteractions([hover, focus, dismiss, role]);
+
+  return React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      arrowRef,
+      ...interactions,
+      ...data,
+    }),
+    [open, setOpen, arrowRef, interactions, data]
+  );
+}
+
+type ContextType = ReturnType<typeof useTooltip> | null;
+
+const TooltipContext = React.createContext<ContextType>(null);
+
+export const useTooltipContext = () => {
+  const context = React.useContext(TooltipContext);
+
+  if (context == null) {
+    throw new Error("Tooltip components must be wrapped in <Tooltip />");
+  }
+
+  return context;
+};
+
+export function Tooltip({
+  children,
+  content,
+  className,
+  onClick,
+  onPointerEnter,
+  onPointerLeave,
+  asChild,
+  ...options
+}: {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  onPointerEnter?: (e: React.MouseEvent) => void;
+  onPointerLeave?: (e: React.MouseEvent) => void;
+} & TooltipOptions) {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const tooltip = useTooltip(options);
+
+  if (!content)
+    return (
+      <div className={className} onClick={onClick}>
+        {children}
+      </div>
+    );
+
+  return (
+    <TooltipContext.Provider value={tooltip}>
+      <TooltipTrigger
+        onClickCapture={onClick}
+        {...{ onPointerEnter, onPointerLeave }}
+        className={className}
+        asChild={asChild}
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent
+        className={cx(
+          css`
+            pointer-events: none;
+            position: relative;
+            background: white;
+            padding: 3px 8px;
+            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
+            font-size: 12px;
+          `
+        )}
+      >
+        {content}
+        <TooltipArrow />
+      </TooltipContent>
+    </TooltipContext.Provider>
+  );
+}
+
+function TooltipArrow() {
+  const context = useTooltipContext();
+  const { x: arrowX, y: arrowY } = context.middlewareData.arrow || {
+    x: 0,
+    y: 0,
+  };
+  const staticSide = mapPlacementSideToCSSProperty(context.placement) as string;
+
+  return (
+    <div
+      ref={context.arrowRef}
+      style={{
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        [staticSide]: "-4px",
+        transform: "rotate(45deg)",
+      }}
+      className={cx(
+        css`
+          pointer-events: none;
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          background: white;
+        `
+      )}
+    />
+  );
+}
+
+function mapPlacementSideToCSSProperty(placement: Placement) {
+  const staticPosition = placement.split("-")[0];
+
+  const staticSide = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right",
+  }[staticPosition];
+
+  return staticSide;
+}
+
+export const TooltipTrigger = React.forwardRef<
+  HTMLElement,
+  React.HTMLProps<HTMLElement> & { asChild?: boolean }
+>(function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
+  const context = useTooltipContext();
+  const childrenRef = (children as any).ref;
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        "data-state": context.open ? "open" : "closed",
+      })
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      // The user can style the trigger based on the state
+      data-state={context.open ? "open" : "closed"}
+      {...context.getReferenceProps(props as any)}
+    >
+      {children}
+    </div>
+  );
+});
+
+export const TooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLProps<HTMLDivElement>
+>(function TooltipContent(props, propRef) {
+  const context = useTooltipContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+  if (!context.open) return null;
+
+  return (
+    <FloatingPortal>
+      <div
+        ref={ref}
+        style={context.floatingStyles}
+        {...context.getFloatingProps(props as any)}
+      />
+    </FloatingPortal>
+  );
+});

gen/prop/gen_prop_fields.ts

@@ -67,6 +67,7 @@ const get_layer = async (
   table: string
 ) => {
   const { cols, rels } = await loadSingle(id_site, table);
+
   const options = [];
   if (cols) {
     for (const [k, v] of Object.entries(cols)) {
@@ -125,6 +126,7 @@ const loadSingle = async (id_site: string, table: string) => {
   const idb_key = `${id_site}-${table}`;
   let cached_raw = localStorage.getItem(ls_key);
   let cached_keys: string[] = [];
+
   if (cached_raw) {
     try {
       let res = JSON.parse(cached_raw);