Refactor backend CORS settings to include default origins and improve error handling in chat services: Introduce dynamic CORS origin handling, enhance RabbitMQ message sending with fallback mechanisms, and update WebSocket service to manage pending messages. Update UI components for better accessibility and responsiveness, including adjustments to dialog and navigation elements. Enhance styling for improved user experience across various components.

frontend/src/views/social/VocabLanguageView.vue

@@ -1,32 +1,36 @@
 <template>
-  <h2>{{ $t('socialnetwork.vocab.languageTitle', { name: language?.name || '' }) }}</h2>
+  <div class="vocab-language-view">
+    <section class="vocab-language-hero surface-card">
+      <div v-if="loading">{{ $t('general.loading') }}</div>
+      <div v-else-if="!language">{{ $t('socialnetwork.vocab.notFound') }}</div>
+      <div v-else>
+        <span class="vocab-language-kicker">Sprache</span>
+        <h2>{{ $t('socialnetwork.vocab.languageTitle', { name: language?.name || '' }) }}</h2>
+        <p>Kapitel, Suchfunktionen und Freigaben fuer diese Sprache an einem Ort.</p>
+      </div>
+    </section>
 
-  <div class="box">
-    <div v-if="loading">{{ $t('general.loading') }}</div>
-    <div v-else-if="!language">{{ $t('socialnetwork.vocab.notFound') }}</div>
-    <div v-else>
-      <div class="row">
-        <strong>{{ $t('socialnetwork.vocab.languageName') }}:</strong>
+    <div class="box surface-card" v-if="language">
+      <div class="row row--meta">
+        <strong>{{ $t('socialnetwork.vocab.languageName') }}</strong>
         <span>{{ language.name }}</span>
       </div>
 
-      <div class="row" v-if="language.isOwner && language.shareCode">
-        <strong>{{ $t('socialnetwork.vocab.shareCode') }}:</strong>
+      <div class="row row--meta" v-if="language.isOwner && language.shareCode">
+        <strong>{{ $t('socialnetwork.vocab.shareCode') }}</strong>
         <code>{{ language.shareCode }}</code>
       </div>
 
-      <div class="row">
+      <div class="row row--actions">
         <button @click="goSubscribe">{{ $t('socialnetwork.vocab.subscribeByCode') }}</button>
         <button @click="openSearch">{{ $t('socialnetwork.vocab.search.open') }}</button>
       </div>
 
-      <hr />
-
       <div class="row">
         <h3>{{ $t('socialnetwork.vocab.chapters') }}</h3>
       </div>
 
-      <div class="row" v-if="language.isOwner">
+      <div class="row row--create" v-if="language.isOwner">
         <label>
           {{ $t('socialnetwork.vocab.newChapter') }}
           <input v-model="newChapterTitle" type="text" />
@@ -39,11 +43,12 @@
       <div v-if="chaptersLoading">{{ $t('general.loading') }}</div>
       <div v-else>
         <div v-if="chapters.length === 0">{{ $t('socialnetwork.vocab.noChapters') }}</div>
-        <ul v-else>
+        <ul v-else class="chapter-list">
           <li v-for="c in chapters" :key="c.id">
-            <span class="click" @click="openChapter(c.id)">
-              {{ c.title }} <span class="count">({{ c.vocabCount }})</span>
-            </span>
+            <button type="button" class="chapter-card" @click="openChapter(c.id)">
+              <span>{{ c.title }}</span>
+              <span class="count">{{ c.vocabCount }}</span>
+            </button>
           </li>
         </ul>
       </div>
@@ -139,22 +144,81 @@ export default {
 </script>
 
 <style scoped>
+.vocab-language-view {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  padding-bottom: 24px;
+}
+
+.vocab-language-hero {
+  padding: 24px 26px;
+  margin-bottom: 16px;
+}
+
+.vocab-language-kicker {
+  display: inline-block;
+  margin-bottom: 10px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(248, 162, 43, 0.14);
+  color: #8a5411;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.vocab-language-hero p {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
 .box {
-  background: #f6f6f6;
-  padding: 12px;
-  border: 1px solid #ccc;
+  padding: 20px;
 }
 .row {
-  margin-bottom: 8px;
+  margin-bottom: 12px;
+}
+.row--meta {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.row--actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.row--create {
+  display: flex;
+  gap: 12px;
+  align-items: end;
+  flex-wrap: wrap;
 }
 .click {
   cursor: pointer;
   text-decoration: underline;
 }
+.chapter-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+.chapter-card {
+  width: 100%;
+  justify-content: space-between;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid var(--color-border);
+  box-shadow: none;
+  padding: 14px 16px;
+  border-radius: var(--radius-lg);
+  color: var(--color-text-primary);
+}
 .count {
-  color: #666;
+  color: var(--color-text-muted);
   font-size: 0.9em;
 }
 </style>
-
-