chore: language support phase 2

packages/constants/src/event.ts

@@ -0,0 +1 @@
+export const SIDEBAR_CLICKED = "Sidenav clicked";

packages/constants/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./ai";
 export * from "./auth";
 export * from "./endpoints";
+export * from "./event";
 export * from "./file";
 export * from "./instance";
 export * from "./issue";

packages/constants/src/user.ts

@@ -19,3 +19,20 @@ export type TUserStatus = {
   status: EUserStatus | undefined;
   message?: string;
 };
+
+export enum EUserPermissionsLevel {
+  WORKSPACE = "WORKSPACE",
+  PROJECT = "PROJECT",
+}
+
+export enum EUserWorkspaceRoles {
+  ADMIN = 20,
+  MEMBER = 15,
+  GUEST = 5,
+}
+
+export enum EUserProjectRoles {
+  ADMIN = 20,
+  MEMBER = 15,
+  GUEST = 5,
+}

packages/hooks/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./use-local-storage";
 export * from "./use-outside-click-detector";
+export * from "./use-platform-os";

packages/hooks/src/use-platform-os.tsx

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+
+export const usePlatformOS = () => {
+  const [platformData, setPlatformData] = useState({
+    isMobile: false,
+    platform: "",
+  });
+
+  useEffect(() => {
+    const detectPlatform = () => {
+      const userAgent = window.navigator.userAgent;
+      const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+      let platform = "";
+
+      if (!isMobile) {
+        if (userAgent.indexOf("Win") !== -1) {
+          platform = "Windows";
+        } else if (userAgent.indexOf("Mac") !== -1) {
+          platform = "MacOS";
+        } else if (userAgent.indexOf("Linux") !== -1) {
+          platform = "Linux";
+        } else {
+          platform = "Unknown";
+        }
+      }
+
+      setPlatformData({ isMobile, platform });
+    };
+
+    detectPlatform();
+  }, []);
+
+  return platformData;
+};

packages/i18n/src/locales/en/translations.json

@@ -43,6 +43,7 @@
   "activity": "Activity",
   "appearance": "Appearance",
   "notifications": "Notifications",
+  "inbox": "Inbox",
   "workspaces": "Workspaces",
   "create_workspace": "Create workspace",
   "invitations": "Invitations",

packages/i18n/src/locales/es/translations.json

@@ -314,5 +314,6 @@
   "change_parent_issue": "Cambiar problema padre",
   "remove_parent_issue": "Eliminar problema padre",
   "add_parent": "Agregar padre",
-  "loading_members": "Cargando miembros..."
+  "loading_members": "Cargando miembros...",
+  "inbox": "bandeja de entrada"
 }

packages/i18n/src/locales/fr/translations.json

@@ -314,5 +314,6 @@
   "change_parent_issue": "Modifier le problème parent",
   "remove_parent_issue": "Supprimer le problème parent",
   "add_parent": "Ajouter un parent",
-  "loading_members": "Chargement des membres..."
+  "loading_members": "Chargement des membres...",
+  "inbox": "boîte de réception"
 }

packages/i18n/src/locales/ja/translations.json

@@ -314,5 +314,6 @@
   "change_parent_issue": "親問題を変更",
   "remove_parent_issue": "親問題を削除",
   "add_parent": "親問題を追加",
-  "loading_members": "メンバーを読み込んでいます..."
+  "loading_members": "メンバーを読み込んでいます...",
+  "inbox": "受信箱"
 }

web/core/components/workspace/sidebar/index.ts

@@ -6,4 +6,7 @@ export * from "./projects-list";
 export * from "./project-navigation";
 export * from "./quick-actions";
 export * from "./user-menu";
+export * from "./user-menu-item";
 export * from "./workspace-menu";
+export * from "./workspace-menu-item";
+export * from "./workspace-menu-header";

web/core/components/workspace/sidebar/user-menu-item.tsx

@@ -0,0 +1,84 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel, SIDEBAR_CLICKED, EUserWorkspaceRoles } from "@plane/constants";
+import { usePlatformOS } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@plane/ui";
+// components
+import { SidebarNavItem } from "@/components/sidebar";
+import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
+// hooks
+import { useAppTheme, useEventTracker, useUserPermissions } from "@/hooks/store";
+
+export interface SidebarUserMenuItemProps {
+  item: {
+    key: string;
+    href: string;
+    access: EUserWorkspaceRoles[];
+    labelTranslationKey: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Icon: any;
+  };
+  draftIssueCount: number;
+}
+
+export const SidebarUserMenuItem: FC<SidebarUserMenuItemProps> = observer((props) => {
+  const { item, draftIssueCount } = props;
+  // nextjs hooks
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+  // package hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { captureEvent } = useEventTracker();
+  const { allowPermissions } = useUserPermissions();
+  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
+  const { isMobile } = usePlatformOS();
+
+  const isActive = pathname === item.href;
+
+  if (item.key === "drafts" && draftIssueCount === 0) return null;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) return null;
+
+  const handleLinkClick = (itemKey: string) => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+    captureEvent(SIDEBAR_CLICKED, {
+      destination: itemKey,
+    });
+  };
+
+  return (
+    <Tooltip
+      tooltipContent={t(item.labelTranslationKey)}
+      position="right"
+      className="ml-2"
+      disabled={!sidebarCollapsed}
+      isMobile={isMobile}
+    >
+      <Link href={item.href} onClick={() => handleLinkClick(item.key)}>
+        <SidebarNavItem
+          className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
+          isActive={isActive}
+        >
+          <div className="flex items-center gap-1.5 py-[1px]">
+            <item.Icon className="size-4 flex-shrink-0" />
+            {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
+          </div>
+          {item.key === "notifications" && (
+            <NotificationAppSidebarOption
+              workspaceSlug={workspaceSlug.toString()}
+              isSidebarCollapsed={sidebarCollapsed ?? false}
+            />
+          )}
+        </SidebarNavItem>
+      </Link>
+    </Tooltip>
+  );
+});