Merge pull request #10 from Dobrunia/main

tags

Author: Dobrunia

TODO.md

@@ -4,7 +4,7 @@
 
 # Фичи
 
-- Отображать превью ссылок (если тип ссылка)
+- Markdown в заметках
 - давай реализуем большую фичу - Архив карточек/воркспейсов карточка отправляется в архив из модального окна редактирования воркспейс из списка на главной добавь иконку к карточке воркспейса. Для Архива есть отдельная вкладка (vue) там 2 радиокнопки архивные карточки и воркспейсы (архивные карточки удаляются вместе с воркспейсом, это на всякий прописал чтобы не было такого что некуда восстановить карточку)
 - Экспорт/импорт JSON (всё) данные
 
@@ -14,5 +14,9 @@
 
 # На далекое будущее
 
+- AI-саммари — автоматическое резюме по карточке
+  - AI-саммари конкретно по ссылке пишет в конспект (карточка типа ссылка) кнопка получить краткую выжимку
 - совместный доступ к воркспейсам
 - из статистики переход к воркспейсам
+- Вид воркспейсов (пространство как в миро)
+- Отображать превью ссылок (если тип ссылка)

client/src/App.vue

@@ -35,7 +35,7 @@ watch(
   <template v-else>
     <div class="min-h-screen bg-bg">
       <AppHeader />
-      <main class="pt-16">
+      <main :class="authStore.user ? 'pt-25' : 'pt-14'">
         <RouterView />
       </main>
       <Toaster position="bottom-right" />

client/src/components/card/CardItem.vue

@@ -1,44 +1,48 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useWorkspaceStore } from '@/stores/workspace';
-import { useCardsStore } from '@/stores/cards';
+import { ref, computed, toRef } from 'vue';
 import type { CardGql } from '@/graphql/types';
 import { parseCard } from '@/lib/card';
 import { useInlineEdit } from '@/composables/useInlineEdit';
+import { useCardActions } from '@/composables/useCardActions';
 import CardNote from './CardNote.vue';
 import CardLink from './CardLink.vue';
 import CardChecklist from './CardChecklist.vue';
 import CreateCardDialog from '@/components/card/CreateCardDialog.vue';
-import { toast } from 'vue-sonner';
-import { getGraphQLErrorMessage } from '@/lib/graphql-error';
 
 const props = withDefaults(
   defineProps<{
     card: CardGql;
     columnId?: string;
     /** Беклог: карточка без колонки, только просмотр/редакт/удаление */
     isBacklog?: boolean;
+    /** Отключить drag-курсор (для Tags view и т.п.) */
+    static?: boolean;
   }>(),
-  { isBacklog: false }
+  { isBacklog: false, static: false }
 );
 
-const workspaceStore = useWorkspaceStore();
-const cardsStore = useCardsStore();
+const emit = defineEmits<{
+  (e: 'updated', card: CardGql): void;
+  (e: 'deleted', cardId: string): void;
+}>();
+
 const showEditDialog = ref(false);
 const titleContainerRef = ref<HTMLElement | null>(null);
 
+// Используем composable для всех операций с карточкой
+const cardActions = useCardActions(toRef(props, 'card'), {
+  onUpdated: (card) => emit('updated', card),
+  onDeleted: (cardId) => emit('deleted', cardId),
+});
+
 const { isEditing: isEditingTitle, editTitle, inputRef: titleInputRef, startEdit: startEditTitle, saveEdit: saveEditTitle, cancelEdit: cancelEditTitle } = useInlineEdit(
   titleContainerRef,
   () => props.card.title ?? '',
   async (newTitle) => {
-    const payload = props.card.payload;
-    if (isHubCard.value) await cardsStore.updateCard(props.card.id, { title: newTitle || undefined, payload });
-    else await workspaceStore.updateCard(props.card.id, { title: newTitle || undefined, payload });
+    await cardActions.updateCard({ title: newTitle || undefined, payload: props.card.payload });
   }
 );
 
-const isHubCard = computed(() => props.isBacklog && props.card.workspaceId == null);
-
 const parsed = computed(() => {
   try {
     return parseCard(props.card);
@@ -66,79 +70,9 @@ const linkUrl = computed(() => {
   return (parsed.value.payload as { url?: string }).url ?? null;
 });
 
-async function toggleDone() {
-  try {
-    const payload = { done: !props.card.done };
-    if (isHubCard.value) await cardsStore.updateCard(props.card.id, payload);
-    else await workspaceStore.updateCard(props.card.id, payload);
-  } catch (e) {
-    toast.error(getGraphQLErrorMessage(e));
-  }
-}
-
-async function toggleChecklistItem(index: number) {
-  if (props.card.type !== 'CHECKLIST') return;
-  try {
-    const raw = typeof props.card.payload === 'string' ? JSON.parse(props.card.payload || '{}') : props.card.payload;
-    const items = Array.isArray((raw as { items?: unknown[] }).items) ? (raw as { items: { id: string; text: string; done: boolean; order: number }[] }).items : [];
-    const next = items.map((it, i) => (i === index ? { ...it, done: !it.done } : it));
-    const payload = { payload: JSON.stringify({ items: next }) };
-    if (isHubCard.value) await cardsStore.updateCard(props.card.id, payload);
-    else await workspaceStore.updateCard(props.card.id, payload);
-  } catch (e) {
-    toast.error(getGraphQLErrorMessage(e));
-  }
-}
-
-async function doDelete() {
-  try {
-    if (isHubCard.value) {
-      await cardsStore.deleteCard(props.card.id);
-      toast('Карточка удалена', {
-        action: {
-          label: 'Отменить',
-          onClick: () => {
-            cardsStore.undoDeleteCard().catch((e) => {
-              toast.error(getGraphQLErrorMessage(e));
-            });
-          },
-        },
-        duration: 5000,
-      });
-    } else {
-      await workspaceStore.deleteCard(props.card.id);
-      toast('Карточка удалена', {
-        action: {
-          label: 'Отменить',
-          onClick: () => {
-            workspaceStore.undoDeleteCard().catch((e) => {
-              toast.error(getGraphQLErrorMessage(e));
-            });
-          },
-        },
-        duration: 5000,
-      });
-    }
-  } catch (e) {
-    toast.error(getGraphQLErrorMessage(e));
-  }
-}
-
 function handleDeleteFromDialog() {
-  if (!confirm('Удалить карточку?')) return;
-  doDelete();
   showEditDialog.value = false;
-}
-
-async function updateSummary(newSummary: string) {
-  try {
-    const raw = typeof props.card.payload === 'string' ? JSON.parse(props.card.payload || '{}') : props.card.payload;
-    const payload = JSON.stringify({ ...raw, summary: newSummary.trim() || undefined });
-    if (isHubCard.value) await cardsStore.updateCard(props.card.id, { payload });
-    else await workspaceStore.updateCard(props.card.id, { payload });
-  } catch (e) {
-    toast.error(getGraphQLErrorMessage(e));
-  }
+  cardActions.deleteCard();
 }
 </script>
 
@@ -157,13 +91,13 @@ async function updateSummary(newSummary: string) {
       class="card"
       :class="[
         { 'opacity-60': card.done },
-        columnId || (isBacklog && card.workspaceId != null) ? 'cursor-grab active:cursor-grabbing' : 'cursor-default',
+        !static && (columnId || (isBacklog && card.workspaceId != null)) ? 'cursor-grab active:cursor-grabbing' : 'cursor-default',
       ]"
     >
       <div class="flex items-center gap-2 p-3 pb-0">
         <button
           type="button"
-          @click="toggleDone"
+          @click="cardActions.toggleDone()"
           class="w-4 h-4 rounded flex-center border transition-colors shrink-0"
           :class="card.done ? 'bg-success border-success text-on-primary' : 'border-border hover:border-success'"
         >
@@ -203,24 +137,24 @@ async function updateSummary(newSummary: string) {
         :done="card.done"
         :payload="parsed.payload"
         :editable-summary="true"
-        @update-summary="updateSummary"
+        @update-summary="cardActions.updateSummary"
       />
       <CardLink
         v-else-if="parsed.type === 'link'"
         :title="card.title"
         :done="card.done"
         :payload="parsed.payload"
         :editable-summary="true"
-        @update-summary="updateSummary"
+        @update-summary="cardActions.updateSummary"
       />
       <CardChecklist
         v-else-if="parsed.type === 'checklist'"
         :title="card.title"
         :done="card.done"
         :payload="parsed.payload"
         :editable-summary="true"
-        @toggle-item="toggleChecklistItem"
-        @update-summary="updateSummary"
+        @toggle-item="cardActions.toggleChecklistItem"
+        @update-summary="cardActions.updateSummary"
       />
     </template>
 
@@ -248,6 +182,7 @@ async function updateSummary(newSummary: string) {
       :is-backlog="isBacklog"
       @close="showEditDialog = false"
       @delete="handleDeleteFromDialog"
+      @updated="(c) => emit('updated', c)"
     />
   </div>
 </template>

client/src/components/card/CreateCardDialog.vue

@@ -33,6 +33,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   close: [];
   delete: [];
+  updated: [card: CardGql];
 }>();
 
 const openProxy = computed({
@@ -171,7 +172,14 @@ function addChecklistItem() {
     done: false,
     order: maxOrder + 100,
   });
-  nextTick(() => initChecklistSortable());
+  nextTick(() => {
+    initChecklistSortable();
+    // Focus the new input
+    const inputs = checklistListRef.value?.querySelectorAll('input');
+    if (inputs?.length) {
+      (inputs[inputs.length - 1] as HTMLInputElement).focus();
+    }
+  });
 }
 
 function removeChecklistItem(index: number) {
@@ -226,9 +234,11 @@ async function handleSubmit() {
     const tags = buildTags();
 
     if (props.card) {
-      const updatePayload = { title: title.value.trim() || undefined, payload, tags };
+      const newTitle = title.value.trim() || null;
+      const updatePayload = { title: newTitle ?? undefined, payload, tags };
       if (isHubEdit.value) await cardsStore.updateCard(props.card.id, updatePayload);
       else await workspaceStore.updateCard(props.card.id, updatePayload);
+      emit('updated', { ...props.card, title: newTitle, payload, tags });
       toast.success('Сохранено!');
     } else if (isGlobalAdd.value && addDestination.value === 'hub') {
       await cardsStore.createCard({