base

2026-04-18 18:39:25 +03:00
commit 3ba092b60c
4944 changed files with 497564 additions and 0 deletions
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useRouter, useSearchParams } from "next/navigation";
+// components
+import { IssueFiltersDropdown } from "@/components/issues/filters";
+// helpers
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useIssueFilter } from "@/hooks/store/use-issue-filter";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+// store
+import type { PublishStore } from "@/store/publish/publish.store";
+// types
+import type { TIssueLayout } from "@/types/issue";
+// local imports
+import { IssuesLayoutSelection } from "./layout-selection";
+import { NavbarTheme } from "./theme";
+import { UserAvatar } from "./user-avatar";
+
+export type NavbarControlsProps = {
+  publishSettings: PublishStore;
+};
+
+export const NavbarControls = observer(function NavbarControls(props: NavbarControlsProps) {
+  // props
+  const { publishSettings } = props;
+  // router
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const peekId = searchParams.get("peekId") || undefined;
+  // hooks
+  const { getIssueFilters, isIssueFiltersUpdated, initIssueFilters } = useIssueFilter();
+  const { setPeekId } = useIssueDetails();
+  // derived values
+  const { anchor, view_props, workspace_detail } = publishSettings;
+  const issueFilters = anchor ? getIssueFilters(anchor) : undefined;
+  const activeLayout = issueFilters?.display_filters?.layout || undefined;
+
+  const isInIframe = useIsInIframe();
+
+  useEffect(() => {
+    if (anchor && workspace_detail) {
+      const viewsAcceptable: string[] = [];
+      let currentBoard: TIssueLayout | null = null;
+
+      if (view_props?.list) viewsAcceptable.push("list");
+      if (view_props?.kanban) viewsAcceptable.push("kanban");
+      if (view_props?.calendar) viewsAcceptable.push("calendar");
+      if (view_props?.gantt) viewsAcceptable.push("gantt");
+      if (view_props?.spreadsheet) viewsAcceptable.push("spreadsheet");
+
+      if (board) {
+        if (viewsAcceptable.includes(board.toString())) currentBoard = board.toString() as TIssueLayout;
+        else {
+          if (viewsAcceptable && viewsAcceptable.length > 0) currentBoard = viewsAcceptable[0] as TIssueLayout;
+        }
+      } else {
+        if (viewsAcceptable && viewsAcceptable.length > 0) currentBoard = viewsAcceptable[0] as TIssueLayout;
+      }
+
+      if (currentBoard) {
+        if (activeLayout === undefined || activeLayout !== currentBoard) {
+          const { query, queryParam } = queryParamGenerator({ board: currentBoard, peekId, priority, state, labels });
+          const params: any = {
+            display_filters: { layout: (query?.board as string[])[0] },
+            filters: {
+              priority: query?.priority ?? undefined,
+              state: query?.state ?? undefined,
+              labels: query?.labels ?? undefined,
+            },
+          };
+
+          if (!isIssueFiltersUpdated(anchor, params)) {
+            initIssueFilters(anchor, params);
+            router.push(`/issues/${anchor}?${queryParam}`);
+          }
+        }
+      }
+    }
+  }, [
+    anchor,
+    board,
+    labels,
+    state,
+    priority,
+    peekId,
+    activeLayout,
+    router,
+    initIssueFilters,
+    setPeekId,
+    isIssueFiltersUpdated,
+    view_props,
+    workspace_detail,
+  ]);
+
+  if (!anchor) return null;
+
+  return (
+    <>
+      {/* issue views */}
+      <div className="shrink-0">
+        <IssuesLayoutSelection anchor={anchor} />
+      </div>
+
+      {/* issue filters */}
+      <div className="shrink-0">
+        <IssueFiltersDropdown anchor={anchor} />
+      </div>
+
+      {/* theming */}
+      <div className="shrink-0">
+        <NavbarTheme />
+      </div>
+
+      {!isInIframe && <UserAvatar />}
+    </>
+  );
+});