geo/apps/admin-web/src/components/PublishPlatformSelector.vue

<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";

import type { PublishPlatformOption } from "@/lib/publish-platforms";

const props = withDefaults(defineProps<{
  modelValue: string[];
  platforms: PublishPlatformOption[];
  disabled?: boolean;
  multiple?: boolean;
}>(), {
  disabled: false,
  multiple: true,
});

const emit = defineEmits<{
  "update:modelValue": [value: string[]];
}>();

const { t } = useI18n();

const selectedValues = computed(() => props.modelValue ?? []);

function isSelected(platformId: string): boolean {
  return selectedValues.value.includes(platformId);
}

function togglePlatform(platformId: string): void {
  if (props.disabled) {
    return;
  }

  if (props.multiple) {
    const next = isSelected(platformId)
      ? selectedValues.value.filter((item) => item !== platformId)
      : [...selectedValues.value, platformId];
    emit("update:modelValue", next);
    return;
  }

  emit("update:modelValue", isSelected(platformId) ? [] : [platformId]);
}
</script>

<template>
  <div class="publish-platform-selector">
    <div v-if="platforms.length" class="publish-platform-selector__grid">
      <button
        v-for="platform in platforms"
        :key="platform.id"
        type="button"
        class="publish-platform-selector__card"
        :class="{
          'publish-platform-selector__card--active': isSelected(platform.id),
          'publish-platform-selector__card--disabled': disabled,
        }"
        @click="togglePlatform(platform.id)"
      >
        <span class="publish-platform-selector__check">
          <span v-if="isSelected(platform.id)" class="publish-platform-selector__check-dot"></span>
        </span>

        <span
          class="publish-platform-selector__badge"
          :style="{ '--badge-accent': platform.accent }"
        >
          {{ platform.shortName }}
        </span>

        <span class="publish-platform-selector__copy">
          <strong>{{ platform.name }}</strong>
        </span>

        <span 
          class="publish-platform-selector__status"
          :class="{ 'publish-platform-selector__status--bound': platform.bound }"
        >
          {{ platform.bound ? (platform.accountLabel ?? t("custom.task.platformConnected")) : t("custom.task.platformUnauthorized") }}
        </span>
      </button>
    </div>

    <div v-else class="publish-platform-selector__empty">
      <strong>{{ t("custom.task.platformEmptyTitle") }}</strong>
      <p>{{ t("custom.task.platformEmptyHint") }}</p>
    </div>
  </div>
</template>

<style scoped>
.publish-platform-selector {
  width: 100%;
}

.publish-platform-selector__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.publish-platform-selector__card {
  display: grid;
  grid-template-columns: 20px 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e1e8f2;
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.publish-platform-selector__card:hover {
  border-color: #bbccf1;
  background: #fcfdff;
}

.publish-platform-selector__card--active {
  border-color: #355dff;
  background: #f2f6ff;
  box-shadow: 0 4px 12px rgba(53, 93, 255, 0.08);
}

.publish-platform-selector__card--disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.publish-platform-selector__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #d0d7e5;
  border-radius: 4px;
  background: #fff;
}

.publish-platform-selector__card--active .publish-platform-selector__check {
  border-color: #355dff;
  background: #355dff;
}

.publish-platform-selector__check-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #fff;
}

.publish-platform-selector__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--badge-accent) 10%, #ffffff);
  color: var(--badge-accent);
  font-size: 15px;
  font-weight: 700;
}

.publish-platform-selector__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.publish-platform-selector__copy strong {
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.publish-platform-selector__status {
  font-size: 13px;
  color: #355dff;
}

.publish-platform-selector__status--bound {
  color: #8fa0ba;
}

.publish-platform-selector__empty {
  padding: 18px 20px;
  border: 1px dashed #cfd9e8;
  border-radius: 18px;
  background: linear-gradient(180deg, #fcfdff 0%, #f5f8fc 100%);
}

.publish-platform-selector__empty strong {
  display: block;
  color: #1f2937;
  font-size: 15px;
  font-weight: 700;
}

.publish-platform-selector__empty p {
  margin: 6px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.7;
}
</style>