feat(fe2): New workspace page layout

packages/frontend-2/components/billing/Alert.vue

@@ -1,6 +1,20 @@
 <template>
   <div>
-    <CommonAlert v-if="!hasValidPlan" :color="alertColor" :actions="actions">
+    <div
+      v-if="condensed"
+      class="flex items-center justify-between rounded-md p-2 text-body-3xs font-medium bg-[#E0ECFF] text-primary-focus"
+    >
+      {{ title }}
+      <FormButton
+        v-if="actions.length > 0"
+        size="sm"
+        :disabled="actions[0].disabled"
+        @click="actions[0].onClick"
+      >
+        {{ actions[0].title }}
+      </FormButton>
+    </div>
+    <CommonAlert v-else :color="alertColor" :actions="actions">
       <template #title>
         {{ title }}
       </template>
@@ -39,6 +53,7 @@ graphql(`
 const props = defineProps<{
   workspace: BillingAlert_WorkspaceFragment
   actions?: Array<AlertAction>
+  condensed?: boolean
 }>()
 
 const { billingPortalRedirect } = useBillingActions()
@@ -62,9 +77,14 @@ const trialDaysLeft = computed(() => {
 })
 const title = computed(() => {
   if (isTrial.value) {
-    return `You have ${trialDaysLeft.value} day${
-      trialDaysLeft.value !== 1 ? 's' : ''
-    } left on your free trial`
+    if (props.condensed) {
+      return `${trialDaysLeft.value} day${
+        trialDaysLeft.value !== 1 ? 's' : ''
+      } left in trial.`
+    } else
+      return `You have ${trialDaysLeft.value} day${
+        trialDaysLeft.value !== 1 ? 's' : ''
+      } left on your free trial`
   }
   switch (planStatus.value) {
     case WorkspacePlanStatuses.CancelationScheduled:
@@ -98,6 +118,7 @@ const description = computed(() => {
       return ''
   }
 })
+
 const alertColor = computed<AlertColor>(() => {
   switch (planStatus.value) {
     case WorkspacePlanStatuses.PaymentFailed:
@@ -110,6 +131,7 @@ const alertColor = computed<AlertColor>(() => {
       return 'neutral'
   }
 })
+
 const actions = computed((): AlertAction[] => {
   const actions: Array<AlertAction> = props.actions ?? []
 
@@ -129,5 +151,4 @@ const actions = computed((): AlertAction[] => {
 
   return actions
 })
-const hasValidPlan = computed(() => planStatus.value === WorkspacePlanStatuses.Valid)
 </script>

packages/frontend-2/components/dashboard/Sidebar.vue

@@ -58,8 +58,8 @@
               v-if="isWorkspacesEnabled"
               collapsible
               title="Workspaces"
-              :plus-click="isNotGuest ? handlePlusClick : undefined"
-              plus-text="Create workspace"
+              :icon-click="isNotGuest ? handlePlusClick : undefined"
+              icon-text="Create workspace"
             >
               <NuxtLink :to="workspacesRoute" @click="handleIntroducingWorkspacesClick">
                 <LayoutSidebarMenuGroupItem

packages/frontend-2/components/global/icon/Edit.vue

@@ -1,27 +1,27 @@
 <template>
   <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M7.8335 7.83337H7.00016C6.55814 7.83337 6.13421 8.00897 5.82165 8.32153C5.50909 8.63409 5.3335 9.05801 5.3335 9.50004V17C5.3335 17.4421 5.50909 17.866 5.82165 18.1786C6.13421 18.4911 6.55814 18.6667 7.00016 18.6667H14.5002C14.9422 18.6667 15.3661 18.4911 15.6787 18.1786C15.9912 17.866 16.1668 17.4421 16.1668 17V16.1667"
+      d="M3.66748 3.66687H3.00081C2.64719 3.66687 2.30805 3.80735 2.058 4.05739C1.80796 4.30744 1.66748 4.64658 1.66748 5.0002V11.0002C1.66748 11.3538 1.80796 11.693 2.058 11.943C2.30805 12.1931 2.64719 12.3335 3.00081 12.3335H9.00081C9.35443 12.3335 9.69357 12.1931 9.94362 11.943C10.1937 11.693 10.3341 11.3538 10.3341 11.0002V10.3335"
       stroke="currentColor"
       stroke-width="1.5"
       stroke-linecap="round"
       stroke-linejoin="round"
     />
     <path
-      d="M18.9875 7.48759C19.3157 7.15938 19.5001 6.71424 19.5001 6.25009C19.5001 5.78594 19.3157 5.34079 18.9875 5.01259C18.6593 4.68438 18.2142 4.5 17.75 4.5C17.2858 4.5 16.8407 4.68438 16.5125 5.01259L9.5 12.0001V14.5001H12L18.9875 7.48759Z"
+      d="M12.59 3.39007C12.8526 3.12751 13.0001 2.77139 13.0001 2.40007C13.0001 2.02875 12.8526 1.67264 12.59 1.41007C12.3274 1.14751 11.9713 1 11.6 1C11.2287 1 10.8726 1.14751 10.61 1.41007L5 7.00007V9.00007H7L12.59 3.39007Z"
       stroke="currentColor"
       stroke-width="1.5"
       stroke-linecap="round"
       stroke-linejoin="round"
     />
     <path
-      d="M15.3335 6.16663L17.8335 8.66663"
+      d="M9.66748 2.33313L11.6675 4.33313"
       stroke="currentColor"
       stroke-width="1.5"
       stroke-linecap="round"

packages/frontend-2/components/projects/AddDialog.vue

@@ -1,11 +1,5 @@
 <template>
-  <LayoutDialog
-    v-model:open="open"
-    max-width="sm"
-    :buttons="dialogButtons"
-    hide-closer
-    prevent-close-on-click-outside
-  >
+  <LayoutDialog v-model:open="open" max-width="sm" :buttons="dialogButtons">
     <template #header>Create a new project</template>
     <form class="flex flex-col text-foreground" @submit="onSubmit">
       <div class="flex flex-col gap-y-4 mb-2">

packages/frontend-2/components/workspace/InviteDialog.vue

@@ -81,6 +81,17 @@ import {
 } from '~/lib/workspaces/helpers/invites'
 import { mapMainRoleToGqlWorkspaceRole } from '~/lib/workspaces/helpers/roles'
 
+graphql(`
+  fragment WorkspaceInviteDialog_InvitedTeam on Workspace {
+    invitedTeam(filter: $invitesFilter) {
+      title
+      user {
+        id
+      }
+    }
+  }
+`)
+
 graphql(`
   fragment WorkspaceInviteDialog_Workspace on Workspace {
     domainBasedMembershipProtectionEnabled
@@ -98,12 +109,7 @@ graphql(`
         }
       }
     }
-    invitedTeam(filter: $invitesFilter) {
-      title
-      user {
-        id
-      }
-    }
+    ...WorkspaceInviteDialog_InvitedTeam
   }
 `)
 

packages/frontend-2/components/workspace/ProjectList.vue

@@ -1,5 +1,13 @@
 <template>
   <div>
+    <Portal to="right-sidebar">
+      <WorkspaceSidebar
+        v-if="workspace"
+        :workspace-info="workspace"
+        @show-settings-dialog="onShowSettingsDialog"
+        @show-invite-dialog="showInviteDialog = true"
+      />
+    </Portal>
     <div v-if="workspaceInvite" class="flex justify-center">
       <WorkspaceInviteBlock :invite="workspaceInvite" />
     </div>
@@ -15,48 +23,23 @@
         v-if="workspace"
         :icon="Squares2X2Icon"
         :workspace-info="workspace"
-        @show-invite-dialog="showInviteDialog = true"
         @show-settings-dialog="onShowSettingsDialog"
         @show-move-projects-dialog="showMoveProjectsDialog = true"
+        @show-new-project-dialog="openNewProject = true"
+        @show-invite-dialog="showInviteDialog = true"
       />
-      <div class="flex flex-col gap-4 mt-4">
-        <div class="flex flex-row gap-2 sm:items-center justify-between">
-          <FormTextInput
-            name="modelsearch"
-            :show-label="false"
-            placeholder="Search..."
-            :custom-icon="MagnifyingGlassIcon"
-            color="foundation"
-            wrapper-classes="grow md:grow-0 md:w-60"
-            show-clear
-            v-bind="bind"
-            v-on="on"
-          />
-          <div class="flex gap-2">
-            <!--- Conditionally apply tooltip only for non-admins and avoid v-tippy reactivity bug -->
-            <div v-if="!isWorkspaceAdmin" v-tippy="'You must be a workspace admin'">
-              <FormButton
-                :disabled="!isWorkspaceAdmin"
-                class="hidden md:block"
-                color="outline"
-                @click="showMoveProjectsDialog = true"
-              >
-                Move projects
-              </FormButton>
-            </div>
-            <FormButton
-              v-else
-              class="hidden md:block"
-              color="subtle"
-              @click="showMoveProjectsDialog = true"
-            >
-              Move projects
-            </FormButton>
-            <FormButton v-if="!isWorkspaceGuest" @click="openNewProject = true">
-              New project
-            </FormButton>
-          </div>
-        </div>
+      <div class="mt-2 lg:mt-4">
+        <FormTextInput
+          name="modelsearch"
+          :show-label="false"
+          :placeholder="searchPlaceholder"
+          :custom-icon="MagnifyingGlassIcon"
+          color="foundation"
+          wrapper-classes="w-full lg:w-60"
+          show-clear
+          v-bind="bind"
+          v-on="on"
+        />
       </div>
 
       <CommonLoadingBar :loading="showLoadingBar" class="my-2" />
@@ -136,10 +119,13 @@ import { useActiveUser } from '~~/lib/auth/composables/activeUser'
 graphql(`
   fragment WorkspaceProjectList_Workspace on Workspace {
     id
-    ...BillingActions_Workspace
-    ...MoveProjectsDialog_Workspace
-    ...WorkspaceHeader_Workspace
+    ...WorkspaceBase_Workspace
+    ...WorkspaceTeam_Workspace
+    ...WorkspaceSecurity_Workspace
+    ...BillingAlert_Workspace
     ...WorkspaceMixpanelUpdateGroup_Workspace
+    ...WorkspaceInviteDialog_Workspace
+    ...MoveProjectsDialog_Workspace
     projects {
       ...WorkspaceProjectList_ProjectCollection
     }
@@ -240,6 +226,11 @@ const showEmptyState = computed(() => {
   return projects.value && !projects.value?.items?.length
 })
 
+const searchPlaceholder = computed(() => {
+  const count = projects.value?.totalCount || 0
+  return count > 0 ? `Search in ${count} projects...` : 'Search...'
+})
+
 const showLoadingBar = computed(() => {
   const isLoading =
     areQueriesLoading.value || (!!search.value && !projects.value?.items?.length)