fix: empty state

packages/i18n/src/locales/cs/translations.json

@@ -503,6 +503,9 @@
   "choose_workspace_for_integration": "Vyberte pracovní prostor pro připojení této aplikace",
   "integrations_description": "Aplikace, které pracují s Plane, musí být připojeny k pracovnímu prostoru, kde jste správce.",
   "create_a_new_workspace": "Vytvořit nový pracovní prostor",
+  "no_workspaces_to_connect": "Žádné pracovní prostory k připojení",
+  "no_workspaces_to_connect_description": "Musíte vytvořit pracovní prostor, abyste mohli připojit integraci a šablony",
+  "learn_more_about_workspaces": "Zjistit více o pracovních prostorech",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/de/translations.json

@@ -503,6 +503,9 @@
   "choose_workspace_for_integration": "Wählen Sie einen Arbeitsbereich aus, um diese App zu verbinden",
   "integrations_description": "Apps, die mit Plane arbeiten, müssen einen Arbeitsbereich verbinden, in dem Sie ein Administrator sind.",
   "create_a_new_workspace": "Neuen Arbeitsbereich erstellen",
+  "learn_more_about_workspaces": "Mehr über Arbeitsbereiche erfahren",
+  "no_workspaces_to_connect": "Keine Arbeitsbereiche zum Verbinden",
+  "no_workspaces_to_connect_description": "Sie müssen einen Arbeitsbereich erstellen, um Integrationen und Vorlagen zu verbinden",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/en/translations.json

@@ -337,6 +337,9 @@
   "choose_workspace_for_integration": "Choose a workspace to connect this app to",
   "integrations_description": "Apps that work with Plane must connect to a workspace where you are an admin.",
   "create_a_new_workspace": "Create a new workspace",
+  "learn_more_about_workspaces": "Learn more about workspaces",
+  "no_workspaces_to_connect": "No workspaces to connect",
+  "no_workspaces_to_connect_description": "You will need to create a workspace to be able to connect integrations and templates",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/es/translations.json

@@ -509,6 +509,9 @@
   "choose_workspace_for_integration": "Elige un espacio de trabajo para conectar esta app",
   "integrations_description": "Las apps que funcionan con Plane deben conectarse a un espacio de trabajo donde eres administrador.",
   "create_a_new_workspace": "Crear un nuevo espacio de trabajo",
+  "learn_more_about_workspaces": "Aprende más sobre espacios de trabajo",
+  "no_workspaces_to_connect": "No hay espacios de trabajo para conectar",
+  "no_workspaces_to_connect_description": "Necesitarás crear un espacio de trabajo para poder conectar integraciones y plantillas",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/fr/translations.json

@@ -507,6 +507,9 @@
   "choose_workspace_for_integration": "Choisissez un espace de travail pour connecter cette application",
   "integrations_description": "Les applications qui fonctionnent avec Plane doivent se connecter à un espace de travail où vous êtes administrateur.",
   "create_a_new_workspace": "Créer un nouvel espace de travail",
+  "learn_more_about_workspaces": "En savoir plus sur les espaces de travail",
+  "no_workspaces_to_connect": "Aucun espace de travail à connecter",
+  "no_workspaces_to_connect_description": "Vous devez créer un espace de travail pour pouvoir connecter des intégrations et des modèles",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/id/translations.json

@@ -505,6 +505,9 @@
   "choose_workspace_for_integration": "Pilih ruang kerja untuk menghubungkan aplikasi ini",
   "integrations_description": "Aplikasi yang bekerja dengan Plane harus menghubungkan ke ruang kerja di mana Anda adalah admin.",
   "create_a_new_workspace": "Buat ruang kerja baru",
+  "learn_more_about_workspaces": "Pelajari lebih lanjut tentang ruang kerja",
+  "no_workspaces_to_connect": "Tidak ada ruang kerja untuk menghubungkan",
+  "no_workspaces_to_connect_description": "Anda perlu membuat ruang kerja untuk dapat menghubungkan integrasi dan template",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/it/translations.json

@@ -507,6 +507,9 @@
   "choose_workspace_for_integration": "Scegli uno spazio di lavoro per connettere questa app",
   "integrations_description": "Le app che funzionano con Plane devono connettersi a uno spazio di lavoro dove sei amministratore.",
   "create_a_new_workspace": "Crea uno spazio di lavoro nuovo",
+  "learn_more_about_workspaces": "Scopri di più sui tuoi spazi di lavoro",
+  "no_workspaces_to_connect": "Nessuno spazio di lavoro per connettere",
+  "no_workspaces_to_connect_description": "Devi creare uno spazio di lavoro per poter connettere le integrazioni e i modelli",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/ja/translations.json

@@ -507,6 +507,9 @@
   "choose_workspace_for_integration": "このアプリケーションに接続するワークスペースを選択してください",
   "integrations_description": "Planeのアプリケーションは、管理者であるワークスペースに接続する必要があります。",
   "create_a_new_workspace": "新しいワークスペースを作成",
+  "learn_more_about_workspaces": "ワークスペースについて詳しくはこちら",
+  "no_workspaces_to_connect": "接続するワークスペースがありません",
+  "no_workspaces_to_connect_description": "接続するワークスペースを作成する必要があります",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/ko/translations.json

@@ -507,6 +507,9 @@
   "choose_workspace_for_integration": "이 앱에 연결할 작업 공간을 선택하세요",
   "integrations_description": "Plane의 앱은 관리자인 작업 공간에 연결해야 합니다.",
   "create_a_new_workspace": "새 작업 공간 만들기",
+  "learn_more_about_workspaces": "작업 공간에 대해 자세히 알아보기",
+  "no_workspaces_to_connect": "연결할 작업 공간이 없습니다",
+  "no_workspaces_to_connect_description": "연결할 작업 공간을 만들어야 합니다",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/pl/translations.json

@@ -506,6 +506,9 @@
   "choose_workspace_for_integration": "Wybierz przestrzeń roboczą do połączenia tej aplikacji",
   "integrations_description": "Aplikacje, które działają z Plane, muszą być połączone z przestrzenią roboczą, w której jesteś administratorem.",
   "create_a_new_workspace": "Utwórz nową przestrzeń roboczą",
+  "learn_more_about_workspaces": "Dowiedz się więcej o przestrzeniach roboczych",
+  "no_workspaces_to_connect": "Brak przestrzeni roboczych do połączenia",
+  "no_workspaces_to_connect_description": "Musisz utworzyć przestrzeń roboczą, aby móc połączyć integracje i szablony",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/pt-BR/translations.json

@@ -507,6 +507,9 @@
   "choose_workspace_for_integration": "Escolha um espaço de trabalho para conectar esta aplicação",
   "integrations_description": "Aplicações que funcionam com Plane devem se conectar a um espaço de trabalho onde você é administrador.",
   "create_a_new_workspace": "Criar um novo espaço de trabalho",
+  "no_workspaces_to_connect": "Nenhum espaço de trabalho para conectar",
+  "no_workspaces_to_connect_description": "Você precisa criar um espaço de trabalho para poder conectar integrações e templates",
+  "learn_more_about_workspaces": "Saiba mais sobre espaços de trabalho",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/ro/translations.json

@@ -505,6 +505,9 @@
   "choose_workspace_for_integration": "Alegeți un spațiu de lucru pentru a conecta această aplicație",
   "integrations_description": "Aplicațiile care funcționează cu Plane trebuie să se conecteze la un spațiu de lucru unde sunteți administrator.",
   "create_a_new_workspace": "Creați un nou spațiu de lucru",
+  "no_workspaces_to_connect": "Nu există spații de lucru pentru a conecta",
+  "no_workspaces_to_connect_description": "Trebuie să creați un spațiu de lucru pentru a putea conecta integrări și modele",
+  "learn_more_about_workspaces": "Află mai multe despre spațiile de lucru",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/ru/translations.json

@@ -505,6 +505,9 @@
   "choose_workspace_for_integration": "Выберите рабочее пространство для подключения этого приложения", 
   "integrations_description": "Приложения, которые работают с Plane, должны быть подключены к рабочему пространству, где вы являетесь администратором.",
   "create_a_new_workspace": "Создать новое рабочее пространство",
+  "learn_more_about_workspaces": "Узнать больше о рабочих пространствах",
+  "no_workspaces_to_connect": "Нет рабочих пространств для подключения",
+  "no_workspaces_to_connect_description": "Вы должны создать рабочее пространство, чтобы подключить интеграции и шаблоны",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/sk/translations.json

@@ -505,6 +505,9 @@
   "choose_workspace_for_integration": "Vyberte pracovný priestor pre pripojenie tejto aplikácie",
   "integrations_description": "Aplikácie, ktoré fungujú s Plane, musia byť pripojené k pracovnom priestoru, kde ste správca.",
   "create_a_new_workspace": "Vytvoriť nový pracovný priestor",
+  "learn_more_about_workspaces": "Zjistit více o pracovních prostorech",
+  "no_workspaces_to_connect": "Žádné pracovní prostory k připojení",
+  "no_workspaces_to_connect_description": "Musíte vytvořit pracovní prostor, abyste mohli připojit integraci a šablony",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/tr-TR/translations.json

@@ -507,6 +507,9 @@
   "choose_workspace_for_integration": "Bu uygulamayı bağlamak için bir çalışma alanı seçin",
   "integrations_description": "Plane ile çalışan uygulamalar, yönetici olduğunuz bir çalışma alanına bağlanmalıdır.",
   "create_a_new_workspace": "Yeni bir çalışma alanı oluştur",
+  "learn_more_about_workspaces": "Çalışma alanları hakkında daha fazla bilgi edinin",
+  "no_workspaces_to_connect": "Bağlamak için çalışma alanı yok",
+  "no_workspaces_to_connect_description": "Bir çalışma alanı oluşturmak için lütfen bu sayfaya dönün",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/ua/translations.json

@@ -505,6 +505,9 @@
   "choose_workspace_for_integration": "Виберіть робочий простір для підключення цієї програми",
   "integrations_description": "Програми, які працюють з Plane, повинні бути підключені до робочого простору, де ви є адміністратором.",
   "create_a_new_workspace": "Створити новий робочий простір",
+  "learn_more_about_workspaces": "Дізнатися більше про робочі простори",
+  "no_workspaces_to_connect": "Немає робочих просторів для підключення",
+  "no_workspaces_to_connect_description": "Ви повинні створити робочий простір, щоб підключити інтеграції та шаблони",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/vi-VN/translations.json

@@ -505,6 +505,9 @@
   "choose_workspace_for_integration": "Chọn không gian làm việc để kết nối ứng dụng này",
   "integrations_description": "Ứng dụng làm việc với Plane phải kết nối với không gian làm việc mà bạn là quản trị viên.",
   "create_a_new_workspace": "Tạo không gian làm việc mới",
+  "learn_more_about_workspaces": "Tìm hiểu thêm về không gian làm việc",
+  "no_workspaces_to_connect": "Không có không gian làm việc để kết nối",
+  "no_workspaces_to_connect_description": "Bạn cần tạo không gian làm việc để kết nối ứng dụng này",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/zh-CN/translations.json

@@ -507,6 +507,9 @@
   "choose_workspace_for_integration": "选择工作区以连接此应用程序",
   "integrations_description": "与 Plane 一起工作的应用程序必须连接到您是管理员的工作区",
   "create_a_new_workspace": "创建新的工作区",
+  "learn_more_about_workspaces": "了解更多关于工作区的信息",
+  "no_workspaces_to_connect": "没有工作区可连接",
+  "no_workspaces_to_connect_description": "您需要创建工作区才能连接此应用程序",
 
   "project_view": {
     "sort_by": {

packages/i18n/src/locales/zh-TW/translations.json

@@ -507,6 +507,9 @@
   "choose_workspace_for_integration": "選擇工作區以連接此應用程式",
   "integrations_description": "與 Plane 一起工作的應用程式必須連接到您是管理員的工作區",
   "create_a_new_workspace": "建立新的工作區",
+  "learn_more_about_workspaces": "了解更多關於工作區的資訊",
+  "no_workspaces_to_connect": "沒有工作區可連接",
+  "no_workspaces_to_connect_description": "您需要建立工作區才能連接整合和模板",
 
   "project_view": {
     "sort_by": {

web/app/workspaces/page.tsx

@@ -36,15 +36,7 @@ const WorkspacePickerPage = observer(() => {
           </Link>
           <div className="text-sm text-custom-text-100">{currentUser?.email}</div>
         </div>
-        <div className="relative flex flex-col gap-4 h-full w-full justify-center px-8 pb-8 items-center">
-          <div className="text-3xl font-bold text-center">{t("choose_workspace_for_integration")}</div>
-          <div className="font-medium text-custom-text-300 max-w-[450px] text-center">
-            {t("integrations_description")}
-          </div>
-          <div className="overflow-y-auto vertical-scrollbar scrollbar-sm mb-10 w-full md:w-fit">
-            <WorkspacePicker />
-          </div>
-        </div>
+        <WorkspacePicker />
       </div>
     </AuthenticationWrapper>
   );

web/core/components/common/workspace-picker/index.tsx

@@ -1,11 +1,15 @@
 import { useState } from "react";
+import Image from "next/image";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
 import { Check } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling, Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
 import { useWorkspace } from "@/hooks/store";
+import DarkImage from "@/public/empty-state/marketplace/empty-workspace-dark.png";
+import LightImage from "@/public/empty-state/marketplace/empty-workspace-light.png";
 import WorkspaceLogo from "../workspace-logo";
 
 export const WorkspacePicker = () => {
@@ -17,59 +21,91 @@ export const WorkspacePicker = () => {
   const { t } = useTranslation();
   // state
   const [selectedWorkspace, setSelectedWorkspace] = useState<string | null>(null);
+  // hook
+  const { resolvedTheme } = useTheme();
+  const image = resolvedTheme === "dark" ? DarkImage : LightImage;
 
   if (!loader && currentUserAdninWorkspaces?.length === 0) {
     return (
-      <Link
-        href="/create-workspace"
-        className={cn("text-sm text-custom-text-300 w-full md:w-[450px]", getButtonStyling("primary", "md"))}
-      >
-        {t("create_a_new_workspace")}
-      </Link>
+      <div className="relative flex flex-col gap-4 h-full w-full justify-center px-8 pb-8 items-center">
+        <div className="text-3xl font-bold text-center">{t("no_workspaces_to_connect")}</div>
+        <div className="font-medium text-custom-text-300 max-w-[450px] text-center">
+          {t("no_workspaces_to_connect_description")}
+        </div>
+        <div className="overflow-y-auto vertical-scrollbar scrollbar-sm mb-10 w-full md:w-fit">
+          <div className="w-full flex flex-col gap-2 items-center md:w-[450px]">
+            <Image src={image} alt="empty workspace" />
+            <div className="flex gap-2 flex-col md:flex-row">
+              <Link
+                href="https://plane.so/"
+                target="_blank"
+                className={cn(
+                  getButtonStyling("outline-primary", "md"),
+                  "border-custom-border-200 text-custom-text-100"
+                )}
+              >
+                {t("learn_more_about_workspaces")}
+              </Link>
+              <Link
+                href="/create-workspace"
+                className={cn("text-sm text-custom-text-300 w-full", getButtonStyling("primary", "md"))}
+              >
+                {t("create_a_new_workspace")}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
     );
   }
 
   return (
-    <div className="w-full flex flex-col md:w-[450px] bg-custom-background-90 rounded p-4 gap-2 border-[0.5px] border-custom-border-200">
-      {loader && (
-        <Loader className="w-full flex flex-col gap-2">
-          {Array.from({ length: 4 }).map((_, index) => (
-            <Loader.Item key={index} height="43px" />
-          ))}
-        </Loader>
-      )}
-      {!loader &&
-        currentUserAdninWorkspaces?.map((workspace) => (
-          <div key={workspace.id} className="w-full bg-custom-background-100 rounded">
-            <Link
-              href={`/${workspace.slug}${nextPath || ""}`}
-              className={cn(
-                "rounded p-2.5 flex items-center gap-2 border-[0.5px] border-custom-border-200 transition-all duration-200",
-                "hover:bg-custom-primary-100/20 hover:border-custom-primary-100",
-                {
-                  "bg-custom-primary-100/20 border-custom-primary-100": selectedWorkspace === workspace.id,
-                }
-              )}
-              onClick={() => setSelectedWorkspace(workspace.id)}
-            >
-              <div className="flex gap-2 items-center">
-                <WorkspaceLogo
-                  workspace={{
-                    logo_url: workspace.logo_url ?? "",
-                    name: workspace.name,
-                  }}
-                  size="sm"
-                />
-                <div className="text-sm text-custom-text-200 font-medium">{workspace.name}</div>
+    <div className="relative flex flex-col gap-4 h-full w-full justify-center px-8 pb-8 items-center">
+      <div className="text-3xl font-bold text-center">{t("choose_workspace_for_integration")}</div>
+      <div className="font-medium text-custom-text-300 max-w-[450px] text-center">{t("integrations_description")}</div>
+      <div className="overflow-y-auto vertical-scrollbar scrollbar-sm mb-10 w-full md:w-fit">
+        <div className="w-full flex flex-col md:w-[450px] bg-custom-background-90 rounded p-4 gap-2 border-[0.5px] border-custom-border-200">
+          {loader && (
+            <Loader className="w-full flex flex-col gap-2">
+              {Array.from({ length: 4 }).map((_, index) => (
+                <Loader.Item key={index} height="43px" />
+              ))}
+            </Loader>
+          )}
+          {!loader &&
+            currentUserAdninWorkspaces?.map((workspace) => (
+              <div key={workspace.id} className="w-full bg-custom-background-100 rounded">
+                <Link
+                  href={`/${workspace.slug}${nextPath || ""}`}
+                  className={cn(
+                    "rounded p-2.5 flex items-center gap-2 border-[0.5px] border-custom-border-200 transition-all duration-200",
+                    "hover:bg-custom-primary-100/20 hover:border-custom-primary-100",
+                    {
+                      "bg-custom-primary-100/20 border-custom-primary-100": selectedWorkspace === workspace.id,
+                    }
+                  )}
+                  onClick={() => setSelectedWorkspace(workspace.id)}
+                >
+                  <div className="flex gap-2 items-center">
+                    <WorkspaceLogo
+                      workspace={{
+                        logo_url: workspace.logo_url ?? "",
+                        name: workspace.name,
+                      }}
+                      size="sm"
+                    />
+                    <div className="text-sm text-custom-text-200 font-medium">{workspace.name}</div>
+                  </div>
+                  {selectedWorkspace === workspace.id && (
+                    <div className="ml-auto size-[14px] bg-custom-primary-100 rounded-full flex items-center justify-center">
+                      <Check className="text-white w-[10px] h-[10px] m-auto" />
+                    </div>
+                  )}
+                </Link>
               </div>
-              {selectedWorkspace === workspace.id && (
-                <div className="ml-auto size-[14px] bg-custom-primary-100 rounded-full flex items-center justify-center">
-                  <Check className="text-white w-[10px] h-[10px] m-auto" />
-                </div>
-              )}
-            </Link>
-          </div>
-        ))}
+            ))}
+        </div>
+      </div>
     </div>
   );
 };