Add "docker compose down"

frontend/components.d.ts

@@ -11,6 +11,9 @@ declare module 'vue' {
     Appearance: typeof import('./src/components/settings/Appearance.vue')['default']
     ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
     ArraySelect: typeof import('./src/components/ArraySelect.vue')['default']
+    BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
+    BDropdownDivider: typeof import('bootstrap-vue-next')['BDropdownDivider']
+    BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
     BModal: typeof import('bootstrap-vue-next')['BModal']
     Confirm: typeof import('./src/components/Confirm.vue')['default']
     Container: typeof import('./src/components/Container.vue')['default']

frontend/src/lang/en.json

@@ -19,6 +19,7 @@
     "restartStack": "Restart",
     "updateStack": "Update",
     "startStack": "Start",
+    "downStack": "Stop & Down",
     "editStack": "Edit",
     "discardStack": "Discard",
     "saveStackDraft": "Save",

frontend/src/pages/Compose.vue

@@ -40,6 +40,13 @@
                         <font-awesome-icon icon="stop" class="me-1" />
                         {{ $t("stopStack") }}
                     </button>
+
+                    <BDropdown v-if="!isEditMode && active" right text="" variant="normal">
+                        <BDropdownItem @click="downStack">
+                            <font-awesome-icon icon="stop" class="me-1" />
+                            {{ $t("downStack") }}
+                        </BDropdownItem>
+                    </BDropdown>
                 </div>
 
                 <button v-if="isEditMode && !isAdd" class="btn btn-normal" :disabled="processing" @click="discardStack">{{ $t("discardStack") }}</button>
@@ -473,6 +480,15 @@ export default {
             });
         },
 
+        downStack() {
+            this.processing = true;
+
+            this.$root.getSocket().emit("downStack", this.stack.name, (res) => {
+                this.processing = false;
+                this.$root.toastRes(res);
+            });
+        },
+
         restartStack() {
             this.processing = true;