geoproject-app/src/components/SaveButton.vue

<template>
  <div class="save-button-wrapper">
    <button
      class="save-btn"
      :class="{
        'has-changes': isDirty,
        'is-saving': isSaving,
        'has-error': hasError,
        'save-success': showSuccess
      }"
      :disabled="!isDirty || isSaving"
      @click="handleSave"
      :title="getTooltip()"
    >
      <!-- Save icon (default state) -->
      <svg v-if="!isSaving && !showSuccess" class="save-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V7L17 3ZM19 19H5V5H16.17L19 7.83V19ZM12 12C10.34 12 9 13.34 9 15S10.34 18 12 18 15 16.66 15 15 13.66 12 12 12ZM6 6H15V10H6V6Z"/>
      </svg>

      <!-- Spinner (saving state) -->
      <div v-if="isSaving" class="spinner"></div>

      <!-- Success checkmark (brief animation) -->
      <svg v-if="showSuccess" class="success-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z"/>
      </svg>
    </button>

    <!-- Last saved timestamp -->
    <div v-if="lastSavedFormatted" class="last-saved">
      Saved: {{ lastSavedFormatted }}
    </div>

    <!-- Error message tooltip -->
    <div v-if="hasError && saveError" class="error-tooltip">
      {{ saveError }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useStylesheetStore } from '../stores/stylesheet';

const stylesheetStore = useStylesheetStore();

const isDirty = computed(() => stylesheetStore.isDirty);
const isSaving = computed(() => stylesheetStore.isSaving);
const saveError = computed(() => stylesheetStore.saveError);
const lastSavedFormatted = computed(() => stylesheetStore.lastSavedFormatted);
const hasError = computed(() => !!saveError.value);
const showSuccess = ref(false);

const handleSave = async () => {
  const result = await stylesheetStore.saveCustomCss();

  if (result.status === 'success') {
    // Show success animation
    showSuccess.value = true;
    setTimeout(() => {
      showSuccess.value = false;
    }, 1500);
  }
  // Errors are handled in the store and reflected in hasError
};

const getTooltip = () => {
  if (!isDirty.value) return 'No changes to save';
  if (isSaving.value) return 'Saving...';
  if (hasError.value) return saveError.value;
  return 'Save custom CSS';
};
</script>

<style scoped>
.save-button-wrapper {
  position: fixed;
  top: 2rem;
  right: 5rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.save-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: none;
  background: var(--color-interface-300, #ccc);
  color: white;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  position: relative;
}

.save-btn.has-changes {
  background: var(--color-page-highlight, #ff8a50);
  cursor: pointer;
}

.save-btn.has-changes:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.save-btn.is-saving {
  cursor: wait;
}

.save-btn.has-error {
  background: #e74c3c;
}

.save-btn.save-success {
  background: #2ecc71;
}

.save-icon,
.success-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border-top: 2px solid white;
  border-right: 2px solid transparent;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.last-saved {
  font-size: 0.75rem;
  color: var(--color-interface-600, #666);
  background: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.error-tooltip {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: #e74c3c;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  max-width: 15rem;
  word-wrap: break-word;
  white-space: normal;
}
</style>