added widgets settings

packages/app/constants/settings/components/widgetsView/index.jsx

@@ -0,0 +1,59 @@
+import React from "react"
+import * as antd from "antd"
+
+import { Icons } from "components/Icons"
+import { openModal as openWidgetsBrowserModal } from "components/WidgetsBrowser"
+import WidgetItemPreview from "components/WidgetItemPreview"
+
+import "./index.less"
+
+export default class WidgetsView extends React.Component {
+    state = {
+        loadedWidgets: this.props.ctx.currentValue ?? [],
+    }
+
+    render() {
+        return <div className="widgets_load">
+            <div className="widgets_load_list">
+                {
+                    this.state.loadedWidgets.map((manifest) => {
+                        return <WidgetItemPreview
+                            manifest={manifest}
+                            onRemove={() => {
+                                app.cores.widgets.uninstall(manifest._id)
+                            }}
+                            onInstall={() => {
+                                app.cores.widgets.install(manifest._id)
+                            }}
+                            onUpdate={() => {
+                                app.cores.widgets.install(manifest._id, {
+                                    update: true,
+                                })
+                            }}
+                            onChangeVisible={(visible) => {
+                                app.cores.widgets.toogleVisibility(manifest._id, visible)
+                            }}
+                        />
+                    })
+                }
+
+                <div
+                    className="widget_load_list_item"
+                    style={{
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }}
+                >
+                    <antd.Button
+                        type="primary"
+                        icon={<Icons.Plus />}
+                        onClick={openWidgetsBrowserModal}
+                    >
+                        Add widget
+                    </antd.Button>
+                </div>
+            </div>
+        </div>
+    }
+}

packages/app/constants/settings/components/widgetsView/index.less

@@ -0,0 +1,54 @@
+.widgets_load {
+    display: flex;
+    flex-direction: column;
+
+    gap: 20px;
+
+    .widgets_load_list {
+        display: flex;
+        flex-direction: column;
+
+        gap: 10px;
+
+        .widget_load_list_item {
+            display: flex;
+            flex-direction: row;
+
+            align-items: center;
+            justify-content: space-between;
+
+            padding: 10px;
+
+            border: 1px var(--border-color) solid;
+            border-radius: 12px;
+
+            .widget_load_list_item_info {
+                display: flex;
+                flex-direction: row;
+
+                gap: 20px;
+            }
+
+            .widget_load_list_item_icon {
+                display: flex;
+                flex-direction: row;
+
+                align-items: center;
+                justify-content: center;
+
+                align-self: center;
+
+                height: 60px;
+                width: 60px;
+
+                img {
+                    height: 100%;
+                    width: 100%;
+
+                    object-fit: contain;
+                }
+
+            }
+        }
+    }
+}

packages/app/constants/settings/widgets/index.jsx

@@ -0,0 +1,25 @@
+import loadable from "@loadable/component"
+
+export default {
+    id: "widgets",
+    icon: "List",
+    label: "Widgets",
+    group: "app",
+    settings: [
+        {
+            id: "widgets.urls",
+            title: "Widgets",
+            icon: "List",
+            component: loadable(() => import("../components/widgetsView")),
+            defaultValue: () => {
+                if (typeof app.cores.widgets === "undefined") {
+                    return []
+                }
+
+                return app.cores.widgets.getInstalled()
+            },
+            reloadValueOnUpdateEvent: "widgets:update",
+            storaged: false,
+        }
+    ]
+}