feat: add workspace handle and bundle analyzer

add bundle analyzer
add workspace chooser
add popover for workspace handle

core/client/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview",
     "test:unit": "vitest",
     "build-only": "vite build",
+    "debug:build": "NODE_OPTIONS='--inspect-brk' pnpm run build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --fix",
     "stylelint": "npx stylelint **/*.scss --fix",
@@ -84,6 +85,7 @@
     "lint-staged": "^15.2.7",
     "npm-run-all2": "^6.2.0",
     "prettier": "^3.2.5",
+    "sonda": "0.7.0",
     "storybook": "^8.1.10",
     "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0",

core/client/src/entities/workspace/index.ts

@@ -0,0 +1,2 @@
+export * from './model'
+export * from './ui'

core/client/src/entities/workspace/model/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export * from './workspace.store'

core/client/src/entities/workspace/model/types.ts

@@ -0,0 +1,13 @@
+import type { User } from '@/entities/user'
+
+export interface BaseTestWorkspace {
+  _id: string
+  name: string
+  img: string | Blob
+  link: string
+  status: 'active' | 'archive'
+  members: User[]
+  plan: 'FREE' | 'PREMIUM'
+}
+
+export type ChoosingWorkspaceItem = Pick<BaseTestWorkspace, '_id' | 'name' | 'status' | 'plan'>

core/client/src/entities/workspace/model/workspace.store.ts

@@ -0,0 +1,29 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { User } from '@/entities/user'
+
+interface BaseTestWorkspace {
+  _id: string
+  name: string
+  img: string | Blob
+  link: string
+  status: 'active' | 'archive'
+  members: User[]
+  plan: 'FREE' | 'PREMIUM'
+}
+
+export const useWorkspaceStore = defineStore('workspace', () => {
+  const workspace = ref({
+    _id: '0',
+    name: 'Example.io',
+    img: 'https://avatars.githubusercontent.com/u/185750893?s=100&v=4',
+    link: 'https://jenda-app-mnenie.com/example.io',
+    status: 'active',
+    members: [],
+    plan: 'FREE',
+  } as BaseTestWorkspace)
+
+  return {
+    workspace,
+  }
+})

core/client/src/entities/workspace/ui/ChoosingButton.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ChoosingWorkspaceItem } from '../model'
+import { UiBadge, UiButton } from '@/shared/ui'
+
+defineProps<{
+  item: ChoosingWorkspaceItem
+}>()
+
+const emit = defineEmits<{
+  (e: 'choose', id: string): void
+}>()
+</script>
+
+<template>
+  <UiButton
+    variant="dashed"
+    class="hover:(border-neutral-500 !bg-white dark:!bg-neutral-800) focus:border-neutral-500 justify-between"
+    @click.prevent="emit('choose', item._id)"
+  >
+    {{ item.name }}
+    <div class="flex items-center gap-1.5">
+      <UiBadge variant="soft" class="px-1 py-0 text-xs">
+        {{ item.plan }}
+      </UiBadge>
+      <UiBadge variant="soft" class="px-1 py-0 text-xs">
+        {{ item.status }}
+      </UiBadge>
+    </div>
+  </UiButton>
+</template>

core/client/src/entities/workspace/ui/index.ts

@@ -0,0 +1 @@
+export { default as ChoosingButton } from './ChoosingButton.vue'

core/client/src/features/auth/common/ui/LogoFile.vue

@@ -11,7 +11,7 @@ const isDark = useDark()
 <template>
   <div
     v-if="width > 1100"
-    class="absolute top-24px left-32px flex items-center gap-1.5 cursor-pointer"
+    class="absolute z-99 top-24px left-32px flex items-center gap-1.5 cursor-pointer"
     @click="$router.push('/')"
   >
     <img
@@ -24,7 +24,7 @@ const isDark = useDark()
   </div>
   <div
     v-else
-    class="absolute left-150px top-30px flex items-center gap-1.5 cursor-pointer max-w-700px
+    class="absolute z-99 left-150px top-30px flex items-center gap-1.5 cursor-pointer max-w-700px
         max-[890px]:left-80px max-[580px]:!left-20px max-[520px]:(!left-15px !top-15px)"
   >
     <div

core/client/src/features/auth/common/ui/PrivacyPolicy.vue

@@ -11,18 +11,14 @@ const privacyItems = tm('authentication.privacy') as string[]
 const maxWidth = computed(() => {
   return locale.value === 'ru-RU' ? '400px' : '320px'
 })
-
-const privacyChangingItem = computed(() =>
-  route.name === 'sign-in' ? privacyItems[1] : privacyItems[0],
-)
 </script>
 
 <template>
   <p
     class="pt-2.5 text-sm text-center text-neutral-500 my-0 mx-auto select-none dark:text-neutral-400"
     :style="{ maxWidth }"
   >
-    {{ privacyChangingItem }}
+    {{ privacyItems[0] }}
     <a
       href="https://github.com/mnenie/jenda"
       target="_blank"

core/client/src/features/auth/sign-in/ui/SignInForm.vue

@@ -3,6 +3,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { createReusableTemplate } from '@vueuse/core'
 import { useField, useForm } from 'vee-validate'
 import { toast } from 'vue-sonner'
+import { useRouter } from 'vue-router/auto'
 import {
   UiButton,
   UiFormField,
@@ -25,9 +26,12 @@ const { handleSubmit, errors } = useForm({
 const { value: email } = useField<string>('email')
 const { value: password } = useField<string | number>('password')
 
+const router = useRouter()
+
 const onLogin = handleSubmit((values) => {
   // on login event
   toast.warning('Jenda in dev mode and temporarily unavailable')
+  router.push({ name: 'sign-in-workspace' })
 })
 
 const [DefineTemplate, ReuseTemplate] = createReusableTemplate()

core/client/src/features/auth/sign-in/ui/WorkspaceChanger.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router/auto'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useField, useForm } from 'vee-validate'
+import { ChoosingButton, type ChoosingWorkspaceItem } from '@/entities/workspace'
+import { UiButton, UiFormField, UiFormLabel, UiFormMessage } from '@/shared/ui'
+import { z } from '@/shared/libs/vee-validate'
+
+defineProps<{
+  workspaces: ChoosingWorkspaceItem[]
+}>()
+
+const validationSchema = toTypedSchema(
+  z.object({
+    workspace: z.string().min(1),
+  }),
+)
+
+const { handleSubmit, errors } = useForm({
+  validationSchema,
+})
+const { value: workspace } = useField<string>('workspace')
+
+const router = useRouter()
+function handleWorkspaceChoose(id: string) {
+  // console.log(id)
+  workspace.value = id
+}
+
+const onChanger = handleSubmit((values) => {
+  router.push({ name: 'boards' })
+})
+</script>
+
+<template>
+  <form @submit.prevent="onChanger">
+    <div class="grid gap-6">
+      <UiFormField v-auto-animate class="flex flex-col gap-3">
+        <UiFormLabel
+          for="workspaces"
+        >
+          {{ $t('authentication.workspace.choosing.label') }}
+        </UiFormLabel>
+        <div class="flex flex-col gap-3 max-h-200px overflow-auto">
+          <ChoosingButton
+            v-for="w in workspaces"
+            :key="w._id"
+            :item="w"
+            @choose="handleWorkspaceChoose(w._id)"
+          />
+        </div>
+        <UiFormMessage v-if="errors.workspace" :content="errors.workspace" />
+      </UiFormField>
+      <UiButton type="submit">
+        {{ $t('authentication.workspace.route') }}
+      </UiButton>
+    </div>
+  </form>
+</template>

core/client/src/features/auth/sign-in/ui/index.ts

@@ -1,3 +1,4 @@
 import SignInForm from './SignInForm.vue'
+import WorkspaceChanger from './WorkspaceChanger.vue'
 
-export { SignInForm }
+export { SignInForm, WorkspaceChanger }

core/client/src/features/auth/sign-up/ui/ConfirmForm.vue

@@ -3,7 +3,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { useField, useForm } from 'vee-validate'
 import { useRouter } from 'vue-router/auto'
 import { toast } from 'vue-sonner'
-import { z } from 'zod'
+import { z } from '@/shared/libs/vee-validate'
 import { UiButton, UiFormField, UiFormMessage, UiPinInput, UiPinInputGroup, UiPinInputInput } from '@/shared/ui'
 
 const formSchema = toTypedSchema(z.object({
@@ -22,7 +22,7 @@ const { value: pin } = useField<string[]>('pin')
 const router = useRouter()
 
 const onConfirm = handleSubmit((values) => {
-  router.push({ name: 'workspace' })
+  router.push({ name: 'sign-up-workspace' })
 })
 
 function onResend() {
@@ -54,7 +54,7 @@ function onResend() {
       </UiPinInput>
       <UiFormMessage v-if="errors.pin" :content="errors.pin" />
     </UiFormField>
-    <p class="text-sm text-neutral-400 mt-2">
+    <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
       {{ $t('authentication.form.otp') }}
     </p>
     <UiButton type="submit" class="w-full mt-4 mb-2">

core/client/src/features/auth/sign-up/ui/HandleLogo.vue

@@ -9,10 +9,10 @@ const { openFileChooser, reset } = inject(authWorkspaceKey)!
 <template>
   <div class="flex items-center gap-2">
     <UiButton size="sm" variant="outline" @click="openFileChooser($event)">
-      {{ $t('authentication.workspace.logo.btn', 1) }}
+      {{ $t('authentication.workspace.creating.logo.btn', 1) }}
     </UiButton>
     <UiButton size="sm" variant="outline" class="!text-red-500" @click="reset">
-      {{ $t('authentication.workspace.logo.btn', 2) }}
+      {{ $t('authentication.workspace.creating.logo.btn', 2) }}
     </UiButton>
   </div>
 </template>

core/client/src/features/auth/sign-up/ui/WorkspaceForm.vue

@@ -3,7 +3,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { createReusableTemplate } from '@vueuse/core'
 import { useField, useForm } from 'vee-validate'
 import { useRouter } from 'vue-router/auto'
-import { z } from 'zod'
+import { z } from '@/shared/libs/vee-validate'
 import { UiButton, UiFormField, UiFormLabel, UiFormMessage, UiInput } from '@/shared/ui'
 
 const validationSchema = toTypedSchema(
@@ -35,7 +35,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
       <UiFormLabel
         :for="field"
       >
-        {{ $t(`authentication.workspace.form.${field}.label`) }}
+        {{ $t(`authentication.workspace.creating.form.${field}.label`) }}
       </UiFormLabel>
       <component :is="$slots.default" />
       <UiFormMessage v-if="error" :content="error" />
@@ -48,7 +48,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
           <UiInput
             id="name"
             v-model="name"
-            :placeholder="$t('authentication.workspace.form.name.placeholder')"
+            :placeholder="$t('authentication.workspace.creating.form.name.placeholder')"
           />
         </ReuseTemplate>
         <ReuseTemplate field="url" :error="errors.url">

core/client/src/features/filter/ui/SearchFilter.vue

@@ -46,11 +46,11 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     >
       <div
         i-lucide-search
-        class="text-neutral-800 dark:text-neutral-200 !w-16px !h-16px 2xl:(!w-4 !h-4)"
+        class="text-neutral-800 dark:text-neutral-200 2xl:(!w-4 !h-4)"
         :class="[
           isExpanded
-            ? 'mr-1'
-            : 'absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 h-4 w-4',
+            ? 'mr-1 !w-15px !h-15px'
+            : 'absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 !h-16px !w-16px',
         ]"
       />
       <span

core/client/src/layouts/ui/AuthLayout.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { BgPanel } from '@/features/auth/common'
+import { BgPanel, LogoFile } from '@/features/auth/common'
 </script>
 
 <template>
-  <div class="h-dvh w-full flex">
+  <div class="h-dvh w-full flex relative">
+    <LogoFile />
     <slot />
     <BgPanel />
   </div>

core/client/src/pages/auth/sign-in/workspace.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { shallowReactive } from 'vue'
+import { useHead } from '@unhead/vue'
+import type { ChoosingWorkspaceItem } from '@/entities/workspace'
+import { LayoutsEnum } from '@/layouts/model'
+import { WorkspaceChoosing } from '@/widgets/auth'
+import { WorkspaceChanger } from '@/features/auth/sign-in'
+
+definePage({
+  meta: {
+    layout: LayoutsEnum.auth,
+    requiresAuth: true,
+  },
+  name: 'sign-in-workspace',
+})
+
+useHead({
+  title: 'Sign In | Choose your workspace',
+})
+
+const workspaces = shallowReactive<ChoosingWorkspaceItem[]>([
+  {
+    _id: '1',
+    name: 'Workspace 1',
+    plan: 'FREE',
+    status: 'active',
+  },
+  {
+    _id: '2',
+    name: 'Workspace 2',
+    plan: 'PREMIUM',
+    status: 'active',
+  },
+])
+</script>
+
+<template>
+  <div class="auth-page">
+    <WorkspaceChoosing>
+      <WorkspaceChanger :workspaces />
+    </WorkspaceChoosing>
+  </div>
+</template>

core/client/src/pages/auth/sign-up/workspace.vue

@@ -2,14 +2,14 @@
 import { useHead } from '@unhead/vue'
 import { WorkspaceForm } from '@/features/auth/sign-up'
 import { LayoutsEnum } from '@/layouts/model'
-import { WorkspaceLogoChooser, WorkspaceSection } from '@/widgets/auth'
+import { WorkspaceCreating, WorkspaceLogoChooser } from '@/widgets/auth'
 
 definePage({
   meta: {
     layout: LayoutsEnum.auth,
     requiresAuth: true,
   },
-  name: 'workspace',
+  name: 'sign-up-workspace',
 })
 
 useHead({
@@ -19,13 +19,13 @@ useHead({
 
 <template>
   <div class="auth-page">
-    <WorkspaceSection>
+    <WorkspaceCreating>
       <template #logo>
         <WorkspaceLogoChooser />
       </template>
       <template #form>
         <WorkspaceForm />
       </template>
-    </WorkspaceSection>
+    </WorkspaceCreating>
   </div>
 </template>