rename component

packages/app/src/components/AppMenu/index.jsx

@@ -1,39 +0,0 @@
-import React from "react"
-
-import "./index.less"
-
-const AppMenu = (props) => {
-    // TODO: Fetch from app core
-    const installedApps = []
-
-    return <div className="apps-menu">
-        <h1>Apps</h1>
-
-        {
-            installedApps.map((item) => {
-                return <div
-                    key={item.key}
-                    className="apps-menu-item"
-                    onClick={() => {
-                        if (item.location) {
-                            app.location.push(item.location)
-                        }
-
-                        props.close()
-                    }}
-                >
-                    <h3>{item.icon && createIconRender(item.icon)} {item.label}</h3>
-                </div>
-            })
-        }
-
-        {
-            installedApps.length === 0 && <Empty
-                description="No apps installed"
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
-            />
-        }
-    </div>
-}
-
-export default AppMenu

packages/app/src/components/AppMenu/index.less

@@ -1,13 +0,0 @@
-.apps-menu {
-    display: flex;
-    flex-direction: column;
-
-    gap: 10px;
-
-    .apps-menu-item {
-        display: flex;
-        flex-direction: row;
-
-        gap: 10px;
-    }
-}

packages/app/src/components/AppsMenu/index.jsx

@@ -0,0 +1,106 @@
+import React from "react"
+import { Popover, Empty } from "antd"
+import { FiInfo, FiBox, FiUser } from "react-icons/fi"
+
+import RouterLink from "@components/RouterLink"
+import Image from "@components/Image"
+
+import "./index.less"
+
+function fetchInstalledApps() {
+	let apps = []
+
+	for (let extension of app.extensions.extensions.values()) {
+		if (extension.enabled == false || !extension.main) {
+			continue
+		}
+
+		if (typeof extension.main.app === "object") {
+			apps.push({
+				...extension.main.app,
+				...extension.manifest,
+			})
+		}
+	}
+
+	return apps
+}
+
+const AppInfo = ({ item }) => {
+	return (
+		<div className="apps-menu-item-info-extra">
+			<span>
+				<FiUser />
+				{item.author}
+			</span>
+			<span>
+				<FiBox /> v{item.version}
+			</span>
+		</div>
+	)
+}
+
+const App = ({ item, close }) => {
+	function onClick() {
+		app.location.push(`/app/${item.id}`)
+		close()
+	}
+
+	return (
+		<div className="apps-menu-item" onClick={onClick}>
+			<div className="apps-menu-item-icon">
+				{item.icon && <Image src={item.icon} alt={item.title} />}
+			</div>
+
+			<div className="apps-menu-item-info">
+				<div className="apps-menu-item-info-titles">
+					<h3>{item.title}</h3>
+					<span className="apps-menu-item-info-description">
+						{item.description}
+					</span>
+				</div>
+
+				<Popover
+					content={<AppInfo item={item} />}
+					classNames={{
+						body: "apps-menu-item-info-extra",
+					}}
+				>
+					<FiInfo />
+				</Popover>
+			</div>
+		</div>
+	)
+}
+
+const AppMenu = (props) => {
+	const installedApps = React.useMemo(() => {
+		return fetchInstalledApps()
+	}, [])
+
+	return (
+		<div className="apps-menu">
+			<h1>Apps</h1>
+
+			{installedApps.map((item) => {
+				return <App item={item} key={item.key} {...props} />
+			})}
+
+			{installedApps.length === 0 && (
+				<Empty
+					description="No apps installed"
+					image={Empty.PRESENTED_IMAGE_SIMPLE}
+				/>
+			)}
+
+			<p>
+				Manage or install your apps from
+				<RouterLink to="/settings?tab=extensions" onClick={props.close}>
+					here
+				</RouterLink>
+			</p>
+		</div>
+	)
+}
+
+export default AppMenu

packages/app/src/components/AppsMenu/index.less

@@ -0,0 +1,70 @@
+.apps-menu {
+	display: flex;
+	flex-direction: column;
+
+	gap: 10px;
+}
+
+.apps-menu-item {
+	display: flex;
+	flex-direction: row;
+
+	align-items: center;
+
+	gap: 10px;
+
+	max-height: 55px;
+	width: 100%;
+
+	padding: 10px;
+
+	background-color: rgba(var(--bg_color_5), 0.2);
+
+	overflow: hidden;
+	border-radius: 12px;
+
+	cursor: pointer;
+
+	.apps-menu-item-icon {
+		width: 30px;
+		height: 30px;
+
+		overflow: hidden;
+		border-radius: 6px;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	.apps-menu-item-info {
+		display: flex;
+		flex-direction: row;
+
+		width: 100%;
+
+		justify-content: space-between;
+		align-items: center;
+
+		color: var(--text-color);
+
+		.apps-menu-item-info-titles {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+
+			.apps-menu-item-info-description {
+				font-size: 0.7rem;
+			}
+		}
+	}
+}
+
+.apps-menu-item-info-extra {
+	display: flex;
+	flex-direction: column;
+
+	color: var(--text-color);
+}