add media detail dialog and infinite loading

app/src/ui/components/code/JsonViewer.tsx

@@ -9,6 +9,7 @@ export const JsonViewer = ({
    expand = 0,
    showSize = false,
    showCopy = false,
+   copyIconProps = {},
    className,
 }: {
    json: object;
@@ -16,6 +17,7 @@ export const JsonViewer = ({
    expand?: number;
    showSize?: boolean;
    showCopy?: boolean;
+   copyIconProps?: any;
    className?: string;
 }) => {
    const size = showSize ? JSON.stringify(json).length : undefined;
@@ -28,7 +30,7 @@ export const JsonViewer = ({
    return (
       <div className={twMerge("bg-primary/5 py-3 relative overflow-hidden", className)}>
          {showContext && (
-            <div className="absolute right-4 top-4 font-mono text-zinc-400 flex flex-row gap-2 items-center">
+            <div className="absolute right-4 top-3 font-mono text-zinc-400 flex flex-row gap-2 items-center">
                {(title || size) && (
                   <div className="flex flex-row">
                      {title && <span>{title}</span>} {size && <span>({size} Bytes)</span>}
@@ -36,7 +38,7 @@ export const JsonViewer = ({
                )}
                {showCopy && (
                   <div>
-                     <IconButton Icon={TbCopy} onClick={onCopy} />
+                     <IconButton Icon={TbCopy} onClick={onCopy} {...copyIconProps} />
                   </div>
                )}
             </div>

app/src/ui/components/overlay/Dropdown.tsx

@@ -37,7 +37,7 @@ export type DropdownProps = {
    onClickItem?: (item: DropdownItem) => void;
    renderItem?: (
       item: DropdownItem,
-      props: { key: number; onClick: () => void },
+      props: { key: number; onClick: (e: any) => void },
    ) => DropdownClickableChild;
 };
 
@@ -65,7 +65,13 @@ export function Dropdown({
       setTimeout(() => setOpen((prev) => !prev), typeof delay === "number" ? delay : 0),
    );
 
-   const onClickHandler = openEvent === "onClick" ? toggle : undefined;
+   const onClickHandler =
+      openEvent === "onClick"
+         ? (e) => {
+              e.stopPropagation();
+              toggle();
+           }
+         : undefined;
    const onContextMenuHandler = useEvent((e) => {
       if (openEvent !== "onContextMenu") return;
       e.preventDefault();
@@ -165,10 +171,18 @@ export function Dropdown({
                style={dropdownStyle}
             >
                {title && (
-                  <div className="text-sm font-bold px-2.5 mb-1 mt-1 opacity-50">{title}</div>
+                  <div className="text-sm font-bold px-2.5 mb-1 mt-1 opacity-50 truncate">
+                     {title}
+                  </div>
                )}
                {menuItems.map((item, i) =>
-                  itemRenderer(item, { key: i, onClick: () => internalOnClickItem(item) }),
+                  itemRenderer(item, {
+                     key: i,
+                     onClick: (e) => {
+                        e.stopPropagation();
+                        internalOnClickItem(item);
+                     },
+                  }),
                )}
             </div>
          )}

app/src/ui/components/wouter/Link.tsx

@@ -88,6 +88,7 @@ export function Link({
    }
 
    const wouterOnClick = (e: any) => {
+      onClick?.(e);
       // prepared for view transition
       /*if (props.transition !== false) {
          e.preventDefault();