yourpart3/frontend/src/components/AppFooter.vue

<template>
  <footer class="app-footer">
    <div class="app-footer__inner">
      <button class="footer-brand" type="button" @click="showFalukantDaemonStatus">
        <img src="/images/icons/logo_color.png" alt="YourPart" />
        <span>System</span>
      </button>
      <div class="window-bar">
      <button v-for="dialog in openDialogs" :key="dialog.dialog.name" class="dialog-button"
        @click="toggleDialogMinimize(dialog.dialog.name)" :title="dialog.dialog.localTitle">
        <img v-if="dialog.dialog.icon" :src="'/images/icons/' + dialog.dialog.icon" />
        <span class="button-text">{{ dialog.dialog.isTitleTranslated ? $t(dialog.dialog.localTitle) :
          dialog.dialog.localTitle }}</span>
      </button>
      </div>
      <div class="static-block">
        <a href="#" @click.prevent="openImprintDialog">{{ $t('imprint.button') }}</a>
        <a href="#" @click.prevent="openDataPrivacyDialog">{{ $t('dataPrivacy.button') }}</a>
        <a href="#" @click.prevent="openContactDialog">{{ $t('contact.button') }}</a>
      </div>
    </div>
  </footer>
</template>

<script>
import { mapGetters, mapState } from 'vuex';

export default {
  name: 'AppFooter',
  components: {
  },
  computed: {
    ...mapGetters('dialogs', ['openDialogs']),
    ...mapState(['daemonSocket']),
  },
  mounted() {
    if (this.daemonSocket && this.daemonSocket.addEventListener) {
      this.daemonSocket.addEventListener('workerStatus', this.handleDaemonMessage);
    }
  },
  beforeUnmount() {
    if (this.daemonSocket && this.daemonSocket.removeEventListener) {
      this.daemonSocket.removeEventListener('workerStatus', this.handleDaemonMessage);
    }
  },
  methods: {
    openImprintDialog() {
      this.$root.$refs.imprintDialog.open();
    },
    openDataPrivacyDialog() {
      this.$root.$refs.dataPrivacyDialog.open();
    },
    openContactDialog() {
      this.$root.$refs.contactDialog.open();
    },
    toggleDialogMinimize(dialogName) {
      this.$store.dispatch('dialogs/toggleDialogMinimize', dialogName);
    },
    // Daemon WebSocket deaktiviert - diese Funktionen sind nicht mehr verfügbar
    async showFalukantDaemonStatus() {
      console.log('⚠️ Daemon WebSocket deaktiviert - Status nicht verfügbar');
    },
    handleDaemonMessage(event) {
      console.log('⚠️ Daemon WebSocket deaktiviert - keine Nachrichten verarbeitet');
    }
  }
};
</script>

<style scoped>
.app-footer {
  flex: 0 0 auto;
  padding: 0;
}

.app-footer__inner {
  max-width: var(--shell-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(242, 248, 243, 0.96) 0%, rgba(224, 238, 227, 0.98) 100%);
  border-top: 1px solid rgba(120, 195, 138, 0.28);
  box-shadow: 0 -6px 18px rgba(93, 64, 55, 0.06);
}

.footer-brand {
  min-height: 32px;
  padding: 0 10px 0 8px;
  background: rgba(120, 195, 138, 0.12);
  border: 1px solid rgba(120, 195, 138, 0.22);
  color: #24523a;
  box-shadow: none;
}

.footer-brand:hover {
  background: rgba(120, 195, 138, 0.18);
  box-shadow: none;
}

.footer-brand img {
  width: 22px;
  height: 22px;
}

.footer-brand span {
  font-weight: 700;
}

.window-bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  overflow: auto;
}

.dialog-button {
  max-width: 15em;
  min-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-text-primary);
  border: 1px solid rgba(120, 195, 138, 0.18);
  box-shadow: none;
}

.dialog-button:hover {
  background: rgba(255, 255, 255, 0.92);
}

.dialog-button>img {
  height: 16px;
}

.button-text {
  margin-left: 5px;
}

.static-block {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}

.static-block>a {
  color: #42634e;
  font-weight: 600;
}

.static-block > a:hover {
  color: #24523a;
}

@media (max-width: 960px) {
  .app-footer__inner {
    flex-wrap: wrap;
  }

  .window-bar,
  .static-block {
    width: 100%;
  }

  .static-block {
    justify-content: space-between;
    gap: 12px;
  }
}
</style>