Merge pull request #7 from Dobrunia/main

Dobrunia · web-flow · commit 9555b592e2be · 2026-02-05T02:37:57.000+03:00
efef
diff --git a/client/src/components/card/CardChecklist.vue b/client/src/components/card/CardChecklist.vue
@@ -123,7 +123,7 @@ const hasMore = computed(() => items.value.length > showLimit);
       </span>
     </div>
 
-    <div v-if="editableSummary" class="mt-1.5 flex items-start gap-1">
+    <div v-if="editableSummary" class="mt-1.5 flex items-center gap-1">
       <p
         v-if="payload.summary"
         class="card-summary italic"
diff --git a/client/src/components/card/CardItem.vue b/client/src/components/card/CardItem.vue
@@ -147,7 +147,8 @@ async function updateSummary(newSummary: string) {
 
         <div
           ref="titleContainerRef"
-          class="flex-1 min-w-0 flex items-center cursor-text"
+          class="flex-1 min-w-0 flex items-center cursor-text overflow-hidden"
+          :title="card.title || '(без названия)'"
           @dblclick.prevent="startEditTitle()"
         >
           <template v-if="isEditingTitle">
@@ -162,7 +163,7 @@ async function updateSummary(newSummary: string) {
           </template>
           <p
             v-else
-            class="text-sm font-medium text-fg min-w-0 truncate leading-none pointer-events-none"
+            class="text-sm font-medium text-fg min-w-0 break-words line-clamp-2 leading-snug pointer-events-none"
             :class="{ 'line-through': card.done }"
           >
             {{ card.title || '(без названия)' }}
diff --git a/client/src/components/card/CardLink.vue b/client/src/components/card/CardLink.vue
@@ -52,7 +52,7 @@ function closeSummaryModal() {
 
 <template>
   <div class="p-3">
-    <div v-if="editableSummary" class="mt-1.5 flex items-start gap-1">
+    <div v-if="editableSummary" class="mt-1.5 flex items-center gap-1">
       <p
         v-if="payload.summary"
         class="card-summary"
diff --git a/client/src/components/card/CardNote.vue b/client/src/components/card/CardNote.vue
@@ -90,7 +90,7 @@ function closeSummaryModal() {
         </button>
       </div>
     </div>
-    <div v-if="editableSummary" class="mt-1.5 flex items-start gap-1">
+    <div v-if="editableSummary" class="mt-1.5 flex items-center gap-1">
       <div class="flex-1 min-w-0">
         <p
           v-if="payload.summary"
diff --git a/client/src/components/common/AppHeader.vue b/client/src/components/common/AppHeader.vue
@@ -27,7 +27,10 @@ function handleSignOut() {
     <div class="h-full max-w-7xl mx-auto px-4 flex-between">
       <!-- Logo -->
       <RouterLink to="/" class="flex items-center gap-2 text-xl font-semibold text-fg">
-        <span class="w-8 h-8 rounded-lg flex-center bg-success text-on-primary pointer-events-none" aria-hidden="true">
+        <span
+          class="w-8 h-8 rounded-lg flex-center bg-success text-on-primary pointer-events-none"
+          aria-hidden="true"
+        >
           <span class="i-lucide-square-check text-lg" />
         </span>
         DayFlow
@@ -57,7 +60,7 @@ function handleSignOut() {
                 alt=""
                 class="w-8 h-8 rounded-full object-cover"
                 @error="avatarLoadFailed = true"
-              >
+              />
               <span v-else class="i-lucide-user text-lg" />
             </RouterLink>
 
@@ -78,6 +81,13 @@ function handleSignOut() {
                   <span class="i-lucide-user" />
                   Профиль
                 </RouterLink>
+                <RouterLink
+                  :to="`/user/${authStore.user?.id}`"
+                  class="w-full flex items-center gap-2 px-3 py-2 text-sm text-fg hover:bg-muted rounded-md"
+                >
+                  <span class="i-lucide-bar-chart-2" />
+                  Моя статистика
+                </RouterLink>
                 <button
                   @click="handleSignOut"
                   class="w-full flex items-center gap-2 px-3 py-2 text-sm text-fg hover:bg-muted rounded-md"
diff --git a/client/src/components/workspace/WorkspaceColumn.vue b/client/src/components/workspace/WorkspaceColumn.vue
@@ -129,21 +129,21 @@ async function deleteColumn() {
 
     <div
       ref="cardsListRef"
-      class="flex-1 overflow-y-auto px-2 pb-2 space-y-2 min-h-[2rem]"
+      class="flex-1 overflow-y-auto px-2 pb-2 flex flex-col gap-2 min-h-[2rem]"
       :data-column-id="isBacklog ? undefined : column.id"
       :data-backlog="isBacklog ? true : undefined"
     >
+      <button type="button" @click="showAddCard = true" class="btn-add-dashed sortable-no-drag flex-shrink-0 order-first">
+        <span class="i-lucide-plus text-sm" />
+        Добавить карточку
+      </button>
       <template v-if="isBacklog">
         <CardItem
           v-for="c in backlogCards"
           :key="c.id"
           :card="c"
           :is-backlog="true"
         />
-        <button type="button" @click="showAddCard = true" class="btn-add-dashed sortable-no-drag">
-          <span class="i-lucide-plus text-sm" />
-          Добавить карточку
-        </button>
       </template>
       <template v-else>
         <CardItem
@@ -152,10 +152,6 @@ async function deleteColumn() {
           :card="card"
           :column-id="column.id"
         />
-        <button type="button" @click="showAddCard = true" class="btn-add-dashed sortable-no-drag">
-          <span class="i-lucide-plus text-sm" />
-          Добавить карточку
-        </button>
       </template>
     </div>
 
diff --git a/client/src/graphql/queries.ts b/client/src/graphql/queries.ts
@@ -113,3 +113,21 @@ export const CARD_QUERY = gql`
     }
   }
 `;
+
+export const USER_STATS_QUERY = gql`
+  query UserStats($userId: ID!) {
+    userStats(userId: $userId) {
+      id
+      avatarUrl
+      totalCompletedCards
+      workspaceStats {
+        id
+        title
+        description
+        icon
+        totalCards
+        completedCards
+      }
+    }
+  }
+`;
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
@@ -33,6 +33,12 @@ const router = createRouter({
       component: () => import('@/views/ProfileView.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/user/:id',
+      name: 'user-stats',
+      component: () => import('@/views/UserStatsView.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 });
 
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
@@ -131,7 +131,7 @@ function navigateToWorkspace(id: string) {
       </div>
 
       <!-- Empty State -->
-      <div v-else class="text-center py-16">
+      <div v-else class="text-center py-16 flex flex-col items-center gap-4">
         <div class="empty-state-icon">
           <span class="i-lucide-folder text-2xl text-fg-muted" />
         </div>
diff --git a/client/src/views/ProfileView.vue b/client/src/views/ProfileView.vue
@@ -45,10 +45,20 @@ async function save() {
           Настройки аккаунта
         </p>
       </div>
-      <RouterLink to="/" class="btn-ghost text-sm text-fg-muted hover:text-fg">
-        <span class="i-lucide-arrow-left mr-1" />
-        На главную
-      </RouterLink>
+      <div class="flex items-center gap-3">
+        <RouterLink to="/" class="btn-ghost text-sm text-fg-muted hover:text-fg">
+          <span class="i-lucide-arrow-left mr-1" />
+          На главную
+        </RouterLink>
+        <RouterLink
+          v-if="user"
+          :to="`/user/${user.id}`"
+          class="btn-ghost text-sm text-fg-muted hover:text-fg"
+        >
+          <span class="i-lucide-bar-chart-2 mr-1" />
+          Моя статистика
+        </RouterLink>
+      </div>
     </div>
 
     <div v-if="user" class="space-y-6">
diff --git a/client/src/views/UserStatsView.vue b/client/src/views/UserStatsView.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useQuery } from '@vue/apollo-composable';
+import { useAuthStore } from '@/stores/auth';
+import { toast } from 'vue-sonner';
+import { USER_STATS_QUERY } from '@/graphql/queries';
+
+const route = useRoute();
+const authStore = useAuthStore();
+const userId = computed(() => route.params.id as string);
+
+const isOwnStats = computed(() => !!authStore.user && authStore.user.id === userId.value);
+
+const { result, loading, error } = useQuery(USER_STATS_QUERY, () => ({
+  userId: userId.value,
+}));
+
+const stats = computed(() => result.value?.userStats ?? null);
+
+function shareStats() {
+  const url = window.location.origin + route.fullPath;
+  navigator.clipboard.writeText(url).then(
+    () => toast.success('Ссылка скопирована'),
+    () => toast.error('Не удалось скопировать')
+  );
+}
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="page-header-row">
+      <RouterLink to="/" class="btn-ghost text-sm text-fg-muted hover:text-fg">
+        <span class="i-lucide-arrow-left mr-1" />
+        На главную
+      </RouterLink>
+      <button
+        v-if="isOwnStats && stats"
+        type="button"
+        class="btn-ghost text-sm text-fg-muted hover:text-fg"
+        @click="shareStats"
+      >
+        <span class="i-lucide-share-2 mr-1" />
+        Поделиться статистикой
+      </button>
+    </div>
+
+    <div v-if="loading" class="flex-center py-24">
+      <span class="loading-spinner" />
+    </div>
+
+    <template v-else-if="error || !stats">
+      <div class="text-center py-24 text-fg-muted">
+        <span class="i-lucide-user-x text-4xl block mb-3 opacity-60" />
+        <p>Пользователь не найден или доступ закрыт.</p>
+      </div>
+    </template>
+
+    <template v-else>
+      <!-- Avatar -->
+      <div class="flex flex-col items-center mb-10">
+        <div class="w-24 h-24 rounded-full bg-muted overflow-hidden flex-center shrink-0">
+          <img
+            v-if="stats.avatarUrl"
+            :src="stats.avatarUrl"
+            alt="Аватар"
+            class="w-full h-full object-cover"
+          >
+          <span v-else class="i-lucide-user text-4xl text-fg-muted" />
+        </div>
+      </div>
+
+      <!-- Block 1: total completed -->
+      <div class="rounded-2xl border border-border bg-muted/40 p-6 mb-8">
+        <p class="text-sm text-fg-muted mb-1">
+          Выполнено карточек
+        </p>
+        <p class="text-4xl font-bold text-fg tabular-nums">
+          {{ stats.totalCompletedCards }}
+        </p>
+      </div>
+
+      <!-- Block 2: workspaces with glass progress -->
+      <div class="mb-4">
+        <h2 class="text-lg font-semibold text-fg mb-3">
+          Воркспейсы
+        </h2>
+      </div>
+      <div v-if="stats.workspaceStats.length === 0" class="rounded-2xl border border-border bg-muted/30 p-8 text-center text-fg-muted">
+        Нет воркспейсов
+      </div>
+      <div v-else class="grid gap-4 sm:grid-cols-2">
+        <div
+          v-for="ws in stats.workspaceStats"
+          :key="ws.id"
+          class="user-stats-ws-card rounded-2xl border border-border bg-muted/30 p-4 flex gap-4"
+        >
+          <div class="flex-1 min-w-0 opacity-80">
+            <div class="flex items-center gap-2 mb-1">
+              <span class="text-xl shrink-0 w-8 h-8 flex-center rounded-lg bg-bg/80">
+                {{ ws.icon || '📁' }}
+              </span>
+              <span class="font-medium text-fg truncate">{{ ws.title }}</span>
+            </div>
+            <p v-if="ws.description" class="text-sm text-fg-muted line-clamp-2">
+              {{ ws.description }}
+            </p>
+          </div>
+          <div class="flex flex-col items-end shrink-0">
+            <span class="text-sm font-semibold text-primary tabular-nums mb-2">
+              {{ ws.totalCards ? Math.round((ws.completedCards / ws.totalCards) * 100) : 0 }}%
+            </span>
+            <div class="water-glass">
+              <div
+                class="water-glass-fill"
+                :style="{ height: ws.totalCards ? `${(ws.completedCards / ws.totalCards) * 100}%` : '0%' }"
+              >
+                <div class="water-glass-wave" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.water-glass {
+  width: 28px;
+  height: 64px;
+  border-radius: 6px 6px 12px 12px;
+  border: 2px solid var(--border);
+  background: var(--bg);
+  position: relative;
+  overflow: hidden;
+}
+
+.water-glass-fill {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(180deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 80%, transparent) 100%);
+  transition: height 0.8s ease-out;
+  min-height: 0;
+}
+
+.water-glass-wave {
+  position: absolute;
+  top: 0;
+  left: -50%;
+  width: 200%;
+  height: 12px;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  animation: wave 2s ease-in-out infinite;
+}
+
+@keyframes wave {
+  0%, 100% { transform: translateX(0) scaleY(1); }
+  50% { transform: translateX(10%) scaleY(1.2); }
+}
+</style>
diff --git a/client/uno.config.ts b/client/uno.config.ts
@@ -174,5 +174,8 @@ export default defineConfig({
     'i-lucide-moon',
     'i-lucide-maximize-2',
     'i-lucide-arrow-up-down',
+    'i-lucide-bar-chart-2',
+    'i-lucide-user-x',
+    'i-lucide-share-2',
   ],
 });
diff --git a/server/src/resolvers/index.ts b/server/src/resolvers/index.ts
@@ -2,6 +2,7 @@ import { authResolvers } from './auth.js';
 import { workspaceResolvers } from './workspace.js';
 import { columnResolvers } from './column.js';
 import { cardResolvers } from './card.js';
+import { userStatsResolvers } from './user-stats.js';
 import { DateTimeResolver } from 'graphql-scalars';
 
 export type { CreateCardInput, UpdateCardInput, CardFilter, CreateWorkspaceInput, UpdateWorkspaceInput } from 'dayflow-shared';
@@ -13,6 +14,7 @@ export const resolvers = {
     ...authResolvers.Query,
     ...workspaceResolvers.Query,
     ...cardResolvers.Query,
+    ...userStatsResolvers.Query,
   },
 
   Mutation: {
diff --git a/server/src/resolvers/user-stats.ts b/server/src/resolvers/user-stats.ts
diff --git a/server/src/schema/schema.graphql b/server/src/schema/schema.graphql
