feat: init

apps/web/core/components/home/home-dashboard-widgets.tsx

@@ -0,0 +1,107 @@
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { THomeWidgetKeys, THomeWidgetProps } from "@plane/types";
+// components
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+// hooks
+import { useHome } from "@/hooks/store/use-home";
+import { useProject } from "@/hooks/store/use-project";
+// plane web components
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+import { HomePageHeader } from "@/plane-web/components/home/header";
+// local imports
+import { StickiesWidget } from "../stickies/widget";
+import { HomeLoader, NoProjectsEmptyState, RecentActivityWidget } from "./widgets";
+import { DashboardQuickLinks } from "./widgets/links";
+import { ManageWidgetsModal } from "./widgets/manage";
+
+export const HOME_WIDGETS_LIST: {
+  [key in THomeWidgetKeys]: {
+    component: React.FC<THomeWidgetProps> | null;
+    fullWidth: boolean;
+    title: string;
+  };
+} = {
+  quick_links: {
+    component: DashboardQuickLinks,
+    fullWidth: false,
+    title: "home.quick_links.title_plural",
+  },
+  recents: {
+    component: RecentActivityWidget,
+    fullWidth: false,
+    title: "home.recents.title",
+  },
+  my_stickies: {
+    component: StickiesWidget,
+    fullWidth: false,
+    title: "stickies.title",
+  },
+  new_at_plane: {
+    component: null,
+    fullWidth: false,
+    title: "home.new_at_plane.title",
+  },
+  quick_tutorial: {
+    component: null,
+    fullWidth: false,
+    title: "home.quick_tutorial.title",
+  },
+};
+
+export const DashboardWidgets = observer(() => {
+  // router
+  const { workspaceSlug } = useParams();
+  // navigation
+  const pathname = usePathname();
+  // store hooks
+  const { toggleWidgetSettings, widgetsMap, showWidgetSettings, orderedWidgets, isAnyWidgetEnabled, loading } =
+    useHome();
+  const { loader } = useProject();
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const noWidgetsResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/dashboard/widgets" });
+
+  // derived values
+  const isWikiApp = pathname.includes(`/${workspaceSlug.toString()}/pages`);
+  if (!workspaceSlug) return null;
+  if (loading || loader !== "loaded") return <HomeLoader />;
+
+  return (
+    <div className="h-full w-full relative flex flex-col gap-7">
+      <HomePageHeader />
+      <ManageWidgetsModal
+        workspaceSlug={workspaceSlug.toString()}
+        isModalOpen={showWidgetSettings}
+        handleOnClose={() => toggleWidgetSettings(false)}
+      />
+      {!isWikiApp && <NoProjectsEmptyState />}
+
+      {isAnyWidgetEnabled ? (
+        <div className="flex flex-col divide-y-[1px] divide-custom-border-100">
+          {orderedWidgets.map((key) => {
+            const WidgetComponent = HOME_WIDGETS_LIST[key]?.component;
+            const isEnabled = widgetsMap[key]?.is_enabled;
+            if (!WidgetComponent || !isEnabled) return null;
+            return (
+              <div key={key} className="py-4">
+                <WidgetComponent workspaceSlug={workspaceSlug.toString()} />
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="h-full w-full grid place-items-center">
+          <SimpleEmptyState
+            title={t("home.empty.widgets.title")}
+            description={t("home.empty.widgets.description")}
+            assetPath={noWidgetsResolvedPath}
+          />
+        </div>
+      )}
+    </div>
+  );
+});