fix(web): improve navigation UI/UX across the application

[mkumbobeaty]

Overview

This PR refactors the navigation to provide a more consistent and intuitive user experience across the application as required by the reearth-ecosystem.

What I've done

What I haven't done

How I tested

Which point I want you to review particularly

Memo

Checklist

• Verified backward compatibility related to feature modifications (if not compatible, reported deployment notes to the next release owner).
• Confirmed backward compatibility for migrations.
• Verified that no personally identifiable information (PII) is included in any values that may be displayed.
• Verified that all relevant documentation has been created or updated.

[github-actions]

🚀 Cloud Run Preview Deployed

🔗 Click here to open the preview in a new tab

[Copilot]

Pull request overview

This PR fixes/normalizes several UI translation keys (notably around project “Description/About” wording) and refactors the workspace/account/project menus by introducing header/footer-capable popup menu items, new icons, and a shared user profile component used in both the Navbar and Dashboard sidebar.

Changes:

• Added new popup menu capabilities (group headers, footer section, right-aligned icons, per-item coloring) and updated tests accordingly.
• Refactored profile/workspace/account menus (new UserProfile, useAvatarMenuItems, updated useWorkspaceManagementMenu) and introduced external management URL feature flags.
• Centralized project creation modal visibility into global state and reused CreateProjectModal across Dashboard and Navbar.

Reviewed changes

Copilot reviewed 30 out of 32 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
web/src/services/state/index.ts	Adds global atom/hook for create-project modal visibility.
web/src/services/i18n/translations/ja.yml	Reorganizes/adds translation keys for new/updated UI labels.
web/src/services/i18n/translations/en.yml	Reorganizes/adds translation keys (English values intentionally empty).
web/src/services/config/appFeatureConfig.ts	Adds feature flags for external members/workspace-creation URLs.
web/src/ee/featureConfig.ts	Supplies EE external URL templates for new flags.
web/src/app/ui/components/Sidebar/index.tsx	Introduces SidebarTopSection layout wrapper.
web/src/app/lib/reearth-ui/components/PopupMenu/index.tsx	Extends PopupMenu item model (headers/footers/right icons/colors) and rendering.
web/src/app/lib/reearth-ui/components/PopupMenu/index.test.tsx	Updates tests for the new PopupMenu behavior (headers/footers).
web/src/app/lib/reearth-ui/components/Icon/Icons/DotsNineVertical.svg	Adds new icon asset.
web/src/app/lib/reearth-ui/components/Icon/Icons/ArrowExternalLink.svg	Adds new icon asset.
web/src/app/lib/reearth-ui/components/Icon/icons.ts	Registers the new icons in the icon map.
web/src/app/hooks/useWorkspaceManagementMenu.ts	Refactors workspace menu and adds account menu items + documentation link.
web/src/app/hooks/useWorkspaceManagementMenu.test.tsx	Updates tests to match the new workspace menu behavior.
web/src/app/hooks/useAvatarMenuItems.tsx	New hook to build avatar popup menu items (user info, account settings, logout).
web/src/app/features/UserProfile/index.tsx	New shared profile/workspace switcher component used by Navbar and Dashboard sidebar.
web/src/app/features/ProjectSettings/innerPages/GeneralSettings/index.tsx	Changes label from Description to About.
web/src/app/features/Navbar/types.ts	Tightens workspace typing and adds NavbarProject type; renames Project to CurrentProject.
web/src/app/features/Navbar/LeftSection/Profile/index.tsx	Removes old Navbar profile component (replaced by shared UserProfile).
web/src/app/features/Navbar/LeftSection/index.tsx	Adds avatar popup menu, project switch submenu, and wires in project creator trigger.
web/src/app/features/Navbar/index.tsx	Switches from workspace modal rendering to create-project modal rendering.
web/src/app/features/Navbar/hooks.ts	Adds useProjects/useMe data and wires create-project modal state into Navbar.
web/src/app/features/Dashboard/LeftSidePanel/Profile.tsx	Removes old dashboard sidebar profile component (replaced by shared UserProfile).
web/src/app/features/Dashboard/LeftSidePanel/LogoWrapper.tsx	Adjusts logo wrapper styling (padding/minHeight removed).
web/src/app/features/Dashboard/LeftSidePanel/index.tsx	Adds top section layout + avatar wrapper; uses shared UserProfile.
web/src/app/features/Dashboard/LeftSidePanel/Avatar.tsx	New avatar button + popup menu wrapper for dashboard sidebar.
web/src/app/features/Dashboard/index.tsx	Passes userInfo into sidebar (Dashboard still mounts AddWorkspaceModal).
web/src/app/features/Dashboard/hooks.ts	Exposes userInfo from hooks.
web/src/app/features/Dashboard/ContentsContainer/Projects/index.tsx	Replaces local project creator modal with shared CreateProjectModal.
web/src/app/features/Dashboard/ContentsContainer/Projects/hooks.ts	Uses global create-project modal atom; removes inline createProject handler.
web/src/app/features/CreateProjectModal/ProjectCreatorModal.tsx	Updates imports and Description → About, and 200 → 500 character hint.
web/src/app/features/CreateProjectModal/index.tsx	New wrapper component that connects modal to mutations + global modal state.
e2e/pages/dashBoardPage.ts	Updates E2E locators for changed menu structure and avatar-based logout.

Comments suppressed due to low confidence (1)

web/src/app/lib/reearth-ui/components/PopupMenu/index.tsx:126

• renderItem uses the array index as the React key (key={index}), which can cause incorrect UI updates if items are reordered/inserted/removed. Since items already have stable id, using it as the key avoids these issues.

      <Item
        hasBorderBottom={!!hasBorderBottom}
        key={index}
        size={size}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.