-
-
-
+
+
+
{environment.type === "DEVELOPMENT" && project.engine === "V2" && (
-
+
+
+
)}
-
+
+
{(user.admin || user.isImpersonating || featureFlags.hasLogsPageAccess) && (
}
+ isCollapsed={isCollapsed}
/>
)}
{(user.admin || user.isImpersonating || featureFlags.hasQueryAccess) && (
}
+ isCollapsed={isCollapsed}
/>
)}
-
- }
- />
-
-
-
+
}
+ isCollapsed={isCollapsed}
/>
{isManagedCloud && (
)}
}
+ isCollapsed={isCollapsed}
/>
-
-
-
-
-
+
+
+
{isFreeUser && (
-
+
+
+
)}
-
+
+
);
@@ -404,11 +553,13 @@ function ProjectSelector({
organization,
organizations,
user,
+ isCollapsed = false,
}: {
project: SideMenuProject;
organization: MatchedOrganization;
organizations: MatchedOrganization[];
user: SideMenuUser;
+ isCollapsed?: boolean;
}) {
const currentPlan = useCurrentPlan();
const [isOrgMenuOpen, setOrgMenuOpen] = useState(false);
@@ -428,21 +579,50 @@ function ProjectSelector({
return (
setOrgMenuOpen(open)} open={isOrgMenuOpen}>
-
-
-
-
-
- {project.name ?? "Select a project"}
-
-
-
+
+
+
+
+
+
+ {project.name ?? "Select a project"}
+
+
+
+
+
+
+
+ }
+ content={`${organization.title} / ${project.name ?? "Select a project"}`}
+ side="right"
+ sideOffset={8}
+ hidden={!isCollapsed}
+ buttonClassName="!h-8"
+ asChild
+ disableHoverableContent
+ />
@@ -661,12 +841,187 @@ function SelectorDivider() {
);
}
-function HelpAndAI() {
+/** Helper component that fades out but preserves width (collapses to 0 width) */
+function CollapsibleElement({
+ isCollapsed,
+ children,
+ className,
+}: {
+ isCollapsed: boolean;
+ children: ReactNode;
+ className?: string;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+/** Helper component that fades out and collapses height completely */
+function CollapsibleHeight({
+ isCollapsed,
+ children,
+ className,
+}: {
+ isCollapsed: boolean;
+ children: ReactNode;
+ className?: string;
+}) {
+ return (
+
+ );
+}
+
+function HelpAndAI({ isCollapsed }: { isCollapsed: boolean }) {
return (
- <>
-
-
-
-
+
+
+
+ );
+}
+
+function AnimatedChevron({
+ isHovering,
+ isCollapsed,
+}: {
+ isHovering: boolean;
+ isCollapsed: boolean;
+}) {
+ // When hovering and expanded: left chevron (pointing left to collapse)
+ // When hovering and collapsed: right chevron (pointing right to expand)
+ // When not hovering: straight vertical line
+
+ const getRotation = () => {
+ if (!isHovering) return { top: 0, bottom: 0 };
+ if (isCollapsed) {
+ // Right chevron
+ return { top: -17, bottom: 17 };
+ } else {
+ // Left chevron
+ return { top: 17, bottom: -17 };
+ }
+ };
+
+ const { top, bottom } = getRotation();
+
+ // Calculate horizontal offset to keep chevron centered when rotated
+ // Left chevron: translate left (-1.5px)
+ // Right chevron: translate right (+1.5px)
+ const getTranslateX = () => {
+ if (!isHovering) return 0;
+ return isCollapsed ? 1.5 : -1.5;
+ };
+
+ return (
+
+ {/* Top segment */}
+
+ {/* Bottom segment */}
+
+
+ );
+}
+
+function CollapseToggle({
+ isCollapsed,
+ onToggle,
+}: {
+ isCollapsed: boolean;
+ onToggle: () => void;
+}) {
+ const [isHovering, setIsHovering] = useState(false);
+
+ return (
+
+ {/* Vertical line to mask the side menu border */}
+
+
+
+
+
+
+
+ {isCollapsed ? "Expand" : "Collapse"}
+
+
+
+
+
+
+
+
-
{title}
+
+
+ {visiblePart}
+ {fadingPart && (
+
+ {fadingPart}
+
+ )}
+
{children !== undefined ? (
setHeaderMenuOpen(open)} open={isHeaderMenuOpen}>
@@ -27,6 +64,6 @@ export function SideMenuHeader({ title, children }: { title: string; children?:
) : null}
-
- {name}
-
{badge !== undefined && badge}
-
-
-
{title}
+
+ {/* Header container - stays in DOM to preserve height */}
+
+ {/* Header - fades out when sidebar is collapsed */}
-
+ {title}
+
+
+
+ {/* Divider - absolutely positioned, visible when sidebar is collapsed but section is expanded */}
+
) {
const ref = React.useRef(null);
useShortcutKeys.useShortcutKeys({
@@ -176,14 +178,14 @@ function PopoverSideMenuTrigger({
{...props}
ref={ref}
className={cn(
- "flex h-[1.8rem] shrink-0 select-none items-center gap-x-1.5 rounded-sm bg-transparent px-[0.4rem] text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
- shortcut ? "justify-between" : "",
+ "flex h-[1.8rem] shrink-0 select-none items-center rounded-sm bg-transparent pl-[0.4rem] pr-2.5 text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
+ shortcut && !hideShortcutKey ? "justify-between gap-x-1.5" : "",
className
)}
>
{children}
- {shortcut && (
-
+ {shortcut && !hideShortcutKey && (
+
)}
);
diff --git a/apps/webapp/app/hooks/useUser.ts b/apps/webapp/app/hooks/useUser.ts
index e31455cf92..fd9938fdb9 100644
--- a/apps/webapp/app/hooks/useUser.ts
+++ b/apps/webapp/app/hooks/useUser.ts
@@ -1,10 +1,12 @@
-import { UIMatch } from "@remix-run/react";
-import type { User } from "~/models/user.server";
-import { loader } from "~/root";
+import { type UIMatch } from "@remix-run/react";
+import type { UserWithDashboardPreferences } from "~/models/user.server";
+import { type loader } from "~/root";
import { useChanged } from "./useChanged";
import { useTypedMatchesData } from "./useTypedMatchData";
import { useIsImpersonating } from "./useOrganizations";
+export type User = UserWithDashboardPreferences;
+
export function useOptionalUser(matches?: UIMatch[]): User | undefined {
const routeMatch = useTypedMatchesData({
id: "root",
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx
index aea6b345ee..3f4be602aa 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx
@@ -19,7 +19,7 @@ export default function Project() {
return (
<>
-
+
();
const fetchIncidents = useCallback(() => {
@@ -36,36 +34,50 @@ export function IncidentStatusPanel() {
}, [fetcher]);
useEffect(() => {
+ if (!isManagedCloud) return;
+
fetchIncidents();
const interval = setInterval(fetchIncidents, 60 * 1000); // 1 minute
return () => clearInterval(interval);
- }, []);
+ }, [isManagedCloud, fetchIncidents]);
const operational = fetcher.data?.operational ?? true;
+ if (!isManagedCloud || operational) {
+ return null;
+ }
+
return (
- <>
- {!operational && (
+
+
+ {/* Expanded panel - animated height and opacity */}
+ {/* Header */}
+
+ {/* Description */}
Our team is working on resolving the issue. Check our status page for more
information.
+
+ {/* Button */}
- )}
-
+
+ {/* Collapsed button - animated height and opacity */}
+
+
+
+
+ }
+ content="Active incident"
+ side="right"
+ sideOffset={8}
+ disableHoverableContent
+ asChild
+ />
+
+
+
+
+
+ Active incident
+
+
+
+ Our team is working on resolving the issue. Check our status page for more information.
+
+
+ View status page
+
+