22339b9786
* chore: init tailwind v4 * chore: update all configs * chore: add source to parse monorepo packages * chore: combine all css files * feat: added extended colors * chore: update typography * chore: update extended color var names * refactor: remove initial spacing variable and update dark mode selector * chore: update css files * chore: update animations * chore: remove spacing tokens * fix: external css files * chore: update tailwind-merge version * chore: update font family * chore: added brief agents.md and story for new design system * chore: enhance design system documentation with rare exceptions for visual separation * chore: add fontsource package for typography * chore: material symbols font added * chore: update shadow default * chore: add stroke and outline theme vars * chore: update ring and fill colors * chore: overwrite tailwind typography tokens * chore: add high contrast mode tokens * chore: update scrollbar colors * chore: backward compatibility for buttons and placeholders * chore: add priority colors * chore: update urgent priority color * chore: update plan colors * chore: add missing utility class * chore: update height and padding classes * chore: update label colors * chore: add missing utlity * chore: add typography plugin to space app * chore: replace existing classNames with new design system tokens #8244 (#8278) * chore: update border colors * chore: update all borders * chore: update text colors * chore: update css variables * chore: update font sizes and weights * chore: update bg colors * chore: sync changes * fix: uncomment spacing-1200 variable in variables.css * chore: update primary colors * refactor: updated border to border-subtle * refactor: update various components and improve UI consistency across the application * updated classnames * updated classnames * refactor: update color-related class names to use new design system variables for consistency * chore: default automations * chore: update text sizes * chore: home and power k * chore: home and power k * chore: replace ui package button components * chore: update text sizes * chore: updated issue identifier (#8275) * refactor: top navigation and sidebar design token (#8276) * chore: update all button components (#8277) * chore: new button component * chore: update existing buttons * chore: overwrite tailwind typography tokens * fix: twMerge config + fixed cn instances * refactor: toast design token updated (#8279) * chore: update existing buttons * chore: tooltip design token updatged (#8280) * chore: moved cn utility to propel (#8281) * chore: update space app UI (#8285) * chore; update space app filters component * fix: button whitespace wrap * chore: space app votes * chore: update dropdown components * refactor: auth, onboarding, sidebar, and common component design token migration (#8291) * chore: checkbox component design token updated * chore: indicator and oauth component design token updated * chore: sidebar design token updated * chore: auth and onboarding design token updated * chore: update divider color * style: update background colors and hover effects across list components * fix: tailwind merge * refactor: toggle switch design token migration and header utility classname added (#8295) * chore: toggle component design token updated * chore: h-header utility class added * chore: updated color tokens for work item detail page (#8296) * chore: update react-day-picker UI * refactor: update button sizes and styles in filters components * refactor: breadcrumbs design token updated (#8297) * chore: update priority icon colors * refactor: updated layout variables * chore: update plan card primary CTA * Chore update editor design system (#8299) * refactor: update styles for callout, color selector, logo selector, and image uploader * refactor:fix image * chore: update settings UI * chore: updated notifications color and size tokens (#8302) * chore: update sm button border radius * fix: logo renderer * chore: icon button component * chore: remove deprecated classes * chore: remove deprecated classes * chore: update editor list spacing * fix: icon button size * chore: improvements (#8309) * chore: update cycles and modules pages * refactor: update background styles across various components to use new design system colors * fix: button type errors * chore: update modals design system (#8310) * refactor: callout bg * refactor: code bg * refactor: modal size and variant --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> * chore: update next-themes * design: update billing and plans component styles and remove unused utility functions (#8313) * refactor: empty state design token migration and improvements (#8315) * fix: profile page * refactor: tabs design token updated (#8316) * chore: updated buttons and tokens for work items (#8317) * fix: adjust trial button spacing in checkout modal * chore: update add button hover state * fix: type error (#8318) * fix: type error * chore: code refactor * refactor: update button sizes and background styles in rich filters components * refactor: update editor bg * refactor: enhance Gantt chart sidebar functionality and styling - Removed unused prop from . - Updated to include new props for better block management and scrolling behavior. - Improved auto-scroll functionality for Gantt chart items. - Adjusted styles in component for consistent design. * regression: gantt design * chore: new badge component * fix: favorite star * chore: update backgroung, typography and button sizes across workspace settings general and members pages * fix: header button sizes * fix: emoji icon logo (#8323) * more fixes * chore: update settings sidebar * refactor: avatar component * chore: updated work item detail sidebar (#8327) * refactor: update link preview * fix: work item property dropdowns * fix: dropdown buttons border radius * chore: update power k translation * chore: updated profile activity design (#8328) * chore: update settings pages * chore: update work item sidebar alignments (#8330) * refactor: admin design system * chore: update page header --------- Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com> Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com> * fix: formatting * reexport types * fix: lint error --------- Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com> Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>
124 lines
4.9 KiB
TypeScript
124 lines
4.9 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import * as Sentry from "@sentry/react-router";
|
|
import Script from "next/script";
|
|
import { Links, Meta, Outlet, Scripts } from "react-router";
|
|
import type { LinksFunction } from "react-router";
|
|
// plane imports
|
|
import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
|
|
import { cn } from "@plane/utils";
|
|
// types
|
|
// assets
|
|
import favicon16 from "@/app/assets/favicon/favicon-16x16.png?url";
|
|
import favicon32 from "@/app/assets/favicon/favicon-32x32.png?url";
|
|
import faviconIco from "@/app/assets/favicon/favicon.ico?url";
|
|
import icon180 from "@/app/assets/icons/icon-180x180.png?url";
|
|
import icon512 from "@/app/assets/icons/icon-512x512.png?url";
|
|
import ogImage from "@/app/assets/og-image.png?url";
|
|
import { LogoSpinner } from "@/components/common/logo-spinner";
|
|
import globalStyles from "@/styles/globals.css?url";
|
|
import type { Route } from "./+types/root";
|
|
// local
|
|
import { CustomErrorComponent } from "./error";
|
|
import { AppProvider } from "./provider";
|
|
|
|
const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
|
|
|
|
export const links: LinksFunction = () => [
|
|
{ rel: "icon", type: "image/png", sizes: "32x32", href: favicon32 },
|
|
{ rel: "icon", type: "image/png", sizes: "16x16", href: favicon16 },
|
|
{ rel: "shortcut icon", href: faviconIco },
|
|
{ rel: "manifest", href: "/site.webmanifest.json" },
|
|
{ rel: "apple-touch-icon", href: icon512 },
|
|
{ rel: "apple-touch-icon", sizes: "180x180", href: icon180 },
|
|
{ rel: "apple-touch-icon", sizes: "512x512", href: icon512 },
|
|
{ rel: "manifest", href: "/manifest.json" },
|
|
{ rel: "stylesheet", href: globalStyles },
|
|
];
|
|
|
|
export function Layout({ children }: { children: ReactNode }) {
|
|
const isSessionRecorderEnabled = parseInt(process.env.VITE_ENABLE_SESSION_RECORDER || "0");
|
|
|
|
return (
|
|
<html lang="en">
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#fff" />
|
|
{/* Meta info for PWA */}
|
|
<meta name="application-name" content="Plane" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<meta name="apple-mobile-web-app-title" content={SITE_NAME} />
|
|
<meta name="format-detection" content="telephone=no" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<Meta />
|
|
<Links />
|
|
</head>
|
|
<body>
|
|
<div id="context-menu-portal" />
|
|
<div id="editor-portal" />
|
|
<AppProvider>
|
|
<div className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "app-container")}>
|
|
<main className="w-full h-full overflow-hidden relative">{children}</main>
|
|
</div>
|
|
</AppProvider>
|
|
<Scripts />
|
|
{!!isSessionRecorderEnabled && process.env.VITE_SESSION_RECORDER_KEY && (
|
|
<Script id="clarity-tracking">
|
|
{`(function(c,l,a,r,i,t,y){
|
|
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
|
|
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
|
|
y=l.getElementsByTagName(r)[0];if(y){y.parentNode.insertBefore(t,y);}
|
|
})(window, document, "clarity", "script", "${process.env.VITE_SESSION_RECORDER_KEY}");`}
|
|
</Script>
|
|
)}
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
export const meta: Route.MetaFunction = () => [
|
|
{ title: APP_TITLE },
|
|
{ name: "description", content: SITE_DESCRIPTION },
|
|
{ property: "og:title", content: APP_TITLE },
|
|
{
|
|
property: "og:description",
|
|
content: "Open-source project management tool to manage work items, cycles, and product roadmaps easily",
|
|
},
|
|
{ property: "og:url", content: "https://app.plane.so/" },
|
|
{ property: "og:image", content: ogImage },
|
|
{ property: "og:image:width", content: "1200" },
|
|
{ property: "og:image:height", content: "630" },
|
|
{ property: "og:image:alt", content: "Plane - Modern project management" },
|
|
{
|
|
name: "keywords",
|
|
content:
|
|
"software development, plan, ship, software, accelerate, code management, release management, project management, work item tracking, agile, scrum, kanban, collaboration",
|
|
},
|
|
{ name: "twitter:site", content: "@planepowers" },
|
|
{ name: "twitter:card", content: "summary_large_image" },
|
|
{ name: "twitter:image", content: ogImage },
|
|
{ name: "twitter:image:width", content: "1200" },
|
|
{ name: "twitter:image:height", content: "630" },
|
|
{ name: "twitter:image:alt", content: "Plane - Modern project management" },
|
|
];
|
|
|
|
export default function Root() {
|
|
return <Outlet />;
|
|
}
|
|
|
|
export function HydrateFallback() {
|
|
return (
|
|
<div className="relative flex h-screen w-full items-center justify-center">
|
|
<LogoSpinner />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
|
if (error) {
|
|
Sentry.captureException(error);
|
|
}
|
|
|
|
return <CustomErrorComponent error={error} />;
|
|
}
|