Merge branch 'preview' of github.com:makeplane/plane into chore-attachment-icon-revamp

Author: anmolsinghbhatia

.gitignore

@@ -102,3 +102,5 @@ dev-editor
 storybook-static
 
 CLAUDE.md
+
+temp/

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx

@@ -6,6 +6,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel, CYCLE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import type { TCycleFilters } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // components
@@ -15,7 +16,6 @@ import { PageHead } from "@/components/core/page-title";
 import { CycleAppliedFiltersList } from "@/components/cycles/applied-filters";
 import { CyclesView } from "@/components/cycles/cycles-view";
 import { CycleCreateUpdateModal } from "@/components/cycles/modal";
-import { ComicBoxButton } from "@/components/empty-state/comic-box-button";
 import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
 // hooks
@@ -96,22 +96,19 @@ const ProjectCyclesPage = observer(() => {
         />
         {totalCycles === 0 ? (
           <div className="h-full place-items-center">
-            <DetailedEmptyState
-              title={t("project_cycles.empty_state.general.title")}
-              description={t("project_cycles.empty_state.general.description")}
-              assetPath={resolvedPath}
-              customPrimaryButton={
-                <ComicBoxButton
-                  label={t("project_cycles.empty_state.general.primary_button.text")}
-                  title={t("project_cycles.empty_state.general.primary_button.comic.title")}
-                  description={t("project_cycles.empty_state.general.primary_button.comic.description")}
-                  data-ph-element={CYCLE_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON}
-                  onClick={() => {
-                    setCreateModal(true);
-                  }}
-                  disabled={!hasMemberLevelPermission}
-                />
-              }
+            <EmptyStateDetailed
+              assetKey="cycle"
+              title={t("project.cycles.title")}
+              description={t("project.cycles.description")}
+              actions={[
+                {
+                  label: t("project.cycles.cta_primary"),
+                  onClick: () => setCreateModal(true),
+                  variant: "primary",
+                  disabled: !hasMemberLevelPermission,
+                  "data-ph-element": CYCLE_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON,
+                },
+              ]}
             />
           </div>
         ) : (

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx

@@ -7,18 +7,17 @@ import useSWR from "swr";
 import { PROFILE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // component
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { APITokenService } from "@plane/services";
 import { CreateApiTokenModal } from "@/components/api-token/modal/create-token-modal";
 import { ApiTokenListItem } from "@/components/api-token/token-list-item";
 import { PageHead } from "@/components/core/page-title";
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { SettingsHeading } from "@/components/settings/heading";
 import { APITokenSettingsLoader } from "@/components/ui/loader/settings/api-token";
 import { API_TOKENS_LIST } from "@/constants/fetch-keys";
 // store hooks
 import { captureClick } from "@/helpers/event-tracker.helper";
 import { useWorkspace } from "@/hooks/store/use-workspace";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 const apiTokenService = new APITokenService();
 
@@ -30,8 +29,6 @@ const ApiTokensPage = observer(() => {
   const { t } = useTranslation();
   // store hooks
   const { currentWorkspace } = useWorkspace();
-  // derived values
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/api-tokens" });
 
   const { data: tokens } = useSWR(API_TOKENS_LIST, () => apiTokenService.list());
 
@@ -70,7 +67,7 @@ const ApiTokensPage = observer(() => {
             </div>
           </>
         ) : (
-          <div className="flex h-full w-full flex-col">
+          <div className="flex h-full w-full flex-col py-">
             <SettingsHeading
               title={t("account_settings.api_tokens.heading")}
               description={t("account_settings.api_tokens.description")}
@@ -84,24 +81,26 @@ const ApiTokensPage = observer(() => {
                 },
               }}
             />
-            <div className="h-full w-full flex items-center justify-center">
-              <DetailedEmptyState
-                title=""
-                description=""
-                assetPath={resolvedPath}
-                className="w-full !p-0 justify-center mx-auto"
-                size="md"
-                primaryButton={{
-                  text: t("workspace_settings.settings.api_tokens.add_token"),
+
+            <EmptyStateCompact
+              assetKey="token"
+              assetClassName="size-20"
+              title={t("settings.tokens.title")}
+              description={t("settings.tokens.description")}
+              actions={[
+                {
+                  label: t("settings.tokens.cta_primary"),
                   onClick: () => {
                     captureClick({
                       elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_PAT_BUTTON,
                     });
                     setIsCreateTokenModalOpen(true);
                   },
-                }}
-              />
-            </div>
+                },
+              ]}
+              align="start"
+              rootClassName="py-20"
+            />
           </div>
         )}
       </section>

apps/web/ce/store/issue/issue-details/activity.store.ts

@@ -112,10 +112,11 @@ export class IssueActivityStore implements IIssueActivityStore {
     comments.forEach((commentId) => {
       const comment = currentStore.comment.getCommentById(commentId);
       if (!comment) return;
+      const commentTimestamp = comment.edited_at ?? comment.updated_at ?? comment.created_at;
       activityComments.push({
         id: comment.id,
         activity_type: EActivityFilterType.COMMENT,
-        created_at: comment.created_at,
+        created_at: commentTimestamp,
       });
     });
 

apps/web/core/components/analytics/insight-table/data-table.tsx

@@ -14,18 +14,16 @@ import {
   getFacetedRowModel,
   getFacetedUniqueValues,
   getFilteredRowModel,
-  getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
 import { Search, X } from "lucide-react";
 // plane package imports
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
 import { cn } from "@plane/utils";
 // plane web components
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
-import AnalyticsEmptyState from "../empty-state";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -42,7 +40,6 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
   const { t } = useTranslation();
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [isSearchOpen, setIsSearchOpen] = React.useState(false);
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/analytics/empty-table" });
 
   const table = useReactTable({
     data,
@@ -156,14 +153,12 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
             ) : (
               <TableRow>
                 <TableCell colSpan={columns.length} className="p-0">
-                  <div className="flex h-[350px] w-full items-center justify-center border border-custom-border-100 ">
-                    <AnalyticsEmptyState
-                      title={t("workspace_analytics.empty_state.customized_insights.title")}
-                      description={t("workspace_analytics.empty_state.customized_insights.description")}
-                      className="border-0"
-                      assetPath={resolvedPath}
-                    />
-                  </div>
+                  <EmptyStateCompact
+                    assetKey="unknown"
+                    assetClassName="size-20"
+                    rootClassName="border border-custom-border-100 px-5 py-10 md:py-20 md:px-20"
+                    title={t("workspace.analytics_work_items.title")}
+                  />
                 </TableCell>
               </TableRow>
             )}

apps/web/core/components/analytics/overview/project-insights.tsx

@@ -4,15 +4,14 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane package imports
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { TChartData } from "@plane/types";
 // hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
 // services
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { AnalyticsService } from "@/services/analytics.service";
 // plane web components
 import AnalyticsSectionWrapper from "../analytics-section-wrapper";
-import AnalyticsEmptyState from "../empty-state";
 import { ProjectInsightsLoader } from "../loaders";
 
 const RadarChart = dynamic(() =>
@@ -29,7 +28,6 @@ const ProjectInsights = observer(() => {
   const workspaceSlug = params.workspaceSlug.toString();
   const { selectedDuration, selectedDurationLabel, selectedProjects, selectedCycle, selectedModule, isPeekView } =
     useAnalytics();
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/analytics/empty-chart-radar" });
 
   const { data: projectInsightsData, isLoading: isLoadingProjectInsight } = useSWR(
     `radar-chart-project-insights-${workspaceSlug}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}`,
@@ -56,11 +54,11 @@ const ProjectInsights = observer(() => {
       {isLoadingProjectInsight ? (
         <ProjectInsightsLoader />
       ) : projectInsightsData && projectInsightsData?.length == 0 ? (
-        <AnalyticsEmptyState
-          title={t("workspace_analytics.empty_state.project_insights.title")}
-          description={t("workspace_analytics.empty_state.project_insights.description")}
-          className="h-[300px]"
-          assetPath={resolvedPath}
+        <EmptyStateCompact
+          assetKey="unknown"
+          assetClassName="size-20"
+          rootClassName="border border-custom-border-100 px-5 py-10 md:py-20 md:px-20"
+          title={t("workspace.analytics_work_items.title")}
         />
       ) : (
         <div className="gap-8 lg:flex">

apps/web/core/components/analytics/work-items/created-vs-resolved.tsx

@@ -5,16 +5,15 @@ import useSWR from "swr";
 // plane package imports
 import { useTranslation } from "@plane/i18n";
 import { AreaChart } from "@plane/propel/charts/area-chart";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IChartResponse, TChartData } from "@plane/types";
 import { renderFormattedDate } from "@plane/utils";
 // hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
 // services
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { AnalyticsService } from "@/services/analytics.service";
 // plane web components
 import AnalyticsSectionWrapper from "../analytics-section-wrapper";
-import AnalyticsEmptyState from "../empty-state";
 import { ChartLoader } from "../loaders";
 
 const analyticsService = new AnalyticsService();
@@ -31,7 +30,6 @@ const CreatedVsResolved = observer(() => {
   const params = useParams();
   const { t } = useTranslation();
   const workspaceSlug = params.workspaceSlug.toString();
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/analytics/empty-chart-area" });
   const { data: createdVsResolvedData, isLoading: isCreatedVsResolvedLoading } = useSWR(
     `created-vs-resolved-${workspaceSlug}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}-${isEpic}`,
     () =>
@@ -121,11 +119,11 @@ const CreatedVsResolved = observer(() => {
           }}
         />
       ) : (
-        <AnalyticsEmptyState
-          title={t("workspace_analytics.empty_state.created_vs_resolved.title")}
-          description={t("workspace_analytics.empty_state.created_vs_resolved.description")}
-          className="h-[350px]"
-          assetPath={resolvedPath}
+        <EmptyStateCompact
+          assetKey="unknown"
+          assetClassName="size-20"
+          rootClassName="border border-custom-border-100 px-5 py-10 md:py-20 md:px-20"
+          title={t("workspace.analytics_work_items.title")}
         />
       )}
     </AnalyticsSectionWrapper>

apps/web/core/components/analytics/work-items/priority-chart.tsx

@@ -11,15 +11,14 @@ import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, CHART_COLOR_PALETTES,
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { BarChart } from "@plane/propel/charts/bar-chart";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { TBarItem, TChart, TChartDatum, ChartXAxisProperty, ChartYAxisMetric } from "@plane/types";
 // plane web components
 import { generateExtendedColors, parseChartData } from "@/components/chart/utils";
 // hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
 import { useProjectState } from "@/hooks/store/use-project-state";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { AnalyticsService } from "@/services/analytics.service";
-import AnalyticsEmptyState from "../empty-state";
 import { exportCSV } from "../export";
 import { DataTable } from "../insight-table/data-table";
 import { ChartLoader } from "../loaders";
@@ -46,7 +45,6 @@ const analyticsService = new AnalyticsService();
 const PriorityChart = observer((props: Props) => {
   const { x_axis, y_axis, group_by } = props;
   const { t } = useTranslation();
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/analytics/empty-chart-bar" });
   // store hooks
   const { selectedDuration, selectedProjects, selectedCycle, selectedModule, isPeekView, isEpic } = useAnalytics();
   const { workspaceStates } = useProjectState();
@@ -232,11 +230,11 @@ const PriorityChart = observer((props: Props) => {
           />
         </>
       ) : (
-        <AnalyticsEmptyState
-          title={t("workspace_analytics.empty_state.customized_insights.title")}
-          description={t("workspace_analytics.empty_state.customized_insights.description")}
-          className="h-[350px]"
-          assetPath={resolvedPath}
+        <EmptyStateCompact
+          assetKey="unknown"
+          assetClassName="size-20"
+          rootClassName="border border-custom-border-100 px-5 py-10 md:py-20 md:px-20"
+          title={t("workspace.analytics_work_items.title")}
         />
       )}
     </div>

apps/web/core/components/estimates/root.tsx

@@ -5,6 +5,7 @@ import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 // hooks
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { useProjectEstimates } from "@/hooks/store/estimates";
 import { useProject } from "@/hooks/store/use-project";
 // plane web components
@@ -13,7 +14,6 @@ import { UpdateEstimateModal } from "@/plane-web/components/estimates";
 import { SettingsHeading } from "../settings/heading";
 import { CreateEstimateModal } from "./create/modal";
 import { DeleteEstimateModal } from "./delete/modal";
-import { EstimateEmptyScreen } from "./empty-screen";
 import { EstimateDisableSwitch } from "./estimate-disable-switch";
 import { EstimateList } from "./estimate-list";
 import { EstimateLoaderScreen } from "./loader-screen";
@@ -76,7 +76,20 @@ export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
               />
             </div>
           ) : (
-            <EstimateEmptyScreen onButtonClick={() => setIsEstimateCreateModalOpen(true)} />
+            <EmptyStateCompact
+              assetKey="estimate"
+              assetClassName="size-20"
+              title={t("settings.estimates.title")}
+              description={t("settings.estimates.description")}
+              actions={[
+                {
+                  label: t("settings.estimates.cta_primary"),
+                  onClick: () => setIsEstimateCreateModalOpen(true),
+                },
+              ]}
+              align="start"
+              rootClassName="py-20"
+            />
           )}
 
           {/* archived estimates section */}

apps/web/core/components/home/widgets/empty-states/links.tsx

@@ -1,14 +1,15 @@
-import { Link2 } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 
 export const LinksEmptyState = () => {
   const { t } = useTranslation();
   return (
-    <div className="min-h-[110px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
-      <div className="m-auto flex gap-2">
-        <Link2 size={30} className="text-custom-text-400/40 -rotate-45" />
-        <div className="text-custom-text-400 text-sm text-center my-auto">{t("home.quick_links.empty")}</div>
-      </div>
+    <div className="flex items-center justify-center py-10 bg-custom-background-90 w-full">
+      <EmptyStateCompact
+        assetKey="link"
+        assetClassName="w-20 h-20"
+        title={t("workspace.home_widget_quick_links.title")}
+      />
     </div>
   );
 };