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/SearchView.vue

@@ -1,36 +1,52 @@
 <template>
     <div class="search-view">
-        <h2>{{ $t('socialnetwork.usersearch.title') }}</h2>
-        <form @submit.prevent="performSearch">
-            <div class="form-group">
-                <label for="username">{{ $t('socialnetwork.usersearch.username') }}:</label>
-                <input type="text" id="username" v-model="searchCriteria.username"
-                    :placeholder="$t('socialnetwork.usersearch.username')" />
+        <section class="search-hero surface-card">
+            <div>
+                <span class="search-kicker">Community-Suche</span>
+                <h2>{{ $t('socialnetwork.usersearch.title') }}</h2>
+                <p>Mit Namen, Alter und Geschlecht gezielt passende Kontakte in der Community finden.</p>
             </div>
+        </section>
 
-            <div class="form-group">
-                <label for="ageFrom">{{ $t('socialnetwork.usersearch.age_from') }}:</label>
-                <input type="number" id="ageFrom" v-model="searchCriteria.ageFrom" :min="14" :max="150"
-                    :placeholder="$t('socialnetwork.usersearch.age_from')" class="age-input" />
-                <label for="ageTo">{{ $t('socialnetwork.usersearch.age_to') }}:</label>
-                <input type="number" id="ageTo" v-model="searchCriteria.ageTo" :min="14" :max="150"
-                    :placeholder="$t('socialnetwork.usersearch.age_to')" class="age-input" />
+        <section class="search-form surface-card">
+            <form @submit.prevent="performSearch">
+                <div class="form-grid">
+                    <div class="form-group">
+                        <label for="username">{{ $t('socialnetwork.usersearch.username') }}</label>
+                        <input type="text" id="username" v-model="searchCriteria.username"
+                            :placeholder="$t('socialnetwork.usersearch.username')" />
+                    </div>
+
+                    <div class="form-group form-group--age">
+                        <label for="ageFrom">{{ $t('socialnetwork.usersearch.age_from') }}</label>
+                        <div class="age-range">
+                            <input type="number" id="ageFrom" v-model="searchCriteria.ageFrom" :min="14" :max="150"
+                                :placeholder="$t('socialnetwork.usersearch.age_from')" class="age-input" />
+                            <span class="age-separator">bis</span>
+                            <input type="number" id="ageTo" v-model="searchCriteria.ageTo" :min="14" :max="150"
+                                :placeholder="$t('socialnetwork.usersearch.age_to')" class="age-input" />
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="gender">{{ $t('socialnetwork.usersearch.gender') }}</label>
+                        <multiselect v-model="searchCriteria.gender" :options="genderOptions" :multiple="true"
+                            :close-on-select="false" :placeholder="$t('socialnetwork.usersearch.gender')" label="name"
+                            track-by="name" />
+                    </div>
+                </div>
+
+                <div class="form-actions">
+                    <button type="submit" class="search-button">{{ $t('socialnetwork.usersearch.search_button') }}</button>
+                </div>
+            </form>
+        </section>
+
+        <section class="search-results surface-card" v-if="searchResults.length">
+            <div class="results-header">
+                <h3>{{ $t('socialnetwork.usersearch.results_title') }}</h3>
+                <span class="results-count">{{ searchResults.length }} Treffer</span>
             </div>
-
-            <div class="form-group">
-                <label for="gender">{{ $t('socialnetwork.usersearch.gender') }}:</label>
-                <multiselect v-model="searchCriteria.gender" :options="genderOptions" :multiple="true"
-                    :close-on-select="false" :placeholder="$t('socialnetwork.usersearch.gender')" label="name"
-                    track-by="name" />
-            </div>
-
-            <div class="form-group">
-                <button type="submit" class="search-button">{{ $t('socialnetwork.usersearch.search_button') }}</button>
-            </div>
-        </form>
-
-        <div class="search-results" v-if="searchResults.length">
-            <h3>{{ $t('socialnetwork.usersearch.results_title') }}</h3>
             <table>
                 <thead>
                     <tr>
@@ -47,8 +63,8 @@
                     </tr>
                 </tbody>
             </table>
-        </div>
-        <div v-else class="no-results">
+        </section>
+        <div v-else class="no-results surface-card">
             {{ $t('socialnetwork.usersearch.no_results') }}
         </div>
     </div>
@@ -114,83 +130,117 @@ export default {
 
 <style scoped>
 .search-view {
-    max-width: 600px;
+    max-width: var(--content-max-width);
     margin: 0 auto;
-    padding: 0;
+    padding-bottom: 24px;
 }
 
-h2 {
+.search-hero,
+.search-form,
+.search-results,
+.no-results {
+    padding: 22px;
+    margin-bottom: 16px;
+}
+
+.search-kicker {
+    display: inline-block;
     margin-bottom: 10px;
-    text-align: center;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(120, 195, 138, 0.14);
+    color: #42634e;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.search-hero p {
+    margin: 0;
+    color: var(--color-text-secondary);
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px;
 }
 
 .form-group {
     display: flex;
-    align-items: center;
-    margin-bottom: 10px;
+    flex-direction: column;
+    gap: 8px;
 }
 
 label {
-    width: 120px;
-    font-weight: bold;
-    margin-right: 10px;
-    text-align: right;
+    font-weight: 700;
+    color: var(--color-text-secondary);
 }
 
-input,
-.multiselect__input {
-    flex: 1;
-    padding: 5px;
-    border-radius: 4px;
-    border: 1px solid #ccc;
+.age-range {
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
 .age-input {
-    width: 70px;
-    margin-right: 10px;
+    width: 100%;
 }
 
-.search-results {
-    margin-top: 20px;
+.age-separator {
+    color: var(--color-text-muted);
+    font-size: 0.88rem;
+    white-space: nowrap;
 }
 
-.search-results ul {
-    list-style-type: none;
-    padding: 0;
+.form-actions {
+    margin-top: 14px;
 }
 
-.search-results li {
-    padding: 8px;
-    background: #f9f9f9;
-    border-bottom: 1px solid #ddd;
+.results-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.results-count {
+    color: var(--color-text-muted);
+    font-size: 0.82rem;
+    font-weight: 700;
 }
 
 table {
+    width: 100%;
     margin: 0.5em 0;
     padding: 0;
     border-collapse: collapse;
+    background: rgba(255, 255, 255, 0.62);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
 }
 
 thead {
-    color: #7BBE55;
+    color: #42634e;
 }
+
 th, td {
-    padding-right: 1em;
-
+    padding: 12px 14px;
 }
 
-th, td:not:last-child {
-    border-bottom: 1px solid #7E471B;
+tbody tr + tr td {
+    border-top: 1px solid var(--color-border);
 }
 
 .clickable {
     cursor: pointer;
+    font-weight: 700;
 }
 
 .no-results {
-    margin-top: 20px;
     text-align: center;
-    color: #888;
+    color: var(--color-text-secondary);
 }
 
 .g-male {
@@ -200,4 +250,14 @@ th, td:not:last-child {
 .g-female {
     color: #ff3377;
 }
+
+@media (max-width: 960px) {
+    .form-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .age-range {
+        flex-wrap: wrap;
+    }
+}
 </style>