@coopenomics/desktop 2025.11.10-alpha-1 → 2025.11.10-alpha-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coopenomics/desktop",
-  "version": "2025.11.10-alpha-1",
+  "version": "2025.11.10-alpha-2",
   "description": "A Desktop Project",
   "productName": "Desktop App",
   "author": "Alex Ant <dacom.dark.sun@gmail.com>",
@@ -25,9 +25,9 @@
     "start": "node -r ./alias-resolver.js dist/ssr/index.js"
   },
   "dependencies": {
-    "@coopenomics/controller": "2025.11.10-alpha-1",
-    "@coopenomics/notifications": "2025.11.10-alpha-1",
-    "@coopenomics/sdk": "2025.11.10-alpha-1",
+    "@coopenomics/controller": "2025.11.10-alpha-2",
+    "@coopenomics/notifications": "2025.11.10-alpha-2",
+    "@coopenomics/sdk": "2025.11.10-alpha-2",
     "@dicebear/collection": "^9.0.1",
     "@dicebear/core": "^9.0.1",
     "@editorjs/code": "^2.9.3",
@@ -59,7 +59,7 @@
     "@wharfkit/wallet-plugin-privatekey": "^1.1.0",
     "axios": "^1.2.1",
     "compression": "^1.7.4",
-    "cooptypes": "2025.11.10-alpha-1",
+    "cooptypes": "2025.11.10-alpha-2",
     "dompurify": "^3.1.7",
     "dotenv": "^16.4.5",
     "email-regex": "^5.0.0",
@@ -123,5 +123,5 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   },
-  "gitHead": "634766a08edc036ccf4b08438b14251fa3a8ab73"
+  "gitHead": "e914a117682b30c65a8fe762148bb579aa50d62d"
 }

package/src/app/layouts/default.vue

@@ -52,12 +52,16 @@ q-layout(view='lHh LpR fff')
       WindowLoader(v-if='desktop?.isWorkspaceChanging')
       router-view(v-else)
 
+      // Глобальный CmdkMenu на уровне всего приложения
+    CmdkMenu
+
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Header } from 'src/widgets/Header/CommonHeader';
 import { LeftDrawerMenu } from 'src/widgets/Desktop/LeftDrawerMenu';
+import { CmdkMenu } from 'src/widgets/Desktop/CmdkMenu';
 import { ContactsFooter } from 'src/shared/ui/Footer';
 
 import { useDesktopStore } from 'src/entities/Desktop/model';

package/src/entities/CmdkMenu/index.ts

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

package/src/entities/CmdkMenu/model/index.ts

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

package/src/entities/CmdkMenu/model/store.ts

@@ -0,0 +1,402 @@
+import { defineStore } from 'pinia';
+import { computed, ref, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
+import { useCurrentUser } from 'src/entities/Session';
+import { useDesktopStore } from 'src/entities/Desktop/model';
+import { useSystemStore } from 'src/entities/System/model';
+import type { PageItem, GroupedItem } from './types';
+
+const namespace = 'cmdk-menu';
+
+export const useCmdkMenuStore = defineStore(namespace, () => {
+  // Composables
+  const router = useRouter();
+  const user = useCurrentUser();
+  const desktop = useDesktopStore();
+  const { info } = useSystemStore();
+
+  // State
+  const showDialog = ref(false);
+  const searchQuery = ref('');
+  const selectedIndex = ref(0);
+  const selectedPageIndex = ref(-1);
+  const searchInput = ref<HTMLInputElement | null>(null);
+  const contentRef = ref<HTMLElement | null>(null);
+
+  // Функция для определения ОС и типа устройства
+  const getOSInfo = () => {
+    const userAgent = navigator.userAgent;
+    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+
+    if (isMobile) {
+      return { os: 'mobile', shortcut: null };
+    }
+
+    // Определение ОС для desktop
+    if (userAgent.includes('Mac')) {
+      return { os: 'mac', shortcut: '⌘ + K' };
+    } else if (userAgent.includes('Windows')) {
+      return { os: 'windows', shortcut: 'Ctrl + K' };
+    } else {
+      // Linux или другие Unix-like системы
+      return { os: 'linux', shortcut: 'Ctrl + K' };
+    }
+  };
+
+  // Вычисляемое свойство для подсказки горячих клавиш
+  const shortcutHint = computed(() => getOSInfo().shortcut);
+
+  // Функция для оценки условий
+  const evaluateCondition = (condition: string, context: Record<string, any>): boolean => {
+    try {
+      const func = new Function(...Object.keys(context), `return ${condition};`);
+      return func(...Object.values(context));
+    } catch (error) {
+      console.error('Error evaluating condition:', error);
+      return false;
+    }
+  };
+
+  // Получение горячих клавиш для страниц
+  const getShortcut = (pageName: string): string | undefined => {
+    const shortcuts: Record<string, string> = {
+      'projects-list': '⌘P',
+      'capital-wallet': '⌘W',
+      'tracker': '⌘T',
+      'voting': '⌘V',
+      'results': '⌘R',
+    };
+    return shortcuts[pageName];
+  };
+
+// Группировка воркспейсов с их страницами
+const groupedItems = computed<GroupedItem[]>(() => {
+  const userRole = user.isChairman
+    ? 'chairman'
+    : user.isMember
+      ? 'member'
+      : 'user';
+
+  return desktop.workspaceMenus
+    .filter(
+      (item) =>
+        item.meta?.roles?.includes(userRole) ||
+        item.meta?.roles === undefined ||
+        item.meta?.roles.length === 0
+    )
+    .map(workspace => ({
+      workspaceName: workspace.workspaceName,
+      title: workspace.title,
+      icon: workspace.icon,
+      isActive: desktop.activeWorkspaceName === workspace.workspaceName,
+      pages: (workspace.mainRoute?.children || [])
+        .filter((page: any) => {
+          // Фильтрация по ролям, условиям и скрытым страницам
+          const rolesMatch =
+            page.meta?.roles?.includes(user.isChairman ? 'chairman' : user.isMember ? 'member' : 'user') ||
+            !page.meta?.roles ||
+            page.meta.roles.length === 0;
+          const conditionMatch = page.meta?.conditions
+            ? evaluateCondition(page.meta.conditions, {
+                isCoop: user.privateAccount.value?.type === 'organization' &&
+                       user.privateAccount.value?.organization_data?.type?.toUpperCase() === 'COOP',
+                userRole: user.isChairman ? 'chairman' : user.isMember ? 'member' : 'user',
+                userAccount: user.privateAccount.value,
+                coopname: info.coopname,
+              })
+            : true;
+          const hiddenMatch = page.meta?.hidden ? !page.meta.hidden : true;
+
+          return rolesMatch && conditionMatch && hiddenMatch;
+        })
+        .map((page: any) => ({
+          name: page.name,
+          meta: page.meta,
+          shortcut: getShortcut(page.name),
+        }))
+    }));
+  });
+
+// Поиск и фильтрация
+const filteredItems = computed(() => {
+  if (!searchQuery.value) {
+    return groupedItems.value;
+  }
+
+    const query = searchQuery.value.toLowerCase();
+
+    return groupedItems.value
+      .map(group => ({
+        ...group,
+        pages: group.pages.filter(page =>
+          page.meta.title.toLowerCase().includes(query) ||
+          page.name.toLowerCase().includes(query) ||
+          group.title.toLowerCase().includes(query) ||
+          group.workspaceName.toLowerCase().includes(query)
+        )
+      }))
+      .filter(group => group.pages.length > 0 || group.title.toLowerCase().includes(query));
+  });
+
+  // Методы
+  const openDialog = async () => {
+    showDialog.value = true;
+    await nextTick();
+    searchInput.value?.focus();
+    searchQuery.value = '';
+    selectedIndex.value = 0;
+    selectedPageIndex.value = -1;
+  };
+
+  const closeDialog = () => {
+    showDialog.value = false;
+    searchQuery.value = '';
+  };
+
+  const handleSearch = () => {
+    selectedIndex.value = 0;
+    selectedPageIndex.value = -1;
+  };
+
+  const selectCurrentItem = () => {
+    if (filteredItems.value.length === 0) return;
+
+    const currentGroup = filteredItems.value[selectedIndex.value];
+    if (!currentGroup) return;
+
+    // Если выбрана страница (selectedPageIndex >= 0), переходим на неё
+    if (selectedPageIndex.value >= 0 && selectedPageIndex.value < currentGroup.pages.length) {
+      const selectedPage = currentGroup.pages[selectedPageIndex.value];
+      selectPage(currentGroup.workspaceName, selectedPage);
+    } else {
+      // Если выбрана группа (selectedPageIndex === -1), переходим на группу
+      selectGroup(selectedIndex.value);
+    }
+  };
+
+  const selectFirstItem = () => {
+    if (filteredItems.value.length > 0) {
+      const firstGroup = filteredItems.value[0];
+      if (firstGroup.pages.length > 0) {
+        selectPage(firstGroup.workspaceName, firstGroup.pages[0]);
+      } else {
+        selectGroup(0);
+      }
+    }
+  };
+
+  const scrollToSelected = () => {
+    if (!contentRef.value) return;
+
+    const selectedElement = contentRef.value.querySelector('.selected');
+    if (!selectedElement) return;
+
+    // Используем requestAnimationFrame для надежного ожидания обновления DOM
+    requestAnimationFrame(() => {
+      const container = contentRef.value;
+      if (!container) return;
+
+      // Простая логика: всегда прокручиваем выбранный элемент в верхнюю часть видимой области
+      selectedElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start', // элемент будет по центру видимой области
+        inline: 'nearest'
+      });
+    });
+  };
+
+  const navigateDown = async () => {
+    const totalGroups = filteredItems.value.length;
+    if (totalGroups === 0) return;
+
+    const currentGroup = filteredItems.value[selectedIndex.value];
+    const hasPages = currentGroup.pages.length > 0;
+
+    if (hasPages && selectedPageIndex.value < currentGroup.pages.length - 1) {
+      selectedPageIndex.value++;
+    } else if (selectedIndex.value < totalGroups - 1) {
+      selectedIndex.value++;
+      selectedPageIndex.value = -1;
+    } else {
+      selectedIndex.value = 0;
+      selectedPageIndex.value = -1;
+    }
+
+    // Ждем обновления DOM перед скроллом
+    await nextTick();
+    scrollToSelected();
+  };
+
+  const navigateUp = async () => {
+    const totalGroups = filteredItems.value.length;
+    if (totalGroups === 0) return;
+
+    if (selectedPageIndex.value > 0) {
+      selectedPageIndex.value--;
+    } else if (selectedIndex.value > 0) {
+      selectedIndex.value--;
+      const prevGroup = filteredItems.value[selectedIndex.value];
+      selectedPageIndex.value = prevGroup.pages.length > 0 ? prevGroup.pages.length - 1 : -1;
+    } else {
+      selectedIndex.value = totalGroups - 1;
+      const lastGroup = filteredItems.value[selectedIndex.value];
+      selectedPageIndex.value = lastGroup.pages.length > 0 ? lastGroup.pages.length - 1 : -1;
+    }
+
+    // Ждем обновления DOM перед скроллом
+    await nextTick();
+    scrollToSelected();
+  };
+
+  const selectGroup = (groupIndex: number) => {
+    const group = filteredItems.value[groupIndex];
+    if (!group) return;
+
+    closeDialog();
+
+    desktop.selectWorkspace(group.workspaceName);
+    setTimeout(() => {
+      desktop.goToDefaultPage(router);
+    }, 100);
+  };
+
+  const selectPage = (workspaceName: string, page: PageItem) => {
+    closeDialog();
+
+    // Если воркспейс не активен, переключаемся на него и ждем
+    if (desktop.activeWorkspaceName !== workspaceName) {
+      desktop.selectWorkspace(workspaceName);
+      // Ждем переключения воркспейса, затем переходим на страницу
+      setTimeout(() => {
+        router.push({
+          name: page.name,
+          params: { coopname: info.coopname },
+        });
+        // Сбрасываем состояние загрузки после перехода
+        setTimeout(() => {
+          desktop.setWorkspaceChanging(false);
+        }, 500);
+      }, 150);
+    } else {
+      // Воркспейс уже активен, переходим сразу
+      router.push({
+        name: page.name,
+        params: { coopname: info.coopname },
+      });
+      // Сбрасываем состояние загрузки после перехода
+      setTimeout(() => {
+        desktop.setWorkspaceChanging(false);
+      }, 500);
+    }
+  };
+
+  // Обработчик клавиш для диалога (навигация внутри панели)
+  const handleDialogKeydown = (event: KeyboardEvent) => {
+    // Предотвращаем обработку глобального обработчика для диалога
+    event.stopPropagation();
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        navigateDown();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        navigateUp();
+        break;
+      case 'Enter':
+        event.preventDefault();
+        selectCurrentItem();
+        break;
+      case 'Escape':
+        event.preventDefault();
+        closeDialog();
+        break;
+    }
+  };
+
+  // Глобальные горячие клавиши
+  const handleGlobalKeydown = (event: KeyboardEvent) => {
+    // Определяем правильную клавишу-модификатор для текущей ОС
+    const isMac = navigator.userAgent.includes('Mac');
+    const modifierPressed = isMac ? event.metaKey : event.ctrlKey;
+
+    // Проверяем комбинацию Ctrl/Cmd + K
+    if (modifierPressed && event.key.toLowerCase() === 'k') {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (showDialog.value) {
+        closeDialog();
+      } else {
+        openDialog();
+      }
+      return;
+    }
+
+    // Escape для закрытия панели (только когда панель открыта)
+    if (event.key === 'Escape' && showDialog.value) {
+      event.preventDefault();
+      closeDialog();
+    }
+  };
+
+  // Инициализация глобальных обработчиков клавиш
+  const initGlobalKeydown = () => {
+    document.addEventListener('keydown', handleGlobalKeydown);
+  };
+
+  const destroyGlobalKeydown = () => {
+    document.removeEventListener('keydown', handleGlobalKeydown);
+  };
+
+  const setSearchInput = (input: HTMLInputElement | null) => {
+    searchInput.value = input as HTMLInputElement | null;
+  };
+
+  const setContentRef = (ref: HTMLElement | null) => {
+    contentRef.value = ref;
+  };
+
+  return {
+    // State
+    showDialog,
+    searchQuery,
+    selectedIndex,
+    selectedPageIndex,
+    searchInput,
+    contentRef,
+
+    // Computed
+    filteredItems,
+    shortcutHint,
+    activeWorkspaceIcon: computed(() => {
+      const activeWorkspace = desktop.workspaceMenus.find(
+        ws => ws.workspaceName === desktop.activeWorkspaceName
+      );
+      return activeWorkspace?.icon || 'fa-solid fa-desktop';
+    }),
+    activeWorkspaceTitle: computed(() => {
+      const activeWorkspace = desktop.workspaceMenus.find(
+        ws => ws.workspaceName === desktop.activeWorkspaceName
+      );
+      return activeWorkspace?.title || 'Рабочий стол';
+    }),
+
+    // Methods
+    openDialog,
+    closeDialog,
+    handleSearch,
+    handleDialogKeydown,
+    selectFirstItem,
+    selectCurrentItem,
+    navigateDown,
+    navigateUp,
+    selectGroup,
+    selectPage,
+    setSearchInput,
+    setContentRef,
+    initGlobalKeydown,
+    destroyGlobalKeydown,
+  };
+});

package/src/entities/CmdkMenu/model/types.ts

@@ -0,0 +1,21 @@
+export interface PageItem {
+  name: string;
+  meta: any;
+  shortcut?: string;
+}
+
+export interface GroupedItem {
+  workspaceName: string;
+  title: string;
+  icon: string;
+  isActive: boolean;
+  pages: PageItem[];
+}
+
+export interface CmdkMenuState {
+  showDialog: boolean;
+  searchQuery: string;
+  selectedIndex: number;
+  selectedPageIndex: number;
+  searchInput: HTMLInputElement | undefined;
+}

package/src/widgets/Desktop/CmdkMenu/CmdkMenu.vue

@@ -0,0 +1,392 @@
+<template lang="pug">
+// Командная панель
+q-dialog.cmdk-dialog(
+  v-model="cmdkStore.showDialog",
+  transition-show="slide-down",
+  transition-hide="slide-up",
+  @keydown="cmdkStore.handleDialogKeydown",
+  @click="cmdkStore.closeDialog"
+)
+  .cmdk-panel
+    // Заголовок
+    .cmdk-header
+      q-icon.cmdk-search-icon(name="search")
+      input.cmdk-input(
+        autofocus,
+        ref="searchInput",
+        v-model="cmdkStore.searchQuery",
+        placeholder="Поиск рабочих столов и страниц...",
+        @input="cmdkStore.handleSearch"
+      )
+      q-btn.cmdk-close-btn(
+        flat,
+        dense,
+        round,
+        size="sm",
+        @click="cmdkStore.showDialog = false"
+      )
+        q-icon(name="close")
+
+    // Список результатов
+    div.cmdk-content(ref="contentRef")
+      transition-group.cmdk-results(
+        name="cmdk-fade",
+        tag="div"
+      )
+        // Пустое состояние
+        .cmdk-empty-state(
+          v-if="cmdkStore.filteredItems.length === 0 && cmdkStore.searchQuery",
+          key="empty"
+        )
+          q-icon(name="search_off", size="md")
+          .empty-text Ничего не найдено
+          .empty-subtext Попробуйте другой запрос
+
+        // Группы воркспейсов
+        template(v-else-if="cmdkStore.filteredItems.length > 0", v-for="(group, groupIndex) in cmdkStore.filteredItems", :key="group.workspaceName")
+          .cmdk-group
+            // Заголовок группы (воркспейс)
+            .cmdk-group-header(
+              :class="{ 'selected': cmdkStore.selectedIndex === groupIndex }"
+              @click="cmdkStore.selectGroup(groupIndex)"
+            )
+              q-icon.cmdk-group-icon(:name="group.icon")
+              .cmdk-group-title {{ group.title }}
+              .cmdk-group-badge(v-if="group.isActive") Активный
+
+            // Страницы внутри воркспейса
+            .cmdk-pages
+              .cmdk-page(
+                v-for="(page, pageIndex) in group.pages",
+                :key="page.name",
+                :class="{ 'selected': cmdkStore.selectedIndex === groupIndex && cmdkStore.selectedPageIndex === pageIndex }"
+                @click="cmdkStore.selectPage(group.workspaceName, page)"
+              )
+                q-icon.cmdk-page-icon(:name="page.meta.icon || 'circle'")
+                .cmdk-page-title {{ page.meta.title }}
+                .cmdk-page-shortcut(v-if="page.shortcut") {{ page.shortcut }}
+
+    // Подсказки
+    .cmdk-footer
+      .cmdk-hint
+        kbd ↑↓
+        span для навигации
+        kbd ↵ Enter
+        span для выбора
+        kbd ⎋ Esc
+        span для закрытия
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watchEffect } from 'vue';
+import { useCmdkMenuStore } from 'src/entities/CmdkMenu/model';
+
+const cmdkStore = useCmdkMenuStore();
+const searchInput = ref<HTMLInputElement | null>(null);
+const contentRef = ref<HTMLElement | null>(null);
+
+// Следим за contentRef и устанавливаем его в store
+watchEffect(() => {
+  if (contentRef.value) {
+    cmdkStore.setContentRef(contentRef.value);
+  }
+});
+
+// Инициализируем глобальные обработчики клавиш при монтировании компонента
+onMounted(() => {
+  cmdkStore.initGlobalKeydown();
+
+  // Устанавливаем searchInput
+  if (searchInput.value) {
+    cmdkStore.setSearchInput(searchInput.value);
+  }
+});
+
+onUnmounted(() => {
+  cmdkStore.destroyGlobalKeydown();
+});
+</script>
+
+<style lang="scss">
+.cmdk-dialog {
+  max-width: 100%;
+}
+
+.cmdk-panel {
+  width: 100%;
+  max-width: 600px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.cmdk-header {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background: #fafafa;
+}
+
+.cmdk-search-icon {
+  color: #666;
+  margin-right: 12px;
+  font-size: 18px;
+}
+
+.cmdk-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+
+  &::placeholder {
+    color: #999;
+  }
+}
+
+.cmdk-close-btn {
+  margin-left: 12px;
+  opacity: 0.6;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.cmdk-content {
+  max-height: 400px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 105, 92, 0.3);
+    border-radius: 3px;
+  }
+}
+
+.cmdk-results {
+  padding: 8px 0;
+}
+
+.cmdk-group {
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  }
+}
+
+.cmdk-group-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+
+  &:hover {
+    background: rgba(0, 105, 92, 0.04);
+  }
+
+  &.selected {
+    background: rgba(0, 105, 92, 0.08);
+  }
+}
+
+.cmdk-group-icon {
+  margin-right: 12px;
+  color: #00695c;
+  font-size: 18px;
+}
+
+.cmdk-group-title {
+  flex: 1;
+  font-weight: 500;
+  color: #333;
+}
+
+.cmdk-group-badge {
+  background: #00695c;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.cmdk-pages {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.cmdk-page {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px 10px 56px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+
+  &:hover {
+    background: rgba(0, 105, 92, 0.06);
+  }
+
+  &.selected {
+    background: rgba(0, 105, 92, 0.1);
+  }
+}
+
+.cmdk-page-icon {
+  margin-right: 12px;
+  color: #666;
+  font-size: 16px;
+}
+
+.cmdk-page-title {
+  flex: 1;
+  font-size: 14px;
+  color: #555;
+}
+
+.cmdk-page-shortcut {
+  color: #999;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.cmdk-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 20px;
+  color: #999;
+
+  .q-icon {
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+
+  .empty-text {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 4px;
+  }
+
+  .empty-subtext {
+    font-size: 14px;
+  }
+}
+
+.cmdk-footer {
+  padding: 12px 20px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background: #fafafa;
+}
+
+.cmdk-hint {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 12px;
+  color: #666;
+
+  kbd {
+    background: #e0e0e0;
+    border-radius: 4px;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: 500;
+    color: #333;
+    border: 1px solid #ccc;
+  }
+
+  span {
+    margin-left: 4px;
+  }
+}
+
+// Анимации
+.cmdk-fade-enter-active,
+.cmdk-fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.cmdk-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.cmdk-fade-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+// Темная тема
+body.body--dark {
+  .cmdk-panel {
+    background: #1e1e1e;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .cmdk-header {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .cmdk-input {
+    color: #e0e0e0;
+
+    &::placeholder {
+      color: #888;
+    }
+  }
+
+  .cmdk-group-header:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .cmdk-group-header.selected {
+    background: rgba(0, 105, 92, 0.15);
+  }
+
+  .cmdk-group-title {
+    color: #e0e0e0;
+  }
+
+  .cmdk-page:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .cmdk-page.selected {
+    background: rgba(0, 105, 92, 0.15);
+  }
+
+  .cmdk-page-title {
+    color: #ccc;
+  }
+
+  .cmdk-footer {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .cmdk-hint {
+    color: #888;
+  }
+
+  .cmdk-empty-state {
+    color: #888;
+  }
+}
+</style>

package/src/widgets/Desktop/CmdkMenu/index.ts

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

package/src/widgets/Desktop/CmdkTrigger/CmdkTrigger.vue

@@ -0,0 +1,83 @@
+<template lang="pug">
+q-btn.cmdk-trigger(
+  flat,
+  dense,
+  stack,
+  @click="openCmdkDialog"
+  :class="{ 'active': cmdkStore.activeWorkspaceIcon !== 'fa-solid fa-desktop' }"
+)
+  .trigger-content
+    q-icon.trigger-icon(:name="cmdkStore.activeWorkspaceIcon")
+    .trigger-text {{ cmdkStore.activeWorkspaceTitle }}
+  .cmdk-shortcut(v-if="cmdkStore.shortcutHint") {{ cmdkStore.shortcutHint }}
+
+</template>
+
+<script setup lang="ts">
+import { useCmdkMenuStore } from 'src/entities/CmdkMenu/model';
+
+const cmdkStore = useCmdkMenuStore();
+
+const openCmdkDialog = () => {
+  cmdkStore.openDialog();
+};
+</script>
+
+<style lang="scss">
+.cmdk-trigger {
+  width: 100%;
+  height: 100px;
+  border-radius: 0 !important;
+  background: transparent;
+  border: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: rgba(0, 105, 92, 0.04);
+  }
+
+  &.active {
+    background: rgba(0, 105, 92, 0.04);
+  }
+
+  .trigger-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .trigger-icon {
+    font-size: 20px;
+    color: #00695c;
+  }
+
+  .trigger-text {
+    font-size: 10px;
+    font-weight: 500;
+    color: #424242;
+    text-align: center;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cmdk-shortcut {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    font-size: 8px;
+    color: #999;
+    font-weight: 500;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1;
+    padding: 1px 3px;
+    border-radius: 3px;
+    pointer-events: none;
+  }
+}
+</style>

package/src/widgets/Desktop/CmdkTrigger/index.ts

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

package/src/widgets/Desktop/LeftDrawerMenu/LeftDrawerMenu.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .left-drawer-menu
   .menu-content
-    WorkspaceMenu
+    CmdkTrigger
     SecondLevelMenuList
   .bottom-section
     .toggle-button-wrapper
@@ -27,7 +27,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { SecondLevelMenuList } from '../SecondLevelMenuList';
-import { WorkspaceMenu } from '../WorkspaceMenu';
+import { CmdkTrigger } from '../CmdkTrigger';
 import { LogoutButton } from 'src/features/User/Logout';
 import { MicroWallet } from 'src/widgets/Wallet';
 

package/src/widgets/Desktop/index.ts

@@ -0,0 +1,5 @@
+export * from './CmdkMenu';
+export * from './CmdkTrigger';
+export * from './LeftDrawerMenu';
+export * from './SecondLevelMenuList';
+export * from './WorkspaceMenu';