feat: init

apps/space/core/components/account/auth-forms/auth-banner.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import type { FC } from "react";
+import { Info, X } from "lucide-react";
+// helpers
+import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
+
+type TAuthBanner = {
+  bannerData: TAuthErrorInfo | undefined;
+  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
+};
+
+export const AuthBanner: FC<TAuthBanner> = (props) => {
+  const { bannerData, handleBannerData } = props;
+
+  if (!bannerData) return <></>;
+  return (
+    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
+      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+        <Info size={16} className="text-custom-primary-100" />
+      </div>
+      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
+      <div
+        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        onClick={() => handleBannerData && handleBannerData(undefined)}
+      >
+        <X className="w-4 h-4 flex-shrink-0" />
+      </div>
+    </div>
+  );
+};

apps/space/core/components/account/auth-forms/auth-header.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import type { FC } from "react";
+// helpers
+import { EAuthModes } from "@/types/auth";
+
+type TAuthHeader = {
+  authMode: EAuthModes;
+};
+
+type TAuthHeaderContent = {
+  header: string;
+  subHeader: string;
+};
+
+type TAuthHeaderDetails = {
+  [mode in EAuthModes]: TAuthHeaderContent;
+};
+
+const Titles: TAuthHeaderDetails = {
+  [EAuthModes.SIGN_IN]: {
+    header: "Sign in to upvote or comment",
+    subHeader: "Contribute in nudging the features you want to get built.",
+  },
+  [EAuthModes.SIGN_UP]: {
+    header: "View, comment, and do more",
+    subHeader: "Sign up or log in to work with Plane work items and Pages.",
+  },
+};
+
+export const AuthHeader: FC<TAuthHeader> = (props) => {
+  const { authMode } = props;
+
+  const getHeaderSubHeader = (mode: EAuthModes | null): TAuthHeaderContent => {
+    if (mode) {
+      return Titles[mode];
+    }
+
+    return {
+      header: "Comment or react to work items",
+      subHeader: "Use plane to add your valuable inputs to features.",
+    };
+  };
+
+  const { header, subHeader } = getHeaderSubHeader(authMode);
+
+  return (
+    <>
+      <div className="flex flex-col gap-1">
+        <span className="text-2xl font-semibold text-custom-text-100 leading-7">{header}</span>
+        <span className="text-2xl font-semibold text-custom-text-400 leading-7">{subHeader}</span>
+      </div>
+    </>
+  );
+};

apps/space/core/components/account/auth-forms/auth-root.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import type { FC } from "react";
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { SitesAuthService } from "@plane/services";
+import type { IEmailCheckData } from "@plane/types";
+import { OAuthOptions } from "@plane/ui";
+// components
+// helpers
+import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
+import { EErrorAlertType, authErrorHandler, EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+// types
+import { EAuthModes, EAuthSteps } from "@/types/auth";
+// assets
+import GithubLightLogo from "/public/logos/github-black.png";
+import GithubDarkLogo from "/public/logos/github-dark.svg";
+import GitlabLogo from "/public/logos/gitlab-logo.svg";
+import GoogleLogo from "/public/logos/google-logo.svg";
+// local imports
+import { TermsAndConditions } from "../terms-and-conditions";
+import { AuthBanner } from "./auth-banner";
+import { AuthHeader } from "./auth-header";
+import { AuthEmailForm } from "./email";
+import { AuthPasswordForm } from "./password";
+import { AuthUniqueCodeForm } from "./unique-code";
+
+const authService = new SitesAuthService();
+
+export const AuthRoot: FC = observer(() => {
+  // router params
+  const searchParams = useSearchParams();
+  const emailParam = searchParams.get("email") || undefined;
+  const error_code = searchParams.get("error_code") || undefined;
+  const nextPath = searchParams.get("next_path") || undefined;
+  const next_path = searchParams.get("next_path");
+  // states
+  const [authMode, setAuthMode] = useState<EAuthModes>(EAuthModes.SIGN_UP);
+  const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
+  const [email, setEmail] = useState(emailParam ? emailParam.toString() : "");
+  const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
+  const [isPasswordAutoset, setIsPasswordAutoset] = useState(true);
+  // hooks
+  const { resolvedTheme } = useTheme();
+  const { config } = useInstance();
+
+  useEffect(() => {
+    if (error_code) {
+      const errorhandler = authErrorHandler(error_code?.toString() as EAuthenticationErrorCodes);
+      if (errorhandler) {
+        if (errorhandler.code === EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_IN) {
+          setAuthMode(EAuthModes.SIGN_IN);
+          setAuthStep(EAuthSteps.PASSWORD);
+        }
+        if (errorhandler.code === EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_UP) {
+          setAuthMode(EAuthModes.SIGN_UP);
+          setAuthStep(EAuthSteps.PASSWORD);
+        }
+        if (
+          [
+            EAuthenticationErrorCodes.INVALID_MAGIC_CODE_SIGN_IN,
+            EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_IN,
+            EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN,
+          ].includes(errorhandler.code)
+        ) {
+          setAuthMode(EAuthModes.SIGN_IN);
+          setAuthStep(EAuthSteps.UNIQUE_CODE);
+        }
+        if (
+          [
+            EAuthenticationErrorCodes.INVALID_MAGIC_CODE_SIGN_UP,
+            EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_UP,
+            EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP,
+          ].includes(errorhandler.code)
+        ) {
+          setAuthMode(EAuthModes.SIGN_UP);
+          setAuthStep(EAuthSteps.UNIQUE_CODE);
+        }
+        setErrorInfo(errorhandler);
+      }
+    }
+  }, [error_code]);
+
+  const isSMTPConfigured = config?.is_smtp_configured || false;
+  const isMagicLoginEnabled = config?.is_magic_login_enabled || false;
+  const isEmailPasswordEnabled = config?.is_email_password_enabled || false;
+  const isOAuthEnabled =
+    (config && (config?.is_google_enabled || config?.is_github_enabled || config?.is_gitlab_enabled)) || false;
+
+  // submit handler- email verification
+  const handleEmailVerification = async (data: IEmailCheckData) => {
+    setEmail(data.email);
+
+    await authService
+      .emailCheck(data)
+      .then(async (response) => {
+        let currentAuthMode: EAuthModes = response.existing ? EAuthModes.SIGN_IN : EAuthModes.SIGN_UP;
+        if (response.existing) {
+          currentAuthMode = EAuthModes.SIGN_IN;
+          setAuthMode(() => EAuthModes.SIGN_IN);
+        } else {
+          currentAuthMode = EAuthModes.SIGN_UP;
+          setAuthMode(() => EAuthModes.SIGN_UP);
+        }
+
+        if (currentAuthMode === EAuthModes.SIGN_IN) {
+          if (response.is_password_autoset && isSMTPConfigured && isMagicLoginEnabled) {
+            setAuthStep(EAuthSteps.UNIQUE_CODE);
+            generateEmailUniqueCode(data.email);
+          } else if (isEmailPasswordEnabled) {
+            setIsPasswordAutoset(false);
+            setAuthStep(EAuthSteps.PASSWORD);
+          } else {
+            const errorhandler = authErrorHandler("5005" as EAuthenticationErrorCodes);
+            setErrorInfo(errorhandler);
+          }
+        } else {
+          if (isSMTPConfigured && isMagicLoginEnabled) {
+            setAuthStep(EAuthSteps.UNIQUE_CODE);
+            generateEmailUniqueCode(data.email);
+          } else if (isEmailPasswordEnabled) {
+            setAuthStep(EAuthSteps.PASSWORD);
+          } else {
+            const errorhandler = authErrorHandler("5006" as EAuthenticationErrorCodes);
+            setErrorInfo(errorhandler);
+          }
+        }
+      })
+      .catch((error) => {
+        const errorhandler = authErrorHandler(error?.error_code?.toString(), data?.email || undefined);
+        if (errorhandler?.type) setErrorInfo(errorhandler);
+      });
+  };
+
+  // generating the unique code
+  const generateEmailUniqueCode = async (email: string): Promise<{ code: string } | undefined> => {
+    const payload = { email: email };
+    return await authService
+      .generateUniqueCode(payload)
+      .then(() => ({ code: "" }))
+      .catch((error) => {
+        const errorhandler = authErrorHandler(error?.error_code.toString());
+        if (errorhandler?.type) setErrorInfo(errorhandler);
+        throw error;
+      });
+  };
+
+  const content = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in";
+
+  const OAuthConfig = [
+    {
+      id: "google",
+      text: `${content} with Google`,
+      icon: <Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_google_enabled,
+    },
+    {
+      id: "github",
+      text: `${content} with GitHub`,
+      icon: (
+        <Image
+          src={resolvedTheme === "dark" ? GithubLightLogo : GithubDarkLogo}
+          height={18}
+          width={18}
+          alt="GitHub Logo"
+        />
+      ),
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_github_enabled,
+    },
+    {
+      id: "gitlab",
+      text: `${content} with GitLab`,
+      icon: <Image src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_gitlab_enabled,
+    },
+  ];
+
+  return (
+    <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+      <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+        {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
+          <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
+        )}
+        <AuthHeader authMode={authMode} />
+        {isOAuthEnabled && <OAuthOptions options={OAuthConfig} compact={authStep === EAuthSteps.PASSWORD} />}
+
+        {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
+        {authStep === EAuthSteps.UNIQUE_CODE && (
+          <AuthUniqueCodeForm
+            mode={authMode}
+            email={email}
+            nextPath={nextPath}
+            handleEmailClear={() => {
+              setEmail("");
+              setAuthStep(EAuthSteps.EMAIL);
+            }}
+            generateEmailUniqueCode={generateEmailUniqueCode}
+          />
+        )}
+        {authStep === EAuthSteps.PASSWORD && (
+          <AuthPasswordForm
+            mode={authMode}
+            isPasswordAutoset={isPasswordAutoset}
+            isSMTPConfigured={isSMTPConfigured}
+            email={email}
+            nextPath={nextPath}
+            handleEmailClear={() => {
+              setEmail("");
+              setAuthStep(EAuthSteps.EMAIL);
+            }}
+            handleAuthStep={(step: EAuthSteps) => {
+              if (step === EAuthSteps.UNIQUE_CODE) generateEmailUniqueCode(email);
+              setAuthStep(step);
+            }}
+          />
+        )}
+        <TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP ? true : false} />
+      </div>
+    </div>
+  );
+});

apps/space/core/components/account/auth-forms/email.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import type { FC, FormEvent } from "react";
+import { useMemo, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// icons
+import { CircleAlert, XCircle } from "lucide-react";
+// types
+import { Button } from "@plane/propel/button";
+import type { IEmailCheckData } from "@plane/types";
+// ui
+import { Input, Spinner } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+import { checkEmailValidity } from "@/helpers/string.helper";
+
+type TAuthEmailForm = {
+  defaultEmail: string;
+  onSubmit: (data: IEmailCheckData) => Promise<void>;
+};
+
+export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
+  const { onSubmit, defaultEmail } = props;
+  // states
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [email, setEmail] = useState(defaultEmail);
+
+  const emailError = useMemo(
+    () => (email && !checkEmailValidity(email) ? { email: "Email is invalid" } : undefined),
+    [email]
+  );
+
+  const handleFormSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsSubmitting(true);
+    const payload: IEmailCheckData = {
+      email: email,
+    };
+    await onSubmit(payload);
+    setIsSubmitting(false);
+  };
+
+  const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
+
+  const [isFocused, setIsFocused] = useState(true);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
+      <div className="space-y-1">
+        <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+          Email
+        </label>
+        <div
+          className={cn(
+            `relative flex items-center rounded-md bg-custom-background-100 border`,
+            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-custom-border-100`
+          )}
+          onFocus={() => {
+            setIsFocused(true);
+          }}
+          onBlur={() => {
+            setIsFocused(false);
+          }}
+        >
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="name@company.com"
+            className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
+            autoComplete="on"
+            autoFocus
+            ref={inputRef}
+          />
+          {email.length > 0 && (
+            <button
+              type="button"
+              aria-label="Clear email"
+              onClick={() => {
+                setEmail("");
+                inputRef.current?.focus();
+              }}
+              tabIndex={-1}
+            >
+              <XCircle className="h-10 w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-xs" />
+            </button>
+          )}
+        </div>
+        {emailError?.email && !isFocused && (
+          <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
+            <CircleAlert height={12} width={12} />
+            {emailError.email}
+          </p>
+        )}
+      </div>
+      <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+        {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+      </Button>
+    </form>
+  );
+});

apps/space/core/components/account/auth-forms/index.ts

@@ -0,0 +1 @@
+export * from "./auth-root";

apps/space/core/components/account/auth-forms/password.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { Eye, EyeOff, XCircle } from "lucide-react";
+// plane imports
+import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { AuthService } from "@plane/services";
+import { Input, Spinner, PasswordStrengthIndicator } from "@plane/ui";
+import { getPasswordStrength } from "@plane/utils";
+// types
+import { EAuthModes, EAuthSteps } from "@/types/auth";
+
+type Props = {
+  email: string;
+  isPasswordAutoset: boolean;
+  isSMTPConfigured: boolean;
+  mode: EAuthModes;
+  nextPath: string | undefined;
+  handleEmailClear: () => void;
+  handleAuthStep: (step: EAuthSteps) => void;
+};
+
+type TPasswordFormValues = {
+  email: string;
+  password: string;
+  confirm_password?: string;
+};
+
+const defaultValues: TPasswordFormValues = {
+  email: "",
+  password: "",
+};
+
+const authService = new AuthService();
+
+export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
+  const { email, nextPath, isSMTPConfigured, handleAuthStep, handleEmailClear, mode } = props;
+  // ref
+  const formRef = useRef<HTMLFormElement>(null);
+  // states
+  const [csrfPromise, setCsrfPromise] = useState<Promise<{ csrf_token: string }> | undefined>(undefined);
+  const [passwordFormData, setPasswordFormData] = useState<TPasswordFormValues>({ ...defaultValues, email });
+  const [showPassword, setShowPassword] = useState({
+    password: false,
+    retypePassword: false,
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
+
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
+  const handleFormChange = (key: keyof TPasswordFormValues, value: string) =>
+    setPasswordFormData((prev) => ({ ...prev, [key]: value }));
+
+  useEffect(() => {
+    if (csrfPromise === undefined) {
+      const promise = authService.requestCSRFToken();
+      setCsrfPromise(promise);
+    }
+  }, [csrfPromise]);
+
+  const redirectToUniqueCodeSignIn = async () => {
+    handleAuthStep(EAuthSteps.UNIQUE_CODE);
+  };
+
+  const passwordSupport = passwordFormData.password.length > 0 &&
+    mode === EAuthModes.SIGN_UP &&
+    getPasswordStrength(passwordFormData.password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
+      <PasswordStrengthIndicator password={passwordFormData.password} isFocused={isPasswordInputFocused} />
+    );
+
+  const isButtonDisabled = useMemo(
+    () =>
+      !isSubmitting &&
+      !!passwordFormData.password &&
+      (mode === EAuthModes.SIGN_UP
+        ? getPasswordStrength(passwordFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
+          passwordFormData.password === passwordFormData.confirm_password
+        : true)
+        ? false
+        : true,
+    [isSubmitting, mode, passwordFormData.confirm_password, passwordFormData.password]
+  );
+
+  const password = passwordFormData.password ?? "";
+  const confirmPassword = passwordFormData.confirm_password ?? "";
+  const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
+
+  const handleCSRFToken = async () => {
+    if (!formRef || !formRef.current) return;
+    const token = await csrfPromise;
+    if (!token?.csrf_token) return;
+    const csrfElement = formRef.current.querySelector("input[name=csrfmiddlewaretoken]");
+    csrfElement?.setAttribute("value", token?.csrf_token);
+  };
+
+  return (
+    <form
+      ref={formRef}
+      className="mt-5 space-y-4"
+      method="POST"
+      action={`${API_BASE_URL}/auth/spaces/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
+      onSubmit={async (event) => {
+        event.preventDefault();
+        await handleCSRFToken();
+        if (formRef.current) {
+          formRef.current.submit();
+        }
+        setIsSubmitting(true);
+      }}
+      onError={() => setIsSubmitting(false)}
+    >
+      <input type="hidden" name="csrfmiddlewaretoken" />
+      <input type="hidden" value={passwordFormData.email} name="email" />
+      <input type="hidden" value={nextPath} name="next_path" />
+      <div className="space-y-1">
+        <label className="text-sm font-medium text-custom-text-300" htmlFor="email">
+          Email
+        </label>
+        <div
+          className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-100`}
+        >
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            value={passwordFormData.email}
+            onChange={(e) => handleFormChange("email", e.target.value)}
+            placeholder="name@company.com"
+            className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 border-0`}
+            disabled
+          />
+          {passwordFormData.email.length > 0 && (
+            <XCircle
+              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              onClick={handleEmailClear}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+          {mode === EAuthModes.SIGN_IN ? "Password" : "Set a password"}
+        </label>
+        <div className="relative flex items-center rounded-md bg-custom-background-100">
+          <Input
+            type={showPassword?.password ? "text" : "password"}
+            name="password"
+            value={passwordFormData.password}
+            onChange={(e) => handleFormChange("password", e.target.value)}
+            placeholder="Enter password"
+            className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+            onFocus={() => setIsPasswordInputFocused(true)}
+            onBlur={() => setIsPasswordInputFocused(false)}
+            autoComplete="on"
+            autoFocus
+          />
+          {showPassword?.password ? (
+            <EyeOff
+              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              onClick={() => handleShowPassword("password")}
+            />
+          ) : (
+            <Eye
+              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              onClick={() => handleShowPassword("password")}
+            />
+          )}
+        </div>
+        {passwordSupport}
+      </div>
+
+      {mode === EAuthModes.SIGN_UP && (
+        <div className="space-y-1">
+          <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
+            Confirm password
+          </label>
+          <div className="relative flex items-center rounded-md bg-custom-background-100">
+            <Input
+              type={showPassword?.retypePassword ? "text" : "password"}
+              name="confirm_password"
+              value={passwordFormData.confirm_password}
+              onChange={(e) => handleFormChange("confirm_password", e.target.value)}
+              placeholder="Confirm password"
+              className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+              onFocus={() => setIsRetryPasswordInputFocused(true)}
+              onBlur={() => setIsRetryPasswordInputFocused(false)}
+            />
+            {showPassword?.retypePassword ? (
+              <EyeOff
+                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                onClick={() => handleShowPassword("retypePassword")}
+              />
+            ) : (
+              <Eye
+                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                onClick={() => handleShowPassword("retypePassword")}
+              />
+            )}
+          </div>
+          {!!passwordFormData.confirm_password &&
+            passwordFormData.password !== passwordFormData.confirm_password &&
+            renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+        </div>
+      )}
+
+      <div className="space-y-2.5">
+        {mode === EAuthModes.SIGN_IN ? (
+          <>
+            <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+              {isSubmitting ? (
+                <Spinner height="20px" width="20px" />
+              ) : isSMTPConfigured ? (
+                "Continue"
+              ) : (
+                "Go to workspace"
+              )}
+            </Button>
+            {isSMTPConfigured && (
+              <Button
+                type="button"
+                onClick={redirectToUniqueCodeSignIn}
+                variant="outline-primary"
+                className="w-full"
+                size="lg"
+              >
+                Sign in with unique code
+              </Button>
+            )}
+          </>
+        ) : (
+          <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+            {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+});

apps/space/core/components/account/auth-forms/unique-code.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { CircleCheck, XCircle } from "lucide-react";
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { AuthService } from "@plane/services";
+import { Input, Spinner } from "@plane/ui";
+// hooks
+import useTimer from "@/hooks/use-timer";
+// types
+import { EAuthModes } from "@/types/auth";
+
+// services
+const authService = new AuthService();
+
+type TAuthUniqueCodeForm = {
+  mode: EAuthModes;
+  email: string;
+  nextPath: string | undefined;
+  handleEmailClear: () => void;
+  generateEmailUniqueCode: (email: string) => Promise<{ code: string } | undefined>;
+};
+
+type TUniqueCodeFormValues = {
+  email: string;
+  code: string;
+};
+
+const defaultValues: TUniqueCodeFormValues = {
+  email: "",
+  code: "",
+};
+
+export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
+  const { mode, email, nextPath, handleEmailClear, generateEmailUniqueCode } = props;
+  // derived values
+  const defaultResetTimerValue = 5;
+  // states
+  const [uniqueCodeFormData, setUniqueCodeFormData] = useState<TUniqueCodeFormValues>({ ...defaultValues, email });
+  const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  // timer
+  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
+
+  const handleFormChange = (key: keyof TUniqueCodeFormValues, value: string) =>
+    setUniqueCodeFormData((prev) => ({ ...prev, [key]: value }));
+
+  const generateNewCode = async (email: string) => {
+    try {
+      setIsRequestingNewCode(true);
+      const uniqueCode = await generateEmailUniqueCode(email);
+      setResendCodeTimer(defaultResetTimerValue);
+      handleFormChange("code", uniqueCode?.code || "");
+      setIsRequestingNewCode(false);
+    } catch {
+      setResendCodeTimer(0);
+      console.error("Error while requesting new code");
+      setIsRequestingNewCode(false);
+    }
+  };
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
+  const isButtonDisabled = isRequestingNewCode || !uniqueCodeFormData.code || isSubmitting;
+
+  return (
+    <form
+      className="mt-5 space-y-4"
+      method="POST"
+      action={`${API_BASE_URL}/auth/spaces/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
+      onSubmit={() => setIsSubmitting(true)}
+      onError={() => setIsSubmitting(false)}
+    >
+      <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+      <input type="hidden" value={uniqueCodeFormData.email} name="email" />
+      <input type="hidden" value={nextPath} name="next_path" />
+      <div className="space-y-1">
+        <label className="text-sm font-medium text-custom-text-300" htmlFor="email">
+          Email
+        </label>
+        <div
+          className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-100`}
+        >
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            value={uniqueCodeFormData.email}
+            onChange={(e) => handleFormChange("email", e.target.value)}
+            placeholder="name@company.com"
+            className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 border-0`}
+            disabled
+          />
+          {uniqueCodeFormData.email.length > 0 && (
+            <XCircle
+              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              onClick={handleEmailClear}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-sm font-medium text-custom-text-300" htmlFor="code">
+          Unique code
+        </label>
+        <Input
+          name="code"
+          value={uniqueCodeFormData.code}
+          onChange={(e) => handleFormChange("code", e.target.value)}
+          placeholder="gets-sets-flys"
+          className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+          autoFocus
+        />
+        <div className="flex w-full items-center justify-between px-1 text-xs pt-1">
+          <p className="flex items-center gap-1 font-medium text-green-700">
+            <CircleCheck height={12} width={12} />
+            Paste the code sent to your email
+          </p>
+          <button
+            type="button"
+            onClick={() => generateNewCode(uniqueCodeFormData.email)}
+            className={`${
+              isRequestNewCodeDisabled
+                ? "text-custom-text-400"
+                : "font-medium text-custom-primary-300 hover:text-custom-primary-200"
+            }`}
+            disabled={isRequestNewCodeDisabled}
+          >
+            {resendTimerCode > 0
+              ? `Resend in ${resendTimerCode}s`
+              : isRequestingNewCode
+                ? "Requesting new code"
+                : "Resend"}
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-2.5">
+        <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+          {isRequestingNewCode ? "Sending code" : isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+        </Button>
+      </div>
+    </form>
+  );
+};

apps/space/core/components/account/terms-and-conditions.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { FC } from "react";
+import React from "react";
+import Link from "next/link";
+
+type Props = {
+  isSignUp?: boolean;
+};
+
+export const TermsAndConditions: FC<Props> = (props) => {
+  const { isSignUp = false } = props;
+  return (
+    <span className="flex items-center justify-center py-6">
+      <p className="text-center text-sm text-custom-text-200 whitespace-pre-line">
+        {isSignUp ? "By creating an account" : "By signing in"}, you agree to our{" \n"}
+        <Link href="https://plane.so/legals/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+          <span className="text-sm font-medium underline hover:cursor-pointer">Terms of Service</span>
+        </Link>{" "}
+        and{" "}
+        <Link href="https://plane.so/legals/privacy-policy" target="_blank" rel="noopener noreferrer">
+          <span className="text-sm font-medium underline hover:cursor-pointer">Privacy Policy</span>
+        </Link>
+        {"."}
+      </p>
+    </span>
+  );
+};

apps/space/core/components/account/user-logged-in.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { PlaneLockup } from "@plane/propel/icons";
+// components
+import { PoweredBy } from "@/components/common/powered-by";
+import { UserAvatar } from "@/components/issues/navbar/user-avatar";
+// hooks
+import { useUser } from "@/hooks/store/use-user";
+// assets
+import UserLoggedInImage from "@/public/user-logged-in.svg";
+
+export const UserLoggedIn = observer(() => {
+  // store hooks
+  const { data: user } = useUser();
+
+  if (!user) return null;
+
+  return (
+    <div className="flex flex-col h-screen w-screen">
+      <div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">
+        <PlaneLockup className="h-6 w-auto text-custom-text-100" />
+        <UserAvatar />
+      </div>
+
+      <div className="size-full grid place-items-center p-6">
+        <div className="text-center">
+          <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
+            <div className="size-16 md:size-32 grid place-items-center">
+              <Image src={UserLoggedInImage} alt="User already logged in" />
+            </div>
+          </div>
+          <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">Nice! Just one more step.</h1>
+          <p className="mt-2 md:mt-4 text-sm md:text-base">
+            Enter the public-share URL or link of the view or Page you are trying to see in the browser{"'"}s address
+            bar.
+          </p>
+        </div>
+      </div>
+      <PoweredBy />
+    </div>
+  );
+});

apps/space/core/components/common/logo-spinner.tsx

@@ -0,0 +1,18 @@
+"use client";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// assets
+import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
+import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
+
+export const LogoSpinner = () => {
+  const { resolvedTheme } = useTheme();
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
+
+  return (
+    <div className="flex items-center justify-center">
+      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+    </div>
+  );
+};

apps/space/core/components/common/powered-by.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import type { FC } from "react";
+import { WEBSITE_URL } from "@plane/constants";
+// assets
+import { PlaneLogo } from "@plane/propel/icons";
+
+type TPoweredBy = {
+  disabled?: boolean;
+};
+
+export const PoweredBy: FC<TPoweredBy> = (props) => {
+  // props
+  const { disabled = false } = props;
+
+  if (disabled || !WEBSITE_URL) return null;
+
+  return (
+    <a
+      href={WEBSITE_URL}
+      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      <PlaneLogo className="h-3 w-auto text-custom-text-100" />
+      <div className="text-xs">
+        Powered by <span className="font-semibold">Plane Publish</span>
+      </div>
+    </a>
+  );
+};

apps/space/core/components/common/project-logo.tsx

@@ -0,0 +1,34 @@
+// types
+import type { TLogoProps } from "@plane/types";
+// helpers
+import { cn } from "@plane/utils";
+
+type Props = {
+  className?: string;
+  logo: TLogoProps;
+};
+
+export const ProjectLogo: React.FC<Props> = (props) => {
+  const { className, logo } = props;
+
+  if (logo.in_use === "icon" && logo.icon)
+    return (
+      <span
+        style={{
+          color: logo.icon.color,
+        }}
+        className={cn("material-symbols-rounded text-base", className)}
+      >
+        {logo.icon.name}
+      </span>
+    );
+
+  if (logo.in_use === "emoji" && logo.emoji)
+    return (
+      <span className={cn("text-base", className)}>
+        {logo.emoji.value?.split("-").map((emoji) => String.fromCodePoint(parseInt(emoji, 10)))}
+      </span>
+    );
+
+  return <span />;
+};

apps/space/core/components/editor/embeds/mentions/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/space/core/components/editor/embeds/mentions/root.tsx

@@ -0,0 +1,17 @@
+// plane editor
+import type { TMentionComponentProps } from "@plane/editor";
+// plane web components
+import { EditorAdditionalMentionsRoot } from "@/plane-web/components/editor";
+// local components
+import { EditorUserMention } from "./user";
+
+export const EditorMentionsRoot: React.FC<TMentionComponentProps> = (props) => {
+  const { entity_identifier, entity_name } = props;
+
+  switch (entity_name) {
+    case "user_mention":
+      return <EditorUserMention id={entity_identifier} />;
+    default:
+      return <EditorAdditionalMentionsRoot {...props} />;
+  }
+};

apps/space/core/components/editor/embeds/mentions/user.tsx

@@ -0,0 +1,40 @@
+import { observer } from "mobx-react";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/use-user";
+
+type Props = {
+  id: string;
+};
+
+export const EditorUserMention: React.FC<Props> = observer((props) => {
+  const { id } = props;
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { getMemberById } = useMember();
+  // derived values
+  const userDetails = getMemberById(id);
+
+  if (!userDetails) {
+    return (
+      <div className="not-prose inline px-1 py-0.5 rounded bg-custom-background-80 text-custom-text-300 no-underline">
+        @deactivated user
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "not-prose inline px-1 py-0.5 rounded bg-custom-primary-100/20 text-custom-primary-100 no-underline",
+        {
+          "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
+        }
+      )}
+    >
+      @{userDetails?.member__display_name}
+    </div>
+  );
+});

apps/space/core/components/editor/lite-text-editor.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+// plane imports
+import { LiteTextEditorWithRef } from "@plane/editor";
+import type { EditorRefApi, ILiteTextEditorProps, TFileHandler } from "@plane/editor";
+import type { MakeOptional } from "@plane/types";
+import { cn, isCommentEmpty } from "@plane/utils";
+// helpers
+import { getEditorFileHandlers } from "@/helpers/editor.helper";
+import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
+// local imports
+import { EditorMentionsRoot } from "./embeds/mentions";
+import { IssueCommentToolbar } from "./toolbar";
+
+type LiteTextEditorWrapperProps = MakeOptional<
+  Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler" | "extendedEditorProps">,
+  "disabledExtensions" | "flaggedExtensions"
+> & {
+  anchor: string;
+  isSubmitting?: boolean;
+  showSubmitButton?: boolean;
+  workspaceId: string;
+} & (
+    | {
+        editable: false;
+      }
+    | {
+        editable: true;
+        uploadFile: TFileHandler["upload"];
+      }
+  );
+
+export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
+  const {
+    anchor,
+    containerClassName,
+    disabledExtensions: additionalDisabledExtensions = [],
+    editable,
+    isSubmitting = false,
+    showSubmitButton = true,
+    workspaceId,
+    ...rest
+  } = props;
+  function isMutableRefObject<T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T | null> {
+    return !!ref && typeof ref === "object" && "current" in ref;
+  }
+  // derived values
+  const isEmpty = isCommentEmpty(props.initialValue);
+  const editorRef = isMutableRefObject<EditorRefApi>(ref) ? ref.current : null;
+  const { liteText: liteTextEditorExtensions } = useEditorFlagging(anchor);
+
+  return (
+    <div className="border border-custom-border-200 rounded p-3 space-y-3">
+      <LiteTextEditorWithRef
+        ref={ref}
+        disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
+        flaggedExtensions={liteTextEditorExtensions.flagged}
+        editable={editable}
+        fileHandler={getEditorFileHandlers({
+          anchor,
+          uploadFile: editable ? props.uploadFile : async () => "",
+          workspaceId,
+        })}
+        mentionHandler={{
+          renderComponent: (props) => <EditorMentionsRoot {...props} />,
+        }}
+        extendedEditorProps={{}}
+        {...rest}
+        // overriding the containerClassName to add relative class passed
+        containerClassName={cn(containerClassName, "relative")}
+      />
+      <IssueCommentToolbar
+        executeCommand={(item) => {
+          // TODO: update this while toolbar homogenization
+          // @ts-expect-error type mismatch here
+          editorRef?.executeMenuItemCommand({
+            itemKey: item.itemKey,
+            ...item.extraProps,
+          });
+        }}
+        isSubmitting={isSubmitting}
+        showSubmitButton={showSubmitButton}
+        handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
+        isCommentEmpty={isEmpty}
+        editorRef={editorRef}
+      />
+    </div>
+  );
+});
+
+LiteTextEditor.displayName = "LiteTextEditor";

apps/space/core/components/editor/rich-text-editor.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef } from "react";
+// plane imports
+import { RichTextEditorWithRef } from "@plane/editor";
+import type { EditorRefApi, IRichTextEditorProps, TFileHandler } from "@plane/editor";
+import type { MakeOptional } from "@plane/types";
+// helpers
+import { getEditorFileHandlers } from "@/helpers/editor.helper";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+// plane web imports
+import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
+// local imports
+import { EditorMentionsRoot } from "./embeds/mentions";
+
+type RichTextEditorWrapperProps = MakeOptional<
+  Omit<IRichTextEditorProps, "editable" | "fileHandler" | "mentionHandler" | "extendedEditorProps">,
+  "disabledExtensions" | "flaggedExtensions"
+> & {
+  anchor: string;
+  workspaceId: string;
+} & (
+    | {
+        editable: false;
+      }
+    | {
+        editable: true;
+        uploadFile: TFileHandler["upload"];
+      }
+  );
+
+export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((props, ref) => {
+  const {
+    anchor,
+    containerClassName,
+    editable,
+    workspaceId,
+    disabledExtensions: additionalDisabledExtensions = [],
+    ...rest
+  } = props;
+  const { getMemberById } = useMember();
+  const { richText: richTextEditorExtensions } = useEditorFlagging(anchor);
+
+  return (
+    <RichTextEditorWithRef
+      mentionHandler={{
+        renderComponent: (props) => <EditorMentionsRoot {...props} />,
+        getMentionedEntityDetails: (id: string) => ({
+          display_name: getMemberById(id)?.member__display_name ?? "",
+        }),
+      }}
+      ref={ref}
+      disabledExtensions={[...richTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
+      editable={editable}
+      fileHandler={getEditorFileHandlers({
+        anchor,
+        uploadFile: editable ? props.uploadFile : async () => "",
+        workspaceId,
+      })}
+      flaggedExtensions={richTextEditorExtensions.flagged}
+      extendedEditorProps={{}}
+      {...rest}
+      containerClassName={containerClassName}
+      editorClassName="min-h-[100px] py-2 overflow-hidden"
+      displayConfig={{ fontSize: "large-font" }}
+    />
+  );
+});
+
+RichTextEditor.displayName = "RichTextEditor";

apps/space/core/components/editor/toolbar.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React, { useEffect, useState, useCallback } from "react";
+// plane imports
+import { TOOLBAR_ITEMS } from "@plane/editor";
+import type { ToolbarMenuItem, EditorRefApi } from "@plane/editor";
+import { Button } from "@plane/propel/button";
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "@plane/utils";
+
+type Props = {
+  executeCommand: (item: ToolbarMenuItem) => void;
+  handleSubmit: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  isCommentEmpty: boolean;
+  isSubmitting: boolean;
+  showSubmitButton: boolean;
+  editorRef: EditorRefApi | null;
+};
+
+const toolbarItems = TOOLBAR_ITEMS.lite;
+
+export const IssueCommentToolbar: React.FC<Props> = (props) => {
+  const { executeCommand, handleSubmit, isCommentEmpty, editorRef, isSubmitting, showSubmitButton } = props;
+  // states
+  const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
+
+  // Function to update active states
+  const updateActiveStates = useCallback(() => {
+    if (!editorRef) return;
+    const newActiveStates: Record<string, boolean> = {};
+    Object.values(toolbarItems)
+      .flat()
+      .forEach((item) => {
+        // TODO: update this while toolbar homogenization
+        // @ts-expect-error type mismatch here
+        newActiveStates[item.renderKey] = editorRef.isMenuItemActive({
+          itemKey: item.itemKey,
+          ...item.extraProps,
+        });
+      });
+    setActiveStates(newActiveStates);
+  }, [editorRef]);
+
+  // useEffect to call updateActiveStates when isActive prop changes
+  useEffect(() => {
+    if (!editorRef) return;
+    const unsubscribe = editorRef.onStateChange(updateActiveStates);
+    updateActiveStates();
+    return () => unsubscribe();
+  }, [editorRef, updateActiveStates]);
+
+  return (
+    <div className="flex h-9 w-full items-stretch gap-1.5 bg-custom-background-90 overflow-x-scroll">
+      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-custom-border-200 p-1">
+        <div className="flex items-stretch">
+          {Object.keys(toolbarItems).map((key, index) => (
+            <div
+              key={key}
+              className={cn("flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5", {
+                "pl-0": index === 0,
+              })}
+            >
+              {toolbarItems[key].map((item) => {
+                const isItemActive = activeStates[item.renderKey];
+
+                return (
+                  <Tooltip
+                    key={item.renderKey}
+                    tooltipContent={
+                      <p className="flex flex-col gap-1 text-center text-xs">
+                        <span className="font-medium">{item.name}</span>
+                        {item.shortcut && <kbd className="text-custom-text-400">{item.shortcut.join(" + ")}</kbd>}
+                      </p>
+                    }
+                  >
+                    <button
+                      type="button"
+                      onClick={() => executeCommand(item)}
+                      className={cn(
+                        "grid place-items-center aspect-square rounded-sm p-0.5 text-custom-text-400 hover:bg-custom-background-80",
+                        {
+                          "bg-custom-background-80 text-custom-text-100": isItemActive,
+                        }
+                      )}
+                    >
+                      <item.icon
+                        className={cn("h-3.5 w-3.5", {
+                          "text-custom-text-100": isItemActive,
+                        })}
+                        strokeWidth={2.5}
+                      />
+                    </button>
+                  </Tooltip>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+        {showSubmitButton && (
+          <div className="sticky right-1">
+            <Button
+              type="button"
+              variant="primary"
+              className="px-2.5 py-1.5 text-xs"
+              onClick={handleSubmit}
+              disabled={isCommentEmpty}
+              loading={isSubmitting}
+            >
+              Comment
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

apps/space/core/components/instance/instance-failure-view.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { FC } from "react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { Button } from "@plane/propel/button";
+// assets
+import InstanceFailureDarkImage from "public/instance/instance-failure-dark.svg";
+import InstanceFailureImage from "public/instance/instance-failure.svg";
+
+export const InstanceFailureView: FC = () => {
+  const { resolvedTheme } = useTheme();
+
+  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
+
+  const handleRetry = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center">
+      <div className="w-auto max-w-2xl relative space-y-8 py-10">
+        <div className="relative flex flex-col justify-center items-center space-y-4">
+          <Image src={instanceImage} alt="Plane instance failure image" />
+          <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
+          <p className="font-medium text-base text-center">
+            We were unable to fetch the details of the instance. <br />
+            Fret not, it might just be a connectivity work items.
+          </p>
+        </div>
+        <div className="flex justify-center">
+          <Button size="md" onClick={handleRetry}>
+            Retry
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/space/core/components/issues/filters/applied-filters/filters-list.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { X } from "lucide-react";
+// types
+import { useTranslation } from "@plane/i18n";
+import type { TFilters } from "@/types/issue";
+// components
+import { AppliedPriorityFilters } from "./priority";
+import { AppliedStateFilters } from "./state";
+
+type Props = {
+  appliedFilters: TFilters;
+  handleRemoveAllFilters: () => void;
+  handleRemoveFilter: (key: keyof TFilters, value: string | null) => void;
+};
+
+export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
+
+export const AppliedFiltersList: React.FC<Props> = observer((props) => {
+  const { appliedFilters = {}, handleRemoveAllFilters, handleRemoveFilter } = props;
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-wrap items-stretch gap-2">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof TFilters;
+        const filterValue = value as TFilters[keyof TFilters];
+
+        if (!filterValue) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+          >
+            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <div className="flex flex-wrap items-center gap-1">
+              {filterKey === "priority" && (
+                <AppliedPriorityFilters
+                  handleRemove={(val) => handleRemoveFilter("priority", val)}
+                  values={(filterValue ?? []) as TFilters["priority"]}
+                />
+              )}
+
+              {filterKey === "state" && (
+                <AppliedStateFilters
+                  handleRemove={(val) => handleRemoveFilter("state", val)}
+                  values={filterValue ?? []}
+                />
+              )}
+
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemoveFilter(filterKey, null)}
+              >
+                <X size={12} strokeWidth={2} />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+      <button
+        type="button"
+        onClick={handleRemoveAllFilters}
+        className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+      >
+        {t("common.clear_all")}
+        <X size={12} strokeWidth={2} />
+      </button>
+    </div>
+  );
+});

apps/space/core/components/issues/filters/applied-filters/label.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { X } from "lucide-react";
+// types
+import type { IIssueLabel } from "@/types/issue";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  labels: IIssueLabel[] | undefined;
+  values: string[];
+};
+
+export const AppliedLabelsFilters: React.FC<Props> = (props) => {
+  const { handleRemove, labels, values } = props;
+
+  return (
+    <>
+      {values.map((labelId) => {
+        const labelDetails = labels?.find((l) => l.id === labelId);
+
+        if (!labelDetails) return null;
+
+        return (
+          <div key={labelId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <span
+              className="h-1.5 w-1.5 rounded-full"
+              style={{
+                backgroundColor: labelDetails.color,
+              }}
+            />
+            <span className="normal-case">{labelDetails.name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(labelId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </>
+  );
+};

apps/space/core/components/issues/filters/applied-filters/priority.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { X } from "lucide-react";
+import { PriorityIcon } from "@plane/propel/icons";
+import type { TIssuePriorities } from "@plane/propel/icons";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: TIssuePriorities[];
+};
+
+export const AppliedPriorityFilters: React.FC<Props> = (props) => {
+  const { handleRemove, values } = props;
+
+  return (
+    <>
+      {values &&
+        values.length > 0 &&
+        values.map((priority) => (
+          <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <PriorityIcon priority={priority} className={`h-3 w-3`} />
+            {priority}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(priority)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        ))}
+    </>
+  );
+};

apps/space/core/components/issues/filters/applied-filters/root.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import type { FC } from "react";
+import { useCallback } from "react";
+import { cloneDeep } from "lodash-es";
+import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
+// hooks
+import { useIssueFilter } from "@/hooks/store/use-issue-filter";
+// store
+import type { TIssueLayout, TIssueQueryFilters } from "@/types/issue";
+// components
+import { AppliedFiltersList } from "./filters-list";
+
+type TIssueAppliedFilters = {
+  anchor: string;
+};
+
+export const IssueAppliedFilters: FC<TIssueAppliedFilters> = observer((props) => {
+  const { anchor } = props;
+  // router
+  const router = useRouter();
+  // store hooks
+  const { getIssueFilters, initIssueFilters, updateIssueFilters } = useIssueFilter();
+  // derived values
+  const issueFilters = getIssueFilters(anchor);
+  const activeLayout = issueFilters?.display_filters?.layout || undefined;
+  const userFilters = issueFilters?.filters || {};
+
+  const appliedFilters: any = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+    if (Array.isArray(value) && value.length === 0) return;
+    appliedFilters[key] = value;
+  });
+
+  const updateRouteParams = useCallback(
+    (key: keyof TIssueQueryFilters, value: string[]) => {
+      const state = key === "state" ? value : (issueFilters?.filters?.state ?? []);
+      const priority = key === "priority" ? value : (issueFilters?.filters?.priority ?? []);
+      const labels = key === "labels" ? value : (issueFilters?.filters?.labels ?? []);
+
+      const params: {
+        board: TIssueLayout | string;
+        priority?: string;
+        states?: string;
+        labels?: string;
+      } = {
+        board: activeLayout || "list",
+      };
+
+      if (priority.length > 0) params.priority = priority.join(",");
+      if (state.length > 0) params.states = state.join(",");
+      if (labels.length > 0) params.labels = labels.join(",");
+
+      const qs = new URLSearchParams(params).toString();
+      router.push(`/issues/${anchor}?${qs}`);
+    },
+    [activeLayout, anchor, issueFilters, router]
+  );
+
+  const handleFilters = useCallback(
+    (key: keyof TIssueQueryFilters, value: string | null) => {
+      let newValues = cloneDeep(issueFilters?.filters?.[key]) ?? [];
+
+      if (value === null) newValues = [];
+      else if (newValues.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+
+      updateIssueFilters(anchor, "filters", key, newValues);
+      updateRouteParams(key, newValues);
+    },
+    [anchor, issueFilters, updateIssueFilters, updateRouteParams]
+  );
+
+  const handleRemoveAllFilters = () => {
+    initIssueFilters(
+      anchor,
+      {
+        display_filters: { layout: activeLayout || "list" },
+        filters: {
+          state: [],
+          priority: [],
+          labels: [],
+        },
+      },
+      true
+    );
+
+    router.push(`/issues/${anchor}?${`board=${activeLayout || "list"}`}`);
+  };
+
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="border-b border-custom-border-200 bg-custom-background-100 p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters || {}}
+        handleRemoveFilter={handleFilters as any}
+        handleRemoveAllFilters={handleRemoveAllFilters}
+      />
+    </div>
+  );
+});

apps/space/core/components/issues/filters/applied-filters/state.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { X } from "lucide-react";
+// plane imports
+import { EIconSize } from "@plane/constants";
+import { StateGroupIcon } from "@plane/propel/icons";
+// hooks
+import { useStates } from "@/hooks/store/use-state";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedStateFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values } = props;
+
+  const { sortedStates: states } = useStates();
+
+  return (
+    <>
+      {values.map((stateId) => {
+        const stateDetails = states?.find((s) => s.id === stateId);
+
+        if (!stateDetails) return null;
+
+        return (
+          <div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} size={EIconSize.SM} />
+            {stateDetails.name}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(stateId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </>
+  );
+});

apps/space/core/components/issues/filters/helpers/dropdown.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import React, { Fragment, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { usePopper } from "react-popper";
+import { Popover, Transition } from "@headlessui/react";
+// ui
+import { Button } from "@plane/propel/button";
+
+type Props = {
+  children: React.ReactNode;
+  title?: string;
+  placement?: Placement;
+};
+
+export const FiltersDropdown: React.FC<Props> = (props) => {
+  const { children, title = "Dropdown", placement } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "auto",
+  });
+
+  return (
+    <Popover as="div">
+      {({ open }) => {
+        if (open) {
+        }
+        return (
+          <>
+            <Popover.Button as={React.Fragment}>
+              <Button ref={setReferenceElement} variant="neutral-primary" size="sm">
+                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                  <span>{title}</span>
+                </div>
+              </Button>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
+                <div
+                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  <div className="flex max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">{children}</div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        );
+      }}
+    </Popover>
+  );
+};

apps/space/core/components/issues/filters/helpers/filter-header.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import React from "react";
+// lucide icons
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+interface IFilterHeader {
+  title: string;
+  isPreviewEnabled: boolean;
+  handleIsPreviewEnabled: () => void;
+}
+
+export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
+  <div className="sticky top-0 flex items-center justify-between gap-2 bg-custom-background-100">
+    <div className="flex-grow truncate text-xs font-medium text-custom-text-300">{title}</div>
+    <button
+      type="button"
+      className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
+      onClick={handleIsPreviewEnabled}
+    >
+      {isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+    </button>
+  </div>
+);

apps/space/core/components/issues/filters/helpers/filter-option.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import React from "react";
+// lucide icons
+import { Check } from "lucide-react";
+
+type Props = {
+  icon?: React.ReactNode;
+  isChecked: boolean;
+  title: React.ReactNode;
+  onClick?: () => void;
+  multiple?: boolean;
+};
+
+export const FilterOption: React.FC<Props> = (props) => {
+  const { icon, isChecked, multiple = true, onClick, title } = props;
+
+  return (
+    <button
+      type="button"
+      className="flex w-full items-center gap-2 rounded p-1.5 hover:bg-custom-background-80"
+      onClick={onClick}
+    >
+      <div
+        className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-custom-background-90 ${
+          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-custom-border-300"
+        } ${multiple ? "rounded-sm" : "rounded-full"}`}
+      >
+        {isChecked && <Check size={10} strokeWidth={3} />}
+      </div>
+      <div className="flex items-center gap-2 truncate">
+        {icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
+        <div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
+      </div>
+    </button>
+  );
+};

apps/space/core/components/issues/filters/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/space/core/components/issues/filters/labels.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import React, { useState } from "react";
+// plane imports
+import { Loader } from "@plane/ui";
+// types
+import type { IIssueLabel } from "@/types/issue";
+// local imports
+import { FilterHeader } from "./helpers/filter-header";
+import { FilterOption } from "./helpers/filter-option";
+
+const LabelIcons = ({ color }: { color: string }) => (
+  <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
+);
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  labels: IIssueLabel[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLabels: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, labels, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = labels?.filter((label) => label.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Label${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((label) => (
+                  <FilterOption
+                    key={label?.id}
+                    isChecked={appliedFilters?.includes(label?.id) ? true : false}
+                    onClick={() => handleUpdate(label?.id)}
+                    icon={<LabelIcons color={label.color} />}
+                    title={label.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs italic text-custom-text-400">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};

apps/space/core/components/issues/filters/priority.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ISSUE_PRIORITY_FILTERS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { PriorityIcon } from "@plane/propel/icons";
+// local imports
+import { FilterHeader } from "./helpers/filter-header";
+import { FilterOption } from "./helpers/filter-option";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterPriority: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  // hooks
+  const { t } = useTranslation();
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = ISSUE_PRIORITY_FILTERS.filter((p) => p.key.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Priority${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((priority) => (
+              <FilterOption
+                key={priority.key}
+                isChecked={appliedFilters?.includes(priority.key) ? true : false}
+                onClick={() => handleUpdate(priority.key)}
+                icon={<PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />}
+                title={t(priority.titleTranslationKey)}
+              />
+            ))
+          ) : (
+            <p className="text-xs italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/space/core/components/issues/filters/root.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import type { FC } from "react";
+import { useCallback } from "react";
+import { cloneDeep } from "lodash-es";
+import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@plane/constants";
+// components
+import { FiltersDropdown } from "@/components/issues/filters/helpers/dropdown";
+import { FilterSelection } from "@/components/issues/filters/selection";
+// helpers
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { useIssueFilter } from "@/hooks/store/use-issue-filter";
+// types
+import type { TIssueQueryFilters } from "@/types/issue";
+
+type IssueFiltersDropdownProps = {
+  anchor: string;
+};
+
+export const IssueFiltersDropdown: FC<IssueFiltersDropdownProps> = observer((props) => {
+  const { anchor } = props;
+  // router
+  const router = useRouter();
+  // hooks
+  const { getIssueFilters, updateIssueFilters } = useIssueFilter();
+  // derived values
+  const issueFilters = getIssueFilters(anchor);
+  const activeLayout = issueFilters?.display_filters?.layout || undefined;
+
+  const updateRouteParams = useCallback(
+    (key: keyof TIssueQueryFilters, value: string[]) => {
+      const state = key === "state" ? value : (issueFilters?.filters?.state ?? []);
+      const priority = key === "priority" ? value : (issueFilters?.filters?.priority ?? []);
+      const labels = key === "labels" ? value : (issueFilters?.filters?.labels ?? []);
+
+      const { queryParam } = queryParamGenerator({ board: activeLayout, priority, state, labels });
+      router.push(`/issues/${anchor}?${queryParam}`);
+    },
+    [anchor, activeLayout, issueFilters, router]
+  );
+
+  const handleFilters = useCallback(
+    (key: keyof TIssueQueryFilters, value: string) => {
+      if (!value) return;
+
+      const newValues = cloneDeep(issueFilters?.filters?.[key]) ?? [];
+
+      if (newValues.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+      else newValues.push(value);
+
+      updateIssueFilters(anchor, "filters", key, newValues);
+      updateRouteParams(key, newValues);
+    },
+    [anchor, issueFilters, updateIssueFilters, updateRouteParams]
+  );
+
+  return (
+    <div className="z-10 flex h-full w-full flex-col">
+      <FiltersDropdown title="Filters" placement="bottom-end">
+        <FilterSelection
+          filters={issueFilters?.filters ?? {}}
+          handleFilters={handleFilters as any}
+          layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT?.[activeLayout]?.filters : []}
+        />
+      </FiltersDropdown>
+    </div>
+  );
+});

apps/space/core/components/issues/filters/selection.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { Search, X } from "lucide-react";
+// types
+import type { IIssueFilterOptions, TIssueFilterKeys } from "@/types/issue";
+// local imports
+import { FilterPriority } from "./priority";
+import { FilterState } from "./state";
+
+type Props = {
+  filters: IIssueFilterOptions;
+  handleFilters: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+  layoutDisplayFiltersOptions: TIssueFilterKeys[];
+};
+
+export const FilterSelection: React.FC<Props> = observer((props) => {
+  const { filters, handleFilters, layoutDisplayFiltersOptions } = props;
+
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions.includes(filter);
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-custom-background-100 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5">
+        {/* priority */}
+        {isFilterEnabled("priority") && (
+          <div className="py-2">
+            <FilterPriority
+              appliedFilters={filters.priority ?? null}
+              handleUpdate={(val) => handleFilters("priority", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* state */}
+        {isFilterEnabled("state") && (
+          <div className="py-2">
+            <FilterState
+              appliedFilters={filters.state ?? null}
+              handleUpdate={(val) => handleFilters("state", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* labels */}
+        {/* {isFilterEnabled("labels") && (
+          <div className="py-2">
+            <FilterLabels
+              appliedFilters={filters.labels ?? null}
+              handleUpdate={(val) => handleFilters("labels", val)}
+              labels={labels}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )} */}
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/filters/state.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// ui
+import { EIconSize } from "@plane/constants";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { Loader } from "@plane/ui";
+// hooks
+import { useStates } from "@/hooks/store/use-state";
+// local imports
+import { FilterHeader } from "./helpers/filter-header";
+import { FilterOption } from "./helpers/filter-option";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterState: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const { sortedStates: states } = useStates();
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = states?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`State${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((state) => (
+                  <FilterOption
+                    key={state.id}
+                    isChecked={appliedFilters?.includes(state.id) ? true : false}
+                    onClick={() => handleUpdate(state.id)}
+                    icon={<StateGroupIcon stateGroup={state.group} color={state.color} size={EIconSize.MD} />}
+                    title={state.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs italic text-custom-text-400">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/space/core/components/issues/issue-layouts/error.tsx

@@ -0,0 +1,17 @@
+import Image from "next/image";
+// assets
+import SomethingWentWrongImage from "public/something-went-wrong.svg";
+
+export const SomethingWentWrongError = () => (
+  <div className="grid min-h-screen w-full place-items-center p-6">
+    <div className="text-center">
+      <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
+        <div className="grid h-32 w-32 place-items-center">
+          <Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
+        </div>
+      </div>
+      <h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
+      <p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
+    </div>
+  </div>
+);

apps/space/core/components/issues/issue-layouts/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx

@@ -0,0 +1,35 @@
+import { observer } from "mobx-react";
+// plane imports
+import type { TLoader } from "@plane/types";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+
+interface Props {
+  children: string | React.ReactNode | React.ReactNode[];
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+}
+
+export const IssueLayoutHOC = observer((props: Props) => {
+  const { getIssueLoader, getGroupIssueCount } = props;
+
+  const issueCount = getGroupIssueCount(undefined, undefined, false);
+
+  if (getIssueLoader() === "init-loader" || issueCount === undefined) {
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+  }
+
+  if (getGroupIssueCount(undefined, undefined, false) === 0) {
+    return <div className="flex w-full h-full items-center justify-center">No work items Found</div>;
+  }
+
+  return <>{props.children}</>;
+});

apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useCallback, useMemo, useRef } from "react";
+import { debounce } from "lodash-es";
+import { observer } from "mobx-react";
+// types
+import type { IIssueDisplayProperties } from "@plane/types";
+// components
+import { IssueLayoutHOC } from "@/components/issues/issue-layouts/issue-layout-HOC";
+// hooks
+import { useIssue } from "@/hooks/store/use-issue";
+
+import { KanBan } from "./default";
+
+type Props = {
+  anchor: string;
+};
+export const IssueKanbanLayoutRoot: React.FC<Props> = observer((props: Props) => {
+  const { anchor } = props;
+  // store hooks
+  const { groupedIssueIds, getIssueLoader, fetchNextPublicIssues, getGroupIssueCount, getPaginationData } = useIssue();
+
+  const displayProperties: IIssueDisplayProperties = useMemo(
+    () => ({
+      key: true,
+      state: true,
+      labels: true,
+      priority: true,
+      due_date: true,
+    }),
+    []
+  );
+
+  const fetchMoreIssues = useCallback(
+    (groupId?: string, subgroupId?: string) => {
+      if (getIssueLoader(groupId, subgroupId) !== "pagination") {
+        fetchNextPublicIssues(anchor, groupId, subgroupId);
+      }
+    },
+    [anchor, getIssueLoader, fetchNextPublicIssues]
+  );
+
+  const debouncedFetchMoreIssues = debounce(
+    (groupId?: string, subgroupId?: string) => fetchMoreIssues(groupId, subgroupId),
+    300,
+    { leading: true, trailing: false }
+  );
+
+  const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
+      <div
+        className={`horizontal-scrollbar scrollbar-lg relative flex h-full w-full bg-custom-background-90 overflow-x-auto overflow-y-hidden`}
+        ref={scrollableContainerRef}
+      >
+        <div className="relative h-full w-max min-w-full bg-custom-background-90">
+          <div className="h-full w-max">
+            <KanBan
+              groupedIssueIds={groupedIssueIds ?? {}}
+              displayProperties={displayProperties}
+              subGroupBy={null}
+              groupBy="state"
+              showEmptyGroup
+              scrollableContainerRef={scrollableContainerRef}
+              loadMoreIssues={debouncedFetchMoreIssues}
+              getGroupIssueCount={getGroupIssueCount}
+              getPaginationData={getPaginationData}
+              getIssueLoader={getIssueLoader}
+            />
+          </div>
+        </div>
+      </div>
+    </IssueLayoutHOC>
+  );
+});

apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx

@@ -0,0 +1,46 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane utils
+import { cn } from "@plane/utils";
+// components
+import { IssueEmojiReactions } from "@/components/issues/reactions/issue-emoji-reactions";
+import { IssueVotes } from "@/components/issues/reactions/issue-vote-reactions";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+
+type Props = {
+  issueId: string;
+};
+export const BlockReactions = observer((props: Props) => {
+  const { issueId } = props;
+  const { anchor } = useParams();
+  const { canVote, canReact } = usePublish(anchor.toString());
+
+  // if the user cannot vote or react then return empty
+  if (!canVote && !canReact) return <></>;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap border-t-[1px] outline-transparent w-full border-t-custom-border-200 bg-custom-background-90 rounded-b"
+      )}
+    >
+      <div className="py-2 px-3 flex flex-wrap items-center gap-2">
+        {canVote && (
+          <div
+            className={cn(`flex items-center gap-2 pr-1`, {
+              "after:h-6 after:ml-1 after:w-[1px] after:bg-custom-border-200": canReact,
+            })}
+          >
+            <IssueVotes anchor={anchor.toString()} issueIdFromProps={issueId} size="sm" />
+          </div>
+        )}
+        {canReact && (
+          <div className="flex flex-wrap items-center gap-2">
+            <IssueEmojiReactions anchor={anchor.toString()} issueIdFromProps={issueId} size="sm" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/kanban/block.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import type { MutableRefObject } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, useSearchParams } from "next/navigation";
+// plane types
+import { Tooltip } from "@plane/propel/tooltip";
+import type { IIssueDisplayProperties } from "@plane/types";
+// plane ui
+// plane utils
+import { cn } from "@plane/utils";
+// components
+import { WithDisplayPropertiesHOC } from "@/components/issues/issue-layouts/with-display-properties-HOC";
+// helpers
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+//
+import type { IIssue } from "@/types/issue";
+import { IssueProperties } from "../properties/all-properties";
+import { getIssueBlockId } from "../utils";
+import { BlockReactions } from "./block-reactions";
+
+interface IssueBlockProps {
+  issueId: string;
+  groupId: string;
+  subGroupId: string;
+  displayProperties: IIssueDisplayProperties | undefined;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+}
+
+interface IssueDetailsBlockProps {
+  issue: IIssue;
+  displayProperties: IIssueDisplayProperties | undefined;
+}
+
+const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((props) => {
+  const { issue, displayProperties } = props;
+  const { anchor } = useParams();
+  // hooks
+  const { project_details } = usePublish(anchor.toString());
+
+  return (
+    <div className="space-y-2 px-3 py-2">
+      <WithDisplayPropertiesHOC displayProperties={displayProperties || {}} displayPropertyKey="key">
+        <div className="relative">
+          <div className="line-clamp-1 text-xs text-custom-text-300">
+            {project_details?.identifier}-{issue.sequence_id}
+          </div>
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      <div className="w-full line-clamp-1 text-sm text-custom-text-100 mb-1.5">
+        <Tooltip tooltipContent={issue.name}>
+          <span>{issue.name}</span>
+        </Tooltip>
+      </div>
+
+      <IssueProperties
+        className="flex flex-wrap items-center gap-2 whitespace-nowrap text-custom-text-300 pt-1.5"
+        issue={issue}
+        displayProperties={displayProperties}
+      />
+    </div>
+  );
+});
+
+export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
+  const { issueId, groupId, subGroupId, displayProperties } = props;
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board");
+  // hooks
+  const { setPeekId, getIsIssuePeeked, getIssueById } = useIssueDetails();
+
+  const handleIssuePeekOverview = () => {
+    setPeekId(issueId);
+  };
+
+  const { queryParam } = queryParamGenerator(board ? { board, peekId: issueId } : { peekId: issueId });
+
+  const issue = getIssueById(issueId);
+
+  if (!issue) return null;
+
+  return (
+    <div className={cn("group/kanban-block relative p-1.5")}>
+      <div
+        className={cn(
+          "relative block rounded border-[1px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
+          { "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id) }
+        )}
+      >
+        <Link
+          id={getIssueBlockId(issueId, groupId, subGroupId)}
+          className="w-full"
+          href={`?${queryParam}`}
+          onClick={handleIssuePeekOverview}
+        >
+          <KanbanIssueDetailsBlock issue={issue} displayProperties={displayProperties} />
+        </Link>
+        <BlockReactions issueId={issueId} />
+      </div>
+    </div>
+  );
+});
+
+KanbanIssueBlock.displayName = "KanbanIssueBlock";

apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx

@@ -0,0 +1,45 @@
+import type { MutableRefObject } from "react";
+import { observer } from "mobx-react";
+//types
+import type { IIssueDisplayProperties } from "@plane/types";
+// components
+import { KanbanIssueBlock } from "./block";
+
+interface IssueBlocksListProps {
+  subGroupId: string;
+  groupId: string;
+  issueIds: string[];
+  displayProperties: IIssueDisplayProperties | undefined;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+}
+
+export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = observer((props) => {
+  const { subGroupId, groupId, issueIds, displayProperties, scrollableContainerRef } = props;
+
+  return (
+    <>
+      {issueIds && issueIds.length > 0 ? (
+        <>
+          {issueIds.map((issueId) => {
+            if (!issueId) return null;
+
+            let draggableId = issueId;
+            if (groupId) draggableId = `${draggableId}__${groupId}`;
+            if (subGroupId) draggableId = `${draggableId}__${subGroupId}`;
+
+            return (
+              <KanbanIssueBlock
+                key={draggableId}
+                issueId={issueId}
+                groupId={groupId}
+                subGroupId={subGroupId}
+                displayProperties={displayProperties}
+                scrollableContainerRef={scrollableContainerRef}
+              />
+            );
+          })}
+        </>
+      ) : null}
+    </>
+  );
+});

apps/space/core/components/issues/issue-layouts/kanban/default.tsx

@@ -0,0 +1,127 @@
+import type { MutableRefObject } from "react";
+import { isNil } from "lodash-es";
+import { observer } from "mobx-react";
+// types
+import type {
+  GroupByColumnTypes,
+  IGroupByColumn,
+  TGroupedIssues,
+  IIssueDisplayProperties,
+  TSubGroupedIssues,
+  TIssueGroupByOptions,
+  TPaginationData,
+  TLoader,
+} from "@plane/types";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useStates } from "@/hooks/store/use-state";
+//
+import { getGroupByColumns } from "../utils";
+// components
+import { HeaderGroupByCard } from "./headers/group-by-card";
+import { KanbanGroup } from "./kanban-group";
+
+export interface IKanBan {
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  displayProperties: IIssueDisplayProperties | undefined;
+  subGroupBy: TIssueGroupByOptions | undefined;
+  groupBy: TIssueGroupByOptions | undefined;
+  subGroupId?: string;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
+  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  showEmptyGroup?: boolean;
+}
+
+export const KanBan: React.FC<IKanBan> = observer((props) => {
+  const {
+    groupedIssueIds,
+    displayProperties,
+    subGroupBy,
+    groupBy,
+    subGroupId = "null",
+    loadMoreIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+    scrollableContainerRef,
+    showEmptyGroup = true,
+  } = props;
+
+  const member = useMember();
+  const label = useLabel();
+  const cycle = useCycle();
+  const modules = useModule();
+  const state = useStates();
+
+  const groupList = getGroupByColumns(groupBy as GroupByColumnTypes, cycle, modules, label, state, member);
+
+  if (!groupList) return null;
+
+  const visibilityGroupBy = (_list: IGroupByColumn): { showGroup: boolean; showIssues: boolean } => {
+    const groupVisibility = {
+      showGroup: true,
+      showIssues: true,
+    };
+
+    if (!showEmptyGroup) {
+      groupVisibility.showGroup = (getGroupIssueCount(_list.id, undefined, false) ?? 0) > 0;
+    }
+    return groupVisibility;
+  };
+
+  return (
+    <div className={`relative w-full flex gap-2 px-2 ${subGroupBy ? "h-full" : "h-full"}`}>
+      {groupList &&
+        groupList.length > 0 &&
+        groupList.map((subList: IGroupByColumn) => {
+          const groupByVisibilityToggle = visibilityGroupBy(subList);
+
+          if (groupByVisibilityToggle.showGroup === false) return <></>;
+          return (
+            <div
+              key={subList.id}
+              className={`group relative flex flex-shrink-0 flex-col ${
+                groupByVisibilityToggle.showIssues ? `w-[350px]` : ``
+              } `}
+            >
+              {isNil(subGroupBy) && (
+                <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
+                  <HeaderGroupByCard
+                    groupBy={groupBy}
+                    icon={subList.icon as any}
+                    title={subList.name}
+                    count={getGroupIssueCount(subList.id, undefined, false) ?? 0}
+                  />
+                </div>
+              )}
+
+              {groupByVisibilityToggle.showIssues && (
+                <KanbanGroup
+                  groupId={subList.id}
+                  groupedIssueIds={groupedIssueIds}
+                  displayProperties={displayProperties}
+                  subGroupBy={subGroupBy}
+                  subGroupId={subGroupId}
+                  scrollableContainerRef={scrollableContainerRef}
+                  loadMoreIssues={loadMoreIssues}
+                  getGroupIssueCount={getGroupIssueCount}
+                  getPaginationData={getPaginationData}
+                  getIssueLoader={getIssueLoader}
+                />
+              )}
+            </div>
+          );
+        })}
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type { FC } from "react";
+import React from "react";
+import { observer } from "mobx-react";
+import { Circle } from "lucide-react";
+// types
+import type { TIssueGroupByOptions } from "@plane/types";
+
+interface IHeaderGroupByCard {
+  groupBy: TIssueGroupByOptions | undefined;
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+}
+
+export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
+  const { icon, title, count } = props;
+
+  return (
+    <>
+      <div className={`relative flex flex-shrink-0 gap-2 p-1.5 w-full flex-row items-center`}>
+        <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
+          {icon ? icon : <Circle width={14} strokeWidth={2} />}
+        </div>
+
+        <div className={`relative flex items-center gap-1 w-full flex-row overflow-hidden`}>
+          <div className={`line-clamp-1 inline-block overflow-hidden truncate font-medium text-custom-text-100`}>
+            {title}
+          </div>
+          <div className={`flex-shrink-0 text-sm font-medium text-custom-text-300 pl-2`}>{count || 0}</div>
+        </div>
+      </div>
+    </>
+  );
+});

apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx

@@ -0,0 +1,36 @@
+import type { FC } from "react";
+import React from "react";
+import { observer } from "mobx-react";
+import { Circle, ChevronDown, ChevronUp } from "lucide-react";
+// mobx
+
+interface IHeaderSubGroupByCard {
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+}
+
+export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props) => {
+  const { icon, title, count, isExpanded, toggleExpanded } = props;
+  return (
+    <div
+      className={`relative flex w-full flex-shrink-0 flex-row items-center gap-2 rounded-sm p-1.5 cursor-pointer`}
+      onClick={() => toggleExpanded()}
+    >
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
+        {isExpanded ? <ChevronUp width={14} strokeWidth={2} /> : <ChevronDown width={14} strokeWidth={2} />}
+      </div>
+
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
+        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+      </div>
+
+      <div className="flex flex-shrink-0 items-center gap-1 text-sm">
+        <div className="line-clamp-1 text-custom-text-100">{title}</div>
+        <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import type { MutableRefObject } from "react";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react";
+//types
+import type {
+  TGroupedIssues,
+  IIssueDisplayProperties,
+  TSubGroupedIssues,
+  TIssueGroupByOptions,
+  TPaginationData,
+  TLoader,
+} from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+// local imports
+import { KanbanIssueBlocksList } from "./blocks-list";
+
+interface IKanbanGroup {
+  groupId: string;
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  displayProperties: IIssueDisplayProperties | undefined;
+  subGroupBy: TIssueGroupByOptions | undefined;
+  subGroupId: string;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
+  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+}
+
+// Loader components
+const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement>((props, ref) => (
+  <span ref={ref} className="block h-28 m-1.5 animate-pulse bg-custom-background-80 rounded" />
+));
+KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
+
+export const KanbanGroup = observer((props: IKanbanGroup) => {
+  const {
+    groupId,
+    subGroupId,
+    subGroupBy,
+    displayProperties,
+    groupedIssueIds,
+    loadMoreIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+    scrollableContainerRef,
+  } = props;
+
+  // hooks
+  const [intersectionElement, setIntersectionElement] = useState<HTMLSpanElement | null>(null);
+  const columnRef = useRef<HTMLDivElement | null>(null);
+
+  const containerRef = subGroupBy && scrollableContainerRef ? scrollableContainerRef : columnRef;
+
+  const loadMoreIssuesInThisGroup = useCallback(() => {
+    loadMoreIssues(groupId, subGroupId === "null" ? undefined : subGroupId);
+  }, [loadMoreIssues, groupId, subGroupId]);
+
+  const isPaginating = !!getIssueLoader(groupId, subGroupId);
+
+  useIntersectionObserver(
+    containerRef,
+    isPaginating ? null : intersectionElement,
+    loadMoreIssuesInThisGroup,
+    `0% 100% 100% 100%`
+  );
+
+  const isSubGroup = !!subGroupId && subGroupId !== "null";
+
+  const issueIds = isSubGroup
+    ? ((groupedIssueIds as TSubGroupedIssues)?.[groupId]?.[subGroupId] ?? [])
+    : ((groupedIssueIds as TGroupedIssues)?.[groupId] ?? []);
+
+  const groupIssueCount = getGroupIssueCount(groupId, subGroupId, false) ?? 0;
+  const nextPageResults = getPaginationData(groupId, subGroupId)?.nextPageResults;
+
+  const loadMore = isPaginating ? (
+    <KanbanIssueBlockLoader />
+  ) : (
+    <div
+      className="w-full p-3 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+      onClick={loadMoreIssuesInThisGroup}
+    >
+      {" "}
+      Load More &darr;
+    </div>
+  );
+
+  const shouldLoadMore = nextPageResults === undefined ? issueIds?.length < groupIssueCount : !!nextPageResults;
+
+  return (
+    <div
+      id={`${groupId}__${subGroupId}`}
+      className={cn("relative h-full transition-all min-h-[120px]", { "vertical-scrollbar scrollbar-md": !subGroupBy })}
+      ref={columnRef}
+    >
+      <KanbanIssueBlocksList
+        subGroupId={subGroupId}
+        groupId={groupId}
+        issueIds={issueIds || []}
+        displayProperties={displayProperties}
+        scrollableContainerRef={scrollableContainerRef}
+      />
+
+      {shouldLoadMore && (isSubGroup ? <>{loadMore}</> : <KanbanIssueBlockLoader ref={setIntersectionElement} />)}
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -0,0 +1,298 @@
+import type { MutableRefObject } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+// types
+import type {
+  GroupByColumnTypes,
+  IGroupByColumn,
+  TGroupedIssues,
+  IIssueDisplayProperties,
+  TSubGroupedIssues,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+  TPaginationData,
+  TLoader,
+} from "@plane/types";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useStates } from "@/hooks/store/use-state";
+//
+import { getGroupByColumns } from "../utils";
+import { KanBan } from "./default";
+import { HeaderGroupByCard } from "./headers/group-by-card";
+import { HeaderSubGroupByCard } from "./headers/sub-group-by-card";
+
+export interface IKanBanSwimLanes {
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  displayProperties: IIssueDisplayProperties | undefined;
+  subGroupBy: TIssueGroupByOptions | undefined;
+  groupBy: TIssueGroupByOptions | undefined;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
+  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  showEmptyGroup: boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  orderBy: TIssueOrderByOptions | undefined;
+}
+
+export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
+  const {
+    groupedIssueIds,
+    displayProperties,
+    subGroupBy,
+    groupBy,
+    orderBy,
+    loadMoreIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+    showEmptyGroup,
+    scrollableContainerRef,
+  } = props;
+
+  const member = useMember();
+  const label = useLabel();
+  const cycle = useCycle();
+  const modules = useModule();
+  const state = useStates();
+
+  const groupByList = getGroupByColumns(groupBy as GroupByColumnTypes, cycle, modules, label, state, member);
+  const subGroupByList = getGroupByColumns(subGroupBy as GroupByColumnTypes, cycle, modules, label, state, member);
+
+  if (!groupByList || !subGroupByList) return null;
+
+  return (
+    <div className="relative">
+      <div className="sticky top-0 z-[4] h-[50px] bg-custom-background-90 px-2">
+        <SubGroupSwimlaneHeader
+          groupBy={groupBy}
+          subGroupBy={subGroupBy}
+          groupList={groupByList}
+          showEmptyGroup={showEmptyGroup}
+          getGroupIssueCount={getGroupIssueCount}
+        />
+      </div>
+
+      {subGroupBy && (
+        <SubGroupSwimlane
+          groupList={subGroupByList}
+          groupedIssueIds={groupedIssueIds}
+          displayProperties={displayProperties}
+          groupBy={groupBy}
+          subGroupBy={subGroupBy}
+          orderBy={orderBy}
+          loadMoreIssues={loadMoreIssues}
+          getGroupIssueCount={getGroupIssueCount}
+          getPaginationData={getPaginationData}
+          getIssueLoader={getIssueLoader}
+          showEmptyGroup={showEmptyGroup}
+          scrollableContainerRef={scrollableContainerRef}
+        />
+      )}
+    </div>
+  );
+});
+
+interface ISubGroupSwimlaneHeader {
+  subGroupBy: TIssueGroupByOptions | undefined;
+  groupBy: TIssueGroupByOptions | undefined;
+  groupList: IGroupByColumn[];
+  showEmptyGroup: boolean;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+}
+
+const visibilitySubGroupByGroupCount = (subGroupIssueCount: number, showEmptyGroup: boolean): boolean => {
+  let subGroupHeaderVisibility = true;
+
+  if (showEmptyGroup) subGroupHeaderVisibility = true;
+  else {
+    if (subGroupIssueCount > 0) subGroupHeaderVisibility = true;
+    else subGroupHeaderVisibility = false;
+  }
+
+  return subGroupHeaderVisibility;
+};
+
+const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = observer(
+  ({ subGroupBy, groupBy, groupList, showEmptyGroup, getGroupIssueCount }) => (
+    <div className="relative flex h-max min-h-full w-full items-center gap-2">
+      {groupList &&
+        groupList.length > 0 &&
+        groupList.map((group: IGroupByColumn) => {
+          const groupCount = getGroupIssueCount(group.id, undefined, false) ?? 0;
+
+          const subGroupByVisibilityToggle = visibilitySubGroupByGroupCount(groupCount, showEmptyGroup);
+
+          if (subGroupByVisibilityToggle === false) return <></>;
+          return (
+            <div key={`${subGroupBy}_${group.id}`} className="flex w-[350px] flex-shrink-0 flex-col">
+              <HeaderGroupByCard groupBy={groupBy} icon={group.icon} title={group.name} count={groupCount} />
+            </div>
+          );
+        })}
+    </div>
+  )
+);
+
+interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  showEmptyGroup: boolean;
+  displayProperties: IIssueDisplayProperties | undefined;
+  orderBy: TIssueOrderByOptions | undefined;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
+  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
+}
+
+const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
+  const {
+    groupedIssueIds,
+    subGroupBy,
+    groupBy,
+    groupList,
+    displayProperties,
+    loadMoreIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+    showEmptyGroup,
+    scrollableContainerRef,
+  } = props;
+
+  return (
+    <div className="relative h-max min-h-full w-full">
+      {groupList &&
+        groupList.length > 0 &&
+        groupList.map((group: IGroupByColumn) => (
+          <SubGroup
+            key={group.id}
+            groupedIssueIds={groupedIssueIds}
+            subGroupBy={subGroupBy}
+            groupBy={groupBy}
+            group={group}
+            displayProperties={displayProperties}
+            loadMoreIssues={loadMoreIssues}
+            getGroupIssueCount={getGroupIssueCount}
+            getPaginationData={getPaginationData}
+            getIssueLoader={getIssueLoader}
+            showEmptyGroup={showEmptyGroup}
+            scrollableContainerRef={scrollableContainerRef}
+          />
+        ))}
+    </div>
+  );
+});
+
+interface ISubGroup {
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  showEmptyGroup: boolean;
+  displayProperties: IIssueDisplayProperties | undefined;
+  groupBy: TIssueGroupByOptions | undefined;
+  subGroupBy: TIssueGroupByOptions | undefined;
+  group: IGroupByColumn;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
+  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
+}
+
+const SubGroup: React.FC<ISubGroup> = observer((props) => {
+  const {
+    groupedIssueIds,
+    subGroupBy,
+    groupBy,
+    group,
+    displayProperties,
+    loadMoreIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+    showEmptyGroup,
+    scrollableContainerRef,
+  } = props;
+
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const toggleExpanded = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
+  const visibilitySubGroupBy = (
+    _list: IGroupByColumn,
+    subGroupCount: number
+  ): { showGroup: boolean; showIssues: boolean } => {
+    const subGroupVisibility = {
+      showGroup: true,
+      showIssues: true,
+    };
+    if (showEmptyGroup) subGroupVisibility.showGroup = true;
+    else {
+      if (subGroupCount > 0) subGroupVisibility.showGroup = true;
+      else subGroupVisibility.showGroup = false;
+    }
+    return subGroupVisibility;
+  };
+
+  const issueCount = getGroupIssueCount(undefined, group.id, true) ?? 0;
+  const subGroupByVisibilityToggle = visibilitySubGroupBy(group, issueCount);
+  if (subGroupByVisibilityToggle.showGroup === false) return <></>;
+
+  return (
+    <>
+      <div className="flex flex-shrink-0 flex-col">
+        <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
+          <div className="sticky left-0 flex-shrink-0">
+            <HeaderSubGroupByCard
+              icon={group.icon as any}
+              title={group.name || ""}
+              count={issueCount}
+              isExpanded={isExpanded}
+              toggleExpanded={toggleExpanded}
+            />
+          </div>
+        </div>
+
+        {subGroupByVisibilityToggle.showIssues && isExpanded && (
+          <div className="relative">
+            <KanBan
+              groupedIssueIds={groupedIssueIds}
+              displayProperties={displayProperties}
+              subGroupBy={subGroupBy}
+              groupBy={groupBy}
+              subGroupId={group.id}
+              showEmptyGroup={showEmptyGroup}
+              scrollableContainerRef={scrollableContainerRef}
+              loadMoreIssues={loadMoreIssues}
+              getGroupIssueCount={getGroupIssueCount}
+              getPaginationData={getPaginationData}
+              getIssueLoader={getIssueLoader}
+            />
+          </div>
+        )}
+      </div>
+    </>
+  );
+});

apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+// types
+import type { IIssueDisplayProperties, TGroupedIssues } from "@plane/types";
+// constants
+// components
+import { IssueLayoutHOC } from "@/components/issues/issue-layouts/issue-layout-HOC";
+// hooks
+import { useIssue } from "@/hooks/store/use-issue";
+import { List } from "./default";
+
+type Props = {
+  anchor: string;
+};
+
+export const IssuesListLayoutRoot = observer((props: Props) => {
+  const { anchor } = props;
+  // store hooks
+  const {
+    groupedIssueIds: storeGroupedIssueIds,
+    fetchNextPublicIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+  } = useIssue();
+
+  const groupedIssueIds = storeGroupedIssueIds as TGroupedIssues | undefined;
+  // auth
+  const displayProperties: IIssueDisplayProperties = useMemo(
+    () => ({
+      key: true,
+      state: true,
+      labels: true,
+      priority: true,
+      due_date: true,
+    }),
+    []
+  );
+
+  const loadMoreIssues = useCallback(
+    (groupId?: string) => {
+      fetchNextPublicIssues(anchor, groupId);
+    },
+    [anchor, fetchNextPublicIssues]
+  );
+
+  return (
+    <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
+      <div className={`relative size-full bg-custom-background-90`}>
+        <List
+          displayProperties={displayProperties}
+          groupBy={"state"}
+          groupedIssueIds={groupedIssueIds ?? {}}
+          loadMoreIssues={loadMoreIssues}
+          getGroupIssueCount={getGroupIssueCount}
+          getPaginationData={getPaginationData}
+          getIssueLoader={getIssueLoader}
+          showEmptyGroup
+        />
+      </div>
+    </IssueLayoutHOC>
+  );
+});

apps/space/core/components/issues/issue-layouts/list/block.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, useSearchParams } from "next/navigation";
+// plane types
+import { Tooltip } from "@plane/propel/tooltip";
+import type { IIssueDisplayProperties } from "@plane/types";
+// plane ui
+// plane utils
+import { cn } from "@plane/utils";
+// helpers
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+//
+import { IssueProperties } from "../properties/all-properties";
+
+interface IssueBlockProps {
+  issueId: string;
+  groupId: string;
+  displayProperties: IIssueDisplayProperties | undefined;
+}
+
+export const IssueBlock = observer((props: IssueBlockProps) => {
+  const { anchor } = useParams();
+  const { issueId, displayProperties } = props;
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board");
+  // ref
+  const issueRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { project_details } = usePublish(anchor.toString());
+  const { getIsIssuePeeked, setPeekId, getIssueById } = useIssueDetails();
+
+  const handleIssuePeekOverview = () => {
+    setPeekId(issueId);
+  };
+
+  const { queryParam } = queryParamGenerator(board ? { board, peekId: issueId } : { peekId: issueId });
+
+  const issue = getIssueById(issueId);
+
+  if (!issue) return null;
+
+  const projectIdentifier = project_details?.identifier;
+
+  return (
+    <div
+      ref={issueRef}
+      className={cn(
+        "group/list-block min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 hover:bg-custom-background-90 p-3 pl-1.5 text-sm transition-colors border-b border-b-custom-border-200",
+        {
+          "border-custom-primary-70": getIsIssuePeeked(issue.id),
+          "last:border-b-transparent": !getIsIssuePeeked(issue.id),
+        }
+      )}
+    >
+      <div className="flex w-full truncate">
+        <div className="flex flex-grow items-center gap-0.5 truncate">
+          <div className="flex items-center gap-1">
+            {displayProperties && displayProperties?.key && (
+              <div className="flex-shrink-0 text-xs font-medium text-custom-text-300 px-4">
+                {projectIdentifier}-{issue.sequence_id}
+              </div>
+            )}
+          </div>
+
+          <Link
+            id={`issue-${issue.id}`}
+            href={`?${queryParam}`}
+            onClick={handleIssuePeekOverview}
+            className="w-full truncate cursor-pointer text-sm text-custom-text-100"
+          >
+            <Tooltip tooltipContent={issue.name} position="top-start">
+              <p className="truncate">{issue.name}</p>
+            </Tooltip>
+          </Link>
+        </div>
+      </div>
+      <div className="flex flex-shrink-0 items-center gap-2">
+        <IssueProperties
+          className="relative flex flex-wrap md:flex-grow md:flex-shrink-0 items-center gap-2 whitespace-nowrap"
+          issue={issue}
+          displayProperties={displayProperties}
+        />
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx

@@ -0,0 +1,25 @@
+import type { FC, MutableRefObject } from "react";
+// types
+import type { IIssueDisplayProperties } from "@plane/types";
+import { IssueBlock } from "./block";
+
+interface Props {
+  issueIds: string[] | undefined;
+  groupId: string;
+  displayProperties?: IIssueDisplayProperties;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+}
+
+export const IssueBlocksList: FC<Props> = (props) => {
+  const { issueIds = [], groupId, displayProperties } = props;
+
+  return (
+    <div className="relative h-full w-full">
+      {issueIds &&
+        issueIds?.length > 0 &&
+        issueIds.map((issueId: string) => (
+          <IssueBlock key={issueId} issueId={issueId} displayProperties={displayProperties} groupId={groupId} />
+        ))}
+    </div>
+  );
+};

apps/space/core/components/issues/issue-layouts/list/default.tsx

@@ -0,0 +1,90 @@
+import { useRef } from "react";
+import { observer } from "mobx-react";
+// types
+import type {
+  GroupByColumnTypes,
+  TGroupedIssues,
+  IIssueDisplayProperties,
+  TIssueGroupByOptions,
+  IGroupByColumn,
+  TPaginationData,
+  TLoader,
+} from "@plane/types";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useStates } from "@/hooks/store/use-state";
+//
+import { getGroupByColumns } from "../utils";
+import { ListGroup } from "./list-group";
+
+export interface IList {
+  groupedIssueIds: TGroupedIssues;
+  groupBy: TIssueGroupByOptions | undefined;
+  displayProperties: IIssueDisplayProperties | undefined;
+  showEmptyGroup?: boolean;
+  loadMoreIssues: (groupId?: string) => void;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
+  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+}
+
+export const List: React.FC<IList> = observer((props) => {
+  const {
+    groupedIssueIds,
+    groupBy,
+    displayProperties,
+    showEmptyGroup,
+    loadMoreIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+  } = props;
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const member = useMember();
+  const label = useLabel();
+  const cycle = useCycle();
+  const modules = useModule();
+  const state = useStates();
+
+  const groupList = getGroupByColumns(groupBy as GroupByColumnTypes, cycle, modules, label, state, member, true);
+
+  if (!groupList) return null;
+
+  return (
+    <div className="relative size-full flex flex-col">
+      {groupList && (
+        <>
+          <div
+            ref={containerRef}
+            className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto vertical-scrollbar-margin-top-md"
+          >
+            {groupList.map((group: IGroupByColumn) => (
+              <ListGroup
+                key={group.id}
+                groupIssueIds={groupedIssueIds?.[group.id]}
+                groupBy={groupBy}
+                group={group}
+                displayProperties={displayProperties}
+                showEmptyGroup={showEmptyGroup}
+                loadMoreIssues={loadMoreIssues}
+                getGroupIssueCount={getGroupIssueCount}
+                getPaginationData={getPaginationData}
+                getIssueLoader={getIssueLoader}
+                containerRef={containerRef}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { CircleDashed } from "lucide-react";
+
+interface IHeaderGroupByCard {
+  groupID: string;
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  toggleListGroup: (id: string) => void;
+}
+
+export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
+  const { groupID, icon, title, count, toggleListGroup } = props;
+
+  return (
+    <>
+      <div
+        className="group/list-header relative w-full flex-shrink-0 flex items-center gap-2 py-1.5"
+        onClick={() => toggleListGroup(groupID)}
+      >
+        <div className="flex-shrink-0 grid place-items-center overflow-hidden">
+          {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
+        </div>
+
+        <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden cursor-pointer">
+          <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
+          <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+        </div>
+      </div>
+    </>
+  );
+});

apps/space/core/components/issues/issue-layouts/list/list-group.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import type { MutableRefObject } from "react";
+import { Fragment, forwardRef, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// plane types
+import type {
+  IGroupByColumn,
+  TIssueGroupByOptions,
+  IIssueDisplayProperties,
+  TPaginationData,
+  TLoader,
+} from "@plane/types";
+// plane utils
+import { cn } from "@plane/utils";
+// hooks
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+//
+import { IssueBlocksList } from "./blocks-list";
+import { HeaderGroupByCard } from "./headers/group-by-card";
+
+interface Props {
+  groupIssueIds: string[] | undefined;
+  group: IGroupByColumn;
+  groupBy: TIssueGroupByOptions | undefined;
+  displayProperties: IIssueDisplayProperties | undefined;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+  showEmptyGroup?: boolean;
+  loadMoreIssues: (groupId?: string) => void;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
+  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+}
+
+// List loader component
+const ListLoaderItemRow = forwardRef<HTMLDivElement>((props, ref) => (
+  <div ref={ref} className="flex items-center justify-between h-11 p-3 border-b border-custom-border-200">
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
+      <span className={`h-5 w-52 bg-custom-background-80 rounded animate-pulse`} />
+    </div>
+    <div className="flex items-center gap-2">
+      {[...Array(6)].map((_, index) => (
+        <Fragment key={index}>
+          <span key={index} className="h-5 w-5 bg-custom-background-80 rounded animate-pulse" />
+        </Fragment>
+      ))}
+    </div>
+  </div>
+));
+ListLoaderItemRow.displayName = "ListLoaderItemRow";
+
+export const ListGroup = observer((props: Props) => {
+  const {
+    groupIssueIds = [],
+    group,
+    groupBy,
+    displayProperties,
+    containerRef,
+    showEmptyGroup,
+    loadMoreIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+  } = props;
+  const [isExpanded, setIsExpanded] = useState(true);
+  const groupRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { t } = useTranslation();
+
+  const [intersectionElement, setIntersectionElement] = useState<HTMLDivElement | null>(null);
+
+  const groupIssueCount = getGroupIssueCount(group.id, undefined, false) ?? 0;
+  const nextPageResults = getPaginationData(group.id, undefined)?.nextPageResults;
+  const isPaginating = !!getIssueLoader(group.id);
+
+  useIntersectionObserver(containerRef, isPaginating ? null : intersectionElement, loadMoreIssues, `100% 0% 100% 0%`);
+
+  const shouldLoadMore =
+    nextPageResults === undefined && groupIssueCount !== undefined && groupIssueIds
+      ? groupIssueIds.length < groupIssueCount
+      : !!nextPageResults;
+
+  const loadMore = isPaginating ? (
+    <ListLoaderItemRow />
+  ) : (
+    <div
+      className={
+        "h-11 relative flex items-center gap-3 bg-custom-background-100 border border-transparent border-t-custom-border-200 pl-6 p-3 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+      }
+      onClick={() => loadMoreIssues(group.id)}
+    >
+      {t("common.load_more")} &darr;
+    </div>
+  );
+
+  const validateEmptyIssueGroups = (issueCount: number = 0) => {
+    if (!showEmptyGroup && issueCount <= 0) return false;
+    return true;
+  };
+
+  const toggleListGroup = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
+  const shouldExpand = (!!groupIssueCount && isExpanded) || !groupBy;
+
+  return validateEmptyIssueGroups(groupIssueCount) ? (
+    <div ref={groupRef} className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`)}>
+      <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 pl-2 pr-3 py-1">
+        <HeaderGroupByCard
+          groupID={group.id}
+          icon={group.icon}
+          title={group.name || ""}
+          count={groupIssueCount}
+          toggleListGroup={toggleListGroup}
+        />
+      </div>
+      {shouldExpand && (
+        <div className="relative">
+          {groupIssueIds && (
+            <IssueBlocksList
+              issueIds={groupIssueIds}
+              groupId={group.id}
+              displayProperties={displayProperties}
+              containerRef={containerRef}
+            />
+          )}
+
+          {shouldLoadMore && (groupBy ? <>{loadMore}</> : <ListLoaderItemRow ref={setIntersectionElement} />)}
+        </div>
+      )}
+    </div>
+  ) : null;
+});

apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { Link, Paperclip } from "lucide-react";
+import { ViewsIcon } from "@plane/propel/icons";
+// plane imports
+import { Tooltip } from "@plane/propel/tooltip";
+import type { IIssueDisplayProperties } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { WithDisplayPropertiesHOC } from "@/components/issues/issue-layouts/with-display-properties-HOC";
+// helpers
+import { getDate } from "@/helpers/date-time.helper";
+//// hooks
+import type { IIssue } from "@/types/issue";
+import { IssueBlockCycle } from "./cycle";
+import { IssueBlockDate } from "./due-date";
+import { IssueBlockLabels } from "./labels";
+import { IssueBlockMembers } from "./member";
+import { IssueBlockModules } from "./modules";
+import { IssueBlockPriority } from "./priority";
+import { IssueBlockState } from "./state";
+
+export interface IIssueProperties {
+  issue: IIssue;
+  displayProperties: IIssueDisplayProperties | undefined;
+  className: string;
+}
+
+export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
+  const { issue, displayProperties, className } = props;
+
+  if (!displayProperties || !issue.project_id) return null;
+
+  const minDate = getDate(issue.start_date);
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = getDate(issue.target_date);
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <div className={className}>
+      {/* basic properties */}
+      {/* state */}
+      {issue.state_id && (
+        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="state">
+          <div className="h-5">
+            <IssueBlockState stateId={issue.state_id} />
+          </div>
+        </WithDisplayPropertiesHOC>
+      )}
+
+      {/* priority */}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="priority">
+        <div className="h-5">
+          <IssueBlockPriority priority={issue.priority} />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* label */}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="labels">
+        <div className="h-5">
+          <IssueBlockLabels labelIds={issue.label_ids} />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* start date */}
+      {issue?.start_date && (
+        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="start_date">
+          <div className="h-5">
+            <IssueBlockDate
+              due_date={issue?.start_date}
+              stateId={issue?.state_id ?? undefined}
+              shouldHighLight={false}
+            />
+          </div>
+        </WithDisplayPropertiesHOC>
+      )}
+
+      {/* target/due date */}
+      {issue?.target_date && (
+        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="due_date">
+          <div className="h-5">
+            <IssueBlockDate due_date={issue?.target_date} stateId={issue?.state_id ?? undefined} />
+          </div>
+        </WithDisplayPropertiesHOC>
+      )}
+
+      {/* assignee */}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="assignee">
+        <div className="h-5">
+          <IssueBlockMembers memberIds={issue.assignee_ids} />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* modules */}
+      {issue.module_ids && issue.module_ids.length > 0 && (
+        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="modules">
+          <div className="h-5">
+            <IssueBlockModules moduleIds={issue.module_ids} />
+          </div>
+        </WithDisplayPropertiesHOC>
+      )}
+
+      {/* cycles */}
+      {issue.cycle_id && (
+        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="cycle">
+          <div className="h-5">
+            <IssueBlockCycle cycleId={issue.cycle_id} />
+          </div>
+        </WithDisplayPropertiesHOC>
+      )}
+
+      {/* estimates */}
+      {/* {projectId && areEstimateEnabledByProjectId(projectId?.toString()) && (
+        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="estimate">
+          <div className="h-5">
+            <EstimateDropdown
+              value={issue.estimate_point ?? undefined}
+              onChange={handleEstimate}
+              projectId={issue.project_id}
+              disabled={isReadOnly}
+              buttonVariant="border-with-text"
+              showTooltip
+            />
+          </div>
+        </WithDisplayPropertiesHOC>
+      )} */}
+
+      {/* extra render properties */}
+      {/* sub-issues */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey="sub_issue_count"
+        shouldRenderProperty={(properties) => !!properties.sub_issue_count && !!issue.sub_issues_count}
+      >
+        <Tooltip tooltipHeading="Sub-work items" tooltipContent={`${issue.sub_issues_count}`}>
+          <div
+            className={cn(
+              "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1",
+              {
+                "hover:bg-custom-background-80 cursor-pointer": issue.sub_issues_count,
+              }
+            )}
+          >
+            <ViewsIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.sub_issues_count}</div>
+          </div>
+        </Tooltip>
+      </WithDisplayPropertiesHOC>
+
+      {/* attachments */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey="attachment_count"
+        shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count}
+      >
+        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+            <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.attachment_count}</div>
+          </div>
+        </Tooltip>
+      </WithDisplayPropertiesHOC>
+
+      {/* link */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey="link"
+        shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count}
+      >
+        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+            <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.link_count}</div>
+          </div>
+        </Tooltip>
+      </WithDisplayPropertiesHOC>
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/properties/cycle.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { observer } from "mobx-react";
+// plane ui
+import { CycleIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+// plane utils
+import { cn } from "@plane/utils";
+//hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+
+type Props = {
+  cycleId: string | undefined;
+  shouldShowBorder?: boolean;
+};
+
+export const IssueBlockCycle = observer(({ cycleId, shouldShowBorder = true }: Props) => {
+  const { getCycleById } = useCycle();
+
+  const cycle = getCycleById(cycleId);
+
+  return (
+    <Tooltip tooltipHeading="Cycle" tooltipContent={cycle?.name ?? "No Cycle"}>
+      <div
+        className={cn(
+          "flex h-full w-full items-center justify-between gap-1 rounded px-2.5 py-1 text-xs  duration-300 focus:outline-none",
+          { "border-[0.5px] border-custom-border-300": shouldShowBorder }
+        )}
+      >
+        <div className="flex w-full items-center text-xs gap-1.5">
+          <CycleIcon className="h-3 w-3 flex-shrink-0" />
+          <div className="max-w-40 flex-grow truncate ">{cycle?.name ?? "No Cycle"}</div>
+        </div>
+      </div>
+    </Tooltip>
+  );
+});

apps/space/core/components/issues/issue-layouts/properties/due-date.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { CalendarCheck2 } from "lucide-react";
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "@plane/utils";
+// helpers
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
+// hooks
+import { useStates } from "@/hooks/store/use-state";
+
+type Props = {
+  due_date: string | undefined;
+  stateId: string | undefined;
+  shouldHighLight?: boolean;
+  shouldShowBorder?: boolean;
+};
+
+export const IssueBlockDate = observer((props: Props) => {
+  const { due_date, stateId, shouldHighLight = true, shouldShowBorder = true } = props;
+  const { getStateById } = useStates();
+
+  const state = getStateById(stateId);
+
+  const formattedDate = renderFormattedDate(due_date);
+
+  return (
+    <Tooltip tooltipHeading="Due Date" tooltipContent={formattedDate}>
+      <div
+        className={cn("flex h-full items-center gap-1 rounded px-2.5 py-1 text-xs text-custom-text-100", {
+          "text-red-500": shouldHighLight && due_date && shouldHighlightIssueDueDate(due_date, state?.group),
+          "border-[0.5px] border-custom-border-300": shouldShowBorder,
+        })}
+      >
+        <CalendarCheck2 className="size-3 flex-shrink-0" />
+        {formattedDate ? formattedDate : "No Date"}
+      </div>
+    </Tooltip>
+  );
+});

apps/space/core/components/issues/issue-layouts/properties/labels.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { Tags } from "lucide-react";
+// plane imports
+import { Tooltip } from "@plane/propel/tooltip";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+
+type Props = {
+  labelIds: string[];
+  shouldShowLabel?: boolean;
+};
+
+export const IssueBlockLabels = observer(({ labelIds, shouldShowLabel = false }: Props) => {
+  const { getLabelsByIds } = useLabel();
+
+  const labels = getLabelsByIds(labelIds);
+
+  const labelsString = labels.length > 0 ? labels.map((label) => label.name).join(", ") : "No Labels";
+
+  if (labels.length <= 0)
+    return (
+      <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
+        <div
+          className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs border-[0.5px] border-custom-border-300`}
+        >
+          <Tags className="h-3.5 w-3.5" strokeWidth={2} />
+          {shouldShowLabel && <span>No Labels</span>}
+        </div>
+      </Tooltip>
+    );
+
+  return (
+    <div className="flex h-5 w-full flex-wrap items-center gap-2 overflow-hidden">
+      {labels.length <= 2 ? (
+        <>
+          {labels.map((label) => (
+            <Tooltip key={label.id} position="top" tooltipHeading="Labels" tooltipContent={label?.name ?? ""}>
+              <div
+                key={label?.id}
+                className={`flex overflow-hidden h-full max-w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs`}
+              >
+                <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
+                  <span
+                    className="h-2 w-2 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: label?.color ?? "#000000",
+                    }}
+                  />
+                  <div className="line-clamp-1 inline-block w-auto max-w-[100px] truncate">{label?.name}</div>
+                </div>
+              </div>
+            </Tooltip>
+          ))}
+        </>
+      ) : (
+        <div
+          className={`flex h-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs cursor-not-allowed"
+            `}
+        >
+          <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labelsString}>
+            <div className="flex h-full items-center gap-1.5 text-custom-text-200">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+              {`${labels.length} Labels`}
+            </div>
+          </Tooltip>
+        </div>
+      )}
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/properties/member.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { observer } from "mobx-react";
+// icons
+import type { LucideIcon } from "lucide-react";
+import { Users } from "lucide-react";
+// plane ui
+import { Avatar, AvatarGroup } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+//
+import type { TPublicMember } from "@/types/member";
+
+type Props = {
+  memberIds: string[];
+  shouldShowBorder?: boolean;
+};
+
+type AvatarProps = {
+  showTooltip: boolean;
+  members: TPublicMember[];
+  icon?: LucideIcon;
+};
+
+export const ButtonAvatars: React.FC<AvatarProps> = observer((props: AvatarProps) => {
+  const { showTooltip, members, icon: Icon } = props;
+
+  if (Array.isArray(members)) {
+    if (members.length > 1) {
+      return (
+        <AvatarGroup size="md" showTooltip={!showTooltip}>
+          {members.map((member) => {
+            if (!member) return;
+            return <Avatar key={member.id} src={member.member__avatar} name={member.member__display_name} />;
+          })}
+        </AvatarGroup>
+      );
+    } else if (members.length === 1) {
+      return (
+        <Avatar
+          src={members[0].member__avatar}
+          name={members[0].member__display_name}
+          size="md"
+          showTooltip={!showTooltip}
+        />
+      );
+    }
+  }
+
+  return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className="h-3 w-3 mx-[4px] flex-shrink-0" />;
+});
+
+export const IssueBlockMembers = observer(({ memberIds, shouldShowBorder = true }: Props) => {
+  const { getMembersByIds } = useMember();
+
+  const members = getMembersByIds(memberIds);
+
+  return (
+    <div className="relative h-full flex flex-wrap items-center gap-1">
+      <div
+        className={cn("flex flex-shrink-0 cursor-default items-center rounded-md text-xs", {
+          "border-[0.5px] border-custom-border-300 px-2.5 py-1": shouldShowBorder && !members?.length,
+        })}
+      >
+        <div className="flex items-center gap-1.5 text-custom-text-200">
+          <ButtonAvatars members={members} showTooltip={false} />
+          {!shouldShowBorder && members.length <= 1 && (
+            <span>{members?.[0]?.member__display_name ?? "No Assignees"}</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/properties/modules.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { observer } from "mobx-react";
+// plane ui
+import { ModuleIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+// plane utils
+import { cn } from "@plane/utils";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+
+type Props = {
+  moduleIds: string[] | undefined;
+  shouldShowBorder?: boolean;
+};
+
+export const IssueBlockModules = observer(({ moduleIds, shouldShowBorder = true }: Props) => {
+  const { getModulesByIds } = useModule();
+
+  const modules = getModulesByIds(moduleIds ?? []);
+
+  const modulesString = modules.map((module) => module.name).join(", ");
+
+  return (
+    <div className="relative flex h-full flex-wrap items-center gap-1">
+      <Tooltip tooltipHeading="Modules" tooltipContent={modulesString}>
+        {modules.length <= 1 ? (
+          <div
+            key={modules?.[0]?.id}
+            className={cn("flex h-full flex-shrink-0 cursor-default items-center rounded-md px-2.5 py-1 text-xs", {
+              "border-[0.5px] border-custom-border-300": shouldShowBorder,
+            })}
+          >
+            <div className="flex items-center gap-1.5 text-custom-text-200">
+              <ModuleIcon className="h-3 w-3 flex-shrink-0" />
+              <div className="text-xs">{modules?.[0]?.name ?? "No Modules"}</div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex h-full flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs">
+            <div className="flex items-center gap-1.5 text-custom-text-200">
+              <div className="text-xs">{modules.length} Modules</div>
+            </div>
+          </div>
+        )}
+      </Tooltip>
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/properties/priority.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { SignalHigh } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+// types
+import { PriorityIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { TIssuePriorities } from "@plane/types";
+// constants
+import { cn, getIssuePriorityFilters } from "@plane/utils";
+
+export const IssueBlockPriority = ({
+  priority,
+  shouldShowName = false,
+}: {
+  priority: TIssuePriorities | null;
+  shouldShowName?: boolean;
+}) => {
+  // hooks
+  const { t } = useTranslation();
+  const priority_detail = priority != null ? getIssuePriorityFilters(priority) : null;
+
+  const priorityClasses = {
+    urgent: "bg-red-600/10 text-red-600 border-red-600 px-1",
+    high: "bg-orange-500/20 text-orange-950 border-orange-500",
+    medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
+    low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
+    none: "hover:bg-custom-background-80 border-custom-border-300",
+  };
+
+  if (priority_detail === null) return <></>;
+
+  return (
+    <Tooltip tooltipHeading="Priority" tooltipContent={t(priority_detail?.titleTranslationKey || "")}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 border-[0.5px] rounded text-xs px-2 py-0.5",
+          priorityClasses[priority ?? "none"],
+          {
+            // compact the icons if text is hidden
+            "px-0.5": !shouldShowName,
+            // highlight the whole button if text is hidden and priority is urgent
+            "bg-red-600/10 border-red-600": priority === "urgent" && shouldShowName,
+          }
+        )}
+      >
+        {priority ? (
+          <PriorityIcon
+            priority={priority}
+            size={12}
+            className={cn("flex-shrink-0", {
+              // increase the icon size if text is hidden
+              "h-3.5 w-3.5": !shouldShowName,
+              // centre align the icons if text is hidden
+              "translate-x-[0.0625rem]": !shouldShowName && priority === "high",
+              "translate-x-0.5": !shouldShowName && priority === "medium",
+              "translate-x-1": !shouldShowName && priority === "low",
+              // highlight the icon if priority is urgent
+            })}
+          />
+        ) : (
+          <SignalHigh className="size-3" />
+        )}
+        {shouldShowName && <span className="pl-2 text-sm">{t(priority_detail?.titleTranslationKey || "")}</span>}
+      </div>
+    </Tooltip>
+  );
+};

apps/space/core/components/issues/issue-layouts/properties/state.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { observer } from "mobx-react";
+// plane ui
+import { StateGroupIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+// plane utils
+import { cn } from "@plane/utils";
+//hooks
+import { useStates } from "@/hooks/store/use-state";
+
+type Props = {
+  stateId: string | undefined;
+  shouldShowBorder?: boolean;
+};
+export const IssueBlockState = observer(({ stateId, shouldShowBorder = true }: Props) => {
+  const { getStateById } = useStates();
+
+  const state = getStateById(stateId);
+
+  return (
+    <Tooltip tooltipHeading="State" tooltipContent={state?.name ?? "State"}>
+      <div
+        className={cn("flex h-full w-full items-center justify-between gap-1 rounded px-2.5 py-1 text-xs", {
+          "border-[0.5px] border-custom-border-300": shouldShowBorder,
+        })}
+      >
+        <div className="flex w-full items-center gap-1.5">
+          <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} />
+          <div className="text-xs">{state?.name ?? "State"}</div>
+        </div>
+      </div>
+    </Tooltip>
+  );
+});

apps/space/core/components/issues/issue-layouts/root.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import type { FC } from "react";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { IssueAppliedFilters } from "@/components/issues/filters/applied-filters/root";
+import { IssuePeekOverview } from "@/components/issues/peek-overview";
+// hooks
+import { useIssue } from "@/hooks/store/use-issue";
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useIssueFilter } from "@/hooks/store/use-issue-filter";
+// store
+import type { PublishStore } from "@/store/publish/publish.store";
+// local imports
+import { SomethingWentWrongError } from "./error";
+import { IssueKanbanLayoutRoot } from "./kanban/base-kanban-root";
+import { IssuesListLayoutRoot } from "./list/base-list-root";
+
+type Props = {
+  peekId: string | undefined;
+  publishSettings: PublishStore;
+};
+
+export const IssuesLayoutsRoot: FC<Props> = observer((props) => {
+  const { peekId, publishSettings } = props;
+  // store hooks
+  const { getIssueFilters } = useIssueFilter();
+  const { fetchPublicIssues } = useIssue();
+  const issueDetailStore = useIssueDetails();
+  // derived values
+  const { anchor } = publishSettings;
+  const issueFilters = anchor ? getIssueFilters(anchor) : undefined;
+  // derived values
+  const activeLayout = issueFilters?.display_filters?.layout || undefined;
+
+  const { error } = useSWR(
+    anchor ? `PUBLIC_ISSUES_${anchor}` : null,
+    anchor
+      ? () => fetchPublicIssues(anchor, "init-loader", { groupedBy: "state", canGroup: true, perPageCount: 50 })
+      : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  useEffect(() => {
+    if (peekId) {
+      issueDetailStore.setPeekId(peekId.toString());
+    }
+  }, [peekId, issueDetailStore]);
+
+  if (!anchor) return null;
+
+  if (error) return <SomethingWentWrongError />;
+
+  return (
+    <div className="relative h-full w-full overflow-hidden">
+      {peekId && <IssuePeekOverview anchor={anchor} peekId={peekId} />}
+      {activeLayout && (
+        <div className="relative flex h-full w-full flex-col overflow-hidden">
+          {/* applied filters */}
+          <IssueAppliedFilters anchor={anchor} />
+
+          {activeLayout === "list" && (
+            <div className="relative h-full w-full overflow-y-auto">
+              <IssuesListLayoutRoot anchor={anchor} />
+            </div>
+          )}
+          {activeLayout === "kanban" && (
+            <div className="relative mx-auto h-full w-full p-5">
+              <IssueKanbanLayoutRoot anchor={anchor} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});

apps/space/core/components/issues/issue-layouts/utils.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { isNil } from "lodash-es";
+// types
+import { EIconSize, ISSUE_PRIORITIES } from "@plane/constants";
+import { CycleGroupIcon, CycleIcon, ModuleIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import type {
+  GroupByColumnTypes,
+  IGroupByColumn,
+  TCycleGroups,
+  IIssueDisplayProperties,
+  TGroupedIssues,
+} from "@plane/types";
+// ui
+import { Avatar } from "@plane/ui";
+// components
+// constants
+// stores
+import type { ICycleStore } from "@/store/cycle.store";
+import type { IIssueLabelStore } from "@/store/label.store";
+import type { IIssueMemberStore } from "@/store/members.store";
+import type { IIssueModuleStore } from "@/store/module.store";
+import type { IStateStore } from "@/store/state.store";
+
+export const HIGHLIGHT_CLASS = "highlight";
+export const HIGHLIGHT_WITH_LINE = "highlight-with-line";
+
+export const getGroupByColumns = (
+  groupBy: GroupByColumnTypes | null,
+  cycle: ICycleStore,
+  module: IIssueModuleStore,
+  label: IIssueLabelStore,
+  projectState: IStateStore,
+  member: IIssueMemberStore,
+  includeNone?: boolean
+): IGroupByColumn[] | undefined => {
+  switch (groupBy) {
+    case "cycle":
+      return getCycleColumns(cycle);
+    case "module":
+      return getModuleColumns(module);
+    case "state":
+      return getStateColumns(projectState);
+    case "priority":
+      return getPriorityColumns();
+    case "labels":
+      return getLabelsColumns(label) as any;
+    case "assignees":
+      return getAssigneeColumns(member) as any;
+    case "created_by":
+      return getCreatedByColumns(member) as any;
+    default:
+      if (includeNone) return [{ id: `All Issues`, name: `All work items`, payload: {}, icon: undefined }];
+  }
+};
+
+const getCycleColumns = (cycleStore: ICycleStore): IGroupByColumn[] | undefined => {
+  const { cycles } = cycleStore;
+
+  if (!cycles) return;
+
+  const cycleGroups: IGroupByColumn[] = [];
+
+  cycles.map((cycle) => {
+    if (cycle) {
+      const cycleStatus = cycle?.status ? (cycle.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+      cycleGroups.push({
+        id: cycle.id,
+        name: cycle.name,
+        icon: <CycleGroupIcon cycleGroup={cycleStatus as TCycleGroups} className="h-3.5 w-3.5" />,
+        payload: { cycle_id: cycle.id },
+      });
+    }
+  });
+  cycleGroups.push({
+    id: "None",
+    name: "None",
+    icon: <CycleIcon className="h-3.5 w-3.5" />,
+    payload: { cycle_id: null },
+  });
+
+  return cycleGroups;
+};
+
+const getModuleColumns = (moduleStore: IIssueModuleStore): IGroupByColumn[] | undefined => {
+  const { modules } = moduleStore;
+
+  if (!modules) return;
+
+  const moduleGroups: IGroupByColumn[] = [];
+
+  modules.map((moduleInfo) => {
+    if (moduleInfo)
+      moduleGroups.push({
+        id: moduleInfo.id,
+        name: moduleInfo.name,
+        icon: <ModuleIcon className="h-3.5 w-3.5" />,
+        payload: { module_ids: [moduleInfo.id] },
+      });
+  }) as any;
+  moduleGroups.push({
+    id: "None",
+    name: "None",
+    icon: <ModuleIcon className="h-3.5 w-3.5" />,
+    payload: { module_ids: [] },
+  });
+
+  return moduleGroups as any;
+};
+
+const getStateColumns = (projectState: IStateStore): IGroupByColumn[] | undefined => {
+  const { sortedStates } = projectState;
+  if (!sortedStates) return;
+
+  return sortedStates.map((state) => ({
+    id: state.id,
+    name: state.name,
+    icon: (
+      <div className="h-3.5 w-3.5 rounded-full">
+        <StateGroupIcon stateGroup={state.group} color={state.color} size={EIconSize.MD} />
+      </div>
+    ),
+    payload: { state_id: state.id },
+  })) as any;
+};
+
+const getPriorityColumns = () => {
+  const priorities = ISSUE_PRIORITIES;
+
+  return priorities.map((priority) => ({
+    id: priority.key,
+    name: priority.title,
+    icon: <PriorityIcon priority={priority?.key} />,
+    payload: { priority: priority.key },
+  }));
+};
+
+const getLabelsColumns = (label: IIssueLabelStore) => {
+  const { labels: storeLabels } = label;
+
+  if (!storeLabels) return;
+
+  const labels = [...storeLabels, { id: "None", name: "None", color: "#666" }];
+
+  return labels.map((label) => ({
+    id: label.id,
+    name: label.name,
+    icon: (
+      <div className="h-[12px] w-[12px] rounded-full" style={{ backgroundColor: label.color ? label.color : "#666" }} />
+    ),
+    payload: label?.id === "None" ? {} : { label_ids: [label.id] },
+  }));
+};
+
+const getAssigneeColumns = (member: IIssueMemberStore) => {
+  const { members } = member;
+
+  if (!members) return;
+
+  const assigneeColumns: any = members.map((member) => ({
+    id: member.id,
+    name: member?.member__display_name || "",
+    icon: <Avatar name={member?.member__display_name} src={undefined} size="md" />,
+    payload: { assignee_ids: [member.id] },
+  }));
+
+  assigneeColumns.push({ id: "None", name: "None", icon: <Avatar size="md" />, payload: {} });
+
+  return assigneeColumns;
+};
+
+const getCreatedByColumns = (member: IIssueMemberStore) => {
+  const { members } = member;
+
+  if (!members) return;
+
+  return members.map((member) => ({
+    id: member.id,
+    name: member?.member__display_name || "",
+    icon: <Avatar name={member?.member__display_name} src={undefined} size="md" />,
+    payload: {},
+  }));
+};
+
+export const getDisplayPropertiesCount = (
+  displayProperties: IIssueDisplayProperties,
+  ignoreFields?: (keyof IIssueDisplayProperties)[]
+) => {
+  const propertyKeys = Object.keys(displayProperties) as (keyof IIssueDisplayProperties)[];
+
+  let count = 0;
+
+  for (const propertyKey of propertyKeys) {
+    if (ignoreFields && ignoreFields.includes(propertyKey)) continue;
+    if (displayProperties[propertyKey]) count++;
+  }
+
+  return count;
+};
+
+export const getIssueBlockId = (
+  issueId: string | undefined,
+  groupId: string | undefined,
+  subGroupId?: string | undefined
+) => `issue_${issueId}_${groupId}_${subGroupId}`;
+
+/**
+ * returns empty Array if groupId is None
+ * @param groupId
+ * @returns
+ */
+export const getGroupId = (groupId: string) => {
+  if (groupId === "None") return [];
+  return [groupId];
+};
+
+/**
+ * method that removes Null or undefined Keys from object
+ * @param obj
+ * @returns
+ */
+export const removeNillKeys = <T,>(obj: T) =>
+  Object.fromEntries(Object.entries(obj ?? {}).filter(([key, value]) => key && !isNil(value)));
+
+/**
+ * This Method returns if the the grouped values are subGrouped
+ * @param groupedIssueIds
+ * @returns
+ */
+export const isSubGrouped = (groupedIssueIds: TGroupedIssues) => {
+  if (!groupedIssueIds || Array.isArray(groupedIssueIds)) {
+    return false;
+  }
+
+  if (Array.isArray(groupedIssueIds[Object.keys(groupedIssueIds)[0]])) {
+    return false;
+  }
+
+  return true;
+};

apps/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { IIssueDisplayProperties } from "@plane/types";
+
+interface IWithDisplayPropertiesHOC {
+  displayProperties: IIssueDisplayProperties;
+  shouldRenderProperty?: (displayProperties: IIssueDisplayProperties) => boolean;
+  displayPropertyKey: keyof IIssueDisplayProperties | (keyof IIssueDisplayProperties)[];
+  children: ReactNode;
+}
+
+export const WithDisplayPropertiesHOC = observer(
+  ({ displayProperties, shouldRenderProperty, displayPropertyKey, children }: IWithDisplayPropertiesHOC) => {
+    let shouldDisplayPropertyFromFilters = false;
+    if (Array.isArray(displayPropertyKey))
+      shouldDisplayPropertyFromFilters = displayPropertyKey.every((key) => !!displayProperties[key]);
+    else shouldDisplayPropertyFromFilters = !!displayProperties[displayPropertyKey];
+
+    const renderProperty =
+      shouldDisplayPropertyFromFilters && (shouldRenderProperty ? shouldRenderProperty(displayProperties) : true);
+
+    if (!renderProperty) return null;
+
+    return <>{children}</>;
+  }
+);

apps/space/core/components/issues/navbar/controls.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import type { FC } from "react";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useRouter, useSearchParams } from "next/navigation";
+// components
+import { IssueFiltersDropdown } from "@/components/issues/filters";
+// helpers
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useIssueFilter } from "@/hooks/store/use-issue-filter";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+// store
+import type { PublishStore } from "@/store/publish/publish.store";
+// types
+import type { TIssueLayout } from "@/types/issue";
+// local imports
+import { IssuesLayoutSelection } from "./layout-selection";
+import { NavbarTheme } from "./theme";
+import { UserAvatar } from "./user-avatar";
+
+export type NavbarControlsProps = {
+  publishSettings: PublishStore;
+};
+
+export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
+  // props
+  const { publishSettings } = props;
+  // router
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const peekId = searchParams.get("peekId") || undefined;
+  // hooks
+  const { getIssueFilters, isIssueFiltersUpdated, initIssueFilters } = useIssueFilter();
+  const { setPeekId } = useIssueDetails();
+  // derived values
+  const { anchor, view_props, workspace_detail } = publishSettings;
+  const issueFilters = anchor ? getIssueFilters(anchor) : undefined;
+  const activeLayout = issueFilters?.display_filters?.layout || undefined;
+
+  const isInIframe = useIsInIframe();
+
+  useEffect(() => {
+    if (anchor && workspace_detail) {
+      const viewsAcceptable: string[] = [];
+      let currentBoard: TIssueLayout | null = null;
+
+      if (view_props?.list) viewsAcceptable.push("list");
+      if (view_props?.kanban) viewsAcceptable.push("kanban");
+      if (view_props?.calendar) viewsAcceptable.push("calendar");
+      if (view_props?.gantt) viewsAcceptable.push("gantt");
+      if (view_props?.spreadsheet) viewsAcceptable.push("spreadsheet");
+
+      if (board) {
+        if (viewsAcceptable.includes(board.toString())) currentBoard = board.toString() as TIssueLayout;
+        else {
+          if (viewsAcceptable && viewsAcceptable.length > 0) currentBoard = viewsAcceptable[0] as TIssueLayout;
+        }
+      } else {
+        if (viewsAcceptable && viewsAcceptable.length > 0) currentBoard = viewsAcceptable[0] as TIssueLayout;
+      }
+
+      if (currentBoard) {
+        if (activeLayout === undefined || activeLayout !== currentBoard) {
+          const { query, queryParam } = queryParamGenerator({ board: currentBoard, peekId, priority, state, labels });
+          const params: any = {
+            display_filters: { layout: (query?.board as string[])[0] },
+            filters: {
+              priority: query?.priority ?? undefined,
+              state: query?.state ?? undefined,
+              labels: query?.labels ?? undefined,
+            },
+          };
+
+          if (!isIssueFiltersUpdated(anchor, params)) {
+            initIssueFilters(anchor, params);
+            router.push(`/issues/${anchor}?${queryParam}`);
+          }
+        }
+      }
+    }
+  }, [
+    anchor,
+    board,
+    labels,
+    state,
+    priority,
+    peekId,
+    activeLayout,
+    router,
+    initIssueFilters,
+    setPeekId,
+    isIssueFiltersUpdated,
+    view_props,
+    workspace_detail,
+  ]);
+
+  if (!anchor) return null;
+
+  return (
+    <>
+      {/* issue views */}
+      <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
+        <IssuesLayoutSelection anchor={anchor} />
+      </div>
+
+      {/* issue filters */}
+      <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
+        <IssueFiltersDropdown anchor={anchor} />
+      </div>
+
+      {/* theming */}
+      <div className="relative flex-shrink-0">
+        <NavbarTheme />
+      </div>
+
+      {!isInIframe && <UserAvatar />}
+    </>
+  );
+});

apps/space/core/components/issues/navbar/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/space/core/components/issues/navbar/layout-icon.tsx

@@ -0,0 +1,14 @@
+import type { LucideProps } from "lucide-react";
+import { List, Kanban } from "lucide-react";
+import type { TIssueLayout } from "@plane/constants";
+
+export const IssueLayoutIcon = ({ layout, ...props }: { layout: TIssueLayout } & LucideProps) => {
+  switch (layout) {
+    case "list":
+      return <List {...props} />;
+    case "kanban":
+      return <Kanban {...props} />;
+    default:
+      return null;
+  }
+};

apps/space/core/components/issues/navbar/layout-selection.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { useRouter, useSearchParams } from "next/navigation";
+// ui
+import { SITES_ISSUE_LAYOUTS } from "@plane/constants";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@plane/propel/tooltip";
+// helpers
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { useIssueFilter } from "@/hooks/store/use-issue-filter";
+// mobx
+import type { TIssueLayout } from "@/types/issue";
+import { IssueLayoutIcon } from "./layout-icon";
+
+type Props = {
+  anchor: string;
+};
+
+export const IssuesLayoutSelection: FC<Props> = observer((props) => {
+  const { anchor } = props;
+  // hooks
+  const { t } = useTranslation();
+  // router
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // query params
+  const labels = searchParams.get("labels");
+  const state = searchParams.get("state");
+  const priority = searchParams.get("priority");
+  const peekId = searchParams.get("peekId");
+  // hooks
+  const { layoutOptions, getIssueFilters, updateIssueFilters } = useIssueFilter();
+  // derived values
+  const issueFilters = getIssueFilters(anchor);
+  const activeLayout = issueFilters?.display_filters?.layout || undefined;
+
+  const handleCurrentBoardView = (boardView: TIssueLayout) => {
+    updateIssueFilters(anchor, "display_filters", "layout", boardView);
+    const { queryParam } = queryParamGenerator({ board: boardView, peekId, priority, state, labels });
+    router.push(`/issues/${anchor}?${queryParam}`);
+  };
+
+  return (
+    <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
+      {SITES_ISSUE_LAYOUTS.map((layout) => {
+        if (!layoutOptions[layout.key]) return;
+
+        return (
+          <Tooltip key={layout.key} tooltipContent={t(layout.titleTranslationKey)}>
+            <button
+              type="button"
+              className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
+                activeLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+              }`}
+              onClick={() => handleCurrentBoardView(layout.key)}
+            >
+              <IssueLayoutIcon
+                layout={layout.key}
+                className={`size-3.5 ${activeLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
+              />
+            </button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+});

apps/space/core/components/issues/navbar/root.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { ProjectIcon } from "@plane/propel/icons";
+// components
+import { ProjectLogo } from "@/components/common/project-logo";
+// store
+import type { PublishStore } from "@/store/publish/publish.store";
+// local imports
+import { NavbarControls } from "./controls";
+
+type Props = {
+  publishSettings: PublishStore;
+};
+
+export const IssuesNavbarRoot: FC<Props> = observer((props) => {
+  const { publishSettings } = props;
+  // hooks
+  const { project_details } = publishSettings;
+
+  return (
+    <div className="relative flex justify-between w-full gap-4 px-5">
+      {/* project detail */}
+      <div className="flex flex-shrink-0 items-center gap-2">
+        {project_details ? (
+          <span className="h-7 w-7 flex-shrink-0 grid place-items-center">
+            <ProjectLogo logo={project_details.logo_props} className="text-lg" />
+          </span>
+        ) : (
+          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+            <ProjectIcon className="h-4 w-4" />
+          </span>
+        )}
+        <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
+          {project_details?.name || `...`}
+        </div>
+      </div>
+
+      <div className="flex flex-shrink-0 items-center gap-2">
+        <NavbarControls publishSettings={publishSettings} />
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/navbar/theme.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+// next theme
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+
+// mobx react lite
+
+export const NavbarTheme = observer(() => {
+  const [appTheme, setAppTheme] = useState("light");
+
+  const { setTheme, theme } = useTheme();
+
+  const handleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
+  useEffect(() => {
+    if (!theme) return;
+    setAppTheme(theme);
+  }, [theme]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleTheme}
+      className="relative grid h-7 w-7 place-items-center rounded bg-custom-background-100 text-custom-text-100 hover:bg-custom-background-80"
+    >
+      <span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
+    </button>
+  );
+});

apps/space/core/components/issues/navbar/user-avatar.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import type { FC } from "react";
+import { Fragment, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import { usePopper } from "react-popper";
+import { LogOut } from "lucide-react";
+import { Popover, Transition } from "@headlessui/react";
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { AuthService } from "@plane/services";
+import { Avatar } from "@plane/ui";
+import { getFileURL } from "@plane/utils";
+// helpers
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { useUser } from "@/hooks/store/use-user";
+
+const authService = new AuthService();
+
+export const UserAvatar: FC = observer(() => {
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const peekId = searchParams.get("peekId") || undefined;
+  // hooks
+  const { data: currentUser, signOut } = useUser();
+  // states
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-end",
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, 40],
+        },
+      },
+    ],
+  });
+
+  // derived values
+  const { queryParam } = queryParamGenerator({ peekId, board, state, priority, labels });
+
+  return (
+    <div className="relative mr-2">
+      {currentUser?.id ? (
+        <div>
+          <Popover as="div">
+            <Popover.Button as={Fragment}>
+              <button
+                ref={setReferenceElement}
+                className="flex items-center gap-2 rounded border border-custom-border-200 p-2"
+              >
+                <Avatar
+                  name={currentUser?.display_name}
+                  src={getFileURL(currentUser?.avatar_url)}
+                  shape="square"
+                  size="sm"
+                  showTooltip={false}
+                />
+                <h6 className="text-xs font-medium">
+                  {currentUser?.display_name ||
+                    `${currentUser?.first_name} ${currentUser?.first_name}` ||
+                    currentUser?.email ||
+                    "User"}
+                </h6>
+              </button>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
+                <div
+                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg p-1"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  {csrfToken && (
+                    <form method="POST" action={`${API_BASE_URL}/auth/spaces/sign-out/`} onSubmit={signOut}>
+                      <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+                      <input type="hidden" name="next_path" value={`${pathName}?${queryParam}`} />
+                      <button
+                        type="submit"
+                        className="flex items-center gap-2 rounded p-2 whitespace-nowrap hover:bg-custom-background-80 text-sm min-w-36 cursor-pointer"
+                      >
+                        <LogOut size={12} className="flex-shrink-0 text-red-500" />
+                        <div>Sign out</div>
+                      </button>
+                    </form>
+                  )}
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </Popover>
+        </div>
+      ) : (
+        <div className="flex-shrink-0">
+          <Link href={`/?next_path=${pathName}?${queryParam}`}>
+            <Button variant="outline-primary">Sign in</Button>
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/comment/add-comment.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useForm, Controller } from "react-hook-form";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { SitesFileService } from "@plane/services";
+import type { TIssuePublicComment } from "@plane/types";
+// editor components
+import { LiteTextEditor } from "@/components/editor/lite-text-editor";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useUser } from "@/hooks/store/use-user";
+// services
+const fileService = new SitesFileService();
+
+const defaultValues: Partial<TIssuePublicComment> = {
+  comment_html: "",
+};
+
+type Props = {
+  anchor: string;
+  disabled?: boolean;
+};
+
+export const AddComment: React.FC<Props> = observer((props) => {
+  const { anchor } = props;
+  // states
+  const [uploadedAssetIds, setUploadAssetIds] = useState<string[]>([]);
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // store hooks
+  const { peekId: issueId, addIssueComment, uploadCommentAsset } = useIssueDetails();
+  const { data: currentUser } = useUser();
+  const { workspace: workspaceID } = usePublish(anchor);
+  // form info
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<TIssuePublicComment>({ defaultValues });
+
+  const onSubmit = async (formData: TIssuePublicComment) => {
+    if (!anchor || !issueId || isSubmitting || !formData.comment_html) return;
+
+    await addIssueComment(anchor, issueId, formData)
+      .then(async (res) => {
+        reset(defaultValues);
+        editorRef.current?.clearEditor();
+        if (uploadedAssetIds.length > 0) {
+          await fileService.updateBulkAssetsUploadStatus(anchor, res.id, {
+            asset_ids: uploadedAssetIds,
+          });
+          setUploadAssetIds([]);
+        }
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        })
+      );
+  };
+
+  // TODO: on click if he user is not logged in redirect to login page
+  return (
+    <div>
+      <div className="issue-comments-section">
+        <Controller
+          name="comment_html"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <LiteTextEditor
+              editable
+              onEnterKeyPress={(e) => {
+                if (currentUser) handleSubmit(onSubmit)(e);
+              }}
+              anchor={anchor}
+              workspaceId={workspaceID?.toString() ?? ""}
+              ref={editorRef}
+              id="peek-overview-add-comment"
+              initialValue={
+                !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                  ? watch("comment_html")
+                  : value
+              }
+              onChange={(comment_json, comment_html) => onChange(comment_html)}
+              isSubmitting={isSubmitting}
+              placeholder="Add comment..."
+              uploadFile={async (blockId, file) => {
+                const { asset_id } = await uploadCommentAsset(file, anchor);
+                setUploadAssetIds((prev) => [...prev, asset_id]);
+                return asset_id;
+              }}
+            />
+          )}
+        />
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -0,0 +1,218 @@
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
+import { Menu, Transition } from "@headlessui/react";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import type { TIssuePublicComment } from "@plane/types";
+import { getFileURL } from "@plane/utils";
+// components
+import { LiteTextEditor } from "@/components/editor/lite-text-editor";
+import { CommentReactions } from "@/components/issues/peek-overview/comment/comment-reactions";
+// helpers
+import { timeAgo } from "@/helpers/date-time.helper";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useUser } from "@/hooks/store/use-user";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+
+type Props = {
+  anchor: string;
+  comment: TIssuePublicComment;
+};
+
+export const CommentCard: React.FC<Props> = observer((props) => {
+  const { anchor, comment } = props;
+  // store hooks
+  const { peekId, deleteIssueComment, updateIssueComment, uploadCommentAsset } = useIssueDetails();
+  const { data: currentUser } = useUser();
+  const { workspace: workspaceID } = usePublish(anchor);
+  const isInIframe = useIsInIframe();
+
+  // states
+  const [isEditing, setIsEditing] = useState(false);
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  const showEditorRef = useRef<EditorRefApi>(null);
+  // form info
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+  } = useForm<any>({
+    defaultValues: { comment_html: comment.comment_html },
+  });
+
+  const handleDelete = () => {
+    if (!anchor || !peekId) return;
+    deleteIssueComment(anchor, peekId, comment.id);
+  };
+
+  const handleCommentUpdate = async (formData: TIssuePublicComment) => {
+    if (!anchor || !peekId) return;
+    updateIssueComment(anchor, peekId, comment.id, formData);
+    setIsEditing(false);
+    editorRef.current?.setEditorValue(formData.comment_html);
+    showEditorRef.current?.setEditorValue(formData.comment_html);
+  };
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar_url && comment.actor_detail.avatar_url !== "" ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={getFileURL(comment.actor_detail.avatar_url)}
+            alt={
+              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
+            }
+            height={30}
+            width={30}
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+          />
+        ) : (
+          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
+            {comment.actor_detail.is_bot
+              ? comment?.actor_detail?.first_name?.charAt(0)
+              : comment?.actor_detail?.display_name?.charAt(0)}
+          </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
+          <MessageSquare className="h-3 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <div className="text-xs">
+            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
+          </div>
+          <p className="mt-0.5 text-xs text-custom-text-200">
+            <>commented {timeAgo(comment.created_at)}</>
+          </p>
+        </div>
+        <div className="issue-comments-section p-0">
+          <form
+            onSubmit={handleSubmit(handleCommentUpdate)}
+            className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
+          >
+            <div>
+              <Controller
+                control={control}
+                name="comment_html"
+                render={({ field: { onChange, value } }) => (
+                  <LiteTextEditor
+                    editable
+                    anchor={anchor}
+                    workspaceId={workspaceID?.toString() ?? ""}
+                    onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+                    ref={editorRef}
+                    id={comment.id}
+                    initialValue={value}
+                    value={null}
+                    onChange={(comment_json, comment_html) => onChange(comment_html)}
+                    isSubmitting={isSubmitting}
+                    showSubmitButton={false}
+                    uploadFile={async (blockId, file) => {
+                      const { asset_id } = await uploadCommentAsset(file, anchor, comment.id);
+                      return asset_id;
+                    }}
+                  />
+                )}
+              />
+            </div>
+            <div className="flex gap-1 self-end">
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+              >
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" strokeWidth={2} />
+              </button>
+              <button
+                type="button"
+                className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+                onClick={() => setIsEditing(false)}
+              >
+                <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
+              </button>
+            </div>
+          </form>
+          <div className={`${isEditing ? "hidden" : ""}`}>
+            <LiteTextEditor
+              editable={false}
+              anchor={anchor}
+              workspaceId={workspaceID?.toString() ?? ""}
+              ref={showEditorRef}
+              id={comment.id}
+              initialValue={comment.comment_html}
+              displayConfig={{
+                fontSize: "small-font",
+              }}
+            />
+            <CommentReactions anchor={anchor} commentId={comment.id} />
+          </div>
+        </div>
+      </div>
+
+      {!isInIframe && currentUser?.id === comment?.actor_detail?.id && (
+        <Menu as="div" className="relative w-min text-left">
+          <Menu.Button
+            type="button"
+            onClick={() => {}}
+            className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-custom-background-80 hover:text-custom-text-100"
+          >
+            <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
+          </Menu.Button>
+
+          <Transition
+            as={React.Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIsEditing(true);
+                      }}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Edit
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={handleDelete}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Tooltip } from "@plane/propel/tooltip";
+// plane imports
+import { cn } from "@plane/utils";
+// ui
+import { ReactionSelector } from "@/components/ui";
+// helpers
+import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useUser } from "@/hooks/store/use-user";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+
+type Props = {
+  anchor: string;
+  commentId: string;
+};
+
+export const CommentReactions: React.FC<Props> = observer((props) => {
+  const { anchor, commentId } = props;
+  const router = useRouter();
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+
+  // hooks
+  const { addCommentReaction, removeCommentReaction, details, peekId } = useIssueDetails();
+  const { data: user } = useUser();
+  const isInIframe = useIsInIframe();
+
+  const commentReactions = peekId ? details[peekId].comments.find((c) => c.id === commentId)?.comment_reactions : [];
+  const groupedReactions = peekId ? groupReactions(commentReactions ?? [], "reaction") : {};
+
+  const userReactions = commentReactions?.filter((r) => r?.actor_detail?.id === user?.id);
+
+  const handleAddReaction = (reactionHex: string) => {
+    if (!anchor || !peekId) return;
+    addCommentReaction(anchor, peekId, commentId, reactionHex);
+  };
+
+  const handleRemoveReaction = (reactionHex: string) => {
+    if (!anchor || !peekId) return;
+    removeCommentReaction(anchor, peekId, commentId, reactionHex);
+  };
+
+  const handleReactionClick = (reactionHex: string) => {
+    const userReaction = userReactions?.find((r) => r.actor_detail.id === user?.id && r.reaction === reactionHex);
+
+    if (userReaction) handleRemoveReaction(reactionHex);
+    else handleAddReaction(reactionHex);
+  };
+
+  // derived values
+  const { queryParam } = queryParamGenerator({ peekId, board, state, priority, labels });
+
+  return (
+    <div className="mt-2 flex items-center gap-1.5">
+      {!isInIframe && (
+        <ReactionSelector
+          onSelect={(value) => {
+            if (user) handleReactionClick(value);
+            else router.push(`/?next_path=${pathName}?${queryParam}`);
+          }}
+          position="top"
+          selected={userReactions?.map((r) => r.reaction)}
+          size="md"
+        />
+      )}
+
+      {Object.keys(groupedReactions || {}).map((reaction) => {
+        const reactions = groupedReactions?.[reaction] ?? [];
+        const REACTIONS_LIMIT = 1000;
+
+        if (reactions.length > 0)
+          return (
+            <Tooltip
+              key={reaction}
+              tooltipContent={
+                <div>
+                  {reactions
+                    .map((r) => r?.actor_detail?.display_name)
+                    .splice(0, REACTIONS_LIMIT)
+                    .join(", ")}
+                  {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
+                </div>
+              }
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  if (isInIframe) return;
+                  if (user) handleReactionClick(reaction);
+                  else router.push(`/?next_path=${pathName}?${queryParam}`);
+                }}
+                className={cn(
+                  `flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                    commentReactions?.some((r) => r?.actor_detail?.id === user?.id && r.reaction === reaction)
+                      ? "bg-custom-primary-100/10"
+                      : "bg-custom-background-80"
+                  }`,
+                  {
+                    "cursor-default": isInIframe,
+                  }
+                )}
+              >
+                <span>{renderEmoji(reaction)}</span>
+                <span
+                  className={
+                    commentReactions?.some((r) => r?.actor_detail?.id === user?.id && r.reaction === reaction)
+                      ? "text-custom-primary-100"
+                      : ""
+                  }
+                >
+                  {groupedReactions?.[reaction].length}{" "}
+                </span>
+              </button>
+            </Tooltip>
+          );
+      })}
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { observer } from "mobx-react";
+// plane imports
+import { Loader } from "@plane/ui";
+// types
+import type { IIssue } from "@/types/issue";
+// local imports
+import { PeekOverviewHeader } from "./header";
+import { PeekOverviewIssueActivity } from "./issue-activity";
+import { PeekOverviewIssueDetails } from "./issue-details";
+import { PeekOverviewIssueProperties } from "./issue-properties";
+
+type Props = {
+  anchor: string;
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+export const FullScreenPeekView: React.FC<Props> = observer((props) => {
+  const { anchor, handleClose, issueDetails } = props;
+
+  return (
+    <div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+      <div className="col-span-7 flex h-full w-full flex-col overflow-hidden">
+        <div className="w-full p-5">
+          <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
+        </div>
+        {issueDetails ? (
+          <div className="h-full w-full overflow-y-auto px-6">
+            {/* issue title and description */}
+            <div className="w-full">
+              <PeekOverviewIssueDetails anchor={anchor} issueDetails={issueDetails} />
+            </div>
+            {/* divider */}
+            <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+            {/* issue activity/comments */}
+            <div className="w-full pb-5">
+              <PeekOverviewIssueActivity anchor={anchor} issueDetails={issueDetails} />
+            </div>
+          </div>
+        ) : (
+          <Loader className="px-6">
+            <Loader.Item height="30px" />
+            <div className="mt-3 space-y-2">
+              <Loader.Item height="20px" width="70%" />
+              <Loader.Item height="20px" width="60%" />
+              <Loader.Item height="20px" width="60%" />
+            </div>
+          </Loader>
+        )}
+      </div>
+      <div className="col-span-3 h-full w-full overflow-y-auto">
+        {/* issue properties */}
+        <div className="w-full px-6 py-5">
+          {issueDetails ? (
+            <PeekOverviewIssueProperties issueDetails={issueDetails} />
+          ) : (
+            <Loader className="mt-11 space-y-4">
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/header.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Link2, MoveRight } from "lucide-react";
+import { Listbox, Transition } from "@headlessui/react";
+// ui
+import { CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// helpers
+import { copyTextToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import useClipboardWritePermission from "@/hooks/use-clipboard-write-permission";
+// types
+import type { IIssue, IPeekMode } from "@/types/issue";
+
+type Props = {
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+const PEEK_MODES: {
+  key: IPeekMode;
+  icon: any;
+  label: string;
+}[] = [
+  { key: "side", icon: SidePanelIcon, label: "Side Peek" },
+  {
+    key: "modal",
+    icon: CenterPanelIcon,
+    label: "Modal",
+  },
+  {
+    key: "full",
+    icon: FullScreenPanelIcon,
+    label: "Full Screen",
+  },
+];
+
+export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
+  const { handleClose } = props;
+
+  const { peekMode, setPeekMode } = useIssueDetails();
+  const isClipboardWriteAllowed = useClipboardWritePermission();
+
+  const handleCopyLink = () => {
+    const urlToCopy = window.location.href;
+
+    copyTextToClipboard(urlToCopy).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link copied!",
+        message: "Work item link copied to clipboard.",
+      });
+    });
+  };
+
+  const Icon = PEEK_MODES.find((m) => m.key === peekMode)?.icon ?? SidePanelIcon;
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          {peekMode === "side" && (
+            <button type="button" onClick={handleClose} className="text-custom-text-300 hover:text-custom-text-200">
+              <MoveRight className="size-4" />
+            </button>
+          )}
+          <Listbox
+            as="div"
+            value={peekMode}
+            onChange={(val) => setPeekMode(val)}
+            className="relative flex-shrink-0 text-left"
+          >
+            <Listbox.Button
+              className={`grid place-items-center text-custom-text-300 hover:text-custom-text-200 ${peekMode === "full" ? "rotate-45" : ""}`}
+            >
+              <Icon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+            </Listbox.Button>
+
+            <Transition
+              as={React.Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
+                <div className="space-y-1 p-2">
+                  {PEEK_MODES.map((mode) => (
+                    <Listbox.Option
+                      key={mode.key}
+                      value={mode.key}
+                      className={({ active, selected }) =>
+                        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      <div className="flex items-center gap-1.5">
+                        <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
+                        {mode.label}
+                      </div>
+                    </Listbox.Option>
+                  ))}
+                </div>
+              </Listbox.Options>
+            </Transition>
+          </Listbox>
+        </div>
+        {isClipboardWriteAllowed && (peekMode === "side" || peekMode === "modal") && (
+          <div className="flex flex-shrink-0 items-center gap-2">
+            <button
+              type="button"
+              onClick={handleCopyLink}
+              className="focus:outline-none text-custom-text-300 hover:text-custom-text-200"
+              tabIndex={1}
+            >
+              <Link2 className="h-4 w-4 -rotate-45" />
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});

apps/space/core/components/issues/peek-overview/index.ts

@@ -0,0 +1 @@
+export * from "./layout";

apps/space/core/components/issues/peek-overview/issue-activity.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+// plane imports
+import { Button } from "@plane/propel/button";
+// components
+import { AddComment } from "@/components/issues/peek-overview/comment/add-comment";
+import { CommentCard } from "@/components/issues/peek-overview/comment/comment-detail-card";
+import { Icon } from "@/components/ui";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useUser } from "@/hooks/store/use-user";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+// types
+import type { IIssue } from "@/types/issue";
+
+type Props = {
+  anchor: string;
+  issueDetails: IIssue;
+};
+
+export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
+  const { anchor } = props;
+  // router
+  const pathname = usePathname();
+  // store hooks
+  const { details, peekId } = useIssueDetails();
+  const { data: currentUser } = useUser();
+  const { canComment } = usePublish(anchor);
+  // derived values
+  const comments = details[peekId || ""]?.comments || [];
+  const isInIframe = useIsInIframe();
+
+  return (
+    <div className="pb-10">
+      <h4 className="font-medium">Comments</h4>
+      <div className="mt-4">
+        <div className="space-y-4">
+          {comments.map((comment) => (
+            <CommentCard key={comment.id} anchor={anchor} comment={comment} />
+          ))}
+        </div>
+        {!isInIframe &&
+          (currentUser ? (
+            <>
+              {canComment && (
+                <div className="mt-4">
+                  <AddComment anchor={anchor} disabled={!currentUser} />
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="mt-4 flex items-center justify-between gap-2 rounded border border-custom-border-300 bg-custom-background-80 px-2 py-2.5">
+              <p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
+                <Icon iconName="lock" className="!text-sm" />
+                Sign in to add your comment
+              </p>
+              <Link href={`/?next_path=${pathname}`}>
+                <Button variant="primary">Sign in</Button>
+              </Link>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/issue-details.tsx

@@ -0,0 +1,40 @@
+import { observer } from "mobx-react";
+// plane imports
+import { RichTextEditor } from "@/components/editor/rich-text-editor";
+import { usePublish } from "@/hooks/store/publish";
+// types
+import type { IIssue } from "@/types/issue";
+// local imports
+import { IssueReactions } from "./issue-reaction";
+
+type Props = {
+  anchor: string;
+  issueDetails: IIssue;
+};
+
+export const PeekOverviewIssueDetails: React.FC<Props> = observer((props) => {
+  const { anchor, issueDetails } = props;
+  // store hooks
+  const { project_details, workspace: workspaceID } = usePublish(anchor);
+  // derived values
+  const description = issueDetails.description_html;
+
+  return (
+    <div className="space-y-2">
+      <h6 className="text-base font-medium text-custom-text-400">
+        {project_details?.identifier}-{issueDetails?.sequence_id}
+      </h6>
+      <h4 className="break-words text-2xl font-medium">{issueDetails.name}</h4>
+      {description && description !== "" && description !== "<p></p>" && (
+        <RichTextEditor
+          editable={false}
+          anchor={anchor}
+          id={issueDetails.id}
+          initialValue={description}
+          workspaceId={workspaceID?.toString() ?? ""}
+        />
+      )}
+      <IssueReactions anchor={anchor} />
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/issue-properties.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { CalendarCheck2, Signal } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { DoubleCircleIcon, StateGroupIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { cn, getIssuePriorityFilters } from "@plane/utils";
+// components
+import { Icon } from "@/components/ui";
+// helpers
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
+import { copyTextToClipboard, addSpaceIfCamelCase } from "@/helpers/string.helper";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useStates } from "@/hooks/store/use-state";
+// types
+import type { IIssue, IPeekMode } from "@/types/issue";
+
+type Props = {
+  issueDetails: IIssue;
+  mode?: IPeekMode;
+};
+
+export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDetails, mode }) => {
+  // hooks
+  const { t } = useTranslation();
+  const { getStateById } = useStates();
+  const state = getStateById(issueDetails?.state_id ?? undefined);
+
+  const { anchor } = useParams();
+
+  const { project_details } = usePublish(anchor?.toString());
+
+  const priority = issueDetails.priority ? getIssuePriorityFilters(issueDetails.priority) : null;
+
+  const handleCopyLink = () => {
+    const urlToCopy = window.location.href;
+
+    copyTextToClipboard(urlToCopy).then(() => {
+      setToast({
+        type: TOAST_TYPE.INFO,
+        title: "Link copied!",
+        message: "Work item link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+      {mode === "full" && (
+        <div className="flex justify-between gap-2 pb-3">
+          <h6 className="flex items-center gap-2 font-medium">
+            {project_details?.identifier}-{issueDetails.sequence_id}
+          </h6>
+          <div className="flex items-center gap-2">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45">
+              <Icon iconName="link" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className={`space-y-2 ${mode === "full" ? "pt-3" : ""}`}>
+        <div className="flex items-center gap-3 h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <DoubleCircleIcon className="size-4 flex-shrink-0" />
+            <span>State</span>
+          </div>
+          <div className="w-3/4 flex items-center gap-1.5 py-0.5 text-sm">
+            <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} />
+            {addSpaceIfCamelCase(state?.name ?? "")}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <Signal className="size-4 flex-shrink-0" />
+            <span>Priority</span>
+          </div>
+          <div className="w-3/4">
+            <div
+              className={`inline-flex items-center gap-1.5 rounded px-2.5 py-0.5 text-left text-sm capitalize ${
+                priority?.key === "urgent"
+                  ? "border-red-500/20 bg-red-500/20 text-red-500"
+                  : priority?.key === "high"
+                    ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                    : priority?.key === "medium"
+                      ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                      : priority?.key === "low"
+                        ? "border-green-500/20 bg-green-500/20 text-green-500"
+                        : "border-custom-border-200 bg-custom-background-80"
+              }`}
+            >
+              {priority && (
+                <span className="-my-1 grid place-items-center">
+                  <Icon iconName={priority?.icon} />
+                </span>
+              )}
+              <span>{t(priority?.titleTranslationKey || "common.none")}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <CalendarCheck2 className="size-4 flex-shrink-0" />
+            <span>Due date</span>
+          </div>
+          <div>
+            {issueDetails.target_date ? (
+              <div
+                className={cn("flex items-center gap-1.5 rounded py-0.5 text-xs text-custom-text-100", {
+                  "text-red-500": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
+                })}
+              >
+                <CalendarCheck2 className="size-3" />
+                {renderFormattedDate(issueDetails.target_date)}
+              </div>
+            ) : (
+              <span className="text-custom-text-200">Empty</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/issue-reaction.tsx

@@ -0,0 +1,33 @@
+import { observer } from "mobx-react";
+// components
+import { IssueEmojiReactions } from "@/components/issues/reactions/issue-emoji-reactions";
+import { IssueVotes } from "@/components/issues/reactions/issue-vote-reactions";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+
+type Props = {
+  anchor: string;
+};
+
+export const IssueReactions: React.FC<Props> = observer((props) => {
+  const { anchor } = props;
+  // store hooks
+  const { canVote, canReact } = usePublish(anchor);
+  const isInIframe = useIsInIframe();
+
+  return (
+    <div className="mt-4 flex items-center gap-3">
+      {canVote && (
+        <div className="flex items-center gap-2">
+          <IssueVotes anchor={anchor} />
+        </div>
+      )}
+      {!isInIframe && canReact && (
+        <div className="flex items-center gap-2">
+          <IssueEmojiReactions anchor={anchor} />
+        </div>
+      )}
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/layout.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import type { FC } from "react";
+import { Fragment, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+// local imports
+import { FullScreenPeekView } from "./full-screen-peek-view";
+import { SidePeekView } from "./side-peek-view";
+
+type TIssuePeekOverview = {
+  anchor: string;
+  peekId: string;
+  handlePeekClose?: () => void;
+};
+
+export const IssuePeekOverview: FC<TIssuePeekOverview> = observer((props) => {
+  const { anchor, peekId, handlePeekClose } = props;
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+  // states
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
+  const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
+  // store
+  const issueDetailStore = useIssueDetails();
+
+  const issueDetails = issueDetailStore.peekId && peekId ? issueDetailStore.details[peekId.toString()] : undefined;
+
+  useEffect(() => {
+    if (anchor && peekId) {
+      issueDetailStore.fetchIssueDetails(anchor, peekId.toString());
+    }
+  }, [anchor, issueDetailStore, peekId]);
+
+  const handleClose = () => {
+    // if close logic is passed down, call that instead of the below logic
+    if (handlePeekClose) {
+      handlePeekClose();
+      return;
+    }
+
+    issueDetailStore.setPeekId(null);
+    let queryParams: any = {
+      board,
+    };
+    if (priority && priority.length > 0) queryParams = { ...queryParams, priority: priority };
+    if (state && state.length > 0) queryParams = { ...queryParams, state: state };
+    if (labels && labels.length > 0) queryParams = { ...queryParams, labels: labels };
+    queryParams = new URLSearchParams(queryParams).toString();
+    router.push(`/issues/${anchor}?${queryParams}`);
+  };
+
+  useEffect(() => {
+    if (peekId) {
+      if (issueDetailStore.peekMode === "side") {
+        setIsSidePeekOpen(true);
+        setIsModalPeekOpen(false);
+      } else {
+        setIsModalPeekOpen(true);
+        setIsSidePeekOpen(false);
+      }
+    } else {
+      setIsSidePeekOpen(false);
+      setIsModalPeekOpen(false);
+    }
+  }, [peekId, issueDetailStore.peekMode]);
+
+  return (
+    <>
+      <Transition.Root appear show={isSidePeekOpen} as={Fragment}>
+        <Dialog as="div" onClose={handleClose}>
+          <Transition.Child
+            as={Fragment}
+            enter="transition-transform duration-300"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transition-transform duration-200"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full"
+          >
+            <Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-custom-background-100 shadow-custom-shadow-sm">
+              <SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
+            </Dialog.Panel>
+          </Transition.Child>
+        </Dialog>
+      </Transition.Root>
+      <Transition.Root appear show={isModalPeekOpen} as={Fragment}>
+        <Dialog as="div" onClose={handleClose}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 z-20 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Panel>
+              <div
+                className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-custom-background-100 shadow-custom-shadow-xl transition-all duration-300 ${
+                  issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                }`}
+              >
+                {issueDetailStore.peekMode === "modal" && (
+                  <SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
+                )}
+                {issueDetailStore.peekMode === "full" && (
+                  <FullScreenPeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
+                )}
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+});

apps/space/core/components/issues/peek-overview/side-peek-view.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { observer } from "mobx-react";
+// plane imports
+import { Loader } from "@plane/ui";
+// store hooks
+import { usePublish } from "@/hooks/store/publish";
+// types
+import type { IIssue } from "@/types/issue";
+// local imports
+import { PeekOverviewHeader } from "./header";
+import { PeekOverviewIssueActivity } from "./issue-activity";
+import { PeekOverviewIssueDetails } from "./issue-details";
+import { PeekOverviewIssueProperties } from "./issue-properties";
+
+type Props = {
+  anchor: string;
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+export const SidePeekView: React.FC<Props> = observer((props) => {
+  const { anchor, handleClose, issueDetails } = props;
+  // store hooks
+  const { canComment } = usePublish(anchor);
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="w-full p-5">
+        <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
+      </div>
+      {issueDetails ? (
+        <div className="h-full w-full overflow-y-auto px-6">
+          {/* issue title and description */}
+          <div className="w-full">
+            <PeekOverviewIssueDetails anchor={anchor} issueDetails={issueDetails} />
+          </div>
+          {/* issue properties */}
+          <div className="mt-6 w-full">
+            <PeekOverviewIssueProperties issueDetails={issueDetails} />
+          </div>
+          {/* divider */}
+          <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+          {/* issue activity/comments */}
+          {canComment && (
+            <div className="w-full pb-5">
+              <PeekOverviewIssueActivity anchor={anchor} issueDetails={issueDetails} />
+            </div>
+          )}
+        </div>
+      ) : (
+        <Loader className="px-6">
+          <Loader.Item height="30px" />
+          <div className="mt-3 space-y-2">
+            <Loader.Item height="20px" width="70%" />
+            <Loader.Item height="20px" width="60%" />
+            <Loader.Item height="20px" width="60%" />
+          </div>
+        </Loader>
+      )}
+    </div>
+  );
+});

apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+// lib
+import { Tooltip } from "@plane/propel/tooltip";
+import { ReactionSelector } from "@/components/ui";
+// helpers
+import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useUser } from "@/hooks/store/use-user";
+
+type IssueEmojiReactionsProps = {
+  anchor: string;
+  issueIdFromProps?: string;
+  size?: "md" | "sm";
+};
+
+export const IssueEmojiReactions: React.FC<IssueEmojiReactionsProps> = observer((props) => {
+  const { anchor, issueIdFromProps, size = "md" } = props;
+  // router
+  const router = useRouter();
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  // query params
+  const peekId = searchParams.get("peekId") || undefined;
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+  // store hooks
+  const issueDetailsStore = useIssueDetails();
+  const { data: user } = useUser();
+
+  const issueId = issueIdFromProps ?? issueDetailsStore.peekId;
+  const reactions = issueDetailsStore.details[issueId ?? ""]?.reaction_items ?? [];
+  const groupedReactions = groupReactions(reactions, "reaction");
+
+  const userReactions = reactions.filter((r) => r.actor_details?.id === user?.id);
+
+  const handleAddReaction = (reactionHex: string) => {
+    if (!issueId) return;
+    issueDetailsStore.addIssueReaction(anchor, issueId, reactionHex);
+  };
+
+  const handleRemoveReaction = (reactionHex: string) => {
+    if (!issueId) return;
+    issueDetailsStore.removeIssueReaction(anchor, issueId, reactionHex);
+  };
+
+  const handleReactionClick = (reactionHex: string) => {
+    const userReaction = userReactions?.find((r) => r.actor_details?.id === user?.id && r.reaction === reactionHex);
+    if (userReaction) handleRemoveReaction(reactionHex);
+    else handleAddReaction(reactionHex);
+  };
+
+  // derived values
+  const { queryParam } = queryParamGenerator({ peekId, board, state, priority, labels });
+  const reactionDimensions = size === "sm" ? "h-6 px-2 py-1" : "h-full px-2 py-1";
+
+  return (
+    <>
+      <ReactionSelector
+        onSelect={(value) => {
+          if (user) handleReactionClick(value);
+          else router.push(`/?next_path=${pathName}?${queryParam}`);
+        }}
+        selected={userReactions?.map((r) => r.reaction)}
+        size={size}
+      />
+      {Object.keys(groupedReactions || {}).map((reaction) => {
+        const reactions = groupedReactions?.[reaction] ?? [];
+        const REACTIONS_LIMIT = 1000;
+
+        if (reactions.length > 0)
+          return (
+            <Tooltip
+              key={reaction}
+              tooltipContent={
+                <div>
+                  {reactions
+                    ?.map((r) => r?.actor_details?.display_name)
+                    ?.splice(0, REACTIONS_LIMIT)
+                    ?.join(", ")}
+                  {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
+                </div>
+              }
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  if (user) handleReactionClick(reaction);
+                  else router.push(`/?next_path=${pathName}?${queryParam}`);
+                }}
+                className={`flex items-center gap-1 rounded-md text-sm text-custom-text-100 ${
+                  reactions.some((r) => r?.actor_details?.id === user?.id && r.reaction === reaction)
+                    ? "bg-custom-primary-100/10"
+                    : "bg-custom-background-80"
+                } ${reactionDimensions}`}
+              >
+                <span>{renderEmoji(reaction)}</span>
+                <span
+                  className={
+                    reactions.some((r) => r?.actor_details?.id === user?.id && r.reaction === reaction)
+                      ? "text-custom-primary-100"
+                      : ""
+                  }
+                >
+                  {groupedReactions?.[reaction].length}{" "}
+                </span>
+              </button>
+            </Tooltip>
+          );
+      })}
+    </>
+  );
+});

apps/space/core/components/issues/reactions/issue-vote-reactions.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+// plane imports
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "@plane/utils";
+// helpers
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useUser } from "@/hooks/store/use-user";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+
+type TIssueVotes = {
+  anchor: string;
+  issueIdFromProps?: string;
+  size?: "md" | "sm";
+};
+
+export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
+  const { anchor, issueIdFromProps, size = "md" } = props;
+  // states
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  // router
+  const router = useRouter();
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  // query params
+  const peekId = searchParams.get("peekId") || undefined;
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+  // store hooks
+  const issueDetailsStore = useIssueDetails();
+  const { data: user } = useUser();
+
+  const isInIframe = useIsInIframe();
+
+  const issueId = issueIdFromProps ?? issueDetailsStore.peekId;
+
+  const votes = issueDetailsStore.details[issueId ?? ""]?.vote_items ?? [];
+
+  const allUpVotes = votes.filter((vote) => vote.vote === 1);
+  const allDownVotes = votes.filter((vote) => vote.vote === -1);
+
+  const isUpVotedByUser = allUpVotes.some((vote) => vote.actor_details?.id === user?.id);
+  const isDownVotedByUser = allDownVotes.some((vote) => vote.actor_details?.id === user?.id);
+
+  const handleVote = async (e: any, voteValue: 1 | -1) => {
+    if (!issueId) return;
+
+    setIsSubmitting(true);
+
+    const actionPerformed = votes?.find((vote) => vote.actor_details?.id === user?.id && vote.vote === voteValue);
+
+    if (actionPerformed) await issueDetailsStore.removeIssueVote(anchor, issueId);
+    else {
+      await issueDetailsStore.addIssueVote(anchor, issueId, {
+        vote: voteValue,
+      });
+    }
+
+    setIsSubmitting(false);
+  };
+
+  const VOTES_LIMIT = 1000;
+
+  // derived values
+  const { queryParam } = queryParamGenerator({ peekId, board, state, priority, labels });
+  const votingDimensions = size === "sm" ? "px-1 h-6 min-w-9" : "px-2 h-7";
+
+  return (
+    <div className="flex items-center gap-2">
+      {/* upvote button 👇 */}
+      <Tooltip
+        tooltipContent={
+          <div>
+            {allUpVotes.length > 0 ? (
+              <>
+                {allUpVotes
+                  .map((r) => r.actor_details?.display_name)
+                  .splice(0, VOTES_LIMIT)
+                  .join(", ")}
+                {allUpVotes.length > VOTES_LIMIT && " and " + (allUpVotes.length - VOTES_LIMIT) + " more"}
+              </>
+            ) : (
+              "No upvotes yet"
+            )}
+          </div>
+        }
+      >
+        <button
+          type="button"
+          disabled={isSubmitting}
+          onClick={(e) => {
+            if (isInIframe) return;
+            if (user) handleVote(e, 1);
+            else router.push(`/?next_path=${pathName}?${queryParam}`);
+          }}
+          className={cn(
+            "flex items-center justify-center gap-x-1 overflow-hidden rounded border focus:outline-none bg-custom-background-100",
+            votingDimensions,
+            {
+              "border-custom-primary-200 text-custom-primary-200": isUpVotedByUser,
+              "border-custom-border-300": !isUpVotedByUser,
+              "cursor-default": isInIframe,
+            }
+          )}
+        >
+          <span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_upward_alt</span>
+          <span className="text-sm font-normal transition-opacity ease-in-out">{allUpVotes.length}</span>
+        </button>
+      </Tooltip>
+
+      {/* downvote button 👇 */}
+      <Tooltip
+        tooltipContent={
+          <div>
+            {allDownVotes.length > 0 ? (
+              <>
+                {allDownVotes
+                  .map((r) => r.actor_details.display_name)
+                  .splice(0, VOTES_LIMIT)
+                  .join(", ")}
+                {allDownVotes.length > VOTES_LIMIT && " and " + (allDownVotes.length - VOTES_LIMIT) + " more"}
+              </>
+            ) : (
+              "No downvotes yet"
+            )}
+          </div>
+        }
+      >
+        <button
+          type="button"
+          disabled={isSubmitting}
+          onClick={(e) => {
+            if (isInIframe) return;
+            if (user) handleVote(e, -1);
+            else router.push(`/?next_path=${pathName}?${queryParam}`);
+          }}
+          className={cn(
+            "flex items-center justify-center gap-x-1 overflow-hidden rounded border focus:outline-none bg-custom-background-100",
+            votingDimensions,
+            {
+              "border-red-600 text-red-600": isDownVotedByUser,
+              "border-custom-border-300": !isDownVotedByUser,
+              "cursor-default": isInIframe,
+            }
+          )}
+        >
+          <span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_downward_alt</span>
+          <span className="text-sm font-normal transition-opacity ease-in-out">{allDownVotes.length}</span>
+        </button>
+      </Tooltip>
+    </div>
+  );
+});

apps/space/core/components/ui/icon.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+type Props = {
+  iconName: string;
+  className?: string;
+};
+
+export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
+  <span className={`material-symbols-rounded text-sm font-light leading-5 ${className}`}>{iconName}</span>
+);

apps/space/core/components/ui/index.ts

@@ -0,0 +1,2 @@
+export * from "./icon";
+export * from "./reaction-selector";

apps/space/core/components/ui/not-found.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+// images
+import Image404 from "@/public/404.svg";
+
+export const PageNotFound = () => (
+  <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
+    <div className="grid h-full place-items-center p-4">
+      <div className="space-y-8 text-center">
+        <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
+          <Image src={Image404} layout="fill" alt="404- Page not found" />
+        </div>
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
+          <p className="text-sm text-custom-text-200">
+            Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
+            temporarily unavailable.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+);

apps/space/core/components/ui/reaction-selector.tsx

@@ -0,0 +1,80 @@
+import { Fragment } from "react";
+
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+
+// helper
+import { Icon } from "@/components/ui";
+import { renderEmoji } from "@/helpers/emoji.helper";
+
+// icons
+
+const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
+
+interface Props {
+  onSelect: (emoji: string) => void;
+  position?: "top" | "bottom";
+  selected?: string[];
+  size?: "sm" | "md" | "lg";
+}
+
+export const ReactionSelector: React.FC<Props> = (props) => {
+  const { onSelect, position, selected = [], size } = props;
+
+  return (
+    <Popover className="relative">
+      {({ open, close: closePopover }) => (
+        <>
+          <Popover.Button
+            className={`${
+              open ? "" : "text-opacity-90"
+            } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
+          >
+            <span
+              className={`flex items-center justify-center rounded-md px-2 ${
+                size === "sm" ? "h-6 w-6" : size === "md" ? "h-7 w-7" : "h-8 w-8"
+              }`}
+            >
+              <Icon iconName="add_reaction" className="scale-125 text-custom-text-100" />
+            </span>
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel
+              className={`absolute -left-2 z-10 bg-custom-sidebar-background-100 ${
+                position === "top" ? "-top-12" : "-bottom-12"
+              }`}
+            >
+              <div className="rounded-md border border-custom-border-200 bg-custom-sidebar-background-100 p-1 shadow-custom-shadow-sm">
+                <div className="flex gap-x-1">
+                  {reactionEmojis.map((emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      onClick={() => {
+                        onSelect(emoji);
+                        closePopover();
+                      }}
+                      className={`grid select-none place-items-center rounded-md p-1 text-sm ${
+                        selected.includes(emoji) ? "bg-custom-primary-100/10" : "hover:bg-custom-sidebar-background-80"
+                      }`}
+                    >
+                      {renderEmoji(emoji)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};

apps/space/core/components/views/auth.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AuthRoot } from "@/components/account/auth-forms";
+import { PoweredBy } from "@/components/common/powered-by";
+// local imports
+import { AuthHeader } from "./header";
+
+export const AuthView = () => (
+  <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+    <AuthHeader />
+    <AuthRoot />
+    <PoweredBy />
+  </div>
+);

apps/space/core/components/views/header.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { PlaneLockup } from "@plane/propel/icons";
+
+export const AuthHeader = () => (
+  <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+    <Link href="/">
+      <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+    </Link>
+  </div>
+);

apps/space/core/components/views/index.ts

@@ -0,0 +1 @@
+export * from "./auth";

apps/space/core/hooks/store/publish/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-publish-list";
+export * from "./use-publish";

apps/space/core/hooks/store/publish/use-publish-list.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import type { IPublishListStore } from "@/store/publish/publish_list.store";
+
+export const usePublishList = (): IPublishListStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("usePublishList must be used within StoreProvider");
+  return context.publishList;
+};

apps/space/core/hooks/store/publish/use-publish.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import type { PublishStore } from "@/store/publish/publish.store";
+
+export const usePublish = (anchor: string): PublishStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("usePublish must be used within StoreProvider");
+  return context.publishList.publishMap?.[anchor] ?? {};
+};

apps/space/core/hooks/store/use-cycle.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import type { ICycleStore } from "@/store/cycle.store";
+
+export const useCycle = (): ICycleStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useCycle must be used within StoreProvider");
+  return context.cycle;
+};

apps/space/core/hooks/store/use-instance.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import type { IInstanceStore } from "@/store/instance.store";
+
+export const useInstance = (): IInstanceStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+  return context.instance;
+};

apps/space/core/hooks/store/use-issue-details.tsx

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import type { IIssueDetailStore } from "@/store/issue-detail.store";
+
+export const useIssueDetails = (): IIssueDetailStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+  return context.issueDetail;
+};

apps/space/core/hooks/store/use-issue-filter.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import type { IIssueFilterStore } from "@/store/issue-filters.store";
+
+export const useIssueFilter = (): IIssueFilterStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+  return context.issueFilter;
+};

apps/space/core/hooks/store/use-issue.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import type { IIssueStore } from "@/store/issue.store";
+
+export const useIssue = (): IIssueStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useIssue must be used within StoreProvider");
+  return context.issue;
+};

apps/space/core/hooks/store/use-label.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import type { IIssueLabelStore } from "@/store/label.store";
+
+export const useLabel = (): IIssueLabelStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useLabel must be used within StoreProvider");
+  return context.label;
+};

apps/space/core/hooks/store/use-member.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import type { IIssueMemberStore } from "@/store/members.store";
+
+export const useMember = (): IIssueMemberStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useMember must be used within StoreProvider");
+  return context.member;
+};