mail/src/components/reader/ReaderToolbar.vue

<script setup lang="ts">
import { computed } from 'vue'
import type { EntityInterface } from '@MailManager/types/entity'
import type { MessageInterface } from '@MailManager/types/message'
import { SecurityLevel } from '@/utile/emailSanitizer'

interface Props {
  message: EntityInterface<MessageInterface>
  isHtml: boolean
  allowImages: boolean
  securityLevel: SecurityLevel
  isSecurityOverridden: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  reply: []
  forward: []
  move: []
  delete: []
  flag: []
  toggleImages: []
  setSecurityLevel: [level: SecurityLevel]
}>()

const securityLevels = [
  { value: SecurityLevel.STRICT, title: 'Strict', icon: 'mdi-shield-lock', description: 'Maximum security' },
  { value: SecurityLevel.MODERATE, title: 'Moderate', icon: 'mdi-shield-check', description: 'Balanced security' },
  { value: SecurityLevel.RELAXED, title: 'Relaxed', icon: 'mdi-shield-off', description: 'Minimal restrictions' }
]

const currentSecurityLevel = computed(() => {
  return securityLevels.find(l => l.value === props.securityLevel) || securityLevels[1]
})
</script>

<template>
  <v-toolbar density="compact" elevation="0" class="message-toolbar">
    <v-btn
      icon="mdi-reply"
      variant="text"
      @click="emit('reply')"
    >
      <v-icon>mdi-reply</v-icon>
      <v-tooltip activator="parent" location="bottom">Reply</v-tooltip>
    </v-btn>

    <v-btn
      icon="mdi-reply-all"
      variant="text"
      @click="emit('reply')"
    >
      <v-icon>mdi-reply-all</v-icon>
      <v-tooltip activator="parent" location="bottom">Reply All</v-tooltip>
    </v-btn>

    <v-btn
      icon="mdi-share"
      variant="text"
      @click="emit('forward')"
    >
      <v-icon>mdi-share</v-icon>
      <v-tooltip activator="parent" location="bottom">Forward</v-tooltip>
    </v-btn>

    <v-divider vertical class="mx-2" />

    <!-- Image toggle -->
    <v-btn
      v-if="isHtml"
      :icon="allowImages ? 'mdi-image' : 'mdi-image-off'"
      variant="text"
      :color="allowImages ? 'primary' : undefined"
      @click="emit('toggleImages')"
    >
      <v-icon>{{ allowImages ? 'mdi-image' : 'mdi-image-off' }}</v-icon>
      <v-tooltip activator="parent" location="bottom">
        {{ allowImages ? 'Hide Images' : 'Show Images' }} (This Message Only)
      </v-tooltip>
    </v-btn>

    <!-- Security Level Menu -->
    <v-menu v-if="isHtml" :close-on-content-click="false">
      <template #activator="{ props: menuProps }">
        <v-btn
          v-bind="menuProps"
          :icon="currentSecurityLevel.icon"
          variant="text"
          :color="isSecurityOverridden ? 'warning' : undefined"
        >
          <v-icon>{{ currentSecurityLevel.icon }}</v-icon>
          <v-badge
            v-if="isSecurityOverridden"
            dot
            color="warning"
            offset-x="-8"
            offset-y="8"
          />
          <v-tooltip activator="parent" location="bottom">
            {{ isSecurityOverridden ? 'Security Override Active' : 'Security Level' }} (This Message Only)
          </v-tooltip>
        </v-btn>
      </template>

      <v-card min-width="280">
        <v-card-title class="text-subtitle-1">
          <v-icon start>mdi-shield-account</v-icon>
          Message Security
        </v-card-title>
        <v-divider />
        <v-card-text>
          <div class="text-caption text-medium-emphasis mb-2">
            Override security level for this message only
          </div>
          <v-list density="compact">
            <v-list-item
              v-for="level in securityLevels"
              :key="level.value"
              :active="securityLevel === level.value"
              @click="emit('setSecurityLevel', level.value)"
            >
              <template #prepend>
                <v-icon :icon="level.icon" />
              </template>
              <v-list-item-title>{{ level.title }}</v-list-item-title>
              <v-list-item-subtitle>{{ level.description }}</v-list-item-subtitle>
              <template #append>
                <v-icon v-if="securityLevel === level.value" icon="mdi-check" color="primary" />
              </template>
            </v-list-item>
          </v-list>

          <v-alert
            v-if="isSecurityOverridden"
            density="compact"
            variant="tonal"
            color="warning"
            class="text-caption mt-3"
            icon="mdi-alert"
          >
            Security override active for this message. Change messages to reset.
          </v-alert>
        </v-card-text>
      </v-card>
    </v-menu>

    <v-spacer />

    <v-menu>
      <template #activator="{ props: menuProps }">
        <v-btn
          v-bind="menuProps"
          icon="mdi-dots-vertical"
          variant="text"
        >
          <v-icon>mdi-dots-vertical</v-icon>
          <v-tooltip activator="parent" location="bottom">More Actions</v-tooltip>
        </v-btn>
      </template>

      <v-list density="compact">
        <v-list-item
          prepend-icon="mdi-folder-move-outline"
          title="Move To Folder"
          @click="emit('move')"
        />
        <v-list-item
          prepend-icon="mdi-delete-outline"
          title="Delete"
          @click="emit('delete')"
        />
      </v-list>
    </v-menu>
  </v-toolbar>
</template>

<style scoped lang="scss">
.message-toolbar {
  flex-shrink: 0;
  border-bottom: 1px solid rgb(var(--v-border-color));
}
</style>