From 2b550585337656a5466cf2ae11fdd348074256ba Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Mon, 8 Nov 2021 14:18:27 +0100
Subject: [PATCH 01/24] refactor(appbar): change buttons to new design

---
 src/components/TheSettingsMenu.vue  |  2 +-
 src/components/TheTopCornerMenu.vue |  2 +-
 src/components/TheTopbar.vue        | 18 ++++++++++++------
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/TheSettingsMenu.vue b/src/components/TheSettingsMenu.vue
index 8caf3d176..4c1f27c71 100644
--- a/src/components/TheSettingsMenu.vue
+++ b/src/components/TheSettingsMenu.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-btn color="grey darken-3" class="ml-5 minwidth-0 px-2" @click="showSettings = true">
+        <v-btn icon tile large @click="showSettings = true">
             <v-icon>mdi-cogs</v-icon>
         </v-btn>
         <v-dialog v-model="showSettings" width="900" persistent hide-overlay :fullscreen="isMobile">
diff --git a/src/components/TheTopCornerMenu.vue b/src/components/TheTopCornerMenu.vue
index 602c8f231..6440766d4 100644
--- a/src/components/TheTopCornerMenu.vue
+++ b/src/components/TheTopCornerMenu.vue
@@ -8,7 +8,7 @@
     <div>
         <v-menu bottom left :offset-y="true" :close-on-content-click="false" v-model="showMenu">
             <template v-slot:activator="{ on, attrs }">
-                <v-btn color="grey darken-3" v-bind="attrs" v-on="on" class="ml-5 minwidth-0 px-2">
+                <v-btn icon tile large v-bind="attrs" v-on="on">
                     <v-icon>mdi-power-standby</v-icon>
                 </v-btn>
             </template>
diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index 0eade46b4..aa1b8ab00 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -11,30 +11,36 @@
             <v-spacer></v-spacer>
             <the-throttled-states></the-throttled-states>
             <input type="file" ref="fileUploadAndStart" :accept="validGcodeExtensions.join(', ')" style="display: none" @change="uploadAndStart" />
-            <v-btn
+            <v-btn tile large
+                :icon="$vuetify.breakpoint.smAndDown"
+                :text="$vuetify.breakpoint.mdAndUp"
                 color="primary"
-                class="mr-5 button-min-width-auto px-3 d-none d-sm-flex"
+                class="button-min-width-auto px-3 d-none d-sm-flex"
                 v-if="klippyIsConnected && saveConfigPending"
                 :disabled="printerIsPrinting"
                 :loading="loadings.includes('topbarSaveConfig')"
                 @click="saveConfig">
                 <v-icon class="d-md-none">mdi-content-save</v-icon><span class="d-none d-md-inline">{{ $t("App.TopBar.SAVE_CONFIG") }}</span>
             </v-btn>
-            <v-btn
+            <v-btn tile large
+                :icon="$vuetify.breakpoint.smAndDown"
+                :text="$vuetify.breakpoint.mdAndUp"
                 color="primary"
-                class="mr-5 button-min-width-auto px-3 d-none d-sm-flex"
+                class="button-min-width-auto px-3 d-none d-sm-flex file-upload-and-start"
                 v-if="klippyIsConnected && ['standby', 'complete', 'cancelled'].includes(printer_state)"
                 :loading="loadings.includes('btnUploadAndStart')"
                 @click="btnUploadAndStart">
                 <v-icon class="mr-md-2">mdi-file-upload</v-icon><span class="d-none d-md-inline">{{ $t("App.TopBar.UploadPrint") }}</span>
             </v-btn>
-            <v-btn
+            <v-btn tile large
+                :icon="$vuetify.breakpoint.smAndDown"
+                :text="$vuetify.breakpoint.mdAndUp"
                 color="error"
                 class="button-min-width-auto px-3"
                 v-if="klippyIsConnected"
                 :loading="loadings.includes('topbarEmergencyStop')"
                 @click="btnEmergencyStop">
-                <v-icon class="mr-md-2">mdi-alert-circle-outline</v-icon><span class="d-none d-md-flex">{{ $t("App.TopBar.EmergencyStop") }}</span>
+                <v-icon class="mr-md-2">mdi-alert-circle-outline</v-icon><span class="d-none d-md-inline">{{ $t("App.TopBar.EmergencyStop") }}</span>
             </v-btn>
             <the-settings-menu></the-settings-menu>
             <the-top-corner-menu></the-top-corner-menu>

From ff1437aef83dfb03b259901c94624f26daf3ee70 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Mon, 8 Nov 2021 17:05:09 +0100
Subject: [PATCH 02/24] refactor(appbar): change height and add pritnername

---
 src/components/TheTopbar.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index aa1b8ab00..543bc7339 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -6,8 +6,10 @@
 
 <template>
     <div>
-        <v-app-bar app elevate-on-scroll>
+        <v-app-bar app elevate-on-scroll height="48px">
             <v-app-bar-nav-icon @click.stop="naviDrawer = !naviDrawer"></v-app-bar-nav-icon>
+            <v-app-bar-title v-if="!isBigDrawer" class="text-no-wrap">{{ printerName }}</v-app-bar-title>
+            <!-- printer Farm Button goes here -->
             <v-spacer></v-spacer>
             <the-throttled-states></the-throttled-states>
             <input type="file" ref="fileUploadAndStart" :accept="validGcodeExtensions.join(', ')" style="display: none" @change="uploadAndStart" />
@@ -160,6 +162,17 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         return this.$store.state.printer.configfile?.save_config_pending ?? false
     }
 
+    get printerName():string {
+        if (this.$store.state.gui.general.printername.length)
+            return this.$store.state.gui.general.printername
+
+        return this.$store.state.printer.hostname
+    }
+
+    get isBigDrawer():boolean {
+        return false
+    }
+
     btnEmergencyStop() {
         const confirmOnEmergencyStop = this.$store.state.gui.general.confirmOnEmergencyStop
         if (confirmOnEmergencyStop) {

From e78ed572ca69875eabcd1277119587fdccf11488 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Tue, 9 Nov 2021 11:23:02 +0100
Subject: [PATCH 03/24] refactor: small sidebar

---
 src/components/TheSidebar.vue                 | 146 +++++++++++-------
 .../settings/SettingsUiSettingsTab.vue        |  12 ++
 src/locales/en.json                           |   2 +
 src/store/gui/index.ts                        |   1 +
 4 files changed, 103 insertions(+), 58 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index fecc3330d..2439ce2ec 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -1,66 +1,93 @@
 <style>
-    .sidebar-wrapper .v-navigation-drawer__content {
-        padding-bottom: 3em;
+    .nav-logo {
+        height: 32px;
     }
-
-    #sidebarVersions {
-        position: absolute;
-        left: 0;
-        bottom: 0;
+    .small-list-item {
+        height: 48px;
     }
-
-    @media screen and (max-width: 1024px) {
-        .sidebar-wrapper .v-navigation-drawer__content {
-            padding-bottom: 0;
-        }
-
-        #sidebarVersions {
-            display: none;
-        }
+    .no-text-decoration {
+        text-decoration: none;
+        background-color: transparent;
+    }
+    .no-background:before {
+        background-color: rgba(255, 255, 255, 0) !important;
+    }
+</style>
+<style scoped>
+    .active-nav-item {
+        border-right: 4px solid var(--v-primary-base);
+    }
+    .nowrap {
+        white-space: nowrap !important;
     }
 </style>
 
 <template>
-    <v-navigation-drawer class="sidebar-wrapper" persistent v-model="naviDrawer" mobile-breakpoint="1280" enable-resize-watcher fixed app :src="sidebarBackground">
-        <div id="nav-header">
-            <template v-if="sidebarLogo">
-                <img :src="sidebarLogo" style="height: 40px;" class="mr-3" alt="Logo" />
-            </template>
-            <template v-else>
-                <mainsail-logo :color="logoColor" style="height: 40px;" class="mr-3"></mainsail-logo>
-            </template>
-            <v-toolbar-title>{{ printerName }}</v-toolbar-title>
-        </div>
-        <ul class="navi" :expand="$vuetify.breakpoint.mdAndUp">
-            <the-sidebar-printer-menu></the-sidebar-printer-menu>
-            <li v-for="(category, index) in naviPoints" :key="index" :prepend-icon="category.icon"
-                :class="[category.path !== '/' && currentPage.includes(category.path) ? 'active' : '', 'nav-item']"
-                :value="true"
-            >
-                <router-link
-                    style="position: relative;"
-                    slot="activator" class="nav-link" exact :to="category.path" @click.prevent
-                    v-if="showInNavi(category)">
-                    <v-icon>mdi-{{ category.icon }}</v-icon>
-                    <span class="nav-title">{{ $t(`Router.${category.title}`) }}</span>
-                    <v-icon class="nav-arrow" v-if="category.children && category.children.length > 0">mdi-chevron-down</v-icon>
-                </router-link>
-
-                <ul class="child">
-                    <li v-for="(page, pageIndex) in category.children" class="nav-item" v-bind:key="`${index}-${pageIndex}`">
-                        <router-link :to="page.path" class="nav-link" @click.prevent v-if="klippy_state !== 'error' || page.alwaysShow">
-                            <v-icon>mdi-{{ page.icon }}</v-icon>
-                            <span class="nav-title">{{ $t(`Router.${page.title}`) }}</span>
-                        </router-link>
-                    </li>
-                </ul>
-            </li>
-        </ul>
-        <p id="sidebarVersions" class="mb-0 text-body-2 pl-3 pb-2">
-            v{{ mainsailVersion }}
-            <span class="" v-if="klipperVersion"><br />{{ klipperVersion }}</span>
-        </p>
-    </v-navigation-drawer>
+    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="!boolWideNavDrawer" :key="boolWideNavDrawer ? 'wide' : 'mini'" width="200px" app> 
+        <v-list-item class="pa-0 justify-center no-text-decoration no-background small-list-item" style="height:48px;" router to="/" :ripple="false">
+            <v-list-item-content tile>
+                <template v-if="sidebarLogo">
+                    <img :src="sidebarLogo" style="height: 32px;" class="mr-3 nav-logo" alt="Logo" />
+                </template>
+                <template v-else>
+                    <mainsail-logo :color="logoColor" style="height: 32px;" class="mr-3 nav-logo"></mainsail-logo>
+                </template>
+            </v-list-item-content>
+        </v-list-item>
+        <v-divider></v-divider>
+        <v-list class="pr-0 pt-0 ml-0">
+            <v-list-item-group active-class="active-nav-item">
+                <div v-for="(category, index) in naviPoints" :key="index"> 
+                    <v-list-item 
+                        router :to="category.path"
+                        v-if="showInNavi(category)"
+                        class="small-list-item"
+                    >
+                        <v-list-item-icon>
+                            <v-icon>mdi-{{ category.icon }}</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-content>
+                            <v-list-item-title tile>{{ $t(`Router.${category.title}`) }}</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                </div>
+            </v-list-item-group>
+        </v-list>
+        <template v-slot:append>
+            <v-list-item class="small-list-item mb-2">
+                <template v-if="!boolWideNavDrawer">
+                    <!-- <v-list-item-icon>
+                        <v-menu right offset-x open-on-hover>
+                            <template v-slot:activator="{ on, attrs }">
+                                <v-icon v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave">mdi-help-circle-outline</v-icon>
+                            </template>
+                            <v-card>
+                                -- Logos  hier mit rein, damit man erkennt welche version für was steht :) --
+                                <div overflow-hidden class="nowrap body-2" id="mainsailVersion" > v{{ mainsailVersion }}</div>
+                                <div overflow-hidden class="nowrap body-2" id="klipperVersion" v-if="klipperVersion" >{{ klipperVersion }}</div>
+                            </v-card>
+                        </v-menu>
+                    </v-list-item-icon> -->
+
+                    <v-list-item-icon>
+                        <v-tooltip right color="panel">
+                            <template v-slot:activator="{ on, attrs }">
+                                <v-icon v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave">mdi-help-circle-outline</v-icon>
+                            </template>
+                            <span class="dark"><!-- Logos  hier mit rein, damit man erkennt welche version für was steht :) -->v{{ mainsailVersion }}<br />{{ klipperVersion }}</span>
+                        </v-tooltip>
+                    </v-list-item-icon>
+
+                </template>
+                <template v-else-if="boolWideNavDrawer">
+                    <v-list-item-content>
+                        <div overflow-hidden class="nowrap body-2" id="mainsilVersion" > v{{ mainsailVersion }}</div>
+                        <div overflow-hidden class="nowrap body-2" id="klipperVersion" v-if="klipperVersion" >{{ klipperVersion }}</div>
+                    </v-list-item-content>
+                </template>
+            </v-list-item>
+        </template>
+    </v-navigation-drawer>  
 </template>
 
 <script lang="ts">
@@ -81,12 +108,15 @@ import MainsailLogo from '@/components/ui/MainsailLogo.vue'
 
     }
 })
-export default class TheSidebar extends Mixins(BaseMixin) {
-
+export default class TheSidebarAlt extends Mixins(BaseMixin) {
     get naviDrawer(): boolean {
         return this.$store.state.naviDrawer
     }
 
+    get boolWideNavDrawer() {
+        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
+    }
+
     set naviDrawer(newVal: boolean) {
         this.$store.dispatch('setNaviDrawer', newVal)
     }
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index a63046a4c..878916480 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -59,6 +59,9 @@
                 <settings-row :title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChange')" :sub-title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChangeDescription')" :dynamicSlotWidth="true">
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0"></v-switch>
                 </settings-row>
+                <settings-row :title="$t('Settings.UiSettingsTab.BoolWideNavDrawer')" :sub-title="$t('Settings.UiSettingsTab.BoolWideNavDrawerDescription')" :dynamicSlotWidth="true">
+                    <v-switch v-model="boolWideNavDrawer" hide-details class="mt-0"></v-switch>
+                </settings-row>
             </v-card-text>
         </v-card>
     </div>
@@ -143,6 +146,15 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', {name: 'general.confirmOnPowerDeviceChange', value: newVal })
     }
 
+
+    get boolWideNavDrawer() {
+        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
+    }
+
+    set boolWideNavDrawer(newVal) {
+        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.boolWideNavDrawer', value: newVal })
+    }
+
     clearColorObject(color: any): string {
         if (typeof color === 'object' && 'hex' in color)
             color = color.hex
diff --git a/src/locales/en.json b/src/locales/en.json
index aee8b5f75..1bc671043 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -669,6 +669,8 @@
 			"ShowWebcamInNavigation": "Show Webcam in navigation",
 			"BoolBigThumbnail": "Large thumbnail",
 			"BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
+			"BoolWideNavDrawer": "Wide Navigation Drawer",
+			"BoolWideNavDrawerDescription": "Display a wider Navigation Toolbar",
 			"DisplayCANCEL_PRINT": "Display CANCEL_PRINT",
 			"DisplayCANCEL_PRINTDescription": "Shows the CANCEL_PRINT button permanently - no second layer confirmation needed.",
 			"DisplayZOffset": "Show Z-Offset-Panel",
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 1e4daf946..66355f830 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -27,6 +27,7 @@ export const getDefaultState = (): GuiState => {
         dashboard: {
             boolTempchart: true,
             boolBigThumbnail: true,
+            boolWideNavDrawer: false,
             macroManagement: 'simple',
             hiddenMacros: [],
             macrogroups: [],

From 11a9a8e4ab0071c74166618d6ad7e46fdffb25d7 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Tue, 9 Nov 2021 11:25:35 +0100
Subject: [PATCH 04/24] refactor(vuetify): define parts of the mainsail theme
 and expose colors to css

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/plugins/vuetify.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index cc5312fa9..68a80cbb5 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -6,7 +6,16 @@ import Vuetify from 'vuetify/lib'
 Vue.use(Vuetify)
 
 export default new Vuetify({
-    theme: { dark: true },
+    theme: { 
+        dark: true,
+        themes: {
+            dark: {
+                panel: '#1e1e1e',
+                toolbar: '#272727'
+            }
+        },
+        options: { customProperties: true },
+    },
     icons: {
         iconfont: 'mdi',
     },

From 413e6429fae30763089f95ade793c08f3f8b5806 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Tue, 9 Nov 2021 13:39:18 +0100
Subject: [PATCH 05/24] refactor: ui settings add missing divider

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/settings/SettingsUiSettingsTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index 878916480..60aa47169 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -59,6 +59,7 @@
                 <settings-row :title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChange')" :sub-title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChangeDescription')" :dynamicSlotWidth="true">
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0"></v-switch>
                 </settings-row>
+                <v-divider class="my-2"></v-divider>
                 <settings-row :title="$t('Settings.UiSettingsTab.BoolWideNavDrawer')" :sub-title="$t('Settings.UiSettingsTab.BoolWideNavDrawerDescription')" :dynamicSlotWidth="true">
                     <v-switch v-model="boolWideNavDrawer" hide-details class="mt-0"></v-switch>
                 </settings-row>
@@ -146,7 +147,6 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', {name: 'general.confirmOnPowerDeviceChange', value: newVal })
     }
 
-
     get boolWideNavDrawer() {
         return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
     }

From 46bb74937431814b8ec0ce5471a3238fb173a627 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Tue, 9 Nov 2021 20:12:15 +0100
Subject: [PATCH 06/24] refactor: add farm printer selection and menu to new
 top and sidebar, added icons to version-tooltip

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 public/img/klipper.svg                | 113 ++++++++++++++++++++++++++
 src/components/TheSidebar.vue         |  26 +++++-
 src/components/TheTopbar.vue          |  16 ++--
 src/components/ui/PrinterSelector.vue |  66 +++++++++++++++
 4 files changed, 214 insertions(+), 7 deletions(-)
 create mode 100644 public/img/klipper.svg
 create mode 100644 src/components/ui/PrinterSelector.vue

diff --git a/public/img/klipper.svg b/public/img/klipper.svg
new file mode 100644
index 000000000..c8125b81c
--- /dev/null
+++ b/public/img/klipper.svg
@@ -0,0 +1,113 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100%"
+   height="100%"
+   viewBox="0 0 768 624"
+   version="1.1"
+   xml:space="preserve"
+   style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"
+   id="svg40"
+   sodipodi:docname="klipper.svg"
+   inkscape:version="0.92.4 (unknown)"
+   inkscape:export-filename="/home/kevin/src/reprap/firmware/klipper/logs/logo-20190416/klipper6.svg.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"><metadata
+   id="metadata46"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+   id="defs44">
+        </defs><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1030"
+   id="namedview42"
+   showgrid="false"
+   inkscape:zoom="0.95"
+   inkscape:cx="327.89418"
+   inkscape:cy="289.76441"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg40"
+   showguides="false"
+   showborder="false"><inkscape:grid
+     type="xygrid"
+     id="grid905" /></sodipodi:namedview>
+    <path
+   style="fill:#3c4b5a"
+   d="m 30,34 v 140 l 260,255 115,-5 h 80 L 730,174 V 34 H 720 L 385,374 40,34 Z"
+   id="path2"
+   inkscape:connector-curvature="0"
+   sodipodi:nodetypes="ccccccccccc" /><path
+   style="fill:#3c4b5a;stroke-width:1.03280997"
+   d="m 140,418 -58,57 1,25 v 19 l 57,57 h 27 v -1 L 91,496.5 167,419 v -1 z"
+   id="path8"
+   inkscape:connector-curvature="0"
+   sodipodi:nodetypes="ccccccccccc" /><g
+   transform="translate(-1.08348e-4,0.048)"
+   id="g17">
+                <path
+   d="m 83.041215,464.92108 h 0.001 l -0.04211,27.03092 h 11 l 73.000005,-74 v 14.301 l -63,64.199 63,65.5 v 14 l -73.000002,-75 h -13 c -2,0 -4,-2 -4,-4 h -2 v -33 h 2 c 0,-1 1,-2 3.00004,-2 1.99996,0 2.99996,1 2.99996,2 z"
+   style="fill:#b12f35"
+   id="path15"
+   inkscape:connector-curvature="0"
+   sodipodi:nodetypes="cccccccccccccccccc" />
+            </g><g
+   id="path839"
+   transform="matrix(1.03281,0,0,1.0326797,24.31099,-21.921569)">
+                <rect
+   x="21"
+   y="426"
+   width="30.015202"
+   height="153"
+   style="fill:#3c4b5a;fill-rule:nonzero"
+   id="rect12" />
+            </g><rect
+   x="247"
+   y="469"
+   width="24"
+   height="107"
+   style="fill:#3c4b5a;stroke-width:1.19609642"
+   id="rect23" /><path
+   d="m 371.98888,521.45953 c 0,-10.8903 -2.45322,-19.36013 -7.36207,-25.4107 -4.90765,-6.05057 -12.80741,-9.07465 -23.69929,-9.07465 -2.28639,0 -4.6724,0.10081 -7.16044,0.30241 -2.48802,0.20161 -4.94125,0.63842 -7.36207,1.31044 v 60.29926 c 2.15197,1.47844 5.00967,2.85727 8.57188,4.13411 3.56342,1.27684 7.36208,1.91526 11.39597,1.91526 8.87554,0 15.36385,-3.02409 19.46496,-9.07465 4.10111,-6.05057 6.15106,-14.18439 6.15106,-24.40148 z M 397,521.05632 c 0,8.06663 -1.04178,15.46123 -3.12654,22.18261 -2.08476,6.72259 -5.07568,12.50434 -8.97515,17.34409 -3.89947,4.83973 -8.77472,8.60423 -14.62333,11.29351 -5.8498,2.68927 -12.47254,4.0333 -19.86702,4.0333 -4.97606,0 -9.54765,-0.60481 -13.71597,-1.81445 -4.16832,-1.21082 -7.59731,-2.55487 -10.28698,-4.03451 V 611 H 302 V 471.64736 c 4.97486,-1.34524 11.09352,-2.62207 18.35477,-3.83171 C 327.61602,466.60482 335.28055,466 343.34834,466 c 8.33664,0 15.79953,1.27684 22.38866,3.83171 6.58794,2.55487 12.20251,6.21857 16.84131,10.9911 4.6388,4.77253 8.20221,10.5543 10.69024,17.34408 2.48684,6.78859 3.73145,14.4184 3.73145,22.88943 z"
+   style="fill:#3c4b5a;fill-rule:nonzero;stroke-width:1.20011997"
+   id="path25"
+   inkscape:connector-curvature="0" /><path
+   d="m 492.9892,521.45953 c 0,-10.8903 -2.4544,-19.36013 -7.36198,-25.4107 -4.90759,-6.05057 -12.80725,-9.07465 -23.699,-9.07465 -2.28636,0 -4.67354,0.10081 -7.16034,0.30241 -2.488,0.20161 -4.94119,0.63842 -7.36197,1.31044 v 60.29926 c 2.15074,1.47844 5.00839,2.85727 8.57176,4.13411 3.56337,1.27684 7.36198,1.91526 11.39582,1.91526 8.87423,0 15.36246,-3.02409 19.46352,-9.07465 4.10106,-6.05057 6.15219,-14.18439 6.15219,-24.40148 z M 518,521.05632 c 0,8.06663 -1.04297,15.46123 -3.1265,22.18261 -2.08474,6.72259 -5.07681,12.50434 -8.97624,17.34409 -3.89942,4.83973 -8.77341,8.60423 -14.62314,11.29351 -5.84854,2.68927 -12.47119,4.0333 -19.86677,4.0333 -4.9748,0 -9.54633,-0.60481 -13.7146,-1.81445 -4.16827,-1.21082 -7.59722,-2.55487 -10.28684,-4.03451 V 611 H 423 V 471.64736 c 4.97599,-1.34524 11.09337,-2.62207 18.35454,-3.83171 C 448.61569,466.60482 456.28012,466 464.34782,466 c 8.33773,0 15.80052,1.27684 22.38838,3.83171 6.58905,2.55487 12.20235,6.21857 16.84229,10.9911 4.63875,4.77253 8.20211,10.5543 10.69012,17.34408 2.48679,6.78859 3.73139,14.4184 3.73139,22.88943 z"
+   style="fill:#3c4b5a;fill-rule:nonzero;stroke-width:1.20011246"
+   id="path27"
+   inkscape:connector-curvature="0" /><path
+   d="m 537,521.00591 c 0,-9.30123 1.37492,-17.45591 4.12595,-24.46521 2.74984,-7.00931 6.40632,-12.83838 10.96942,-17.48839 4.56191,-4.65121 9.79451,-8.15587 15.699,-10.51396 5.90328,-2.3593 11.94191,-3.53835 18.11469,-3.53835 14.49054,0 25.79531,4.51527 33.91308,13.5458 8.11897,9.03174 12.17786,22.51016 12.17786,40.43768 0,1.34749 -0.0335,2.8646 -0.1006,4.54896 -0.0671,1.68555 -0.16768,3.20147 -0.30182,4.55015 h -69.43942 c 0.67068,8.49155 3.65646,15.06171 8.95733,19.71294 5.29967,4.65001 12.98149,6.97562 23.04547,6.97562 5.9033,0 11.30477,-0.5402 16.20202,-1.61818 4.89726,-1.07799 8.75493,-2.22335 11.57304,-3.43729 l 3.22052,20.01612 c -1.34138,0.67495 -3.18699,1.38237 -5.53561,2.12349 -2.34742,0.74112 -5.03139,1.41485 -8.05071,2.02242 -3.01811,0.60637 -6.27217,1.11168 -9.76096,1.51592 -3.4888,0.40425 -7.04467,0.60637 -10.66761,0.60637 -9.25915,0 -17.30985,-1.38116 -24.15211,-4.14471 -6.84346,-2.76354 -12.47968,-6.60507 -16.90744,-11.52457 -4.42778,-4.91951 -7.71537,-10.7161 -9.86278,-17.38854 C 538.0731,536.27095 537,528.95845 537,521.00591 Z m 70.64548,-10.91821 c 0,-3.36991 -0.46948,-6.57138 -1.40846,-9.60442 -0.93897,-3.03303 -2.31508,-5.66063 -4.12595,-7.88517 -1.81207,-2.22335 -4.02535,-3.97627 -6.64226,-5.25638 -2.61689,-1.28131 -5.73561,-1.92137 -9.35855,-1.92137 -3.75708,0 -7.04466,0.70743 -9.86278,2.1235 -2.8181,1.41484 -5.19906,3.26883 -7.14527,5.55956 -1.94501,2.29192 -3.45526,4.92071 -4.52837,7.88516 -1.0731,2.96567 -1.81206,5.99871 -2.21447,9.09912 z"
+   style="fill:#3c4b5a;fill-rule:nonzero;stroke-width:1.20038378"
+   id="path29"
+   inkscape:connector-curvature="0" /><path
+   d="m 717.7869,492.26931 c -2.00567,-0.67394 -4.78138,-1.38159 -8.32593,-2.12292 -3.54453,-0.74135 -7.65736,-1.11202 -12.33845,-1.11202 -2.67542,0 -5.51799,0.26957 -8.52649,0.80874 -3.0097,0.53915 -5.11684,1.01091 -6.32025,1.41528 V 576 H 658 V 475.28104 c 4.68109,-1.75347 10.53216,-3.40464 17.55439,-4.95472 C 682.57663,468.77504 690.36771,468 698.92762,468 c 1.60574,0 3.47769,0.10109 5.61827,0.30328 2.13938,0.20218 4.27996,0.47176 6.42053,0.80873 2.13939,0.33697 4.2131,0.74255 6.21878,1.21431 2.00687,0.47176 3.6114,0.90983 4.8148,1.3142 z"
+   style="fill:#3c4b5a;fill-rule:nonzero;stroke-width:1.19865453"
+   id="path31"
+   inkscape:connector-curvature="0" /><path
+   sodipodi:nodetypes="cccccccccccccc"
+   d="M 259,424 H 360 V 359 L 30,34 H 90 L 385,324 670,34 h 60 L 410,359 v 84.99783 C 410,449 405,454 400,454 H 259 c -12,0 -14,-10 -14,-15 0,-5 2,-15 14,-15 z"
+   style="fill:#b12f35"
+   id="path35"
+   inkscape:connector-curvature="0" />
+<rect
+   id="rect12-6"
+   style="clip-rule:evenodd;fill:#3c4b5a;fill-rule:nonzero;stroke-width:1.03280997;stroke-linejoin:round;stroke-miterlimit:1.41420996"
+   height="158"
+   width="24"
+   y="418"
+   x="191" /></svg>
\ No newline at end of file
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 2439ce2ec..a382bc8db 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -24,7 +24,7 @@
 
 <template>
     <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="!boolWideNavDrawer" :key="boolWideNavDrawer ? 'wide' : 'mini'" width="200px" app> 
-        <v-list-item class="pa-0 justify-center no-text-decoration no-background small-list-item" style="height:48px;" router to="/" :ripple="false">
+        <v-list-item class="pa-0 justify-center no-text-decoration no-background small-list-item" router to="/" :ripple="false">
             <v-list-item-content tile>
                 <template v-if="sidebarLogo">
                     <img :src="sidebarLogo" style="height: 32px;" class="mr-3 nav-logo" alt="Logo" />
@@ -37,6 +37,21 @@
         <v-divider></v-divider>
         <v-list class="pr-0 pt-0 ml-0">
             <v-list-item-group active-class="active-nav-item">
+                <template v-if="countPrinters">
+                    <v-list-item 
+                        router to="/allPrinters"
+                        class="small-list-item mt-1"
+                    >
+                        <v-list-item-icon>
+                            <v-icon>mdi-view-dashboard-outline</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-content>
+                            <v-list-item-title tile>{{ $t("App.Printers")}}</v-list-item-title>
+                        </v-list-item-content>
+
+                    </v-list-item>
+                    <v-divider class="my-1"></v-divider>
+                </template>
                 <div v-for="(category, index) in naviPoints" :key="index"> 
                     <v-list-item 
                         router :to="category.path"
@@ -74,7 +89,10 @@
                             <template v-slot:activator="{ on, attrs }">
                                 <v-icon v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave">mdi-help-circle-outline</v-icon>
                             </template>
-                            <span class="dark"><!-- Logos  hier mit rein, damit man erkennt welche version für was steht :) -->v{{ mainsailVersion }}<br />{{ klipperVersion }}</span>
+                            <span class="dark d-inline-block">
+                                <img height="12" src="/img/logo.svg"> v{{ mainsailVersion }}<br />
+                                <img height="12" src="/img/klipper.svg" style="transform: rotate(90deg);"> {{ klipperVersion }}
+                            </span>
                         </v-tooltip>
                     </v-list-item-icon>
 
@@ -180,6 +198,10 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
         return this.$store.getters['server/updateManager/isUpdateAvailable']
     }
 
+    get countPrinters() {
+        return this.$store.getters['farm/countPrinters']
+    }
+
     showInNavi(route: AppRoute): boolean {
         if (['shutdown', 'error', 'disconnected'].includes(this.klippy_state) && !route.alwaysShow) return false
 
diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index 543bc7339..90a99e664 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -8,8 +8,8 @@
     <div>
         <v-app-bar app elevate-on-scroll height="48px">
             <v-app-bar-nav-icon @click.stop="naviDrawer = !naviDrawer"></v-app-bar-nav-icon>
-            <v-app-bar-title v-if="!isBigDrawer" class="text-no-wrap">{{ printerName }}</v-app-bar-title>
-            <!-- printer Farm Button goes here -->
+            <v-toolbar-title class="text-no-wrap mr-2">{{ printerName }}</v-toolbar-title>
+            <printer-selector v-if="countPrinters"></printer-selector>
             <v-spacer></v-spacer>
             <the-throttled-states></the-throttled-states>
             <input type="file" ref="fileUploadAndStart" :accept="validGcodeExtensions.join(', ')" style="display: none" @change="uploadAndStart" />
@@ -98,6 +98,7 @@ import TheTopCornerMenu from '@/components/TheTopCornerMenu.vue'
 import TheSettingsMenu from '@/components/TheSettingsMenu.vue'
 import TheThrottledStates from '@/components/TheThrottledStates.vue'
 import Panel from '@/components/ui/Panel.vue'
+import PrinterSelector from '@/components/ui/PrinterSelector.vue'
 
 type uploadSnackbar = {
     status: boolean
@@ -117,7 +118,8 @@ type uploadSnackbar = {
         Panel,
         TheThrottledStates,
         TheSettingsMenu,
-        TheTopCornerMenu
+        TheTopCornerMenu,
+        PrinterSelector
     }
 })
 export default class TheTopbar extends Mixins(BaseMixin) {
@@ -169,8 +171,12 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         return this.$store.state.printer.hostname
     }
 
-    get isBigDrawer():boolean {
-        return false
+    get boolWideNavDrawer() {
+        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
+    }
+
+    get countPrinters() {
+        return this.$store.getters['farm/countPrinters']
     }
 
     btnEmergencyStop() {
diff --git a/src/components/ui/PrinterSelector.vue b/src/components/ui/PrinterSelector.vue
new file mode 100644
index 000000000..b6ef0ce0c
--- /dev/null
+++ b/src/components/ui/PrinterSelector.vue
@@ -0,0 +1,66 @@
+<style scoped>
+
+</style>
+
+<template>
+    <v-menu bottom :offset-x="true">
+        <template v-slot:activator="{ on, attrs }">
+            <v-icon class="nav-arrow right" v-bind="attrs" v-on="on" >mdi-chevron-down</v-icon>
+        </template>
+
+        <v-list dense>
+            <v-list-item two-line v-for="printer in printers" v-bind:key="printer._namespace" @click="changePrinter(printer)" :disabled="!printer.socket.isConnected" link>
+                <v-list-item-content>
+                    <v-list-item-title>{{ getPrinterName(printer._namespace) }}</v-list-item-title>
+                    <v-list-item-subtitle>{{ getPrinterDescription(printer)}}</v-list-item-subtitle>
+                </v-list-item-content>
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script lang="ts">
+
+import {Component, Mixins} from 'vue-property-decorator'
+import BaseMixin from '../mixins/base'
+import router from '@/plugins/router'
+import {FarmPrinterState} from '@/store/farm/printer/types'
+
+@Component
+export default class PrinterSelector extends Mixins(BaseMixin) {
+
+    get displayMenuPoint() {
+        return (this.remoteMode && this.countPrinters > 1) || (!this.remoteMode && this.countPrinters)
+    }
+
+    get printers() {
+        return this.$store.getters['farm/getPrinters']
+    }
+
+    get countPrinters() {
+        return this.$store.getters['farm/countPrinters']
+    }
+
+    get currentPage() {
+        return this.$route.fullPath
+    }
+
+    switchToPrinters() {
+        router.push('/allPrinters')
+    }
+
+    getPrinterName(namespace: string) {
+        return this.$store.getters['farm/'+namespace+'/getPrinterName']
+    }
+
+    getPrinterDescription(printer: FarmPrinterState) {
+        return this.$store.getters['farm/'+printer._namespace+'/getStatus']
+    }
+
+    changePrinter(printer: FarmPrinterState) {
+        if (printer.socket.isConnected) {
+            this.$store.dispatch('changePrinter', { printer: printer._namespace })
+        }
+    }
+}
+</script>
\ No newline at end of file

From d10caf37aafb0134d6f6984ab14eac371347976e Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Tue, 9 Nov 2021 20:58:26 +0100
Subject: [PATCH 07/24] refactor: make topbar buttons hideable via ui settings

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheTopbar.vue                  | 18 ++++++++++----
 .../settings/SettingsUiSettingsTab.vue        | 24 +++++++++++++++++++
 src/locales/en.json                           |  4 ++++
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index 90a99e664..1062d2cab 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -17,7 +17,7 @@
                 :icon="$vuetify.breakpoint.smAndDown"
                 :text="$vuetify.breakpoint.mdAndUp"
                 color="primary"
-                class="button-min-width-auto px-3 d-none d-sm-flex"
+                class="button-min-width-auto px-3 d-none d-sm-flex save-config-button"
                 v-if="klippyIsConnected && saveConfigPending"
                 :disabled="printerIsPrinting"
                 :loading="loadings.includes('topbarSaveConfig')"
@@ -28,8 +28,8 @@
                 :icon="$vuetify.breakpoint.smAndDown"
                 :text="$vuetify.breakpoint.mdAndUp"
                 color="primary"
-                class="button-min-width-auto px-3 d-none d-sm-flex file-upload-and-start"
-                v-if="klippyIsConnected && ['standby', 'complete', 'cancelled'].includes(printer_state)"
+                class="button-min-width-auto px-3 d-none d-sm-flex upload-and-start-button"
+                v-if="klippyIsConnected && ['standby', 'complete', 'cancelled'].includes(printer_state) && !boolHideUploadAndPrintButton"
                 :loading="loadings.includes('btnUploadAndStart')"
                 @click="btnUploadAndStart">
                 <v-icon class="mr-md-2">mdi-file-upload</v-icon><span class="d-none d-md-inline">{{ $t("App.TopBar.UploadPrint") }}</span>
@@ -38,8 +38,8 @@
                 :icon="$vuetify.breakpoint.smAndDown"
                 :text="$vuetify.breakpoint.mdAndUp"
                 color="error"
-                class="button-min-width-auto px-3"
-                v-if="klippyIsConnected"
+                class="button-min-width-auto px-3 emergency-button"
+                v-if="klippyIsConnected && !boolHideEmergencyButton"
                 :loading="loadings.includes('topbarEmergencyStop')"
                 @click="btnEmergencyStop">
                 <v-icon class="mr-md-2">mdi-alert-circle-outline</v-icon><span class="d-none d-md-inline">{{ $t("App.TopBar.EmergencyStop") }}</span>
@@ -179,6 +179,14 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         return this.$store.getters['farm/countPrinters']
     }
 
+    get boolHideUploadAndPrintButton() {
+        return this.$store.state.gui.dashboard.boolHideUploadAndPrintButton ?? false
+    }
+
+    get boolHideEmergencyButton() {
+        return this.$store.state.gui.dashboard.boolHideEmergencyButton ?? false
+    }
+
     btnEmergencyStop() {
         const confirmOnEmergencyStop = this.$store.state.gui.general.confirmOnEmergencyStop
         if (confirmOnEmergencyStop) {
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index 60aa47169..37609abae 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -63,6 +63,14 @@
                 <settings-row :title="$t('Settings.UiSettingsTab.BoolWideNavDrawer')" :sub-title="$t('Settings.UiSettingsTab.BoolWideNavDrawerDescription')" :dynamicSlotWidth="true">
                     <v-switch v-model="boolWideNavDrawer" hide-details class="mt-0"></v-switch>
                 </settings-row>
+                <v-divider class="my-2"></v-divider>
+                <settings-row :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton')" :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription')" :dynamicSlotWidth="true">
+                    <v-switch v-model="boolHideUploadAndPrintButton" hide-details class="mt-0"></v-switch>
+                </settings-row>
+                <v-divider class="my-2"></v-divider>
+                <settings-row :title="$t('Settings.UiSettingsTab.BoolHideEmergencyButton')" :sub-title="$t('Settings.UiSettingsTab.BoolHideEmergencyButtonDescription')" :dynamicSlotWidth="true">
+                    <v-switch v-model="boolHideEmergencyButton" hide-details class="mt-0"></v-switch>
+                </settings-row>
             </v-card-text>
         </v-card>
     </div>
@@ -155,6 +163,22 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', {name: 'dashboard.boolWideNavDrawer', value: newVal })
     }
 
+    get boolHideUploadAndPrintButton() {
+        return this.$store.state.gui.dashboard.boolHideUploadAndPrintButton ?? false
+    }
+
+    set boolHideUploadAndPrintButton(newVal) {
+        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.boolHideUploadAndPrintButton', value: newVal })
+    }
+
+    get boolHideEmergencyButton() {
+        return this.$store.state.gui.dashboard.boolHideEmergencyButton ?? false
+    }
+
+    set boolHideEmergencyButton(newVal) {
+        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.boolHideEmergencyButton', value: newVal })
+    }
+
     clearColorObject(color: any): string {
         if (typeof color === 'object' && 'hex' in color)
             color = color.hex
diff --git a/src/locales/en.json b/src/locales/en.json
index 1bc671043..be11e9ad8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -671,6 +671,10 @@
 			"BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
 			"BoolWideNavDrawer": "Wide Navigation Drawer",
 			"BoolWideNavDrawerDescription": "Display a wider Navigation Toolbar",
+			"BoolHideUploadAndPrintButton": "Hide Upload and Print Button",
+			"BoolHideUploadAndPrintButtonDescription": "Show or hide the \"Upload and Print\" button in the topbar.",
+			"BoolHideEmergencyButton": "Hide Emergency Button",
+			"BoolHideEmergencyButtonDescription": "Show or hide the \"EMERGENCY\" button in the topbar.",
 			"DisplayCANCEL_PRINT": "Display CANCEL_PRINT",
 			"DisplayCANCEL_PRINTDescription": "Shows the CANCEL_PRINT button permanently - no second layer confirmation needed.",
 			"DisplayZOffset": "Show Z-Offset-Panel",

From be109a635ad214744af48d5cd981159c0062367b Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Tue, 9 Nov 2021 21:41:24 +0100
Subject: [PATCH 08/24] refactor: move miniConsole buttons to toolbar and
 make'em collapsible

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/CommandHelpModal.vue        | 23 ++++++++++-----
 src/components/panels/MiniconsolePanel.vue | 34 +++++++++++++---------
 src/components/ui/Panel.vue                |  7 +++--
 3 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/components/CommandHelpModal.vue b/src/components/CommandHelpModal.vue
index 5e0a567cd..421b01501 100644
--- a/src/components/CommandHelpModal.vue
+++ b/src/components/CommandHelpModal.vue
@@ -7,14 +7,19 @@
         :fullscreen="isMobile"
     >
         <template #activator="{ on, attrs }">
-            <v-btn
-                class="gcode-command-btn px-2 minwidth-0"
-                color="grey darken-3"
-                :small="isMini"
-                v-bind="attrs"
-                v-on="on">
-                <v-icon>mdi-help</v-icon>
-            </v-btn>
+            <template v-if="inToolbar">
+                <v-btn icon tile v-bind="attrs" v-on="on"><v-icon small>mdi-help</v-icon></v-btn>
+            </template>
+            <template v-else>
+                <v-btn
+                    class="gcode-command-btn px-2 minwidth-0"
+                    color="grey darken-3"
+                    :small="isMini"
+                    v-bind="attrs"
+                    v-on="on">
+                    <v-icon>mdi-help</v-icon>
+                </v-btn>
+            </template>
         </template>
         <template #default>
             <panel :title="$t('Console.CommandList')" icon="mdi-help" card-class="command-help-dialog" :margin-bottom="false">
@@ -72,6 +77,8 @@ import Panel from '@/components/ui/Panel.vue'
 })
 export default class CommandHelpModal extends Mixins(BaseMixin) {
     @Prop({ required: false, default: false }) isMini!: boolean;
+    @Prop({ required: false, default: false }) inToolbar!: boolean;
+
     cmdListSearch = '';
     isOpen = false;
 
diff --git a/src/components/panels/MiniconsolePanel.vue b/src/components/panels/MiniconsolePanel.vue
index 333d7bad1..56771303b 100644
--- a/src/components/panels/MiniconsolePanel.vue
+++ b/src/components/panels/MiniconsolePanel.vue
@@ -16,7 +16,26 @@
         :title="$t('Panels.MiniconsolePanel.Headline')"
         :collapsible="true"
         card-class="miniconsole-panel"
+        :hideButtonsOnCollapse="true"
     >
+        <template v-slot:buttons>
+            <command-help-modal @onCommand="gcode = $event" :inToolbar="true" ></command-help-modal>
+
+            <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.MiniconsolePanel.SetupConsole')">
+                <template v-slot:activator="{ on, attrs }">
+                    <v-btn icon tile v-bind="attrs" v-on="on"><v-icon small>mdi-filter</v-icon></v-btn>
+                </template>
+                <v-list>
+                    <v-list-item class="minHeight36">
+                        <v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details :label="$t('Panels.MiniconsolePanel.HideTemperatures')"></v-checkbox>
+                    </v-list-item>
+                    <v-list-item class="minHeight36" v-for="(filter, index) in customFilters" v-bind:key="index">
+                        <v-checkbox class="mt-0" v-model="filter.bool" @change="toggleFilter(filter)" hide-details :label="filter.name"></v-checkbox>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
+
+        </template>
         <div class="d-flex flex-column">
             <v-card-text :class="consoleDirection === 'table' ? 'order-1' : 'order-2'">
                 <v-row>
@@ -44,20 +63,7 @@
                         ></v-textarea>
                     </v-col>
                     <v-col class="col-auto">
-                        <command-help-modal @onCommand="gcode = $event" ></command-help-modal>
-                        <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.MiniconsolePanel.SetupConsole')">
-                            <template v-slot:activator="{ on, attrs }">
-                                <v-btn class="px-2 minwidth-0" color="grey darken-3 ml-3" v-bind="attrs" v-on="on"><v-icon>mdi-filter</v-icon></v-btn>
-                            </template>
-                            <v-list>
-                                <v-list-item class="minHeight36">
-                                    <v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details :label="$t('Panels.MiniconsolePanel.HideTemperatures')"></v-checkbox>
-                                </v-list-item>
-                                <v-list-item class="minHeight36" v-for="(filter, index) in customFilters" v-bind:key="index">
-                                    <v-checkbox class="mt-0" v-model="filter.bool" @change="toggleFilter(filter)" hide-details :label="filter.name"></v-checkbox>
-                                </v-list-item>
-                            </v-list>
-                        </v-menu>
+
                     </v-col>
                 </v-row>
             </v-card-text>
diff --git a/src/components/ui/Panel.vue b/src/components/ui/Panel.vue
index e85c0a946..edd4463d2 100644
--- a/src/components/ui/Panel.vue
+++ b/src/components/ui/Panel.vue
@@ -34,8 +34,10 @@
             </v-toolbar-title>
             <slot name="buttons-title"></slot>
             <v-spacer></v-spacer>
-            <v-toolbar-items v-if="hasButtonsSlot || collapsible">
-                <slot name="buttons"></slot>
+            <v-toolbar-items v-show="hasButtonsSlot || collapsible">
+                <div v-show="expand || !hideButtonsOnCollapse">
+                    <slot name="buttons"></slot>
+                </div>
                 <v-btn
                     v-if="collapsible"
                     @click="expand = !expand"
@@ -69,6 +71,7 @@ export default class Panel extends Mixins(BaseMixin) {
     @Prop({ default: '' }) readonly toolbarClass!: string
     @Prop({ default: false }) readonly loading!: boolean
     @Prop({ default: true }) readonly marginBottom!: boolean
+    @Prop({ default: false }) readonly hideButtonsOnCollapse!: boolean
 
     get expand() {
         return this.$store.getters['gui/getPanelExpand'](this.cardClass)

From 39ede45e7310a5991b15c8533e2467391527df43 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Tue, 9 Nov 2021 21:47:27 +0100
Subject: [PATCH 09/24] refactor: set matching colors for buttons on console
 page

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/CommandHelpModal.vue        | 4 ++--
 src/components/panels/MiniconsolePanel.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CommandHelpModal.vue b/src/components/CommandHelpModal.vue
index 421b01501..ac4adc969 100644
--- a/src/components/CommandHelpModal.vue
+++ b/src/components/CommandHelpModal.vue
@@ -8,12 +8,12 @@
     >
         <template #activator="{ on, attrs }">
             <template v-if="inToolbar">
-                <v-btn icon tile v-bind="attrs" v-on="on"><v-icon small>mdi-help</v-icon></v-btn>
+                <v-btn icon v-bind="attrs" v-on="on"><v-icon small>mdi-help</v-icon></v-btn>
             </template>
             <template v-else>
                 <v-btn
                     class="gcode-command-btn px-2 minwidth-0"
-                    color="grey darken-3"
+                    color="lightgray"
                     :small="isMini"
                     v-bind="attrs"
                     v-on="on">
diff --git a/src/components/panels/MiniconsolePanel.vue b/src/components/panels/MiniconsolePanel.vue
index 56771303b..2bc9bccf5 100644
--- a/src/components/panels/MiniconsolePanel.vue
+++ b/src/components/panels/MiniconsolePanel.vue
@@ -23,7 +23,7 @@
 
             <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.MiniconsolePanel.SetupConsole')">
                 <template v-slot:activator="{ on, attrs }">
-                    <v-btn icon tile v-bind="attrs" v-on="on"><v-icon small>mdi-filter</v-icon></v-btn>
+                    <v-btn icon v-bind="attrs" v-on="on"><v-icon small>mdi-filter</v-icon></v-btn>
                 </template>
                 <v-list>
                     <v-list-item class="minHeight36">

From 88fb3f3d1f798561bd85b982d6b91fd3d82b0c19 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Tue, 9 Nov 2021 21:50:29 +0100
Subject: [PATCH 10/24] refactor: use colornames from theme and set play/resume
 button to green

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/panels/StatusPanel.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 63bde286a..ec5daa16c 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -363,28 +363,28 @@ export default class StatusPanel extends Mixins(BaseMixin) {
         return [
             {
                 text: this.$t('Panels.StatusPanel.PausePrint'),
-                color: 'orange',
+                color: 'warning',
                 icon: 'mdi-pause',
                 loadingName: 'statusPrintPause',
                 status: ['printing'],
                 click: this.btnPauseJob
             }, {
                 text: this.$t('Panels.StatusPanel.ResumePrint'),
-                color: 'orange',
+                color: 'success',
                 icon: 'mdi-play',
                 loadingName: 'statusPrintResume',
                 status: ['paused'],
                 click: this.btnResumeJob
             }, {
                 text: this.$t('Panels.StatusPanel.ExcludeObject.ExcludeObject'),
-                color: 'orange',
+                color: 'warning',
                 icon: 'mdi-selection-remove',
                 loadingName: '',
                 status: this.printing_objects.length ? ['paused', 'printing'] : [],
                 click: this.btnExcludeObject
             }, {
                 text: this.$t('Panels.StatusPanel.CancelPrint'),
-                color: 'red',
+                color: 'error',
                 icon: 'mdi-stop',
                 loadingName: 'statusPrintCancel',
                 status: this.$store.state.gui.general.displayCancelPrint ? ['paused', 'printing'] : ['paused'],

From c30ea1605c100a3e836d1568d1146418a35163c4 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Tue, 9 Nov 2021 23:08:23 +0100
Subject: [PATCH 11/24] fix: correct visibility of hide buttons on collapse

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/ui/Panel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/Panel.vue b/src/components/ui/Panel.vue
index edd4463d2..31c68956a 100644
--- a/src/components/ui/Panel.vue
+++ b/src/components/ui/Panel.vue
@@ -35,7 +35,7 @@
             <slot name="buttons-title"></slot>
             <v-spacer></v-spacer>
             <v-toolbar-items v-show="hasButtonsSlot || collapsible">
-                <div v-show="expand || !hideButtonsOnCollapse">
+                <div class="d-flex align-center" v-if="expand || !hideButtonsOnCollapse">
                     <slot name="buttons"></slot>
                 </div>
                 <v-btn

From 884a3367d72450b8c7fbecc8e6f0a2361abdb68d Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Tue, 9 Nov 2021 23:11:15 +0100
Subject: [PATCH 12/24] feature: add virtual tab button to console-input on
 touch devices

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/mixins/base.ts              | 4 ++++
 src/components/panels/MiniconsolePanel.vue | 3 +++
 src/pages/Console.vue                      | 2 ++
 3 files changed, 9 insertions(+)

diff --git a/src/components/mixins/base.ts b/src/components/mixins/base.ts
index e4780afa2..7d95dab38 100644
--- a/src/components/mixins/base.ts
+++ b/src/components/mixins/base.ts
@@ -59,4 +59,8 @@ export default class BaseMixin extends Vue {
     get isWidescreen() {
         return this.$vuetify.breakpoint.xl
     }
+
+    get isTouchDevice() {
+        return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0))
+    }
 }
\ No newline at end of file
diff --git a/src/components/panels/MiniconsolePanel.vue b/src/components/panels/MiniconsolePanel.vue
index 2bc9bccf5..8705eb4f2 100644
--- a/src/components/panels/MiniconsolePanel.vue
+++ b/src/components/panels/MiniconsolePanel.vue
@@ -58,6 +58,8 @@
                             hide-details
                             outlined
                             dense
+                            :prepend-icon="isTouchDevice ? 'mdi-chevron-double-right' : ''"
+                            @click:prepend="getAutocomplete"
                             append-icon="mdi-send"
                             @click:append="doSend"
                         ></v-textarea>
@@ -130,6 +132,7 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
         return this.$store.getters['server/getConsoleEvents'](this.consoleDirection === 'table', 250)
     }
 
+
     @Watch('events')
     eventsChanged() {
         if (this.consoleDirection === 'shell'){
diff --git a/src/pages/Console.vue b/src/pages/Console.vue
index 8678a1898..80bbe767d 100644
--- a/src/pages/Console.vue
+++ b/src/pages/Console.vue
@@ -32,6 +32,8 @@
                     hide-details
                     outlined
                     dense
+                    :prepend-icon="isTouchDevice ? 'mdi-chevron-double-right' : ''"
+                    @click:prepend="getAutocomplete"
                     append-icon="mdi-send"
                     @click:append="doSend"
                 ></v-textarea>

From 1dfa48a01514d8af10c0bd08fce11917ef79e427 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Fri, 12 Nov 2021 20:38:59 +0100
Subject: [PATCH 13/24] refactor: remove hide e-stop button setting

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheTopbar.vue                      |  6 +-----
 src/components/settings/SettingsUiSettingsTab.vue | 12 ------------
 src/locales/en.json                               |  2 --
 3 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index 1062d2cab..466877974 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -39,7 +39,7 @@
                 :text="$vuetify.breakpoint.mdAndUp"
                 color="error"
                 class="button-min-width-auto px-3 emergency-button"
-                v-if="klippyIsConnected && !boolHideEmergencyButton"
+                v-if="klippyIsConnected"
                 :loading="loadings.includes('topbarEmergencyStop')"
                 @click="btnEmergencyStop">
                 <v-icon class="mr-md-2">mdi-alert-circle-outline</v-icon><span class="d-none d-md-inline">{{ $t("App.TopBar.EmergencyStop") }}</span>
@@ -183,10 +183,6 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         return this.$store.state.gui.dashboard.boolHideUploadAndPrintButton ?? false
     }
 
-    get boolHideEmergencyButton() {
-        return this.$store.state.gui.dashboard.boolHideEmergencyButton ?? false
-    }
-
     btnEmergencyStop() {
         const confirmOnEmergencyStop = this.$store.state.gui.general.confirmOnEmergencyStop
         if (confirmOnEmergencyStop) {
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index 37609abae..6ad3cca66 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -67,10 +67,6 @@
                 <settings-row :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton')" :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription')" :dynamicSlotWidth="true">
                     <v-switch v-model="boolHideUploadAndPrintButton" hide-details class="mt-0"></v-switch>
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.UiSettingsTab.BoolHideEmergencyButton')" :sub-title="$t('Settings.UiSettingsTab.BoolHideEmergencyButtonDescription')" :dynamicSlotWidth="true">
-                    <v-switch v-model="boolHideEmergencyButton" hide-details class="mt-0"></v-switch>
-                </settings-row>
             </v-card-text>
         </v-card>
     </div>
@@ -171,14 +167,6 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', {name: 'dashboard.boolHideUploadAndPrintButton', value: newVal })
     }
 
-    get boolHideEmergencyButton() {
-        return this.$store.state.gui.dashboard.boolHideEmergencyButton ?? false
-    }
-
-    set boolHideEmergencyButton(newVal) {
-        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.boolHideEmergencyButton', value: newVal })
-    }
-
     clearColorObject(color: any): string {
         if (typeof color === 'object' && 'hex' in color)
             color = color.hex
diff --git a/src/locales/en.json b/src/locales/en.json
index be11e9ad8..4b80a71c3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -673,8 +673,6 @@
 			"BoolWideNavDrawerDescription": "Display a wider Navigation Toolbar",
 			"BoolHideUploadAndPrintButton": "Hide Upload and Print Button",
 			"BoolHideUploadAndPrintButtonDescription": "Show or hide the \"Upload and Print\" button in the topbar.",
-			"BoolHideEmergencyButton": "Hide Emergency Button",
-			"BoolHideEmergencyButtonDescription": "Show or hide the \"EMERGENCY\" button in the topbar.",
 			"DisplayCANCEL_PRINT": "Display CANCEL_PRINT",
 			"DisplayCANCEL_PRINTDescription": "Shows the CANCEL_PRINT button permanently - no second layer confirmation needed.",
 			"DisplayZOffset": "Show Z-Offset-Panel",

From 9af6427d6694b350dc4cbe525846b3544f5be0ed Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Fri, 12 Nov 2021 20:47:43 +0100
Subject: [PATCH 14/24] fix: add reactivity to hide upload and print button
 functionality

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/settings/SettingsUiSettingsTab.vue | 2 +-
 src/store/gui/actions.ts                          | 8 ++++++++
 src/store/gui/mutations.ts                        | 4 ++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index 6ad3cca66..de9821426 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -164,7 +164,7 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
     }
 
     set boolHideUploadAndPrintButton(newVal) {
-        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.boolHideUploadAndPrintButton', value: newVal })
+        this.$store.dispatch('gui/toggleHideUploadAndPrintBtn', newVal)
     }
 
     clearColorObject(color: any): string {
diff --git a/src/store/gui/actions.ts b/src/store/gui/actions.ts
index 74cef3550..8e4c55609 100644
--- a/src/store/gui/actions.ts
+++ b/src/store/gui/actions.ts
@@ -301,5 +301,13 @@ export const actions: ActionTree<GuiState, RootState> = {
             })
 
         }
+    },
+
+    toggleHideUploadAndPrintBtn({commit, dispatch, state}, payload) {
+        commit('toggleHideUploadAndPrintBtn', payload)
+        dispatch('updateSettings', {
+            keyName: 'dashboard.boolHideUploadAndPrintButton',
+            newVal: state.dashboard.boolHideUploadAndPrintButton
+        })
     }
 }
\ No newline at end of file
diff --git a/src/store/gui/mutations.ts b/src/store/gui/mutations.ts
index 970b37a0f..901beb9b3 100644
--- a/src/store/gui/mutations.ts
+++ b/src/store/gui/mutations.ts
@@ -203,5 +203,9 @@ export const mutations: MutationTree<GuiState> = {
         const layoutArray = [...state.dashboard[payload.layoutname]]
         layoutArray.splice(payload.index, 1)
         Vue.set(state.dashboard, payload.layoutname, layoutArray)
+    },
+
+    toggleHideUploadAndPrintBtn(state, payload) {
+        Vue.set(state.dashboard, 'boolHideUploadAndPrintButton', payload)
     }
 }

From 03408a026ea22972fa16c2aef512550b31ef35e4 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Fri, 12 Nov 2021 21:05:23 +0100
Subject: [PATCH 15/24] refactor: move logo to topbar and clip menu under
 topbar

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheSidebar.vue     | 39 ++++---------------------------
 src/components/TheTopbar.vue      | 24 ++++++++++++++++---
 src/store/farm/printer/getters.ts |  2 +-
 3 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index a382bc8db..67bf4295b 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -23,18 +23,7 @@
 </style>
 
 <template>
-    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="!boolWideNavDrawer" :key="boolWideNavDrawer ? 'wide' : 'mini'" width="200px" app> 
-        <v-list-item class="pa-0 justify-center no-text-decoration no-background small-list-item" router to="/" :ripple="false">
-            <v-list-item-content tile>
-                <template v-if="sidebarLogo">
-                    <img :src="sidebarLogo" style="height: 32px;" class="mr-3 nav-logo" alt="Logo" />
-                </template>
-                <template v-else>
-                    <mainsail-logo :color="logoColor" style="height: 32px;" class="mr-3 nav-logo"></mainsail-logo>
-                </template>
-            </v-list-item-content>
-        </v-list-item>
-        <v-divider></v-divider>
+    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="!boolWideNavDrawer" :key="boolWideNavDrawer ? 'wide' : 'mini'" width="200px" clipped app> 
         <v-list class="pr-0 pt-0 ml-0">
             <v-list-item-group active-class="active-nav-item">
                 <template v-if="countPrinters">
@@ -42,7 +31,7 @@
                         router to="/allPrinters"
                         class="small-list-item mt-1"
                     >
-                        <v-list-item-icon>
+                        <v-list-item-icon class="my-3 mr-3">
                             <v-icon>mdi-view-dashboard-outline</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
@@ -58,7 +47,7 @@
                         v-if="showInNavi(category)"
                         class="small-list-item"
                     >
-                        <v-list-item-icon>
+                        <v-list-item-icon class="my-3 mr-3">
                             <v-icon>mdi-{{ category.icon }}</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
@@ -116,14 +105,11 @@ import BaseMixin from '@/components/mixins/base'
 import {PrinterStateKlipperConfig} from '@/store/printer/types'
 import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
 import TheSidebarPrinterMenu from '@/components/TheSidebarPrinterMenu.vue'
-import MainsailLogo from '@/components/ui/MainsailLogo.vue'
 
 @Component({
     components: {
-        MainsailLogo,
         TheSidebarPrinterMenu,
         TheSelectPrinterDialog
-
     }
 })
 export default class TheSidebarAlt extends Mixins(BaseMixin) {
@@ -131,20 +117,12 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
         return this.$store.state.naviDrawer
     }
 
-    get boolWideNavDrawer() {
-        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
-    }
-
     set naviDrawer(newVal: boolean) {
         this.$store.dispatch('setNaviDrawer', newVal)
     }
 
-    get logoColor(): string {
-        return this.$store.state.gui.theme.logo
-    }
-
-    get sidebarLogo(): string {
-        return this.$store.getters['files/getSidebarLogo']
+    get boolWideNavDrawer() {
+        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
     }
 
     get sidebarBackground(): string {
@@ -163,13 +141,6 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
         return routes.filter((element) => element.showInNavi)
     }
 
-    get printerName():string {
-        if (this.$store.state.gui.general.printername.length)
-            return this.$store.state.gui.general.printername
-
-        return this.$store.state.printer.hostname
-    }
-
     get klippy_state(): string {
         return this.$store.state.server.klippy_state
     }
diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index 466877974..62e42ce9c 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -6,9 +6,17 @@
 
 <template>
     <div>
-        <v-app-bar app elevate-on-scroll height="48px">
+        <v-app-bar app elevate-on-scroll height="48px" clipped-left>
             <v-app-bar-nav-icon @click.stop="naviDrawer = !naviDrawer"></v-app-bar-nav-icon>
-            <v-toolbar-title class="text-no-wrap mr-2">{{ printerName }}</v-toolbar-title>
+            <router-link to="/">
+                <template v-if="sidebarLogo">
+                    <img :src="sidebarLogo" style="height: 32px;" class="nav-logo ml-4 mr-1 d-none d-sm-flex" alt="Logo" />
+                </template>
+                <template v-else>
+                    <mainsail-logo :color="logoColor" style="height: 32px;" class="nav-logo ml-4 mr-1 d-none d-sm-flex" router to="/" :ripple="false"></mainsail-logo>
+                </template>
+            </router-link>
+            <v-toolbar-title class="text-no-wrap ml-0 pl-2 mr-2">{{ printerName }}</v-toolbar-title>
             <printer-selector v-if="countPrinters"></printer-selector>
             <v-spacer></v-spacer>
             <the-throttled-states></the-throttled-states>
@@ -99,6 +107,7 @@ import TheSettingsMenu from '@/components/TheSettingsMenu.vue'
 import TheThrottledStates from '@/components/TheThrottledStates.vue'
 import Panel from '@/components/ui/Panel.vue'
 import PrinterSelector from '@/components/ui/PrinterSelector.vue'
+import MainsailLogo from '@/components/ui/MainsailLogo.vue'
 
 type uploadSnackbar = {
     status: boolean
@@ -119,7 +128,8 @@ type uploadSnackbar = {
         TheThrottledStates,
         TheSettingsMenu,
         TheTopCornerMenu,
-        PrinterSelector
+        PrinterSelector,
+        MainsailLogo
     }
 })
 export default class TheTopbar extends Mixins(BaseMixin) {
@@ -183,6 +193,14 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         return this.$store.state.gui.dashboard.boolHideUploadAndPrintButton ?? false
     }
 
+    get sidebarLogo(): string {
+        return this.$store.getters['files/getSidebarLogo']
+    }
+
+    get logoColor(): string {
+        return this.$store.state.gui.theme.logo
+    }
+
     btnEmergencyStop() {
         const confirmOnEmergencyStop = this.$store.state.gui.general.confirmOnEmergencyStop
         if (confirmOnEmergencyStop) {
diff --git a/src/store/farm/printer/getters.ts b/src/store/farm/printer/getters.ts
index d58bff5f5..2a9ec4d5a 100644
--- a/src/store/farm/printer/getters.ts
+++ b/src/store/farm/printer/getters.ts
@@ -237,6 +237,6 @@ export const getters: GetterTree<FarmPrinterState, any> = {
     },
 
     getPrinterWebcams: (state) => {
-        return state.data.gui.webcam.configs ?? []
+        return state.data.gui.webcam?.configs ?? []
     }
 }
\ No newline at end of file

From 4d6d9dee59db6db1e25873a78342db9249402c78 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Fri, 12 Nov 2021 21:06:55 +0100
Subject: [PATCH 16/24] refactor: remove unused TheSidebarPrinterMenu

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheSidebar.vue            |  2 -
 src/components/TheSidebarPrinterMenu.vue | 84 ------------------------
 2 files changed, 86 deletions(-)
 delete mode 100644 src/components/TheSidebarPrinterMenu.vue

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 67bf4295b..7b0074f5d 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -104,11 +104,9 @@ import {Mixins} from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import {PrinterStateKlipperConfig} from '@/store/printer/types'
 import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
-import TheSidebarPrinterMenu from '@/components/TheSidebarPrinterMenu.vue'
 
 @Component({
     components: {
-        TheSidebarPrinterMenu,
         TheSelectPrinterDialog
     }
 })
diff --git a/src/components/TheSidebarPrinterMenu.vue b/src/components/TheSidebarPrinterMenu.vue
deleted file mode 100644
index a717c16c7..000000000
--- a/src/components/TheSidebarPrinterMenu.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<style scoped>
-
-</style>
-
-<template>
-    <div v-if="displayMenuPoint">
-        <li :class="currentPage === '/allPrinters' ? 'nav-item active' : 'nav-item '">
-            <div
-                class="nav-link "
-                @click.prevent
-                @click="switchToPrinters"
-                role="button"
-            >
-                <v-icon>mdi-view-dashboard-outline</v-icon>
-                <span class="nav-title">{{ $t("App.Printers")}}</span>
-
-                <v-menu bottom :offset-x="true">
-                    <template v-slot:activator="{ on, attrs }">
-                        <v-icon class="nav-arrow right" v-bind="attrs" v-on="on" >mdi-chevron-down</v-icon>
-                    </template>
-
-                    <v-list dense>
-                        <v-list-item two-line v-for="printer in printers" v-bind:key="printer._namespace" @click="changePrinter(printer)" :disabled="!printer.socket.isConnected" link>
-                            <v-list-item-content>
-                                <v-list-item-title>{{ getPrinterName(printer._namespace) }}</v-list-item-title>
-                                <v-list-item-subtitle>{{ getPrinterDescription(printer)}}</v-list-item-subtitle>
-                            </v-list-item-content>
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
-            </div>
-            <v-item-group class="v-btn-toggle mx-4 d-block row" name="printers" v-if="false">
-                <v-btn class="col" color="primary" @click="switchToPrinters">{{ $t("App.Printers")}}</v-btn>
-            </v-item-group>
-        </li>
-        <v-divider class="my-4"></v-divider>
-    </div>
-</template>
-
-<script lang="ts">
-
-import {Component, Mixins} from 'vue-property-decorator'
-import BaseMixin from './mixins/base'
-import router from '@/plugins/router'
-import {FarmPrinterState} from '@/store/farm/printer/types'
-
-@Component
-export default class TheSidebarPrinterMenu extends Mixins(BaseMixin) {
-
-    get displayMenuPoint() {
-        return (this.remoteMode && this.countPrinters > 1) || (!this.remoteMode && this.countPrinters)
-    }
-
-    get printers() {
-        return this.$store.getters['farm/getPrinters']
-    }
-
-    get countPrinters() {
-        return this.$store.getters['farm/countPrinters']
-    }
-
-    get currentPage() {
-        return this.$route.fullPath
-    }
-
-    switchToPrinters() {
-        router.push('/allPrinters')
-    }
-
-    getPrinterName(namespace: string) {
-        return this.$store.getters['farm/'+namespace+'/getPrinterName']
-    }
-
-    getPrinterDescription(printer: FarmPrinterState) {
-        return this.$store.getters['farm/'+printer._namespace+'/getStatus']
-    }
-
-    changePrinter(printer: FarmPrinterState) {
-        if (printer.socket.isConnected) {
-            this.$store.dispatch('changePrinter', { printer: printer._namespace })
-        }
-    }
-}
-</script>
\ No newline at end of file

From cd2a5343441357b371fc7722b72fe8ce8f770e5f Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Fri, 12 Nov 2021 21:21:54 +0100
Subject: [PATCH 17/24] feature: create and add about component to sidebar
 ...no dialog on click yet

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheSidebar.vue        | 48 ++--------------
 src/components/modals/AboutModal.vue | 86 ++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 42 deletions(-)
 create mode 100644 src/components/modals/AboutModal.vue

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 7b0074f5d..e4c249c62 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -59,39 +59,9 @@
         </v-list>
         <template v-slot:append>
             <v-list-item class="small-list-item mb-2">
-                <template v-if="!boolWideNavDrawer">
-                    <!-- <v-list-item-icon>
-                        <v-menu right offset-x open-on-hover>
-                            <template v-slot:activator="{ on, attrs }">
-                                <v-icon v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave">mdi-help-circle-outline</v-icon>
-                            </template>
-                            <v-card>
-                                -- Logos  hier mit rein, damit man erkennt welche version für was steht :) --
-                                <div overflow-hidden class="nowrap body-2" id="mainsailVersion" > v{{ mainsailVersion }}</div>
-                                <div overflow-hidden class="nowrap body-2" id="klipperVersion" v-if="klipperVersion" >{{ klipperVersion }}</div>
-                            </v-card>
-                        </v-menu>
-                    </v-list-item-icon> -->
-
-                    <v-list-item-icon>
-                        <v-tooltip right color="panel">
-                            <template v-slot:activator="{ on, attrs }">
-                                <v-icon v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave">mdi-help-circle-outline</v-icon>
-                            </template>
-                            <span class="dark d-inline-block">
-                                <img height="12" src="/img/logo.svg"> v{{ mainsailVersion }}<br />
-                                <img height="12" src="/img/klipper.svg" style="transform: rotate(90deg);"> {{ klipperVersion }}
-                            </span>
-                        </v-tooltip>
-                    </v-list-item-icon>
-
-                </template>
-                <template v-else-if="boolWideNavDrawer">
-                    <v-list-item-content>
-                        <div overflow-hidden class="nowrap body-2" id="mainsilVersion" > v{{ mainsailVersion }}</div>
-                        <div overflow-hidden class="nowrap body-2" id="klipperVersion" v-if="klipperVersion" >{{ klipperVersion }}</div>
-                    </v-list-item-content>
-                </template>
+                <v-list-item-icon>
+                    <about-modal></about-modal>
+                </v-list-item-icon>
             </v-list-item>
         </template>
     </v-navigation-drawer>  
@@ -104,10 +74,12 @@ import {Mixins} from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import {PrinterStateKlipperConfig} from '@/store/printer/types'
 import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
+import AboutModal from '@/components/modals/AboutModal.vue'
 
 @Component({
     components: {
-        TheSelectPrinterDialog
+        TheSelectPrinterDialog,
+        AboutModal
     }
 })
 export default class TheSidebarAlt extends Mixins(BaseMixin) {
@@ -127,14 +99,6 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
         return this.$store.getters['files/getSidebarBackground']
     }
 
-    get mainsailVersion(): string {
-        return this.$store.state.packageVersion
-    }
-
-    get klipperVersion():string {
-        return this.$store.state.printer?.software_version ?? ''
-    }
-
     get naviPoints(): AppRoute[] {
         return routes.filter((element) => element.showInNavi)
     }
diff --git a/src/components/modals/AboutModal.vue b/src/components/modals/AboutModal.vue
new file mode 100644
index 000000000..e2f771ed8
--- /dev/null
+++ b/src/components/modals/AboutModal.vue
@@ -0,0 +1,86 @@
+<style scoped>
+    .klipper-logo {
+        transform: rotate(90deg);
+    }
+    .moonraker-logo {
+        transform: rotate(45deg);
+        color: #EBC815;
+    }
+    .version-container {
+        display: grid;
+        grid-template-columns: 20px auto;
+
+    }
+</style>
+
+<template>
+    <v-dialog
+        transition="dialog-bottom-transition"
+        max-width="600"
+        scrollable
+        v-model="isOpen"
+    >
+        <template v-slot:activator="{ an }">
+            <v-tooltip right color="panel">
+                <template v-slot:activator="{ on, attrs }">
+                    <!-- <v-icon v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave" @click.stop="isOpen = true">mdi-help-circle-outline</v-icon> -->
+                    <v-icon v-on="an" v-bind="attrs" @mouseenter="on.mouseenter" @mouseleave="on.mouseleave">mdi-help-circle-outline</v-icon>
+                </template>
+                <span class="dark version-container">
+                    <div><img height="12" src="/img/logo.svg"></div>
+                    <div>v{{ mainsailVersion }}</div>
+                    <div><v-icon small class="moonraker-logo">mdi-moon-waning-crescent</v-icon></div>
+                    <div>{{ moonrakerVersion }}</div>
+                    <div><img height="12" src="/img/klipper.svg" class="klipper-logo"></div>
+                    <div>{{ klipperVersion }}</div>
+                </span>
+            </v-tooltip>
+        </template>
+        <template v-slot:default>
+            <panel title="About" :margin-bottom="false">
+                <template v-slot:buttons>
+                    <v-btn icon tile @click="isOpen = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                </template>
+                <v-card-text>
+                    <v-container fliud class="align-self-start">
+                        <v-row tag="logo">
+                            <v-col cols="auto">
+                                <v-img height="80" contain src="https://docs.mainsail.xyz/assets/img/logo-mainsail.png"></v-img>
+                            </v-col>
+                        </v-row>
+                        <v-row tag="data1" justify="center">
+                            <v-col class="pr-3 text-right">Version</v-col>
+                            <v-col>v2.1.0-alpha</v-col>
+                        </v-row>
+                    </v-container>
+                </v-card-text>
+            </panel>
+        </template>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import BaseMixin from '../mixins/base'
+import {Mixins} from 'vue-property-decorator'
+import Component from 'vue-class-component'
+import Panel from '@/components/ui/Panel.vue'
+
+@Component({
+    components: {Panel}
+})
+export default class AboutModal extends Mixins(BaseMixin) {
+    private isOpen = false;
+
+    get mainsailVersion(): string {
+        return this.$store.state.packageVersion
+    }
+
+    get klipperVersion():string {
+        return this.$store.state.printer?.software_version ?? ''
+    }
+
+    get moonrakerVersion():string {
+        return this.$store.state.server?.moonraker_version ?? ''
+    }
+}
+</script>
\ No newline at end of file

From f66e29d4f2da5d576bc22c35adfcd26bd1670ff7 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Fri, 12 Nov 2021 21:39:56 +0100
Subject: [PATCH 18/24] fix: correct appearance of the close icon from
 interface settings dialog

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheSettingsMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TheSettingsMenu.vue b/src/components/TheSettingsMenu.vue
index 4c1f27c71..ff8e85628 100644
--- a/src/components/TheSettingsMenu.vue
+++ b/src/components/TheSettingsMenu.vue
@@ -6,7 +6,7 @@
         <v-dialog v-model="showSettings" width="900" persistent hide-overlay :fullscreen="isMobile">
             <panel :title="$t('Settings.InterfaceSettings')" icon="mdi-cogs" card-class="settings-menu-dialog" :margin-bottom="false" style="overflow: hidden;" :height="isMobile ? 0 : 548">
                 <template v-slot:buttons>
-                    <v-btn icon @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <template v-if="isMobile">
                     <v-tabs v-model="activeTab" :center-active="true" :show-arrows="true">

From b414572adeaabce3152d6e83a7e5f6cdcf21830e Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Sat, 13 Nov 2021 15:14:33 +0100
Subject: [PATCH 19/24] Revert "fix: correct appearance of the close icon from
 interface settings dialog"

This reverts commit f66e29d4f2da5d576bc22c35adfcd26bd1670ff7.
---
 src/components/TheSettingsMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TheSettingsMenu.vue b/src/components/TheSettingsMenu.vue
index ff8e85628..4c1f27c71 100644
--- a/src/components/TheSettingsMenu.vue
+++ b/src/components/TheSettingsMenu.vue
@@ -6,7 +6,7 @@
         <v-dialog v-model="showSettings" width="900" persistent hide-overlay :fullscreen="isMobile">
             <panel :title="$t('Settings.InterfaceSettings')" icon="mdi-cogs" card-class="settings-menu-dialog" :margin-bottom="false" style="overflow: hidden;" :height="isMobile ? 0 : 548">
                 <template v-slot:buttons>
-                    <v-btn icon tile @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <template v-if="isMobile">
                     <v-tabs v-model="activeTab" :center-active="true" :show-arrows="true">

From 44cfcda349bfa2fb60166edc32e9af03de49b2cf Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Sun, 14 Nov 2021 10:37:20 +0100
Subject: [PATCH 20/24] refactor: close ui settings on ESC and change close
 icon to tile

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheSettingsMenu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TheSettingsMenu.vue b/src/components/TheSettingsMenu.vue
index a103df3ba..84d98f170 100644
--- a/src/components/TheSettingsMenu.vue
+++ b/src/components/TheSettingsMenu.vue
@@ -3,10 +3,10 @@
         <v-btn icon tile large @click="showSettings = true">
             <v-icon>mdi-cogs</v-icon>
         </v-btn>
-        <v-dialog v-model="showSettings" width="900" persistent :fullscreen="isMobile">
+        <v-dialog v-model="showSettings" width="900" persistent :fullscreen="isMobile" @keydown.esc="showSettings = false">
             <panel :title="$t('Settings.InterfaceSettings')" icon="mdi-cogs" card-class="settings-menu-dialog" :margin-bottom="false" style="overflow: hidden;" :height="isMobile ? 0 : 548">
                 <template v-slot:buttons>
-                    <v-btn icon @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <template v-if="isMobile">
                     <v-tabs v-model="activeTab" :center-active="true" :show-arrows="true">

From de8d400ec5640edd77811a7244b8f458bb6fc099 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Sun, 14 Nov 2021 10:49:45 +0100
Subject: [PATCH 21/24] refactor: change font style in wide sidebar and extend
 width of wide menu

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheSidebar.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index e4c249c62..8d279e591 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -17,13 +17,20 @@
     .active-nav-item {
         border-right: 4px solid var(--v-primary-base);
     }
-    .nowrap {
-        white-space: nowrap !important;
+    .menu-item-icon {
+        opacity: .85;
+    }
+    .menu-item-title {
+        line-height: 30px;
+        font-size: 14px;
+        font-weight: 600;
+        text-transform: uppercase;
+        opacity: .85;
     }
 </style>
 
 <template>
-    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="!boolWideNavDrawer" :key="boolWideNavDrawer ? 'wide' : 'mini'" width="200px" clipped app> 
+    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="!boolWideNavDrawer" :key="boolWideNavDrawer ? 'wide' : 'mini'" width="220px" clipped app> 
         <v-list class="pr-0 pt-0 ml-0">
             <v-list-item-group active-class="active-nav-item">
                 <template v-if="countPrinters">
@@ -31,11 +38,11 @@
                         router to="/allPrinters"
                         class="small-list-item mt-1"
                     >
-                        <v-list-item-icon class="my-3 mr-3">
+                        <v-list-item-icon class="my-3 mr-3 menu-item-icon">
                             <v-icon>mdi-view-dashboard-outline</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
-                            <v-list-item-title tile>{{ $t("App.Printers")}}</v-list-item-title>
+                            <v-list-item-title tile class="menu-item-title">{{ $t("App.Printers")}}</v-list-item-title>
                         </v-list-item-content>
 
                     </v-list-item>
@@ -47,11 +54,11 @@
                         v-if="showInNavi(category)"
                         class="small-list-item"
                     >
-                        <v-list-item-icon class="my-3 mr-3">
+                        <v-list-item-icon class="my-3 mr-3 menu-item-icon">
                             <v-icon>mdi-{{ category.icon }}</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
-                            <v-list-item-title tile>{{ $t(`Router.${category.title}`) }}</v-list-item-title>
+                            <v-list-item-title tile class="menu-item-title">{{ $t(`Router.${category.title}`) }}</v-list-item-title>
                         </v-list-item-content>
                     </v-list-item>
                 </div>
@@ -59,7 +66,7 @@
         </v-list>
         <template v-slot:append>
             <v-list-item class="small-list-item mb-2">
-                <v-list-item-icon>
+                <v-list-item-icon class="menu-item-icon">
                     <about-modal></about-modal>
                 </v-list-item-icon>
             </v-list-item>

From 44f12e9a19b184061c18717d88f72caaf2ef2416 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Sun, 14 Nov 2021 11:15:15 +0100
Subject: [PATCH 22/24] refactor: change menu style ui-settings-entry to
 dropdown

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheSidebar.vue                 |  8 +++--
 .../settings/SettingsUiSettingsTab.vue        | 32 +++++++++++++++----
 src/locales/en.json                           |  4 +--
 src/store/gui/actions.ts                      |  8 +++++
 src/store/gui/mutations.ts                    |  6 +++-
 src/store/variables.ts                        |  4 ++-
 6 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 8d279e591..ed9ea8727 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -30,7 +30,7 @@
 </style>
 
 <template>
-    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="!boolWideNavDrawer" :key="boolWideNavDrawer ? 'wide' : 'mini'" width="220px" clipped app> 
+    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(menuStyle === 'iconsOnly')" :key="menuStyle" width="220px" clipped app> 
         <v-list class="pr-0 pt-0 ml-0">
             <v-list-item-group active-class="active-nav-item">
                 <template v-if="countPrinters">
@@ -82,6 +82,8 @@ import BaseMixin from '@/components/mixins/base'
 import {PrinterStateKlipperConfig} from '@/store/printer/types'
 import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
 import AboutModal from '@/components/modals/AboutModal.vue'
+import {defaultMenuStyle} from '@/store/variables'
+
 
 @Component({
     components: {
@@ -98,8 +100,8 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
         this.$store.dispatch('setNaviDrawer', newVal)
     }
 
-    get boolWideNavDrawer() {
-        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
+    get menuStyle() {
+        return this.$store.state.gui.dashboard.menuStyle ?? defaultMenuStyle
     }
 
     get sidebarBackground(): string {
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index de9821426..1275bbcc5 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -60,8 +60,8 @@
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.UiSettingsTab.BoolWideNavDrawer')" :sub-title="$t('Settings.UiSettingsTab.BoolWideNavDrawerDescription')" :dynamicSlotWidth="true">
-                    <v-switch v-model="boolWideNavDrawer" hide-details class="mt-0"></v-switch>
+                <settings-row :title="$t('Settings.UiSettingsTab.menuStyle')" :sub-title="$t('Settings.UiSettingsTab.menuStyleDescription')">
+                    <v-select v-model="menuStyleSetting" :items="menuStyles" outlined dense hide-details class="mt-0"></v-select>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton')" :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription')" :dynamicSlotWidth="true">
@@ -78,14 +78,32 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
-import {defaultLogoColor, defaultPrimaryColor} from '@/store/variables'
+import {defaultLogoColor, defaultPrimaryColor, defaultMenuStyle} from '@/store/variables'
 import {Debounce} from 'vue-debounce-decorator'
+
+interface menuStyle {
+    text: string
+    value: string
+}
+
 @Component({
     components: {SettingsRow}
 })
+
 export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
     private defaultLogoColor = defaultLogoColor
     private defaultPrimaryColor = defaultPrimaryColor
+    private defaultMenuStyle = defaultMenuStyle
+    private menuStyles: menuStyle[] = [
+        {
+            text: 'Icons only',
+            value: 'iconsOnly'
+        },
+        {
+            text: 'Icons + Text',
+            value: 'iconsAndText'
+        }
+    ]
 
     get logoColor() {
         return this.$store.state.gui.theme.logo
@@ -151,12 +169,12 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', {name: 'general.confirmOnPowerDeviceChange', value: newVal })
     }
 
-    get boolWideNavDrawer() {
-        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
+    get menuStyleSetting() {
+        return this.$store.state.gui.dashboard.menuStyle ?? defaultMenuStyle
     }
 
-    set boolWideNavDrawer(newVal) {
-        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.boolWideNavDrawer', value: newVal })
+    set menuStyleSetting(newVal) {
+        this.$store.dispatch('gui/setMenuStyle', newVal)
     }
 
     get boolHideUploadAndPrintButton() {
diff --git a/src/locales/en.json b/src/locales/en.json
index efcf5fa8b..6c5352730 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -670,8 +670,8 @@
 			"ShowWebcamInNavigation": "Show Webcam in navigation",
 			"BoolBigThumbnail": "Large thumbnail",
 			"BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
-			"BoolWideNavDrawer": "Wide Navigation Drawer",
-			"BoolWideNavDrawerDescription": "Display a wider Navigation Toolbar",
+			"menuStyle": "Style of the side menu",
+			"menuStyleDescription": "Change the appearance of the side menu",
 			"BoolHideUploadAndPrintButton": "Hide Upload and Print Button",
 			"BoolHideUploadAndPrintButtonDescription": "Show or hide the \"Upload and Print\" button in the topbar.",
 			"DisplayCANCEL_PRINT": "Display CANCEL_PRINT",
diff --git a/src/store/gui/actions.ts b/src/store/gui/actions.ts
index bb9706f23..6ffe67efc 100644
--- a/src/store/gui/actions.ts
+++ b/src/store/gui/actions.ts
@@ -252,5 +252,13 @@ export const actions: ActionTree<GuiState, RootState> = {
             keyName: 'dashboard.boolHideUploadAndPrintButton',
             newVal: state.dashboard.boolHideUploadAndPrintButton
         })
+    },
+
+    setMenuStyle({commit, dispatch, state}, payload) {
+        commit('setMenuStyle', payload)
+        dispatch('updateSettings', {
+            keyName: 'dashboard.menuStyle',
+            newVal: state.dashboard.menuStyle
+        })
     }
 }
\ No newline at end of file
diff --git a/src/store/gui/mutations.ts b/src/store/gui/mutations.ts
index 57e3c11f6..04c993f60 100644
--- a/src/store/gui/mutations.ts
+++ b/src/store/gui/mutations.ts
@@ -105,5 +105,9 @@ export const mutations: MutationTree<GuiState> = {
 
     toggleHideUploadAndPrintBtn(state, payload) {
         Vue.set(state.dashboard, 'boolHideUploadAndPrintButton', payload)
-    }
+    },
+
+    setMenuStyle(state, payload) {
+        Vue.set(state.dashboard, 'menuStyle', payload)
+    },
 }
diff --git a/src/store/variables.ts b/src/store/variables.ts
index c031be139..504584250 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -91,4 +91,6 @@ export const allDashboardPanels = [
 
 export const thumbnailSmallMin = 32
 export const thumbnailSmallMax = 64
-export const thumbnailBigMin = 256
\ No newline at end of file
+export const thumbnailBigMin = 256
+
+export const defaultMenuStyle = 'iconsOnly'
\ No newline at end of file

From 259aa1fdacb7b4b85f972db4918ce99b67f96d07 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Sun, 14 Nov 2021 21:41:53 +0100
Subject: [PATCH 23/24] refactor: correct variablenames in locales

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/locales/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 6c5352730..640f5a74e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -670,8 +670,8 @@
 			"ShowWebcamInNavigation": "Show Webcam in navigation",
 			"BoolBigThumbnail": "Large thumbnail",
 			"BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
-			"menuStyle": "Style of the side menu",
-			"menuStyleDescription": "Change the appearance of the side menu",
+			"MenuStyle": "Style of the side menu",
+			"MenuStyleDescription": "Change the appearance of the side menu",
 			"BoolHideUploadAndPrintButton": "Hide Upload and Print Button",
 			"BoolHideUploadAndPrintButtonDescription": "Show or hide the \"Upload and Print\" button in the topbar.",
 			"DisplayCANCEL_PRINT": "Display CANCEL_PRINT",

From aadd989b998c0292e8b7585e9c967119baeb31f7 Mon Sep 17 00:00:00 2001
From: steadyjaw <martin.keilaus@gmail.com>
Date: Sun, 14 Nov 2021 22:32:40 +0100
Subject: [PATCH 24/24] refactor: re-do menuStyle setting implementation

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheSidebar.vue                 |  5 +--
 .../settings/SettingsUiSettingsTab.vue        | 37 +++++++++----------
 src/locales/en.json                           |  2 +
 src/store/gui/actions.ts                      |  8 ----
 src/store/gui/index.ts                        |  1 +
 src/store/gui/mutations.ts                    |  6 +--
 src/store/variables.ts                        |  4 +-
 7 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index ed9ea8727..02e0b7be3 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -82,8 +82,6 @@ import BaseMixin from '@/components/mixins/base'
 import {PrinterStateKlipperConfig} from '@/store/printer/types'
 import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
 import AboutModal from '@/components/modals/AboutModal.vue'
-import {defaultMenuStyle} from '@/store/variables'
-
 
 @Component({
     components: {
@@ -91,6 +89,7 @@ import {defaultMenuStyle} from '@/store/variables'
         AboutModal
     }
 })
+
 export default class TheSidebarAlt extends Mixins(BaseMixin) {
     get naviDrawer(): boolean {
         return this.$store.state.naviDrawer
@@ -101,7 +100,7 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
     }
 
     get menuStyle() {
-        return this.$store.state.gui.dashboard.menuStyle ?? defaultMenuStyle
+        return this.$store.state.gui.dashboard.menuStyle
     }
 
     get sidebarBackground(): string {
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index 1275bbcc5..1622038f0 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -60,7 +60,7 @@
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.UiSettingsTab.menuStyle')" :sub-title="$t('Settings.UiSettingsTab.menuStyleDescription')">
+                <settings-row :title="$t('Settings.UiSettingsTab.MenuStyle')" :sub-title="$t('Settings.UiSettingsTab.MenuStyleDescription')">
                     <v-select v-model="menuStyleSetting" :items="menuStyles" outlined dense hide-details class="mt-0"></v-select>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
@@ -78,14 +78,9 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
-import {defaultLogoColor, defaultPrimaryColor, defaultMenuStyle} from '@/store/variables'
+import {defaultLogoColor, defaultPrimaryColor} from '@/store/variables'
 import {Debounce} from 'vue-debounce-decorator'
 
-interface menuStyle {
-    text: string
-    value: string
-}
-
 @Component({
     components: {SettingsRow}
 })
@@ -93,17 +88,6 @@ interface menuStyle {
 export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
     private defaultLogoColor = defaultLogoColor
     private defaultPrimaryColor = defaultPrimaryColor
-    private defaultMenuStyle = defaultMenuStyle
-    private menuStyles: menuStyle[] = [
-        {
-            text: 'Icons only',
-            value: 'iconsOnly'
-        },
-        {
-            text: 'Icons + Text',
-            value: 'iconsAndText'
-        }
-    ]
 
     get logoColor() {
         return this.$store.state.gui.theme.logo
@@ -170,11 +154,24 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
     }
 
     get menuStyleSetting() {
-        return this.$store.state.gui.dashboard.menuStyle ?? defaultMenuStyle
+        return this.$store.state.gui.dashboard.menuStyle
     }
 
     set menuStyleSetting(newVal) {
-        this.$store.dispatch('gui/setMenuStyle', newVal)
+        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.menuStyle', value: newVal })
+    }
+
+    get menuStyles() {
+        return [
+            {
+                text: this.$t('Settings.UiSettingsTab.MenuStyleIconsOnly'),
+                value: 'iconsOnly'
+            },
+            {
+                text: this.$t('Settings.UiSettingsTab.MenuStyleIconsAndText'),
+                value: 'iconsAndText'
+            }
+        ]
     }
 
     get boolHideUploadAndPrintButton() {
diff --git a/src/locales/en.json b/src/locales/en.json
index 640f5a74e..5f7700ae6 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -672,6 +672,8 @@
 			"BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
 			"MenuStyle": "Style of the side menu",
 			"MenuStyleDescription": "Change the appearance of the side menu",
+			"MenuStyleIconsOnly": "Icons only",
+			"MenuStyleIconsAndText": "Icons + Text",
 			"BoolHideUploadAndPrintButton": "Hide Upload and Print Button",
 			"BoolHideUploadAndPrintButtonDescription": "Show or hide the \"Upload and Print\" button in the topbar.",
 			"DisplayCANCEL_PRINT": "Display CANCEL_PRINT",
diff --git a/src/store/gui/actions.ts b/src/store/gui/actions.ts
index 6ffe67efc..bb9706f23 100644
--- a/src/store/gui/actions.ts
+++ b/src/store/gui/actions.ts
@@ -252,13 +252,5 @@ export const actions: ActionTree<GuiState, RootState> = {
             keyName: 'dashboard.boolHideUploadAndPrintButton',
             newVal: state.dashboard.boolHideUploadAndPrintButton
         })
-    },
-
-    setMenuStyle({commit, dispatch, state}, payload) {
-        commit('setMenuStyle', payload)
-        dispatch('updateSettings', {
-            keyName: 'dashboard.menuStyle',
-            newVal: state.dashboard.menuStyle
-        })
     }
 }
\ No newline at end of file
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index ba3a436a8..cb12e5c10 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -32,6 +32,7 @@ export const getDefaultState = (): GuiState => {
             boolTempchart: true,
             boolBigThumbnail: true,
             boolWideNavDrawer: false,
+            menuStyle: 'iconsOnly',
             macroManagement: 'simple',
             hiddenMacros: [],
             hiddenTempChart: [],
diff --git a/src/store/gui/mutations.ts b/src/store/gui/mutations.ts
index 04c993f60..57e3c11f6 100644
--- a/src/store/gui/mutations.ts
+++ b/src/store/gui/mutations.ts
@@ -105,9 +105,5 @@ export const mutations: MutationTree<GuiState> = {
 
     toggleHideUploadAndPrintBtn(state, payload) {
         Vue.set(state.dashboard, 'boolHideUploadAndPrintButton', payload)
-    },
-
-    setMenuStyle(state, payload) {
-        Vue.set(state.dashboard, 'menuStyle', payload)
-    },
+    }
 }
diff --git a/src/store/variables.ts b/src/store/variables.ts
index 504584250..c031be139 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -91,6 +91,4 @@ export const allDashboardPanels = [
 
 export const thumbnailSmallMin = 32
 export const thumbnailSmallMax = 64
-export const thumbnailBigMin = 256
-
-export const defaultMenuStyle = 'iconsOnly'
\ No newline at end of file
+export const thumbnailBigMin = 256
\ No newline at end of file