@things-factory/board-ui 10.0.0-beta.9 → 10.0.0-beta.90

package/dist-client/apptools/favorite-tool.js

@@ -24,7 +24,7 @@ let FavoriteTool = class FavoriteTool extends LitElement {
     }
   `; }
     render() {
-        var renderable = (this.acceptedPages || []).indexOf(this.page) !== -1;
+        const renderable = (this.acceptedPages || []).indexOf(this.page) !== -1;
         return renderable
             ? html `
           <md-icon @click=${this.onClick.bind(this)} ?favorable=${!this.favored}
@@ -86,8 +86,8 @@ let FavoriteTool = class FavoriteTool extends LitElement {
         });
     }
     async removeFavorite(routing) {
-        await client.query({
-            query: gql `
+        await client.mutate({
+            mutation: gql `
         mutation {
           deleteFavorite(routing: "${routing}")
         }
@@ -96,8 +96,8 @@ let FavoriteTool = class FavoriteTool extends LitElement {
         this.refreshFavorites();
     }
     async addFavorite(routing) {
-        await client.query({
-            query: gql `
+        await client.mutate({
+            mutation: gql `
         mutation {
           createFavorite(favorite: {
             routing: "${routing}"

package/dist-client/apptools/favorite-tool.js.map

@@ -1 +1 @@
-{"version":3,"file":"favorite-tool.js","sourceRoot":"","sources":["../../client/apptools/favorite-tool.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\n\nimport { UPDATE_FAVORITES } from '@things-factory/fav-base/client/index.js'\n\n@customElement('favorite-tool')\nexport class FavoriteTool extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      line-height: 0;\n    }\n\n    [favorable] {\n      opacity: 0.5;\n    }\n  `\n\n  @property({ type: Array }) favorites: any[] = []\n  @property({ type: Object }) user: any\n  @property({ type: String }) resourceId?: string\n  @property({ type: Boolean }) favored?: boolean\n  @property({ type: Array }) acceptedPages: any[] = []\n\n  page: any\n\n  render() {\n    var renderable = (this.acceptedPages || []).indexOf(this.page) !== -1\n\n    return renderable\n      ? html`\n          <md-icon @click=${this.onClick.bind(this)} ?favorable=${!this.favored}\n            >${this.favored ? 'star' : 'star_border'}</md-icon\n          >\n        `\n      : nothing\n  }\n\n  updated(changes) {\n    if (changes.has('user')) {\n      this.refreshFavorites()\n    }\n\n    this.favored = (this.favorites || []).includes(this.resourceId)\n  }\n\n  private _unsubscribe?: () => void\n\n\n  connectedCallback() {\n\n    super.connectedCallback()\n\n    this._applyState()\n\n    this._unsubscribe = store.subscribe(() => this._applyState())\n\n  }\n\n\n  disconnectedCallback() {\n\n    super.disconnectedCallback()\n\n    this._unsubscribe?.()\n\n  }\n\n\n  private _applyState() {\n\n    const __state__ = store.getState() as any\nthis.page = __state__.route.page\n    this.favorites = __state__.favorite.favorites\n    this.user = __state__.auth.user\n    this.resourceId = __state__.route.resourceId\n\n  }\n\n  onClick(event) {\n    if (!this.resourceId) {\n      return\n    }\n\n    if (this.favored) {\n      this.removeFavorite(this.resourceId)\n    } else {\n      this.addFavorite(this.resourceId)\n    }\n  }\n\n  async refreshFavorites() {\n    if (!this.user || !this.user.email) {\n      return\n    }\n\n    const response = await client.query({\n      query: gql`\n        query {\n          myFavorites {\n            id\n            routing\n          }\n        }\n      `\n    })\n\n    store.dispatch({\n      type: UPDATE_FAVORITES,\n      favorites: response.data.myFavorites.map(favorite => favorite.routing)\n    })\n  }\n\n  async removeFavorite(routing) {\n    await client.query({\n      query: gql`\n        mutation {\n          deleteFavorite(routing: \"${routing}\")\n        }\n      `\n    })\n\n    this.refreshFavorites()\n  }\n\n  async addFavorite(routing) {\n    await client.query({\n      query: gql`\n        mutation {\n          createFavorite(favorite: {\n            routing: \"${routing}\"\n          }) {\n            id\n            routing\n          }\n        }\n      `\n    })\n\n    this.refreshFavorites()\n  }\n}\n"]}
+{"version":3,"file":"favorite-tool.js","sourceRoot":"","sources":["../../client/apptools/favorite-tool.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\n\nimport { UPDATE_FAVORITES } from '@things-factory/fav-base/client/index.js'\n\n@customElement('favorite-tool')\nexport class FavoriteTool extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      line-height: 0;\n    }\n\n    [favorable] {\n      opacity: 0.5;\n    }\n  `\n\n  @property({ type: Array }) favorites: any[] = []\n  @property({ type: Object }) user: any\n  @property({ type: String }) resourceId?: string\n  @property({ type: Boolean }) favored?: boolean\n  @property({ type: Array }) acceptedPages: any[] = []\n\n  page: any\n\n  render() {\n    const renderable = (this.acceptedPages || []).indexOf(this.page) !== -1\n\n    return renderable\n      ? html`\n          <md-icon @click=${this.onClick.bind(this)} ?favorable=${!this.favored}\n            >${this.favored ? 'star' : 'star_border'}</md-icon\n          >\n        `\n      : nothing\n  }\n\n  updated(changes) {\n    if (changes.has('user')) {\n      this.refreshFavorites()\n    }\n\n    this.favored = (this.favorites || []).includes(this.resourceId)\n  }\n\n  private _unsubscribe?: () => void\n\n\n  connectedCallback() {\n\n    super.connectedCallback()\n\n    this._applyState()\n\n    this._unsubscribe = store.subscribe(() => this._applyState())\n\n  }\n\n\n  disconnectedCallback() {\n\n    super.disconnectedCallback()\n\n    this._unsubscribe?.()\n\n  }\n\n\n  private _applyState() {\n\n    const __state__ = store.getState() as any\nthis.page = __state__.route.page\n    this.favorites = __state__.favorite.favorites\n    this.user = __state__.auth.user\n    this.resourceId = __state__.route.resourceId\n\n  }\n\n  onClick(event) {\n    if (!this.resourceId) {\n      return\n    }\n\n    if (this.favored) {\n      this.removeFavorite(this.resourceId)\n    } else {\n      this.addFavorite(this.resourceId)\n    }\n  }\n\n  async refreshFavorites() {\n    if (!this.user || !this.user.email) {\n      return\n    }\n\n    const response = await client.query({\n      query: gql`\n        query {\n          myFavorites {\n            id\n            routing\n          }\n        }\n      `\n    })\n\n    store.dispatch({\n      type: UPDATE_FAVORITES,\n      favorites: response.data.myFavorites.map(favorite => favorite.routing)\n    })\n  }\n\n  async removeFavorite(routing) {\n    await client.mutate({\n      mutation: gql`\n        mutation {\n          deleteFavorite(routing: \"${routing}\")\n        }\n      `\n    })\n\n    this.refreshFavorites()\n  }\n\n  async addFavorite(routing) {\n    await client.mutate({\n      mutation: gql`\n        mutation {\n          createFavorite(favorite: {\n            routing: \"${routing}\"\n          }) {\n            id\n            routing\n          }\n        }\n      `\n    })\n\n    this.refreshFavorites()\n  }\n}\n"]}

package/dist-client/board-list/board-tile-list.d.ts

@@ -1,5 +1,4 @@
 import '@material/web/icon/icon.js';
-import '@operato/board/ox-board-creation-card.js';
 import { LitElement, PropertyValues } from 'lit';
 export declare class BoardTileList extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -10,11 +9,15 @@ export declare class BoardTileList extends LitElement {
     creatable?: boolean;
     searchText?: string;
     reorderable: boolean;
-    private draggedItem;
+    updatedIds: string[];
+    private _draggedId;
+    private _dropTargetId;
+    private _dropSide;
     connectedCallback(): void;
+    private _clearDropIndicator;
+    private _resetDragState;
     render(): import("lit-html").TemplateResult<1>;
     updated(changes: PropertyValues<this>): void;
-    onCreateBoard(e: any): void;
     infoBoard(board: any): void;
     removeFavorite(boardId: any): Promise<void>;
     addFavorite(boardId: any): Promise<void>;

package/dist-client/board-list/board-tile-list.js

@@ -1,11 +1,11 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
-import '@operato/board/ox-board-creation-card.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { keyed } from 'lit/directives/keyed.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { client } from '@operato/graphql';
+import { i18next } from '@operato/i18n';
 import { privileged } from '@things-factory/auth-base/dist-client/index.js';
 let BoardTileList = class BoardTileList extends LitElement {
     constructor() {
@@ -15,6 +15,10 @@ let BoardTileList = class BoardTileList extends LitElement {
         this.groups = [];
         this.creatable = false;
         this.reorderable = false;
+        this.updatedIds = [];
+        this._draggedId = null;
+        this._dropTargetId = null;
+        this._dropSide = null;
     }
     static { this.styles = [
         css `
@@ -40,29 +44,77 @@ let BoardTileList = class BoardTileList extends LitElement {
         background-color: initial;
       }
 
+      [card][import-card] > a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: calc(100% - 25px);
+        border: 1px dashed var(--md-sys-color-outline-variant, #b8c2cc);
+        border-radius: var(--card-list-border-radius, 8px);
+        text-decoration: none;
+        color: var(--md-sys-color-on-secondary-container, #555);
+        background: var(--md-sys-color-surface-container, #fff);
+        box-sizing: border-box;
+      }
+      [card][import-card] > a:hover {
+        border-color: var(--md-sys-color-primary, #2a64d8);
+        color: var(--md-sys-color-primary, #2a64d8);
+        background: var(--md-sys-color-primary-container, #eaf2ff);
+      }
+      [card][import-card] md-icon {
+        font-size: 48px;
+        --md-icon-size: 48px;
+      }
+
       [card] > a {
         display: flex;
+        align-items: center;
+        justify-content: center;
         clip-path: border-box;
+        padding: var(--spacing-large);
+        box-sizing: border-box;
       }
 
       [card]:hover {
         cursor: pointer;
       }
 
+      /* 데스크탑 (hover 가능 + 정밀 포인터): 액션 아이콘 fade-in.
+       * favored 별은 *상태 표시* 라 호버 무관하게 보임 — 어떤 보드가 즐겨찾기인지
+       * 한눈에. unfavored 별 + info 만 호버 시 노출.
+       * 모바일/터치 환경에서는 hover 가 없으므로 이 블록이 미적용 → 기본 동작
+       * (별/메뉴 항상 노출) 그대로 유지. */
+      @media (hover: hover) and (pointer: fine) {
+        md-icon[iconBtn]:not([favored]) {
+          opacity: 0;
+          transition: opacity 0.2s ease;
+        }
+
+        [card]:hover md-icon[iconBtn] {
+          opacity: 1;
+        }
+      }
+
       [name] {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
         margin-top: var(--spacing-small);
-        width: calc(100% - 45px);
+        margin-left: var(--spacing-large);
+        /* 좌측 inset (margin-left) + 우측 액션 영역 (45px) + 우측 inset = 양쪽 대칭 */
+        width: calc(100% - 45px - var(--spacing-large) * 2);
         color: var(--md-sys-color-on-background);
         font-weight: bolder;
         font-size: var(--fontsize-small);
       }
 
       img {
-        flex: 1;
+        max-width: 100%;
+        max-height: 100%;
+        width: auto;
+        height: auto;
         object-fit: contain;
+        border-radius: var(--card-list-thumbnail-radius);
       }
 
       md-icon[iconBtn] {
@@ -72,8 +124,10 @@ let BoardTileList = class BoardTileList extends LitElement {
         color: var(--board-list-star-color);
         font-size: 1.4em;
       }
-      md-icon[info] {
+      /* info 가 render 순서상 첫째 = float right 시 가장 우측 — 카드 우측 inset 적용 */
+      md-icon[iconBtn][info] {
         color: var(--md-sys-color-primary);
+        margin-right: var(--spacing-large);
       }
 
       md-icon[iconBtn][favored],
@@ -92,121 +146,339 @@ let BoardTileList = class BoardTileList extends LitElement {
         height: calc(100% - 25px);
       }
 
-      :host > *:hover [info] {
-        opacity: 1;
-        -webkit-transition: opacity 0.8s;
-        -moz-transition: opacity 0.8s;
-        -o-transition: opacity 0.8s;
-        transition: opacity 0.8s;
-      }
-
       [draggable='true'] {
         cursor: grab;
+        transition: opacity 0.2s ease, transform 0.2s ease;
+      }
+
+      [card].dragging {
+        opacity: 0.3;
+        transform: scale(0.95);
+      }
+
+      [card].drop-before {
+        border-left: 3px solid var(--md-sys-color-primary);
+      }
+
+      [card].drop-after {
+        border-right: 3px solid var(--md-sys-color-primary);
+      }
+
+      [card].flip-moving {
+        transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
+      }
+
+      @keyframes drop-land {
+        0% {
+          opacity: 0;
+          transform: scale(0.9);
+        }
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      [card].flip-dropped-hidden {
+        opacity: 0;
+      }
+
+      [card].flip-dropped {
+        animation: drop-land 0.5s cubic-bezier(0.22, 0.6, 0.36, 1);
+      }
+
+      @keyframes highlight-sweep {
+        0% {
+          background: linear-gradient(90deg, var(--md-sys-color-primary-container) 0%, transparent 0%);
+          box-shadow: 0 0 8px 2px var(--md-sys-color-primary);
+        }
+        50% {
+          background: linear-gradient(90deg, transparent 0%, var(--md-sys-color-primary-container) 50%, transparent 100%);
+          box-shadow: 0 0 12px 3px var(--md-sys-color-primary);
+        }
+        100% {
+          background: transparent;
+          box-shadow: none;
+        }
       }
 
-      @media screen and (max-width: 800px), screen and (max-height: 600px) {
-        ox-board-creation-card {
-          display: none;
+      @keyframes border-pulse {
+        0%,
+        100% {
+          outline: 2px solid transparent;
+        }
+        25%,
+        75% {
+          outline: 2px solid var(--md-sys-color-primary);
+        }
+      }
+
+      @keyframes subtle-bounce {
+        0% {
+          transform: scale(1);
+        }
+        30% {
+          transform: scale(1.03);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+
+      @keyframes surface-flash {
+        0% {
+          background-color: var(--md-sys-color-primary-container);
+        }
+        100% {
+          background-color: transparent;
         }
       }
+
+      [card].anim-sweep {
+        animation: highlight-sweep 1.8s ease;
+        border-radius: 4px;
+      }
+
+      [card].anim-pulse {
+        animation: border-pulse 1.2s ease;
+      }
+
+      [card].anim-bounce {
+        animation: subtle-bounce 0.8s ease;
+      }
+
+      [card].anim-flash {
+        animation: surface-flash 1.5s ease-out;
+      }
+
     `
     ]; }
     connectedCallback() {
         super.connectedCallback();
         if (this.reorderable) {
             this.renderRoot.addEventListener('dragstart', (e) => {
-                const target = e.target;
-                this.draggedItem = target.closest('[card]');
-                e.dataTransfer?.setData('text/plain', target.innerHTML);
+                const target = e.target.closest('[card]');
+                if (!target?.id)
+                    return;
+                this._draggedId = target.id;
+                target.classList.add('dragging');
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer?.setData('text/plain', target.id);
             });
             this.renderRoot.addEventListener('dragover', (e) => {
                 e.preventDefault();
-                const target = e.target;
-                const targetItem = target.closest('[card]');
-                if (targetItem && targetItem !== this.draggedItem) {
-                    const targetRect = targetItem.getBoundingClientRect();
-                    const mousePos = e.clientX - targetRect.left;
-                    if (mousePos < targetRect.width / 2) {
-                        // 마우스 위치가 아이템 좌측 반절에 있을 때
-                        this.renderRoot.insertBefore(this.draggedItem, targetItem);
-                    }
-                    else {
-                        // 마우스 위치가 아이템 우측 반절에 있을 때
-                        this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling);
+                e.dataTransfer.dropEffect = 'move';
+                const target = e.target.closest('[card]');
+                if (!target?.id || target.id === this._draggedId)
+                    return;
+                const targetRect = target.getBoundingClientRect();
+                const mousePos = e.clientX - targetRect.left;
+                const side = mousePos < targetRect.width / 2 ? 'before' : 'after';
+                if (this._dropTargetId !== target.id || this._dropSide !== side) {
+                    this._clearDropIndicator();
+                    this._dropTargetId = target.id;
+                    this._dropSide = side;
+                    target.classList.add(side === 'before' ? 'drop-before' : 'drop-after');
+                }
+            });
+            this.renderRoot.addEventListener('dragleave', (e) => {
+                const target = e.target.closest('[card]');
+                if (target?.id === this._dropTargetId) {
+                    const related = e.relatedTarget;
+                    if (!related || !target.contains(related)) {
+                        this._clearDropIndicator();
                     }
                 }
             });
             this.renderRoot.addEventListener('drop', (e) => {
                 e.preventDefault();
-                const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))
-                    .map(board => board.getAttribute('id'))
-                    .filter(Boolean);
-                this.dispatchEvent(new CustomEvent('reordered', {
-                    detail: {
-                        groupId: this.group,
-                        boardIds
+                // drop 이벤트에서 직접 타겟과 방향을 계산 (dragleave가 먼저 발생해 상태를 지울 수 있으므로)
+                const dropTarget = e.target.closest('[card]');
+                let dropTargetId = this._dropTargetId;
+                let dropSide = this._dropSide;
+                if (dropTarget?.id && dropTarget.id !== this._draggedId) {
+                    dropTargetId = dropTarget.id;
+                    const rect = dropTarget.getBoundingClientRect();
+                    dropSide = e.clientX - rect.left < rect.width / 2 ? 'before' : 'after';
+                }
+                this._clearDropIndicator();
+                const draggedEl = this._draggedId ? this.renderRoot.querySelector(`[card][id="${this._draggedId}"]`) : null;
+                if (draggedEl) {
+                    draggedEl.classList.remove('dragging');
+                }
+                if (!this._draggedId || !dropTargetId || this._draggedId === dropTargetId) {
+                    this._resetDragState();
+                    return;
+                }
+                // 배열 재정렬
+                const boards = [...this.boards];
+                const draggedIndex = boards.findIndex(b => b.id === this._draggedId);
+                if (draggedIndex === -1) {
+                    this._resetDragState();
+                    return;
+                }
+                const draggedBoardId = this._draggedId;
+                const [dragged] = boards.splice(draggedIndex, 1);
+                let targetIndex = boards.findIndex(b => b.id === dropTargetId);
+                if (dropSide === 'after')
+                    targetIndex++;
+                boards.splice(targetIndex, 0, dragged);
+                this._resetDragState();
+                // FLIP 애니메이션: 이전 위치 기록
+                const cards = this.renderRoot.querySelectorAll('[card][id]');
+                const firstPositions = new Map();
+                cards.forEach(card => {
+                    firstPositions.set(card.id, card.getBoundingClientRect());
+                });
+                // optimistic update → Lit 렌더
+                this.boards = boards;
+                this.updateComplete.then(() => {
+                    const updatedCards = this.renderRoot.querySelectorAll('[card][id]');
+                    let droppedEl = null;
+                    updatedCards.forEach(card => {
+                        const first = firstPositions.get(card.id);
+                        if (!first)
+                            return;
+                        const last = card.getBoundingClientRect();
+                        const dx = first.left - last.left;
+                        const dy = first.top - last.top;
+                        const el = card;
+                        if (card.id === draggedBoardId) {
+                            // 드래그한 카드: 슬라이딩 완료 후 착지하도록 일단 숨김
+                            el.classList.add('flip-dropped-hidden');
+                            droppedEl = el;
+                        }
+                        else {
+                            // 밀려나는 카드: 이전 위치에서 새 위치로 슬라이딩
+                            if (dx === 0 && dy === 0)
+                                return;
+                            // Invert: 이전 위치로 되돌림
+                            el.style.transform = `translate(${dx}px, ${dy}px)`;
+                            el.style.transition = 'none';
+                            requestAnimationFrame(() => {
+                                el.classList.add('flip-moving');
+                                el.style.transform = '';
+                                el.style.transition = '';
+                                el.addEventListener('transitionend', () => {
+                                    el.classList.remove('flip-moving');
+                                }, { once: true });
+                            });
+                        }
+                    });
+                    // 밀려나는 카드 슬라이딩 완료 후 드래그한 카드 착지 → 착지 완료 후 이벤트 발송
+                    const boardIds = boards.map(b => b.id);
+                    const dispatchReordered = () => {
+                        this.dispatchEvent(new CustomEvent('reordered', {
+                            detail: {
+                                groupId: this.group,
+                                boardIds,
+                                movedId: draggedBoardId
+                            }
+                        }));
+                    };
+                    if (droppedEl) {
+                        setTimeout(() => {
+                            ;
+                            droppedEl.classList.remove('flip-dropped-hidden');
+                            droppedEl.classList.add('flip-dropped');
+                            droppedEl.addEventListener('animationend', () => {
+                                ;
+                                droppedEl.classList.remove('flip-dropped');
+                                dispatchReordered();
+                            }, { once: true });
+                        }, 500);
+                    }
+                    else {
+                        dispatchReordered();
                     }
-                }));
+                });
             });
+            this.renderRoot.addEventListener('dragend', (e) => {
+                this._clearDropIndicator();
+                const target = e.target.closest('[card]');
+                if (target)
+                    target.classList.remove('dragging');
+                this._resetDragState();
+            });
+        }
+    }
+    _clearDropIndicator() {
+        if (this._dropTargetId) {
+            const el = this.renderRoot.querySelector(`[card][id="${this._dropTargetId}"]`);
+            if (el) {
+                el.classList.remove('drop-before', 'drop-after');
+            }
         }
+        this._dropTargetId = null;
+        this._dropSide = null;
+    }
+    _resetDragState() {
+        this._draggedId = null;
+        this._dropTargetId = null;
+        this._dropSide = null;
     }
     render() {
-        var boards = this.boards || [];
+        const boards = this.boards || [];
         return html `
       ${this.creatable
             ? privileged({ privilege: 'mutation', category: 'board' }, html `
-              <ox-board-creation-card
-                .groups=${this.groups}
-                .defaultGroup=${this.group}
-                @create-board=${e => this.onCreateBoard(e)}
-                card
-                create
-              ></ox-board-creation-card>
+              <div card import-card>
+                <a href="board-create" title=${i18next.t('text.create board') || 'Create New Board'}>
+                  <md-icon>add_circle_outline</md-icon>
+                </a>
+                <div name>${i18next.t('label.create board') || 'Create Board'}</div>
+              </div>
             `)
             : nothing}
-      ${keyed(Date.now(), boards.map(board => html `
-            <div card draggable="true" id=${board.id}>
-              <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>
+      ${repeat(boards, board => board.id, board => html `
+          <div card draggable="true" id=${board.id}>
+            <a href="board-viewer/${board.id}">
+              <img src=${board.thumbnail} />
+            </a>
 
-              <div name>${board.name}</div>
-              <!-- <div description>${board.description}</div> -->
+            <div name>${board.name}</div>
+            <!-- <div description>${board.description}</div> -->
 
-              <md-icon
-                iconBtn
-                info
-                @click=${e => {
+            <md-icon
+              iconBtn
+              info
+              @click=${e => {
             this.infoBoard(board);
             e.preventDefault();
         }}
-                >info</md-icon
-              >
+              >info</md-icon
+            >
 
-              ${(this.favorites || []).includes(board.id)
+            ${(this.favorites || []).includes(board.id)
             ? html ` <md-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</md-icon> `
             : html ` <md-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</md-icon> `}
-            </div>
-          `))}
+          </div>
+        `)}
     `;
     }
     updated(changes) {
-        var creationCard = this.renderRoot.querySelector('ox-board-creation-card');
-        if (creationCard) {
-            creationCard.reset();
+        if (changes.has('updatedIds') && this.updatedIds.length > 0) {
+            const animClasses = ['anim-sweep', 'anim-pulse', 'anim-bounce', 'anim-flash'];
+            for (const id of this.updatedIds) {
+                const card = this.renderRoot.querySelector(`[card][id="${id}"]`);
+                if (!card)
+                    continue;
+                const animClass = animClasses[Math.floor(Math.random() * animClasses.length)];
+                card.classList.add(animClass);
+                card.addEventListener('animationend', () => {
+                    card.classList.remove(animClass);
+                }, { once: true });
+            }
         }
     }
-    onCreateBoard(e) {
-        this.dispatchEvent(new CustomEvent('create-board', {
-            detail: e.detail
-        }));
-    }
     infoBoard(board) {
         this.dispatchEvent(new CustomEvent('info-board', {
             detail: board
         }));
     }
     async removeFavorite(boardId) {
-        await client.query({
-            query: gql `
+        await client.mutate({
+            mutation: gql `
         mutation {
           deleteFavorite(routing: "${boardId}")
         }
@@ -215,8 +487,8 @@ let BoardTileList = class BoardTileList extends LitElement {
         this.refreshFavorites();
     }
     async addFavorite(boardId) {
-        await client.query({
-            query: gql `
+        await client.mutate({
+            mutation: gql `
         mutation {
           createFavorite(favorite: {
             routing: "${boardId}"
@@ -261,6 +533,10 @@ __decorate([
     property({ type: Boolean, attribute: 'reorderable' }),
     __metadata("design:type", Boolean)
 ], BoardTileList.prototype, "reorderable", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], BoardTileList.prototype, "updatedIds", void 0);
 BoardTileList = __decorate([
     customElement('board-tile-list')
 ], BoardTileList);