From 47ed805ac7e83b685683d94c0afd1935d96c04e1 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 23 Feb 2026 11:15:29 +0700
Subject: [PATCH] refactor(frontend): extract auth and topbar workspace
 components

---
 .../components/workspace/CrmWorkspaceApp.vue  | 137 ++++--------------
 .../workspace/auth/CrmAuthLoading.vue         |   5 +
 .../workspace/auth/CrmAuthLoginForm.vue       |  47 ++++++
 .../workspace/header/CrmWorkspaceTopbar.vue   | 100 +++++++++++++
 4 files changed, 181 insertions(+), 108 deletions(-)
 create mode 100644 frontend/app/components/workspace/auth/CrmAuthLoading.vue
 create mode 100644 frontend/app/components/workspace/auth/CrmAuthLoginForm.vue
 create mode 100644 frontend/app/components/workspace/header/CrmWorkspaceTopbar.vue

diff --git a/frontend/app/components/workspace/CrmWorkspaceApp.vue b/frontend/app/components/workspace/CrmWorkspaceApp.vue
index 0efc8c4..7ffdaf9 100644
--- a/frontend/app/components/workspace/CrmWorkspaceApp.vue
+++ b/frontend/app/components/workspace/CrmWorkspaceApp.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted } from "vue";
+import CrmAuthLoading from "~~/app/components/workspace/auth/CrmAuthLoading.vue";
+import CrmAuthLoginForm from "~~/app/components/workspace/auth/CrmAuthLoginForm.vue";
+import CrmWorkspaceTopbar from "~~/app/components/workspace/header/CrmWorkspaceTopbar.vue";
 import meQuery from "~~/graphql/operations/me.graphql?raw";
 import chatMessagesQuery from "~~/graphql/operations/chat-messages.graphql?raw";
 import dashboardQuery from "~~/graphql/operations/dashboard.graphql?raw";
@@ -4725,38 +4728,18 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
 
 <template>
   <div class="h-[100dvh] overflow-hidden bg-base-200/35">
-    <div v-if="!authResolved" class="flex h-full items-center justify-center">
-      <span class="loading loading-spinner loading-md text-base-content/70" />
-    </div>
+    <CrmAuthLoading v-if="!authResolved" />
 
-    <div v-else-if="!authMe" class="flex h-full items-center justify-center px-3">
-      <div class="card w-full max-w-sm border border-base-300 bg-base-100 shadow-sm">
-        <div class="card-body p-5">
-          <h1 class="text-lg font-semibold">Login</h1>
-          <p class="mt-1 text-xs text-base-content/65">Sign in with phone and password.</p>
-          <div class="mt-4 space-y-2">
-            <input
-              v-model="loginPhone"
-              type="tel"
-              class="input input-bordered w-full"
-              placeholder="+1 555 000 0001"
-              @keyup.enter="login"
-            >
-            <input
-              v-model="loginPassword"
-              type="password"
-              class="input input-bordered w-full"
-              placeholder="Password"
-              @keyup.enter="login"
-            >
-            <p v-if="loginError" class="text-xs text-error">{{ loginError }}</p>
-            <button class="btn w-full" :disabled="loginBusy" @click="login">
-              {{ loginBusy ? "Logging in..." : "Login" }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+    <CrmAuthLoginForm
+      v-else-if="!authMe"
+      :phone="loginPhone"
+      :password="loginPassword"
+      :error="loginError"
+      :busy="loginBusy"
+      @update:phone="loginPhone = $event"
+      @update:password="loginPassword = $event"
+      @submit="login"
+    />
 
     <template v-else>
       <div class="grid h-full min-h-0 grid-cols-1 gap-0 lg:grid-cols-[320px_minmax(0,1fr)]">
@@ -5011,83 +4994,21 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
 
         <main class="relative min-h-0 bg-base-100">
         <div class="flex h-full min-h-0 flex-col">
-          <div class="workspace-topbar border-b border-base-300 px-3 py-2 md:px-4">
-            <div class="flex items-center justify-between gap-3">
-              <div class="join">
-                <button
-                  class="btn btn-sm join-item"
-                  :class="
-                    selectedTab === 'communications' && peopleLeftMode === 'contacts'
-                      ? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
-                      : 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
-                  "
-                  @click="setPeopleLeftMode('contacts', true)"
-                >
-                  Contacts
-                </button>
-                <button
-                  class="btn btn-sm join-item"
-                  :class="
-                    selectedTab === 'communications' && peopleLeftMode === 'calendar'
-                      ? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
-                      : 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
-                  "
-                  @click="setPeopleLeftMode('calendar', true)"
-                >
-                  Calendar
-                </button>
-                <button
-                  class="btn btn-sm join-item"
-                  :class="
-                    selectedTab === 'documents'
-                      ? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
-                      : 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
-                  "
-                  @click="openDocumentsTab(true)"
-                >
-                  Documents
-                </button>
-              </div>
-
-              <div class="dropdown dropdown-end">
-                <button tabindex="0" class="btn btn-sm btn-ghost gap-2">
-                  <div class="avatar placeholder">
-                    <div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-content">
-                      <span class="text-[11px] font-semibold leading-none">{{ authInitials }}</span>
-                    </div>
-                  </div>
-                  <span class="max-w-[160px] truncate text-xs font-medium">{{ authDisplayName }}</span>
-                </button>
-                <div tabindex="0" class="dropdown-content z-30 mt-2 w-80 rounded-box border border-base-300 bg-base-100 p-3 shadow-lg">
-                  <div class="mb-2 border-b border-base-300 pb-2">
-                    <p class="truncate text-sm font-semibold">{{ authDisplayName }}</p>
-                    <p class="text-[11px] uppercase tracking-wide text-base-content/60">Settings</p>
-                  </div>
-
-                  <div class="space-y-2 rounded-lg border border-base-300 bg-base-50/40 p-2">
-                    <div class="flex items-center justify-between gap-2">
-                      <span class="text-xs font-medium">Telegram Business</span>
-                      <span class="badge badge-xs" :class="telegramStatusBadgeClass">{{ telegramStatusLabel }}</span>
-                    </div>
-                    <button
-                      class="btn btn-xs btn-primary w-full"
-                      :disabled="telegramConnectBusy"
-                      @click="startTelegramBusinessConnect"
-                    >
-                      {{ telegramConnectBusy ? "Connecting..." : "Connect Telegram" }}
-                    </button>
-                    <p v-if="telegramConnectNotice" class="text-[11px] leading-snug text-base-content/70">
-                      {{ telegramConnectNotice }}
-                    </p>
-                  </div>
-
-                  <div class="mt-3 border-t border-base-300 pt-2">
-                    <button class="btn btn-sm w-full btn-ghost justify-start" @click="logout">Logout</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+          <CrmWorkspaceTopbar
+            :selected-tab="selectedTab"
+            :people-left-mode="peopleLeftMode"
+            :auth-initials="authInitials"
+            :auth-display-name="authDisplayName"
+            :telegram-status-badge-class="telegramStatusBadgeClass"
+            :telegram-status-label="telegramStatusLabel"
+            :telegram-connect-busy="telegramConnectBusy"
+            :telegram-connect-notice="telegramConnectNotice"
+            @open-contacts="setPeopleLeftMode('contacts', true)"
+            @open-calendar="setPeopleLeftMode('calendar', true)"
+            @open-documents="openDocumentsTab(true)"
+            @start-telegram-connect="startTelegramBusinessConnect"
+            @logout="logout"
+          />
           <div
             class="min-h-0 flex-1"
             :class="selectedTab === 'documents' || (selectedTab === 'communications' && peopleLeftMode === 'contacts') ? 'px-0 pt-0 pb-0' : 'px-3 pt-3 pb-0 md:px-4 md:pt-4 md:pb-0'"
diff --git a/frontend/app/components/workspace/auth/CrmAuthLoading.vue b/frontend/app/components/workspace/auth/CrmAuthLoading.vue
new file mode 100644
index 0000000..4b36187
--- /dev/null
+++ b/frontend/app/components/workspace/auth/CrmAuthLoading.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="flex h-full items-center justify-center">
+    <span class="loading loading-spinner loading-md text-base-content/70" />
+  </div>
+</template>
diff --git a/frontend/app/components/workspace/auth/CrmAuthLoginForm.vue b/frontend/app/components/workspace/auth/CrmAuthLoginForm.vue
new file mode 100644
index 0000000..b2d6091
--- /dev/null
+++ b/frontend/app/components/workspace/auth/CrmAuthLoginForm.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = defineProps<{
+  phone: string;
+  password: string;
+  error: string | null;
+  busy: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:phone", value: string): void;
+  (e: "update:password", value: string): void;
+  (e: "submit"): void;
+}>();
+</script>
+
+<template>
+  <div class="flex h-full items-center justify-center px-3">
+    <div class="card w-full max-w-sm border border-base-300 bg-base-100 shadow-sm">
+      <div class="card-body p-5">
+        <h1 class="text-lg font-semibold">Login</h1>
+        <p class="mt-1 text-xs text-base-content/65">Sign in with phone and password.</p>
+        <div class="mt-4 space-y-2">
+          <input
+            :value="props.phone"
+            type="tel"
+            class="input input-bordered w-full"
+            placeholder="+1 555 000 0001"
+            @input="emit('update:phone', ($event.target as HTMLInputElement).value)"
+            @keyup.enter="emit('submit')"
+          >
+          <input
+            :value="props.password"
+            type="password"
+            class="input input-bordered w-full"
+            placeholder="Password"
+            @input="emit('update:password', ($event.target as HTMLInputElement).value)"
+            @keyup.enter="emit('submit')"
+          >
+          <p v-if="props.error" class="text-xs text-error">{{ props.error }}</p>
+          <button class="btn w-full" :disabled="props.busy" @click="emit('submit')">
+            {{ props.busy ? "Logging in..." : "Login" }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/app/components/workspace/header/CrmWorkspaceTopbar.vue b/frontend/app/components/workspace/header/CrmWorkspaceTopbar.vue
new file mode 100644
index 0000000..94a2032
--- /dev/null
+++ b/frontend/app/components/workspace/header/CrmWorkspaceTopbar.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+const props = defineProps<{
+  selectedTab: "communications" | "documents";
+  peopleLeftMode: "contacts" | "calendar";
+  authInitials: string;
+  authDisplayName: string;
+  telegramStatusBadgeClass: string;
+  telegramStatusLabel: string;
+  telegramConnectBusy: boolean;
+  telegramConnectNotice: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "open-contacts"): void;
+  (e: "open-calendar"): void;
+  (e: "open-documents"): void;
+  (e: "start-telegram-connect"): void;
+  (e: "logout"): void;
+}>();
+</script>
+
+<template>
+  <div class="workspace-topbar border-b border-base-300 px-3 py-2 md:px-4">
+    <div class="flex items-center justify-between gap-3">
+      <div class="join">
+        <button
+          class="btn btn-sm join-item"
+          :class="
+            props.selectedTab === 'communications' && props.peopleLeftMode === 'contacts'
+              ? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
+              : 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
+          "
+          @click="emit('open-contacts')"
+        >
+          Contacts
+        </button>
+        <button
+          class="btn btn-sm join-item"
+          :class="
+            props.selectedTab === 'communications' && props.peopleLeftMode === 'calendar'
+              ? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
+              : 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
+          "
+          @click="emit('open-calendar')"
+        >
+          Calendar
+        </button>
+        <button
+          class="btn btn-sm join-item"
+          :class="
+            props.selectedTab === 'documents'
+              ? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
+              : 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
+          "
+          @click="emit('open-documents')"
+        >
+          Documents
+        </button>
+      </div>
+
+      <div class="dropdown dropdown-end">
+        <button tabindex="0" class="btn btn-sm btn-ghost gap-2">
+          <div class="avatar placeholder">
+            <div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-content">
+              <span class="text-[11px] font-semibold leading-none">{{ props.authInitials }}</span>
+            </div>
+          </div>
+          <span class="max-w-[160px] truncate text-xs font-medium">{{ props.authDisplayName }}</span>
+        </button>
+        <div tabindex="0" class="dropdown-content z-30 mt-2 w-80 rounded-box border border-base-300 bg-base-100 p-3 shadow-lg">
+          <div class="mb-2 border-b border-base-300 pb-2">
+            <p class="truncate text-sm font-semibold">{{ props.authDisplayName }}</p>
+            <p class="text-[11px] uppercase tracking-wide text-base-content/60">Settings</p>
+          </div>
+
+          <div class="space-y-2 rounded-lg border border-base-300 bg-base-50/40 p-2">
+            <div class="flex items-center justify-between gap-2">
+              <span class="text-xs font-medium">Telegram Business</span>
+              <span class="badge badge-xs" :class="props.telegramStatusBadgeClass">{{ props.telegramStatusLabel }}</span>
+            </div>
+            <button
+              class="btn btn-xs btn-primary w-full"
+              :disabled="props.telegramConnectBusy"
+              @click="emit('start-telegram-connect')"
+            >
+              {{ props.telegramConnectBusy ? "Connecting..." : "Connect Telegram" }}
+            </button>
+            <p v-if="props.telegramConnectNotice" class="text-[11px] leading-snug text-base-content/70">
+              {{ props.telegramConnectNotice }}
+            </p>
+          </div>
+
+          <div class="mt-3 border-t border-base-300 pt-2">
+            <button class="btn btn-sm w-full btn-ghost justify-start" @click="emit('logout')">Logout</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>