crm/apps/web/src/components/QuickCreate.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import type { RouteLocationRaw } from 'vue-router';
import UiIcon from '@/components/UiIcon.vue';

const FAB_SIZE = 56;
const FAB_MARGIN = 20;
const POS_KEY = 'mento.quickCreateFab';

type FabPos = { left: number; top: number };

type ItemIcon = 'user' | 'building' | 'dollar' | 'calendar-plus' | 'document';

const items: Array<{
  key: string;
  title: string;
  desc: string;
  icon: ItemIcon;
  tone: string;
  to: RouteLocationRaw;
}> = [
  {
    key: 'person',
    title: 'افزودن شخص',
    desc: 'مخاطب جدید را ثبت کنید',
    icon: 'user',
    tone: 'person',
    to: { name: 'person-new' },
  },
  {
    key: 'company',
    title: 'افزودن شرکت',
    desc: 'شرکت یا سازمان جدید اضافه کنید',
    icon: 'building',
    tone: 'company',
    to: { name: 'company-new' },
  },
  {
    key: 'deal',
    title: 'افزودن معامله',
    desc: 'فرصت یا معامله جدید ایجاد کنید',
    icon: 'dollar',
    tone: 'deal',
    to: { name: 'deal-new' },
  },
  {
    key: 'activity',
    title: 'افزودن فعالیت',
    desc: 'تماس، جلسه، ایمیل و ... ثبت کنید',
    icon: 'calendar-plus',
    tone: 'activity',
    to: { name: 'activity-new' },
  },
  {
    key: 'note',
    title: 'افزودن کارت (یادداشت)',
    desc: 'یادداشت یا کارت جدید ایجاد کنید',
    icon: 'document',
    tone: 'note',
    to: { name: 'notes' },
  },
];

const route = useRoute();
const router = useRouter();
const hidden = computed(() => route.name === 'person-detail');
const isQuickCreateOpen = ref(false);
const ready = ref(false);
const fabPos = ref<FabPos>({ left: FAB_MARGIN, top: FAB_MARGIN });
const viewport = ref({ w: 1280, h: 800 });
const dragging = ref(false);
let dragMoved = false;
let dragOffsetX = 0;
let dragOffsetY = 0;

function defaultPos(): FabPos {
  return {
    left: FAB_MARGIN,
    top: Math.max(FAB_MARGIN, viewport.value.h - FAB_MARGIN - FAB_SIZE),
  };
}

function clampPos(pos: FabPos): FabPos {
  const margin = 8;
  return {
    left: Math.min(Math.max(margin, pos.left), viewport.value.w - FAB_SIZE - margin),
    top: Math.min(Math.max(margin, pos.top), viewport.value.h - FAB_SIZE - margin),
  };
}

function loadPos() {
  try {
    const raw = localStorage.getItem(POS_KEY);
    if (!raw) {
      fabPos.value = defaultPos();
      return;
    }
    const parsed = JSON.parse(raw) as FabPos;
    if (typeof parsed.left !== 'number' || typeof parsed.top !== 'number') {
      fabPos.value = defaultPos();
      return;
    }
    fabPos.value = clampPos(parsed);
  } catch {
    fabPos.value = defaultPos();
  }
}

function savePos() {
  localStorage.setItem(POS_KEY, JSON.stringify(fabPos.value));
}

function onFabPointerDown(ev: PointerEvent) {
  if (ev.button !== 0) return;
  dragMoved = false;
  dragOffsetX = ev.clientX - fabPos.value.left;
  dragOffsetY = ev.clientY - fabPos.value.top;
  (ev.currentTarget as HTMLElement).setPointerCapture(ev.pointerId);
}

function onFabPointerMove(ev: PointerEvent) {
  if (!((ev.currentTarget as HTMLElement).hasPointerCapture?.(ev.pointerId))) return;
  const next = clampPos({
    left: ev.clientX - dragOffsetX,
    top: ev.clientY - dragOffsetY,
  });
  if (
    Math.abs(next.left - fabPos.value.left) > 4 ||
    Math.abs(next.top - fabPos.value.top) > 4
  ) {
    dragMoved = true;
    dragging.value = true;
  }
  if (dragMoved) fabPos.value = next;
}

function onFabPointerUp(ev: PointerEvent) {
  (ev.currentTarget as HTMLElement).releasePointerCapture?.(ev.pointerId);
  if (dragMoved) {
    fabPos.value = clampPos(fabPos.value);
    savePos();
    dragging.value = false;
    return;
  }
  dragging.value = false;
  toggle();
}

function syncViewport() {
  viewport.value = { w: window.innerWidth, h: window.innerHeight };
}

function onResize() {
  syncViewport();
  fabPos.value = clampPos(fabPos.value);
}

const fabStyle = computed(() => ({
  left: `${fabPos.value.left}px`,
  top: `${fabPos.value.top}px`,
  right: 'auto',
  bottom: 'auto',
}));

const panelStyle = computed(() => {
  const gap = 18;
  const width = Math.min(390, viewport.value.w - 32);
  let left = fabPos.value.left;
  left = Math.min(left, viewport.value.w - width - 16);
  left = Math.max(16, left);
  const spaceAbove = fabPos.value.top;
  const placeAbove = spaceAbove > 360;
  if (placeAbove) {
    return {
      left: `${left}px`,
      right: 'auto',
      bottom: `${viewport.value.h - fabPos.value.top + gap}px`,
      top: 'auto',
      width: `${width}px`,
    };
  }
  return {
    left: `${left}px`,
    right: 'auto',
    top: `${fabPos.value.top + FAB_SIZE + gap}px`,
    bottom: 'auto',
    width: `${width}px`,
  };
});

function close() {
  isQuickCreateOpen.value = false;
}

function toggle() {
  isQuickCreateOpen.value = !isQuickCreateOpen.value;
}

function go(to: RouteLocationRaw) {
  close();
  void router.push(to);
}

function onKeydown(ev: KeyboardEvent) {
  if (ev.key === 'Escape' && isQuickCreateOpen.value) {
    ev.preventDefault();
    close();
  }
}

watch(isQuickCreateOpen, (value) => {
  document.body.style.overflow = value ? 'hidden' : '';
});

watch(hidden, (value) => {
  if (value) close();
});

watch(
  () => route.fullPath,
  () => {
    close();
  },
);

onMounted(() => {
  syncViewport();
  loadPos();
  ready.value = true;
  window.addEventListener('resize', onResize);
  window.addEventListener('keydown', onKeydown);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize);
  window.removeEventListener('keydown', onKeydown);
  document.body.style.overflow = '';
});
</script>

<template>
  <Teleport to="body">
    <div v-if="!hidden" class="qc" dir="rtl">
      <button
        v-if="isQuickCreateOpen"
        class="overlay"
        type="button"
        aria-label="بستن ایجاد سریع"
        @click="close"
      />

      <section
        v-if="isQuickCreateOpen"
        class="panel"
        aria-labelledby="qc-title"
        :style="panelStyle"
      >
        <h2 id="qc-title">ایجاد سریع</h2>
        <button
          v-for="item in items"
          :key="item.key"
          class="item"
          type="button"
          @click="go(item.to)"
        >
          <span class="ico" :class="item.tone">
            <UiIcon :name="item.icon" :size="26" />
          </span>
          <span class="copy">
            <strong>{{ item.title }}</strong>
            <small>{{ item.desc }}</small>
          </span>
        </button>
      </section>

      <button
        v-if="ready"
        class="fab"
        type="button"
        :class="{ dragging, open: isQuickCreateOpen }"
        :style="fabStyle"
        :aria-expanded="isQuickCreateOpen"
        :aria-label="isQuickCreateOpen ? 'بستن ایجاد سریع' : 'ایجاد سریع'"
        title="ایجاد سریع"
        @pointerdown="onFabPointerDown"
        @pointermove="onFabPointerMove"
        @pointerup="onFabPointerUp"
        @pointercancel="onFabPointerUp"
      >
        <span class="fab-face" aria-hidden="true">
          <UiIcon :name="isQuickCreateOpen ? 'x' : 'grid'" :size="20" />
        </span>
      </button>
    </div>
  </Teleport>
</template>

<style scoped>
.qc {
  direction: rtl;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.68);
  cursor: pointer;
}

.panel {
  position: fixed;
  z-index: 92;
  width: 390px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 28px;
  padding: 20px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.panel h2 {
  margin: 0 0 16px;
  text-align: right;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
}

.item {
  width: 100%;
  height: 82px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border: 1px solid #eef1f2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  font: inherit;
  text-align: right;
  cursor: pointer;
}

.item:last-child {
  margin-bottom: 0;
}

.ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}

.ico.person {
  background: #0d9488;
}

.ico.company {
  background: #22d3ee;
}

.ico.deal {
  background: #7c3aed;
}

.ico.activity {
  background: #f97316;
}

.ico.note {
  background: #2563eb;
}

.copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  text-align: right;
}

.copy strong {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.copy small {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}

.fab {
  position: fixed;
  z-index: 93;
  width: 54px;
  height: 54px;
  padding: 0;
  margin: 0;
  border: 2px solid #0d9488;
  border-radius: 16px;
  background: #ffffff;
  color: #0d9488;
  display: grid;
  place-items: center;
  line-height: 0;
  direction: ltr;
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(13, 148, 136, 0.08);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.fab-face {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fab :deep(.ico) {
  display: block;
  stroke-width: 2;
}

.fab:hover {
  background: #f0fdfa;
  box-shadow:
    0 8px 20px rgba(13, 148, 136, 0.22),
    0 0 0 1px rgba(13, 148, 136, 0.12);
}

.fab.open {
  background: #0d9488;
  color: #fff;
  border-color: #0d9488;
  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.35);
}

.fab.dragging {
  cursor: grabbing;
  transform: scale(1.04);
  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.3);
}
</style>