Add local-first SPA architecture and containerized production deploy.

Move data access to use-cases and IndexedDB repositories with optional
remote fallback, changelog/sync ports, and encrypted local backup.
Add production Docker Compose (nginx frontend + optional backend) and
Apache host proxy configuration for deployment.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/NetworkMapTopPanel.vue

@@ -14,9 +14,10 @@
     <div class="network-map-header" v-show="!collapsed">
       <div>
         <h2>{{ title }}</h2>
-        <p class="network-map-sub">{{ subtitle }}</p>
+        <p v-if="subtitle" class="network-map-sub">{{ subtitle }}</p>
       </div>
-      <div class="flex gap-2">
+      <div class="network-map-actions">
+        <slot name="filters" />
         <button class="btn btn-secondary btn-sm" @click="$emit('fit')">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
@@ -26,10 +27,6 @@
       </div>
     </div>
 
-    <div class="network-map-toolbar" v-show="!collapsed">
-      <slot name="filters" />
-    </div>
-
     <div v-show="!collapsed">
       <slot name="legend" />
     </div>
@@ -42,8 +39,7 @@ defineProps({
   title: { type: String, default: 'Карта сети' },
   subtitle: {
     type: String,
-    default:
-      'Три круга — поддержка, продуктивность, развитие. Секторы — сферы жизни. Толстая линия — частые контакты, пунктир — редкие. Стрелка — от инициатора связи.',
+    default: '',
   },
 })
 defineEmits(['toggle-collapse', 'fit'])
@@ -80,7 +76,7 @@ defineEmits(['toggle-collapse', 'fit'])
   flex-shrink: 0;
   padding: 12px 28px 8px;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 16px;
 }
@@ -97,7 +93,15 @@ defineEmits(['toggle-collapse', 'fit'])
   line-height: 1.45;
 }
 .network-map-toolbar {
-  flex-shrink: 0;
-  padding: 0 28px 10px;
+  display: none;
+}
+.network-map-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  padding-left: 16px;
+  padding-right: 24px;
 }
 </style>

frontend/src/components/SearchableSelect.test.js

@@ -13,8 +13,8 @@ describe('SearchableSelect', () => {
       props: { modelValue: '', options, placeholder: 'Поиск' },
     })
     const input = wrapper.get('input')
-    await input.setValue('мария')
     await input.trigger('focus')
+    await input.setValue('мария')
 
     const items = wrapper.findAll('.searchable-select__option')
     expect(items).toHaveLength(1)