homeio

1"use client";
2
3import { Plus } from "@/components/icons/platform-icons";
4import { useEffect, useRef, useState } from "react";
5
6type AppStoreInstallMenuProps = {
7  onInstallCustomClick: () => void;
8  onManageSourcesClick: () => void;
9};
10
11export function AppStoreInstallMenu({
12  onInstallCustomClick,
13  onManageSourcesClick,
14}: AppStoreInstallMenuProps) {
15  const [isOpen, setIsOpen] = useState(false);
16  const rootRef = useRef<HTMLDivElement>(null);
17
18  useEffect(() => {
19    if (!isOpen) return;
20
21    function onDocumentPointerDown(event: MouseEvent) {
22      const root = rootRef.current;
23      if (!root) return;
24      if (!root.contains(event.target as Node)) {
25        setIsOpen(false);
26      }
27    }
28
29    document.addEventListener("mousedown", onDocumentPointerDown);
30    return () => {
31      document.removeEventListener("mousedown", onDocumentPointerDown);
32    };
33  }, [isOpen]);
34
35  return (
36    <div ref={rootRef} className="relative">
37      <button
38        type="button"
39        onClick={() => setIsOpen((value) => !value)}
40        aria-label="Install menu"
41        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-primary/15 text-primary rounded-md hover:bg-primary/25 transition-colors cursor-pointer"
42      >
43        <Plus className="size-3.5" />
44        Install
45      </button>
46
47      {isOpen ? (
48        <div
49          role="menu"
50          className="absolute right-0 top-[calc(100%+0.4rem)] min-w-44 rounded-lg border border-glass-border bg-popover/95 shadow-xl p-1 z-30"
51        >
52          <button
53            role="menuitem"
54            type="button"
55            onClick={() => {
56              setIsOpen(false);
57              onInstallCustomClick();
58            }}
59            className="w-full text-left px-2.5 py-1.5 text-xs text-foreground hover:bg-secondary/50 rounded-md transition-colors cursor-pointer"
60          >
61            Install Custom App
62          </button>
63          <button
64            role="menuitem"
65            type="button"
66            onClick={() => {
67              setIsOpen(false);
68              onManageSourcesClick();
69            }}
70            className="w-full text-left px-2.5 py-1.5 text-xs text-foreground hover:bg-secondary/50 rounded-md transition-colors cursor-pointer"
71          >
72            Manage Sources
73          </button>
74        </div>
75      ) : null}
76    </div>
77  );
78}
79