Refactor AddPattern.vue

src/App.vue

@@ -14,7 +14,6 @@
 			</div>
 		</div>
 		<Settings/>
-		<AddPattern/>
 		<LookBack ref="lookBack" />
 	</div>
 </template>
@@ -25,7 +24,6 @@
 
 	import Navbar from './components/Navbar';
 	import Settings from './views/Settings';
-	import AddPattern from './views/AddPattern';
 	import LookBack from './views/LookBack';
 	import SockJS from 'sockjs-client';
 	import {openDB,} from 'idb';
@@ -198,7 +196,6 @@
       },
 		},
 		components: {
-			AddPattern,
 			LookBack,
 			Settings,
 			Navbar,

src/components/PatternsDropdown.vue

@@ -54,11 +54,17 @@
 				</button>
 			</div>
 		</b-dropdown-item-button>
+
+		<AddPattern/>
 	</b-dropdown>
 </template>
+<!--suppress JSUnresolvedReference -->
 <script>
+	import PatternModal from '@/views/PatternModal.vue';
+
 	export default {
 		name: 'PatternsDropdown',
+		components: {AddPattern: PatternModal, },
 		mounted() {
 			this.updatePatterns();
 		},
@@ -84,7 +90,7 @@
 				return this.$store.state.services.find(o => o.port === port)?.name ?? '<Deleted service>'
 			},
 			showAddPattern() {
-				this.$bvModal.show('addPatternModal');
+				this.$bvModal.show('patternModal');
 			},
 			showLookBack(pattern) {
 				// Не знаю, как сделать это без костылей

src/views/PatternModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<b-modal @ok="addPattern" @cancel="reset" id="addPatternModal"
+	<b-modal @ok="addPattern" @cancel="reset" id="patternModal"
 			 title="Creating pattern"
 			 cancel-title="Cancel"
 			 centered scrollable>
@@ -164,7 +164,7 @@
 						console.debug('Done adding pattern', data);
 						this.$emit('patternAddComplete');
 						this.reset();
-						this.$bvModal.hide('addPatternModal');
+						this.$bvModal.hide('patternModal');
 					}).catch(e => {
 					this.$bvToast.toast(`Failed to add pattern: ${e}`, {
 						title: 'Error',