feat: init

apps/space/app/issues/[anchor]/client-layout.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PoweredBy } from "@/components/common/powered-by";
+import { SomethingWentWrongError } from "@/components/issues/issue-layouts/error";
+import { IssuesNavbarRoot } from "@/components/issues/navbar";
+// hooks
+import { usePublish, usePublishList } from "@/hooks/store/publish";
+import { useIssueFilter } from "@/hooks/store/use-issue-filter";
+
+type Props = {
+  children: React.ReactNode;
+  anchor: string;
+};
+
+export const IssuesClientLayout = observer((props: Props) => {
+  const { children, anchor } = props;
+  // store hooks
+  const { fetchPublishSettings } = usePublishList();
+  const publishSettings = usePublish(anchor);
+  const { updateLayoutOptions } = useIssueFilter();
+  // fetch publish settings
+  const { error } = useSWR(
+    anchor ? `PUBLISH_SETTINGS_${anchor}` : null,
+    anchor
+      ? async () => {
+          const response = await fetchPublishSettings(anchor);
+          if (response.view_props) {
+            updateLayoutOptions({
+              list: !!response.view_props.list,
+              kanban: !!response.view_props.kanban,
+              calendar: !!response.view_props.calendar,
+              gantt: !!response.view_props.gantt,
+              spreadsheet: !!response.view_props.spreadsheet,
+            });
+          }
+        }
+      : null
+  );
+
+  if (!publishSettings && !error) {
+    return (
+      <div className="flex items-center justify-center h-screen w-full">
+        <LogoSpinner />
+      </div>
+    );
+  }
+
+  if (error) return <SomethingWentWrongError />;
+
+  return (
+    <>
+      <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
+        <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
+          <IssuesNavbarRoot publishSettings={publishSettings} />
+        </div>
+        <div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
+      </div>
+      <PoweredBy />
+    </>
+  );
+});

apps/space/app/issues/[anchor]/layout.tsx

@@ -0,0 +1,57 @@
+"use server";
+
+import { IssuesClientLayout } from "./client-layout";
+
+type Props = {
+  children: React.ReactNode;
+  params: {
+    anchor: string;
+  };
+};
+
+export async function generateMetadata({ params }: Props) {
+  const { anchor } = params;
+  const DEFAULT_TITLE = "Plane";
+  const DEFAULT_DESCRIPTION = "Made with Plane, an AI-powered work management platform with publishing capabilities.";
+  // Validate anchor before using in request (only allow alphanumeric, -, _)
+  const ANCHOR_REGEX = /^[a-zA-Z0-9_-]+$/;
+  if (!ANCHOR_REGEX.test(anchor)) {
+    return { title: DEFAULT_TITLE, description: DEFAULT_DESCRIPTION };
+  }
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/anchor/${anchor}/meta/`);
+    const data = await response.json();
+    return {
+      title: data?.name || DEFAULT_TITLE,
+      description: data?.description || DEFAULT_DESCRIPTION,
+      openGraph: {
+        title: data?.name || DEFAULT_TITLE,
+        description: data?.description || DEFAULT_DESCRIPTION,
+        type: "website",
+        images: [
+          {
+            url: data?.cover_image,
+            width: 800,
+            height: 600,
+            alt: data?.name || DEFAULT_TITLE,
+          },
+        ],
+      },
+      twitter: {
+        card: "summary_large_image",
+        title: data?.name || DEFAULT_TITLE,
+        description: data?.description || DEFAULT_DESCRIPTION,
+        images: [data?.cover_image],
+      },
+    };
+  } catch {
+    return { title: DEFAULT_TITLE, description: DEFAULT_DESCRIPTION };
+  }
+}
+
+export default async function IssuesLayout(props: Props) {
+  const { children, params } = props;
+  const { anchor } = params;
+
+  return <IssuesClientLayout anchor={anchor}>{children}</IssuesClientLayout>;
+}

apps/space/app/issues/[anchor]/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+import useSWR from "swr";
+// components
+import { IssuesLayoutsRoot } from "@/components/issues/issue-layouts";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useLabel } from "@/hooks/store/use-label";
+import { useStates } from "@/hooks/store/use-state";
+
+type Props = {
+  params: {
+    anchor: string;
+  };
+};
+
+const IssuesPage = observer((props: Props) => {
+  const { params } = props;
+  const { anchor } = params;
+  // params
+  const searchParams = useSearchParams();
+  const peekId = searchParams.get("peekId") || undefined;
+  // store
+  const { fetchStates } = useStates();
+  const { fetchLabels } = useLabel();
+
+  useSWR(anchor ? `PUBLIC_STATES_${anchor}` : null, anchor ? () => fetchStates(anchor) : null);
+  useSWR(anchor ? `PUBLIC_LABELS_${anchor}` : null, anchor ? () => fetchLabels(anchor) : null);
+
+  const publishSettings = usePublish(anchor);
+
+  if (!publishSettings) return null;
+
+  return <IssuesLayoutsRoot peekId={peekId} publishSettings={publishSettings} />;
+});
+
+export default IssuesPage;