From 430d9de7227936e565a4604b8a7ba07c438cce52 Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Wed, 14 Feb 2024 19:14:18 +0530
Subject: [PATCH] chore: updated empty states

---
 web/components/project/sidebar-list-item.tsx  |  39 +++---
 web/components/view/display-filters/root.tsx  |  12 +-
 web/components/view/header-tabs.tsx           |  11 +-
 web/constants/view/filters.ts                 |  55 +++++----
 .../[projectId]/views/private/[viewId].tsx    |   1 -
 .../[projectId]/views/private/index.tsx       | 110 +++++++++++++++--
 .../[projectId]/views/public/[viewId].tsx     |   1 -
 .../[projectId]/views/public/index.tsx        | 114 ++++++++++++++++++
 .../[workspaceSlug]/views/public/[viewId].tsx |   6 +-
 web/services/view/types.d.ts                  |   7 +-
 web/store/view/view-root.store.ts             |  40 +++---
 web/store/view/view.store.ts                  |  94 +++++++++++++--
 12 files changed, 396 insertions(+), 94 deletions(-)
 create mode 100644 web/pages/[workspaceSlug]/projects/[projectId]/views/public/index.tsx

diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index 64134b242..6418edd26 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -54,7 +54,7 @@ const navigation = (workspaceSlug: string, projectId: string) => [
   },
   {
     name: "Views",
-    href: `/${workspaceSlug}/projects/${projectId}/views`,
+    href: `/${workspaceSlug}/projects/${projectId}/views/public`,
     Icon: PhotoFilterIcon,
   },
   {
@@ -147,8 +147,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
         {({ open }) => (
           <>
             <div
-              className={`group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-10 hover:bg-custom-sidebar-background-80 ${snapshot?.isDragging ? "opacity-60" : ""
-                } ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
+              className={`group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-10 hover:bg-custom-sidebar-background-80 ${
+                snapshot?.isDragging ? "opacity-60" : ""
+              } ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
             >
               {provided && (
                 <Tooltip
@@ -157,9 +158,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                 >
                   <button
                     type="button"
-                    className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${isCollapsed ? "" : "group-hover:!flex"
-                      } ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${isMenuActive ? "!flex" : ""
-                      }`}
+                    className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${
+                      isCollapsed ? "" : "group-hover:!flex"
+                    } ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${
+                      isMenuActive ? "!flex" : ""
+                    }`}
                     {...provided?.dragHandleProps}
                   >
                     <MoreVertical className="h-3.5" />
@@ -170,12 +173,14 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
               <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!isCollapsed}>
                 <Disclosure.Button
                   as="div"
-                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${isCollapsed ? "justify-center" : `justify-between`
-                    }`}
+                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
+                    isCollapsed ? "justify-center" : `justify-between`
+                  }`}
                 >
                   <div
-                    className={`flex w-full flex-grow items-center gap-x-2 truncate ${isCollapsed ? "justify-center" : ""
-                      }`}
+                    className={`flex w-full flex-grow items-center gap-x-2 truncate ${
+                      isCollapsed ? "justify-center" : ""
+                    }`}
                   >
                     {project.emoji ? (
                       <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
@@ -195,8 +200,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   </div>
                   {!isCollapsed && (
                     <ChevronDown
-                      className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${isMenuActive ? "!block" : ""
-                        }  mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
+                      className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${
+                        isMenuActive ? "!block" : ""
+                      }  mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
                     />
                   )}
                 </Disclosure.Button>
@@ -320,10 +326,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                           disabled={!isCollapsed}
                         >
                           <div
-                            className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${router.asPath.includes(item.href)
-                              ? "bg-custom-primary-100/10 text-custom-primary-100"
-                              : "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                              } ${isCollapsed ? "justify-center" : ""}`}
+                            className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${
+                              router.asPath.includes(item.href)
+                                ? "bg-custom-primary-100/10 text-custom-primary-100"
+                                : "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                            } ${isCollapsed ? "justify-center" : ""}`}
                           >
                             <item.Icon className="h-4 w-4 stroke-[1.5]" />
                             {!isCollapsed && item.name}
diff --git a/web/components/view/display-filters/root.tsx b/web/components/view/display-filters/root.tsx
index ad471c2d2..c23d57fde 100644
--- a/web/components/view/display-filters/root.tsx
+++ b/web/components/view/display-filters/root.tsx
@@ -47,8 +47,8 @@ export const ViewDisplayFiltersRoot: FC<TViewDisplayFiltersRoot> = observer((pro
   }, [viewDetailStore, viewPageType]);
 
   return (
-    <div className="space-y-1 divide-y divide-custom-border-300">
-      <div className="relative py-1 first:pt-0">
+    <div className="space-y-1 divide-y divide-custom-border-300 [&>div]:first:pt-0 [&>div]:last:pb-0">
+      <div className="relative py-1">
         <div className="sticky top-0 z-20 flex justify-between items-center gap-2 bg-custom-background-100 select-none">
           <div className="font-medium text-xs text-custom-text-300 capitalize py-1">Properties</div>
           <div
@@ -95,8 +95,8 @@ export const ViewDisplayFiltersRoot: FC<TViewDisplayFiltersRoot> = observer((pro
         </div>
       ))}
 
-      <div className="pt-1 pb-0">
-        {filtersExtraProperties.map((option) => (
+      {filtersExtraProperties.map((option) => (
+        <div className="py-1">
           <DisplayFilterExtraOptions
             workspaceSlug={workspaceSlug}
             projectId={projectId}
@@ -104,8 +104,8 @@ export const ViewDisplayFiltersRoot: FC<TViewDisplayFiltersRoot> = observer((pro
             viewType={viewType}
             filterKey={option as TViewDisplayFiltersExtraOptions}
           />
-        ))}
-      </div>
+        </div>
+      ))}
     </div>
   );
 });
diff --git a/web/components/view/header-tabs.tsx b/web/components/view/header-tabs.tsx
index 36ab27054..30b1401be 100644
--- a/web/components/view/header-tabs.tsx
+++ b/web/components/view/header-tabs.tsx
@@ -5,6 +5,7 @@ import { Briefcase, CheckCircle, ChevronRight } from "lucide-react";
 import { useProject } from "hooks/store";
 // types
 import { TViewTypes } from "@plane/types";
+import { renderEmoji } from "helpers/emoji.helper";
 
 type TViewHeader = {
   projectId: string | undefined;
@@ -29,8 +30,14 @@ export const ViewHeader: FC<TViewHeader> = (props) => {
       {projectDetails && (
         <Fragment>
           <div className="relative flex items-center gap-2 overflow-hidden">
-            <div className="flex-shrink-0 w-6 h-6 rounded relative flex justify-center items-center bg-custom-background-80">
-              {projectDetails?.icon_prop ? projectDetails?.icon_prop.toString() : <Briefcase size={12} />}
+            <div className="flex-shrink-0 w-6 h-6 rounded relative flex justify-center items-center bg-custom-background-80 text-sm">
+              {projectDetails?.emoji ? (
+                renderEmoji(projectDetails?.emoji)
+              ) : projectDetails?.icon_prop ? (
+                renderEmoji(projectDetails?.icon_prop)
+              ) : (
+                <Briefcase size={12} />
+              )}
             </div>
             <div className="font-medium inline-block whitespace-nowrap overflow-hidden truncate line-clamp-1 text-sm">
               {projectDetails?.name ? projectDetails?.name : "Project Issues"}
diff --git a/web/constants/view/filters.ts b/web/constants/view/filters.ts
index 8c5ba1d7a..9652beb2b 100644
--- a/web/constants/view/filters.ts
+++ b/web/constants/view/filters.ts
@@ -10,6 +10,37 @@ import {
   TViewDisplayFiltersExtraOptions,
 } from "@plane/types";
 
+// global variables
+export enum EViewPageType {
+  ALL = "all",
+  PROFILE = "profile",
+  PROJECT = "project",
+  ARCHIVED = "archived",
+  DRAFT = "draft",
+}
+
+export enum ELocalViews {
+  ALL_ISSUES = "all-issues",
+  ASSIGNED = "assigned",
+  CREATED = "created",
+  SUBSCRIBED = "subscribed",
+}
+
+export enum EFilterTypes {
+  FILTERS = "filters",
+  DISPLAY_FILTERS = "display_filters",
+  DISPLAY_PROPERTIES = "display_properties",
+  KANBAN_FILTERS = "kanban_filters",
+}
+
+export enum EViewLayouts {
+  LIST = "list",
+  KANBAN = "kanban",
+  CALENDAR = "calendar",
+  SPREADSHEET = "spreadsheet",
+  GANTT = "gantt",
+}
+
 // filters constants
 export const STATE_GROUP_PROPERTY: Record<TStateGroups, { label: string; color: string }> = {
   backlog: { label: "Backlog", color: "#d9d9d9" },
@@ -67,26 +98,10 @@ export const EXTRA_OPTIONS_PROPERTY: Record<TViewDisplayFiltersExtraOptions, { l
   show_empty_groups: { label: "Show Empty Groups" },
 };
 
-export enum EViewPageType {
-  ALL = "all",
-  PROFILE = "profile",
-  PROJECT = "project",
-  ARCHIVED = "archived",
-  DRAFT = "draft",
-}
-
-export enum EViewLayouts {
-  LIST = "list",
-  KANBAN = "kanban",
-  CALENDAR = "calendar",
-  SPREADSHEET = "spreadsheet",
-  GANTT = "gantt",
-}
-
 export type TViewLayoutFilterProperties = {
   filters: Partial<keyof TViewFilters>[];
   display_filters: Partial<keyof TViewDisplayFilters>[];
-  extra_options: ("sub_issue" | "show_empty_groups")[];
+  extra_options: TViewDisplayFiltersExtraOptions[];
   display_properties: boolean;
   readonlyFilters?: Partial<keyof TViewFilters>[];
 };
@@ -112,10 +127,8 @@ const ALL_FILTER_PERMISSIONS: TFilterPermissions["all"] = {
   layouts: [EViewLayouts.SPREADSHEET],
   [EViewLayouts.SPREADSHEET]: {
     filters: ["project", "priority", "state_group", "assignees", "created_by", "labels", "start_date", "target_date"],
-    // display_filters: ["type"],
-    // extra_options: [],
-    display_filters: ["group_by", "sub_group_by", "order_by", "type"],
-    extra_options: ["sub_issue", "show_empty_groups"],
+    display_filters: ["type"],
+    extra_options: [],
     display_properties: true,
   },
 };
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/private/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/private/[viewId].tsx
index b3dc969ab..b2b9deb8f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/private/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/private/[viewId].tsx
@@ -40,7 +40,6 @@ const ProjectPrivateViewPage: NextPageWithLayout = () => {
           viewType={VIEW_TYPES.PROJECT_PRIVATE_VIEWS}
           viewPageType={EViewPageType.PROJECT}
           baseRoute={`/${workspaceSlug?.toString()}/projects/${projectId}/views/private`}
-          workspaceViewTabOptions={workspaceViewTabOptions}
         />
       </div>
     </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/private/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/private/index.tsx
index a5c34bc86..8213069c5 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/private/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/private/index.tsx
@@ -1,20 +1,114 @@
-import { ReactElement } from "react";
+import { Fragment, ReactElement, useEffect, useMemo } from "react";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { useTheme } from "next-themes";
+import { CheckCircle } from "lucide-react";
+// hooks
+import { useUser, useView } from "hooks/store";
 // layouts
 import { AppLayout } from "layouts/app-layout";
+// components
+import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+import { ViewHeader } from "components/view";
+// ui
+import { Spinner } from "@plane/ui";
 // types
 import { NextPageWithLayout } from "lib/types";
+// constants
+import { VIEW_TYPES } from "constants/view";
+import { VIEW_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
-const ProjectPrivateViewPage: NextPageWithLayout = () => {
+const ProjectPublicViewPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId, viewId } = router.query;
+  const { workspaceSlug, projectId } = router.query;
+  // hooks
+  const viewStore = useView(workspaceSlug?.toString(), projectId?.toString(), VIEW_TYPES.PROJECT_PUBLIC_VIEWS);
+  const { currentUser } = useUser();
+  // theme
+  const { resolvedTheme } = useTheme();
 
-  if (!workspaceSlug || !projectId || !viewId) return <></>;
-  return <div />;
-};
+  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
+  const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "views", isLightMode);
 
-ProjectPrivateViewPage.getLayout = function getLayout(page: ReactElement) {
+  useSWR(
+    workspaceSlug && projectId
+      ? `PROJECT_VIEWS_${VIEW_TYPES.PROJECT_PUBLIC_VIEWS}_${workspaceSlug.toString()}_${projectId.toString()}`
+      : null,
+    async () => {
+      await viewStore?.fetch();
+      console.log("viewStore", viewStore?.viewIds);
+    }
+  );
+
+  useEffect(() => {
+    if (workspaceSlug && projectId && viewStore?.viewIds && viewStore?.viewIds.length > 0) {
+      router.push(`/${workspaceSlug}/projects/${projectId}/views/public/${viewStore?.viewIds[0]}`);
+    }
+  }, [workspaceSlug, projectId, viewStore?.viewIds, router]);
+
+  const workspaceViewTabOptions = useMemo(
+    () => [
+      {
+        key: VIEW_TYPES.PROJECT_PRIVATE_VIEWS,
+        title: "Private",
+        href: `/${workspaceSlug}/projects/${projectId}/views/private`,
+      },
+      {
+        key: VIEW_TYPES.PROJECT_PUBLIC_VIEWS,
+        title: "Public",
+        href: `/${workspaceSlug}/projects/${projectId}/views/public`,
+      },
+    ],
+    [workspaceSlug, projectId]
+  );
+
+  if (!workspaceSlug || !projectId) return <></>;
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      {viewStore?.loader === "init-loader" ? (
+        <div className="relative w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          {viewStore?.viewIds && viewStore?.viewIds?.length <= 0 && (
+            <Fragment>
+              <div className="flex-shrink-0 px-5 pt-4 pb-4 border-b border-custom-border-200">
+                <ViewHeader
+                  projectId={projectId.toString()}
+                  viewType={VIEW_TYPES.PROJECT_PRIVATE_VIEWS}
+                  titleIcon={<CheckCircle size={12} />}
+                  title="Views"
+                  workspaceViewTabOptions={workspaceViewTabOptions}
+                />
+              </div>
+              <div className="relative w-full h-full flex justify-center items-center overflow-hidden overflow-y-auto">
+                <EmptyState
+                  title={VIEW_EMPTY_STATE_DETAILS["project-views"].title}
+                  description={VIEW_EMPTY_STATE_DETAILS["project-views"].description}
+                  image={EmptyStateImagePath}
+                  comicBox={{
+                    title: VIEW_EMPTY_STATE_DETAILS["project-views"].comicBox.title,
+                    description: VIEW_EMPTY_STATE_DETAILS["project-views"].comicBox.description,
+                  }}
+                  primaryButton={{
+                    text: VIEW_EMPTY_STATE_DETAILS["project-views"].primaryButton.text,
+                    onClick: () => {},
+                  }}
+                  size="lg"
+                />
+              </div>
+            </Fragment>
+          )}
+        </>
+      )}
+    </div>
+  );
+});
+
+ProjectPublicViewPage.getLayout = function getLayout(page: ReactElement) {
   return <AppLayout header={<></>}>{page}</AppLayout>;
 };
 
-export default ProjectPrivateViewPage;
+export default ProjectPublicViewPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/public/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/public/[viewId].tsx
index 3a82caa51..73b162d86 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/public/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/public/[viewId].tsx
@@ -40,7 +40,6 @@ const ProjectPublicViewPage: NextPageWithLayout = () => {
           viewType={VIEW_TYPES.PROJECT_PUBLIC_VIEWS}
           viewPageType={EViewPageType.PROJECT}
           baseRoute={`/${workspaceSlug?.toString()}/views/public`}
-          workspaceViewTabOptions={workspaceViewTabOptions}
         />
       </div>
       <div className="w-full h-full overflow-hidden">Issues render</div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/public/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/public/index.tsx
new file mode 100644
index 000000000..e5b803e0a
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/public/index.tsx
@@ -0,0 +1,114 @@
+import { Fragment, ReactElement, useEffect, useMemo } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { useTheme } from "next-themes";
+import { CheckCircle } from "lucide-react";
+// hooks
+import { useUser, useView } from "hooks/store";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+import { ViewHeader } from "components/view";
+// ui
+import { Spinner } from "@plane/ui";
+// types
+import { NextPageWithLayout } from "lib/types";
+// constants
+import { VIEW_TYPES } from "constants/view";
+import { VIEW_EMPTY_STATE_DETAILS } from "constants/empty-state";
+
+const ProjectPublicViewPage: NextPageWithLayout = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // hooks
+  const viewStore = useView(workspaceSlug?.toString(), projectId?.toString(), VIEW_TYPES.PROJECT_PUBLIC_VIEWS);
+  const { currentUser } = useUser();
+  // theme
+  const { resolvedTheme } = useTheme();
+
+  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
+  const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "views", isLightMode);
+
+  useSWR(
+    workspaceSlug && projectId
+      ? `PROJECT_VIEWS_${VIEW_TYPES.PROJECT_PUBLIC_VIEWS}_${workspaceSlug.toString()}_${projectId.toString()}`
+      : null,
+    async () => {
+      await viewStore?.fetch();
+      console.log("viewStore", viewStore?.viewIds);
+    }
+  );
+
+  useEffect(() => {
+    if (workspaceSlug && projectId && viewStore?.viewIds && viewStore?.viewIds.length > 0) {
+      router.push(`/${workspaceSlug}/projects/${projectId}/views/public/${viewStore?.viewIds[0]}`);
+    }
+  }, [workspaceSlug, projectId, viewStore?.viewIds, router]);
+
+  const workspaceViewTabOptions = useMemo(
+    () => [
+      {
+        key: VIEW_TYPES.PROJECT_PRIVATE_VIEWS,
+        title: "Private",
+        href: `/${workspaceSlug}/projects/${projectId}/views/private`,
+      },
+      {
+        key: VIEW_TYPES.PROJECT_PUBLIC_VIEWS,
+        title: "Public",
+        href: `/${workspaceSlug}/projects/${projectId}/views/public`,
+      },
+    ],
+    [workspaceSlug, projectId]
+  );
+
+  if (!workspaceSlug || !projectId) return <></>;
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      {viewStore?.loader === "init-loader" ? (
+        <div className="relative w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          {viewStore?.viewIds && viewStore?.viewIds?.length <= 0 && (
+            <Fragment>
+              <div className="flex-shrink-0 px-5 pt-4 pb-4 border-b border-custom-border-200">
+                <ViewHeader
+                  projectId={projectId.toString()}
+                  viewType={VIEW_TYPES.PROJECT_PUBLIC_VIEWS}
+                  titleIcon={<CheckCircle size={12} />}
+                  title="Views"
+                  workspaceViewTabOptions={workspaceViewTabOptions}
+                />
+              </div>
+              <div className="relative w-full h-full flex justify-center items-center overflow-hidden overflow-y-auto">
+                <EmptyState
+                  title={VIEW_EMPTY_STATE_DETAILS["project-views"].title}
+                  description={VIEW_EMPTY_STATE_DETAILS["project-views"].description}
+                  image={EmptyStateImagePath}
+                  comicBox={{
+                    title: VIEW_EMPTY_STATE_DETAILS["project-views"].comicBox.title,
+                    description: VIEW_EMPTY_STATE_DETAILS["project-views"].comicBox.description,
+                  }}
+                  primaryButton={{
+                    text: VIEW_EMPTY_STATE_DETAILS["project-views"].primaryButton.text,
+                    onClick: () => {},
+                  }}
+                  size="lg"
+                />
+              </div>
+            </Fragment>
+          )}
+        </>
+      )}
+    </div>
+  );
+});
+
+ProjectPublicViewPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<></>}>{page}</AppLayout>;
+};
+
+export default ProjectPublicViewPage;
diff --git a/web/pages/[workspaceSlug]/views/public/[viewId].tsx b/web/pages/[workspaceSlug]/views/public/[viewId].tsx
index e1a3ae3fa..168f8b8cc 100644
--- a/web/pages/[workspaceSlug]/views/public/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/views/public/[viewId].tsx
@@ -8,7 +8,7 @@ import { GlobalViewRoot, ViewHeader } from "components/view";
 // types
 import { NextPageWithLayout } from "lib/types";
 // constants
-import { EViewPageType, VIEW_TYPES } from "constants/view";
+import { ELocalViews, EViewPageType, VIEW_TYPES } from "constants/view";
 
 const WorkspacePublicViewPage: NextPageWithLayout = () => {
   const router = useRouter();
@@ -19,12 +19,12 @@ const WorkspacePublicViewPage: NextPageWithLayout = () => {
       {
         key: VIEW_TYPES.WORKSPACE_PRIVATE_VIEWS,
         title: "Private",
-        href: `/${workspaceSlug}/views/private/assigned`,
+        href: `/${workspaceSlug}/views/private/${ELocalViews.ASSIGNED}`,
       },
       {
         key: VIEW_TYPES.WORKSPACE_PUBLIC_VIEWS,
         title: "Public",
-        href: `/${workspaceSlug}/views/public/all-issues`,
+        href: `/${workspaceSlug}/views/public/${ELocalViews.ALL_ISSUES}`,
       },
     ],
     [workspaceSlug]
diff --git a/web/services/view/types.d.ts b/web/services/view/types.d.ts
index 78a5f9bf4..d22e9952d 100644
--- a/web/services/view/types.d.ts
+++ b/web/services/view/types.d.ts
@@ -3,12 +3,7 @@ import { TView, TUserView } from "@plane/types";
 export type TUserViewService = {
   // featureId represents moduleId/cycleId
   fetch: (workspaceSlug: string, projectId?: string, featureId?: string) => Promise<TUserView | undefined>;
-  update: (
-    workspaceSlug: string,
-    data: Partial<TView>,
-    projectId?: string,
-    featureId?: string
-  ) => Promise<TUserView | undefined>;
+  update: (workspaceSlug: string, data: any, projectId?: string, featureId?: string) => Promise<TUserView | undefined>;
 };
 
 export type TViewService = {
diff --git a/web/store/view/view-root.store.ts b/web/store/view/view-root.store.ts
index 9bc25c0b1..25f4d52e7 100644
--- a/web/store/view/view-root.store.ts
+++ b/web/store/view/view-root.store.ts
@@ -123,37 +123,37 @@ export class ViewRootStore implements TViewRootStore {
       const { workspaceSlug, projectId } = this.store.app.router;
       if (!workspaceSlug || !viewId) return;
 
-      // fetching display properties and display_filters
       const userView = await this.userService.fetch(workspaceSlug, projectId);
       if (!userView) return;
 
-      // fetching kanban display filters from local
+      let view: TView | undefined = undefined;
 
-      // fetching display filters from local and from the view
       if (["all-issues", "assigned", "created", "subscribed"].includes(viewId)) {
-        const view = { ...this.viewById(viewId) };
-        if (!view) return;
+        const currentView = { ...this.viewById(viewId) };
+        if (!currentView) return;
 
-        runInAction(() => {
-          view.display_filters = userView.display_filters;
-          view.display_properties = userView.display_properties;
-        });
+        view = currentView;
+        view.filters = userView.filters;
+        view.display_filters = userView.display_filters;
+        view.display_properties = userView.display_properties;
       } else {
-        const view = await this.service.fetchById(workspaceSlug, viewId, projectId);
-        if (!view) return;
+        const currentView = await this.service.fetchById(workspaceSlug, viewId, projectId);
+        if (!currentView) return;
 
+        view = currentView;
         view?.display_filters && (view.display_filters = userView.display_filters);
         view?.display_properties && (view.display_properties = userView.display_properties);
-
-        runInAction(() => {
-          if (view.id)
-            set(
-              this.viewMap,
-              [view.id],
-              new ViewStore(this.store, view, this.service, this.userService, this.viewPageType)
-            );
-        });
       }
+
+      if (!view) return;
+      runInAction(() => {
+        if (view?.id)
+          set(
+            this.viewMap,
+            [view.id],
+            new ViewStore(this.store, view, this.service, this.userService, this.viewPageType)
+          );
+      });
     } catch {}
   };
 
diff --git a/web/store/view/view.store.ts b/web/store/view/view.store.ts
index 119c3d5a1..432e2639d 100644
--- a/web/store/view/view.store.ts
+++ b/web/store/view/view.store.ts
@@ -21,7 +21,12 @@ import {
 // helpers
 import { FiltersHelper } from "./helpers/filters_helpers";
 // constants
-import { EViewLayouts, EViewPageType, viewDefaultFilterParametersByViewTypeAndLayout } from "constants/view";
+import {
+  EViewLayouts,
+  EViewPageType,
+  EFilterTypes,
+  viewDefaultFilterParametersByViewTypeAndLayout,
+} from "constants/view";
 
 type TLoader = "updating" | undefined;
 
@@ -160,6 +165,9 @@ export class ViewStore extends FiltersHelper implements TViewStore {
       unlockView: action,
       makeFavorite: action,
       removeFavorite: action,
+      updateUserFilters: action,
+      updateUserDisplayFilters: action,
+      updateUserDisplayProperties: action,
     });
   }
 
@@ -187,7 +195,7 @@ export class ViewStore extends FiltersHelper implements TViewStore {
     const requiredFilterProperties = viewDefaultFilterParametersByViewTypeAndLayout(
       this.viewPageType,
       layout,
-      "filters"
+      EFilterTypes.FILTERS
     );
 
     return this.computeAppliedFiltersQueryParameters(appliedFilters, requiredFilterProperties)?.query || undefined;
@@ -231,9 +239,9 @@ export class ViewStore extends FiltersHelper implements TViewStore {
   setFilters = (filterKey: keyof TViewFilters | undefined = undefined, filterValue: "clear_all" | string) => {
     runInAction(() => {
       if (filterKey === undefined) {
-        if (filterValue === "clear_all") set(this.filtersToUpdate, ["filters"], {});
+        if (filterValue === "clear_all") set(this.filtersToUpdate, [EFilterTypes.FILTERS], {});
       } else
-        update(this.filtersToUpdate, ["filters", filterKey], (_values = []) => {
+        update(this.filtersToUpdate, [EFilterTypes.FILTERS, filterKey], (_values = []) => {
           if (filterValue === "clear_all") return [];
           if (_values.includes(filterValue)) return pull(_values, filterValue);
           return concat(_values, filterValue);
@@ -259,21 +267,25 @@ export class ViewStore extends FiltersHelper implements TViewStore {
     runInAction(() => {
       Object.keys(display_filters).forEach((key) => {
         const _key = key as keyof TViewDisplayFilters;
-        set(this.filtersToUpdate, ["display_filters", _key], display_filters[_key]);
+        set(this.filtersToUpdate, [EFilterTypes.DISPLAY_FILTERS, _key], display_filters[_key]);
       });
     });
 
-    // update display properties globally
-
-    // updating display properties locally for kanban filters
+    // update display filters globally
+    this.updateUserDisplayFilters({ [EFilterTypes.DISPLAY_FILTERS]: this.filtersToUpdate.display_filters });
   };
 
   setDisplayProperties = async (displayPropertyKey: keyof TViewDisplayProperties) => {
     runInAction(() => {
-      update(this.filtersToUpdate, ["display_properties", displayPropertyKey], (_value: boolean = true) => !_value);
+      update(
+        this.filtersToUpdate,
+        [EFilterTypes.DISPLAY_PROPERTIES, displayPropertyKey],
+        (_value: boolean = true) => !_value
+      );
     });
 
     // update display properties globally
+    this.updateUserDisplayProperties({ [EFilterTypes.DISPLAY_PROPERTIES]: this.filtersToUpdate.display_properties });
   };
 
   setIsEditable = (is_editable: boolean) => {
@@ -297,7 +309,12 @@ export class ViewStore extends FiltersHelper implements TViewStore {
 
   saveChanges = async () => {
     try {
-      if (this.filtersToUpdate) await this.update(this.filtersToUpdate);
+      if (!this.id) return;
+
+      if (["all-issues", "assigned", "created", "subscribed"].includes(this.id)) {
+        const payload = this.filtersToUpdate.filters;
+        await this.updateUserFilters({ [EFilterTypes.FILTERS]: payload });
+      } else await this.update(this.filtersToUpdate);
     } catch {
       Object.keys(this.filtersToUpdate).forEach((key) => {
         const _key = key as keyof TUpdateView;
@@ -394,4 +411,61 @@ export class ViewStore extends FiltersHelper implements TViewStore {
       this.is_favorite = this.is_favorite;
     }
   };
+
+  // updating the user specific filters, display filters, and display properties
+  updateUserFilters = async (filters: { [EFilterTypes.FILTERS]: TViewFilters }) => {
+    try {
+      const { workspaceSlug, projectId } = this.store.app.router;
+      if (!workspaceSlug) return;
+
+      const userView = await this.userService.update(workspaceSlug, filters, projectId);
+      if (!userView) return;
+
+      runInAction(() => {
+        this.filters = userView.filters;
+      });
+    } catch {
+      runInAction(() => {
+        this.filters = this.filters;
+      });
+    }
+  };
+
+  updateUserDisplayFilters = async (display_filters: { [EFilterTypes.DISPLAY_FILTERS]: TViewDisplayFilters }) => {
+    try {
+      const { workspaceSlug, projectId } = this.store.app.router;
+      if (!workspaceSlug) return;
+
+      const userView = await this.userService.update(workspaceSlug, display_filters, projectId);
+      if (!userView) return;
+
+      runInAction(() => {
+        this.display_filters = userView.display_filters;
+      });
+    } catch {
+      runInAction(() => {
+        this.display_filters = this.display_filters;
+      });
+    }
+  };
+
+  updateUserDisplayProperties = async (display_properties: {
+    [EFilterTypes.DISPLAY_PROPERTIES]: TViewDisplayProperties;
+  }) => {
+    try {
+      const { workspaceSlug, projectId } = this.store.app.router;
+      if (!workspaceSlug) return;
+
+      const userView = await this.userService.update(workspaceSlug, display_properties, projectId);
+      if (!userView) return;
+
+      runInAction(() => {
+        this.display_properties = userView.display_properties;
+      });
+    } catch {
+      runInAction(() => {
+        this.display_properties = this.display_properties;
+      });
+    }
+  };
 }