yourpart3/frontend/src/components/AppHeader.vue

<template>
  <header class="app-header">
    <div class="app-header__inner">
      <div class="brand">
        <div class="logo"><img src="/images/logos/logo.png" alt="YourPart" /></div>
        <div class="brand-copy">
          <strong>YourPart</strong>
          <span>Community-Plattform</span>
        </div>
      </div>
      <div class="header-meta">
        <div class="header-meta__context">
          <span class="header-pill">Beta</span>
        </div>
        <div class="connection-status" v-if="isLoggedIn">
          <div class="status-indicator" :class="backendStatusClass">
            <span class="status-dot"></span>
            <span class="status-text">Backend</span>
          </div>
          <div class="status-indicator" :class="daemonStatusClass">
            <span class="status-dot"></span>
            <span class="status-text">Daemon</span>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

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

export default {
  name: 'AppHeader',
  computed: {
    ...mapGetters(['isLoggedIn', 'connectionStatus', 'daemonConnectionStatus']),
    backendStatusClass() {
      return {
        'status-connected': this.connectionStatus === 'connected',
        'status-connecting': this.connectionStatus === 'connecting',
        'status-disconnected': this.connectionStatus === 'disconnected',
        'status-error': this.connectionStatus === 'error'
      };
    },
    daemonStatusClass() {
      return {
        'status-connected': this.daemonConnectionStatus === 'connected',
        'status-connecting': this.daemonConnectionStatus === 'connecting',
        'status-disconnected': this.daemonConnectionStatus === 'disconnected',
        'status-error': this.daemonConnectionStatus === 'error'
      };
    }
  }
};
</script>

<style scoped>
.app-header {
  position: relative;
  flex: 0 0 auto;
  padding: 6px 14px;
  background:
    linear-gradient(180deg, rgba(255, 249, 240, 0.96) 0%, rgba(246, 236, 220, 0.98) 100%);
  color: #2b1f14;
  border-bottom: 1px solid rgba(93, 64, 55, 0.12);
  box-shadow: 0 5px 14px rgba(93, 64, 55, 0.06);
}

.app-header__inner {
  max-width: var(--shell-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.logo {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(248, 162, 43, 0.18) 0%, rgba(255, 255, 255, 0.76) 100%);
  border: 1px solid rgba(248, 162, 43, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.logo > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.brand-copy strong {
  font-size: 1rem;
  line-height: 1.1;
  color: #3a2a1b;
}

.brand-copy span {
  font-size: 0.74rem;
  color: rgba(95, 75, 57, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-meta__context {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-pill {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(248, 162, 43, 0.14);
  border: 1px solid rgba(248, 162, 43, 0.24);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a5411;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid rgba(93, 64, 55, 0.1);
  background: rgba(255, 255, 255, 0.62);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-connected .status-dot {
  background-color: #4caf50;
}

.status-connecting .status-dot {
  background-color: #ff9800;
}

.status-disconnected .status-dot {
  background-color: #f44336;
}

.status-error .status-dot {
  background-color: #f44336;
}

.status-connected {
  background-color: rgba(76, 175, 80, 0.12);
  color: #245b2c;
}

.status-connecting {
  background-color: rgba(255, 152, 0, 0.12);
  color: #8b5e0d;
}

.status-disconnected {
  background-color: rgba(244, 67, 54, 0.12);
  color: #8f2c27;
}

.status-error {
  background-color: rgba(244, 67, 54, 0.12);
  color: #8f2c27;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

@media (max-width: 960px) {
  .app-header {
    padding: 6px 10px;
  }

  .app-header__inner {
    gap: 10px;
    flex-wrap: wrap;
  }

  .header-meta {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .header-meta__context {
    flex-wrap: wrap;
  }

  .brand-copy span {
    font-size: 0.76rem;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .app-header__inner {
    align-items: flex-start;
  }

  .brand {
    width: 100%;
  }

  .header-meta {
    gap: 8px;
  }

  .connection-status {
    width: 100%;
    flex-wrap: wrap;
  }

  .status-indicator {
    min-height: 32px;
  }
}
</style>