From 5286e8edf4c086cfc95f4b1a2783be33170280df Mon Sep 17 00:00:00 2001
From: Craig Bassett <craig.bassett@gmail.com>
Date: Fri, 25 Dec 2020 18:38:47 -0600
Subject: [PATCH] feat: draggable dashboard cards

---
 package-lock.json                             |  13 ++
 package.json                                  |   1 +
 src/components/AppDrawer.vue                  |  33 ++++
 src/components/cards/CollapsableCard.vue      |  92 ++++++++--
 src/components/cards/dashboard/CameraCard.vue |  15 +-
 .../cards/dashboard/ConsoleCard.vue           |  15 +-
 .../cards/dashboard/PrinterLimitsCard.vue     |  13 +-
 src/components/cards/dashboard/StatusCard.vue |   2 +-
 .../cards/dashboard/TemperatureGraphCard.vue  |  15 +-
 .../dashboard/TemperatureTargetsCard.vue      |  17 +-
 .../cards/dashboard/ToolheadCard.vue          |  15 +-
 src/components/cards/dashboard/ToolsCard.vue  | 164 ++++++++----------
 .../TemperaturePresetSettingsCard.vue         |   1 +
 src/components/inputs/BtnCollapse.vue         |  42 ++++-
 src/globals.ts                                |   9 +-
 src/socketActions.ts                          |   6 +
 src/store/config/actions.ts                   |  16 +-
 src/store/config/getters.ts                   |   6 +-
 src/store/config/index.ts                     |  15 +-
 src/store/config/mutations.ts                 |  33 ++--
 src/store/config/types.ts                     |  24 ++-
 src/views/Dashboard.vue                       | 111 +++++++++++-
 todo.md                                       |  14 +-
 23 files changed, 504 insertions(+), 168 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ad65e3dc2a..33c6e3b246 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17480,6 +17480,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -19737,6 +19742,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "vuetify": {
       "version": "2.3.21",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.21.tgz",
diff --git a/package.json b/package.json
index f9716799ae..5474932b1a 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "vue-prism-editor": "^1.2.2",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.2.0",
+    "vuedraggable": "^2.24.3",
     "vuetify": "^2.3.21",
     "vuex": "^3.6.0"
   },
diff --git a/src/components/AppDrawer.vue b/src/components/AppDrawer.vue
index 67b11ebad0..deae018a9a 100644
--- a/src/components/AppDrawer.vue
+++ b/src/components/AppDrawer.vue
@@ -47,6 +47,30 @@
 
     <v-divider></v-divider>
     <system-printers-widget @click="this.close"></system-printers-widget>
+
+    <v-divider></v-divider>
+    <v-list
+      dense
+      subheader
+      two-line
+      flat
+      v-model="layoutMode">
+      <v-list-item-group
+        multiple
+      >
+        <v-list-item @click.prevent="layoutMode = !layoutMode">
+          <v-list-item-action>
+            <v-checkbox :input-value="layoutMode"></v-checkbox>
+          </v-list-item-action>
+
+          <v-list-item-content>
+            <v-list-item-title>Adjust layout</v-list-item-title>
+            <v-list-item-subtitle>Adjust dashboard layout</v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list-item-group>
+    </v-list>
+
   </v-navigation-drawer>
 </template>
 
@@ -69,6 +93,15 @@ export default class AppDrawer extends Mixins(UtilsMixin) {
   @Prop({ type: Boolean, default: false })
   value!: boolean
 
+  get layoutMode () {
+    return this.$store.state.config.layoutMode
+  }
+
+  set layoutMode (val: boolean) {
+    this.$store.commit('config/setLayoutMode', val)
+    this.close()
+  }
+
   get instanceName () {
     return this.$store.state.config.fileConfig.general.instanceName
   }
diff --git a/src/components/cards/CollapsableCard.vue b/src/components/cards/CollapsableCard.vue
index 0d04c48b6e..279ecdd4cb 100644
--- a/src/components/cards/CollapsableCard.vue
+++ b/src/components/cards/CollapsableCard.vue
@@ -4,7 +4,28 @@
     color="tertiary"
     :rounded="rounded"
     :loading="isLoading">
-    <v-card-title class="card-title quaternary py-1">
+
+    <div v-if="hasTabbedTitleSlot()" :class="{ 'draggable': isInLayout }">
+      <slot
+        name="tabbed-title"
+        v-bind:attrs="{
+          inLayout: isInLayout,
+          enabled,
+          value: isCollapsed,
+          isCollapsed
+        }"
+        v-bind:on="{
+          'input': onCollapseChange,
+          'layout-enabled': onLayoutEnabled
+        }">
+      </slot>
+    </div>
+
+    <v-card-title
+      v-if="!hasTabbedTitleSlot()"
+      class="card-title quaternary py-1"
+      :class="{ 'draggable': isInLayout }"
+    >
       <slot name="title">
         <v-icon left>{{ icon }}</v-icon>
         <span class="font-weight-light">{{ title }}</span>
@@ -12,13 +33,13 @@
       <v-spacer />
 
       <!-- Menu Buttons, desktop + -->
-      <div class="d-none d-lg-flex">
+      <div class="d-none d-lg-flex" v-if="!isInLayout">
         <slot name="menu"></slot>
       </div>
 
       <!-- Menu, mobile / tablet -->
       <v-menu
-        v-if="hasMenuSlot && !hideMenu"
+        v-if="hasMenuSlot && !hideMenu && !isInLayout"
         left>
         <template v-slot:activator="{ on, attrs }">
           <v-btn
@@ -37,20 +58,28 @@
 
       <!-- Collapse Control -->
       <slot name="collapse-button">
-        <btn-collapse v-model="isCollapsed"></btn-collapse>
+        <btn-collapse
+          :value="isCollapsed"
+          @input="isCollapsed = $event"
+          :enabled="enabled"
+          :inLayout="isInLayout"
+          @layout-enabled="$emit('enabled', $event)"
+        >
+        </btn-collapse>
       </slot>
     </v-card-title>
+
     <v-divider></v-divider>
 
     <v-expand-transition v-if="!lazy">
       <div
         @transitionend="transitionEvent"
         id="card-content"
-        v-if="!isCollapsed"
+        v-if="!isCollapsed && !isInLayout"
         :class="_contentClasses"
         :style="_contentStyles">
         <v-card-subtitle class="tertiary py-2" v-if="subTitle || hasSubTitleSlot">
-          <slot name="subTitle">
+          <slot name="sub-title">
             <span v-html="subTitle"></span>
           </slot>
         </v-card-subtitle>
@@ -65,7 +94,7 @@
       <div
         @transitionend="transitionEvent"
         id="card-content"
-        v-show="!isCollapsed"
+        v-show="!isCollapsed && !isInLayout"
         :class="_contentClasses"
         :style="_contentStyles">
         <v-card-subtitle class="tertiary py-2" v-if="subTitle || hasSubTitleSlot">
@@ -87,7 +116,7 @@ import { Component, Vue, Prop } from 'vue-property-decorator'
 
 @Component({})
 export default class ToolheadCard extends Vue {
-  @Prop({ type: String })
+  @Prop({ type: String, required: true })
   title!: string
 
   @Prop({ type: String, required: false })
@@ -99,12 +128,21 @@ export default class ToolheadCard extends Vue {
   @Prop({ type: Boolean, default: true })
   lazy!: boolean // use v-show or v-if
 
-  @Prop({ type: String, required: true })
+  @Prop({ type: String, required: false })
   icon!: string
 
   @Prop({ type: Boolean, default: false })
   loading!: boolean
 
+  @Prop({ type: Boolean, default: false })
+  draggable!: boolean
+
+  @Prop({ type: Boolean, default: false })
+  inLayout!: boolean
+
+  @Prop({ type: Boolean, default: true })
+  enabled!: boolean
+
   @Prop({ type: Boolean, default: true })
   collapsable!: boolean
 
@@ -153,7 +191,8 @@ export default class ToolheadCard extends Vue {
   }
 
   get id (): string {
-    return (this.cardKey) ? this.cardKey : this.title
+    if (this.cardKey) return this.cardKey
+    return this.title.replace(' ', '')
   }
 
   get isLoading (): boolean | string {
@@ -161,35 +200,44 @@ export default class ToolheadCard extends Vue {
   }
 
   get isCollapsed (): boolean {
-    const collapsed = (this.$store.state.config.localConfig[this.id] === undefined)
+    const collapsed = (this.$store.state.config.cardState[this.id] === undefined)
       ? this.collapsed
-      : this.$store.state.config.localConfig[this.id]
+      : this.$store.state.config.cardState[this.id]
 
     return collapsed
   }
 
   set isCollapsed (val: boolean) {
-    this.$store.dispatch('config/saveLocal', { [this.id]: val })
+    this.$store.dispatch('config/saveCardState', { [this.id]: val })
+  }
+
+  get isInLayout (): boolean {
+    return (this.inLayout && this.draggable)
   }
 
   get hasDefaultSlot () {
-    return this.$slots.default || this.$scopedSlots.default
+    return !!this.$slots.default || !!this.$scopedSlots.default
   }
 
   get hasMenuSlot () {
-    return this.$slots.menu || this.$scopedSlots.menu
+    return !!this.$slots.menu || !!this.$scopedSlots.menu
   }
 
   get hasTitleSlot () {
-    return this.$slots.title || this.$scopedSlots.title
+    return !!this.$slots.title || !!this.$scopedSlots.title
   }
 
   get hasSubTitleSlot () {
-    return this.$slots.subTitle || this.$scopedSlots.subTitle
+    return !!this.$slots['sub-title'] || !!this.$scopedSlots['sub-title']
   }
 
   get hasCollapseButtonSlot () {
-    return this.$slots['collapse-button'] || this.$scopedSlots['collapse-button']
+    return !!this.$slots['collapse-button'] || !!this.$scopedSlots['collapse-button']
+  }
+
+  // Moved to a regular function because slots are not reactive.
+  hasTabbedTitleSlot () {
+    return !!this.$slots['tabbed-title'] || !!this.$scopedSlots['tabbed-title']
   }
 
   mounted () {
@@ -198,6 +246,14 @@ export default class ToolheadCard extends Vue {
     }
   }
 
+  onCollapseChange (e: boolean) {
+    this.isCollapsed = e
+  }
+
+  onLayoutEnabled (e: Event) {
+    this.$emit('enabled', e)
+  }
+
   transitionEvent (e: TransitionEvent) {
     if (
       e.target &&
diff --git a/src/components/cards/dashboard/CameraCard.vue b/src/components/cards/dashboard/CameraCard.vue
index ec7b2b23d5..35b4359bc5 100644
--- a/src/components/cards/dashboard/CameraCard.vue
+++ b/src/components/cards/dashboard/CameraCard.vue
@@ -3,7 +3,11 @@
     title="Camera"
     icon="$camera"
     :lazy="false"
-    :collapsed="true">
+    :collapsed="true"
+    :draggable="true"
+    :inLayout="inLayout"
+    :enabled="enabled"
+    @enabled="$emit('enabled', $event)">
 
     <img :src="cameraUrl" class="webcam" :style="cameraTransforms" v-if="streamType === 'mjpgstreamer'" />
     <video :src="cameraUrl" autoplay class="webcam" :style="cameraTransforms" v-if="streamType === 'ipcamera'" />
@@ -11,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import PrintStatusWidget from '@/components/widgets/PrintStatusWidget.vue'
 import UtilsMixin from '@/mixins/utils'
 
@@ -21,6 +25,9 @@ import UtilsMixin from '@/mixins/utils'
   }
 })
 export default class CameraCard extends Mixins(UtilsMixin) {
+  @Prop({ type: Boolean, default: true })
+  enabled!: boolean
+
   get streamType () {
     return this.$store.state.config.fileConfig.camera.type
   }
@@ -36,6 +43,10 @@ export default class CameraCard extends Mixins(UtilsMixin) {
     transforms += (config && config.flipY) ? ' scaleY(-1)' : ''
     return (transforms.trimLeft().length) ? { transform: transforms.trimLeft() } : {}
   }
+
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
 }
 </script>
 
diff --git a/src/components/cards/dashboard/ConsoleCard.vue b/src/components/cards/dashboard/ConsoleCard.vue
index 703023647b..c1d58e5da7 100644
--- a/src/components/cards/dashboard/ConsoleCard.vue
+++ b/src/components/cards/dashboard/ConsoleCard.vue
@@ -5,7 +5,11 @@
     cardClasses="mb-2 mb-sm-4 d-flex flex-column"
     contentClasses="flex-grow-1 flow-shrink-0"
     :height="450"
-    :collapsed="true">
+    :collapsed="true"
+    :draggable="true"
+    :inLayout="inLayout"
+    :enabled="enabled"
+    @enabled="$emit('enabled', $event)">
 
     <console-widget
       :items="items"
@@ -15,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import PrintStatusWidget from '@/components/widgets/PrintStatusWidget.vue'
 import UtilsMixin from '@/mixins/utils'
 import ConsoleWidget from '@/components/widgets/ConsoleWidget.vue'
@@ -28,8 +32,15 @@ import { ConsoleEntry } from '@/store/socket/types'
   }
 })
 export default class ConsoleCard extends Mixins(UtilsMixin) {
+  @Prop({ type: Boolean, default: true })
+  enabled!: boolean
+
   get items (): ConsoleEntry[] {
     return this.$store.state.socket.console
   }
+
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
 }
 </script>
diff --git a/src/components/cards/dashboard/PrinterLimitsCard.vue b/src/components/cards/dashboard/PrinterLimitsCard.vue
index 4504b4f3c4..75f8763f85 100644
--- a/src/components/cards/dashboard/PrinterLimitsCard.vue
+++ b/src/components/cards/dashboard/PrinterLimitsCard.vue
@@ -2,13 +2,17 @@
   <collapsable-card
     title="Printer Limits"
     icon="$limits"
-    :collapsed="true">
+    :collapsed="true"
+    :draggable="true"
+    :inLayout="inLayout"
+    :enabled="enabled"
+    @enabled="$emit('enabled', $event)">
     <printer-limits-widget></printer-limits-widget>
   </collapsable-card>
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import PrinterLimitsWidget from '@/components/widgets/PrinterLimitsWidget.vue'
 import UtilsMixin from '@/mixins/utils'
 
@@ -18,6 +22,11 @@ import UtilsMixin from '@/mixins/utils'
   }
 })
 export default class PrinterLimitsCard extends Mixins(UtilsMixin) {
+  @Prop({ type: Boolean, default: true })
+  enabled!: boolean
 
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
 }
 </script>
diff --git a/src/components/cards/dashboard/StatusCard.vue b/src/components/cards/dashboard/StatusCard.vue
index 74281d4b1c..a03a8d1ba5 100644
--- a/src/components/cards/dashboard/StatusCard.vue
+++ b/src/components/cards/dashboard/StatusCard.vue
@@ -1,7 +1,7 @@
 <template>
   <collapsable-card
     :hide-menu="hidePrinterMenu"
-    cardKey="status"
+    title="Status"
     icon="$printer3d">
 
     <template v-slot:title>
diff --git a/src/components/cards/dashboard/TemperatureGraphCard.vue b/src/components/cards/dashboard/TemperatureGraphCard.vue
index 1940e2e9ce..ab421ccb0b 100644
--- a/src/components/cards/dashboard/TemperatureGraphCard.vue
+++ b/src/components/cards/dashboard/TemperatureGraphCard.vue
@@ -2,7 +2,11 @@
   <collapsable-card
     :loading="!chartReady"
     title="Temperature"
-    icon="$chart">
+    icon="$chart"
+    :draggable="true"
+    :inLayout="inLayout"
+    :enabled="enabled"
+    @enabled="$emit('enabled', $event)">
 
     <v-card-text class="chart-container">
       <temperature-chart-widget @hook:mounted="chartMounted()" v-if="chartReady" :chart-data="chartData" :styles="chartStyles"></temperature-chart-widget>
@@ -12,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Watch, Prop } from 'vue-property-decorator'
 import { ChartData, Chart } from '@/store/socket/types'
 import UtilsMixin from '@/mixins/utils'
 
@@ -24,6 +28,9 @@ const TemperatureChartWidget = () => import(/* webpackChunkName: "tempchart", we
   }
 })
 export default class TemperatureGraphCard extends Mixins(UtilsMixin) {
+  @Prop({ type: Boolean, default: true })
+  enabled!: boolean
+
   private chartData: Chart.ChartData = {}
   private startInterval!: number | undefined
   private ready = false
@@ -65,6 +72,10 @@ export default class TemperatureGraphCard extends Mixins(UtilsMixin) {
     this.chartData = this.allChartData
     this.ready = true
   }
+
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
 }
 </script>
 
diff --git a/src/components/cards/dashboard/TemperatureTargetsCard.vue b/src/components/cards/dashboard/TemperatureTargetsCard.vue
index 00f1f895e7..75d27306fe 100644
--- a/src/components/cards/dashboard/TemperatureTargetsCard.vue
+++ b/src/components/cards/dashboard/TemperatureTargetsCard.vue
@@ -1,13 +1,17 @@
 <template>
   <collapsable-card
     title="Targets"
-    icon="$fire">
+    icon="$fire"
+    :draggable="true"
+    :inLayout="inLayout"
+    :enabled="enabled"
+    @enabled="$emit('enabled', $event)">
     <temperature-targets-widget></temperature-targets-widget>
   </collapsable-card>
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import TemperatureTargetsWidget from '@/components/widgets/TemperatureTargetsWidget.vue'
 import UtilsMixin from '@/mixins/utils'
 
@@ -16,5 +20,12 @@ import UtilsMixin from '@/mixins/utils'
     TemperatureTargetsWidget
   }
 })
-export default class TemperatureTargetsCard extends Mixins(UtilsMixin) {}
+export default class TemperatureTargetsCard extends Mixins(UtilsMixin) {
+  @Prop({ type: Boolean, default: true })
+  enabled!: boolean
+
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
+}
 </script>
diff --git a/src/components/cards/dashboard/ToolheadCard.vue b/src/components/cards/dashboard/ToolheadCard.vue
index e57604efda..a2c8ee5356 100644
--- a/src/components/cards/dashboard/ToolheadCard.vue
+++ b/src/components/cards/dashboard/ToolheadCard.vue
@@ -2,7 +2,11 @@
   <collapsable-card
     :hide-menu="(printerPrinting)"
     title="Tool"
-    icon="$printer3dNozzle">
+    icon="$printer3dNozzle"
+    :draggable="true"
+    :inLayout="inLayout"
+    :enabled="enabled"
+    @enabled="$emit('enabled', $event)">
 
     <template v-slot:title>
       <v-icon left>$printer3dNozzle</v-icon>
@@ -111,7 +115,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import UtilsMixin from '@/mixins/utils'
 import ToolheadWidget from '@/components/widgets/ToolheadWidget.vue'
 
@@ -121,6 +125,9 @@ import ToolheadWidget from '@/components/widgets/ToolheadWidget.vue'
   }
 })
 export default class ToolheadCard extends Mixins(UtilsMixin) {
+  @Prop({ type: Boolean, default: true })
+  enabled!: boolean
+
   /**
    * Ensures our temps are high enough to extrude or retract.
    */
@@ -139,5 +146,9 @@ export default class ToolheadCard extends Mixins(UtilsMixin) {
       ? parseInt(this.$store.state.socket.printer.configfile.config.extruder.min_extrude_temp)
       : 170 // Default to a sane value
   }
+
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
 }
 </script>
diff --git a/src/components/cards/dashboard/ToolsCard.vue b/src/components/cards/dashboard/ToolsCard.vue
index a5f1d35280..31ccdb57f3 100644
--- a/src/components/cards/dashboard/ToolsCard.vue
+++ b/src/components/cards/dashboard/ToolsCard.vue
@@ -1,77 +1,78 @@
 <template>
-  <v-card
-    class="mb-2 mb-sm-4"
-    color="tertiary">
-
-    <v-card-title
-      class="card-title quaternary py-1"
-      v-if="!showTabs">
+  <collapsable-card
+    title="Tabbed Tools"
+    icon="$tabs"
+    :draggable="true"
+    :inLayout="inLayout"
+    :enabled="enabled"
+    @enabled="$emit('enabled', $event)">
+
+    <template v-slot:title v-if="!showTabs && !inLayout">
       <v-icon left>$fire</v-icon>
       <span class="font-weight-light">Targets</span>
-      <v-spacer />
-
-      <btn-collapse v-model="isCollapsed"></btn-collapse>
-
-    </v-card-title>
-    <v-tabs
-      v-if="showTabs"
-      v-model="tab"
-      fixed-tabs
-      background-color="quaternary"
-    >
-      <v-tab :key="'targets'">
-        <v-icon left>$fire</v-icon>
-        Targets
-      </v-tab>
-      <v-tab :key="'macros'" v-if="hasMacros">
-        <v-icon left>$fileCode</v-icon>
-        Macros
-      </v-tab>
-      <v-tab :key="'power'" v-if="devicePowerPluginEnabled">
-        <v-icon left>$power</v-icon>
-        Power
-      </v-tab>
-      <v-tab :key="'jobs'" v-if="klippyConnected && jobsInDash">
-        <v-icon left>$files</v-icon>
-        Jobs
-      </v-tab>
-
-      <!-- Collapse Control -->
-      <btn-collapse class="align-self-center ml-2 mr-4" v-model="isCollapsed"></btn-collapse>
-    </v-tabs>
-    <v-divider></v-divider>
-
-    <v-expand-transition>
-      <div v-show="!isCollapsed">
-        <v-tabs-items v-model="tab" class="mb-auto rounded">
-          <v-tab-item :key="'targets'" class="tertiary rounded">
-            <temperature-targets-widget></temperature-targets-widget>
-          </v-tab-item>
-          <v-tab-item :key="'macros'" class="tertiary rounded" v-if="hasMacros">
-            <macros-widget></macros-widget>
-          </v-tab-item>
-          <v-tab-item :key="'power'" class="tertiary rounded" v-if="devicePowerPluginEnabled">
-            <power-control-widget></power-control-widget>
-          </v-tab-item>
-          <v-tab-item :key="'jobs'" class="tertiary rounded max-height" v-if="klippyConnected && jobsInDash">
-            <file-system-card
-              root="gcodes"
-              accept=".gcode,.ufp"
-              dense
-              :height="400"
-              :show-title="false"
-              :show-meta-data="false"
-              :upload-and-print="true"
-            ></file-system-card>
-          </v-tab-item>
-        </v-tabs-items>
-      </div>
-    </v-expand-transition>
-  </v-card>
+    </template>
+
+    <template v-slot:tabbed-title="{ attrs, on }" v-if="showTabs && !inLayout">
+      <v-tabs
+        v-if="showTabs && !inLayout"
+        v-model="tab"
+        fixed-tabs
+        background-color="quaternary"
+        class="rounded-t"
+      >
+        <v-tab :key="'targets'" :disabled="attrs.inLayout || attrs.isCollapsed">
+          <v-icon left>$fire</v-icon>
+          Targets
+        </v-tab>
+        <v-tab :key="'macros'" v-if="hasMacros" :disabled="attrs.inLayout || attrs.isCollapsed">
+          <v-icon left>$fileCode</v-icon>
+          Macros
+        </v-tab>
+        <v-tab :key="'power'" v-if="devicePowerPluginEnabled" :disabled="attrs.inLayout || attrs.isCollapsed">
+          <v-icon left>$power</v-icon>
+          Power
+        </v-tab>
+        <v-tab :key="'jobs'" v-if="klippyConnected && jobsInDash" :disabled="attrs.inLayout || attrs.isCollapsed">
+          <v-icon left>$files</v-icon>
+          Jobs
+        </v-tab>
+        <btn-collapse
+          class="align-self-center ml-1 mr-4"
+          v-bind="attrs"
+          v-on="on"
+        >
+        </btn-collapse>
+      </v-tabs>
+    </template>
+
+    <v-tabs-items v-model="tab" class="mb-auto rounded-b">
+      <v-tab-item :key="'targets'" class="tertiary rounded-b">
+        <temperature-targets-widget></temperature-targets-widget>
+      </v-tab-item>
+      <v-tab-item :key="'macros'" class="tertiary rounded-b" v-if="hasMacros">
+        <macros-widget></macros-widget>
+      </v-tab-item>
+      <v-tab-item :key="'power'" class="tertiary rounded-b" v-if="devicePowerPluginEnabled">
+        <power-control-widget></power-control-widget>
+      </v-tab-item>
+      <v-tab-item :key="'jobs'" class="tertiary rounded-b max-height" v-if="klippyConnected && jobsInDash">
+        <file-system-card
+          root="gcodes"
+          accept=".gcode,.ufp"
+          dense
+          :height="400"
+          :show-title="false"
+          :show-meta-data="false"
+          :upload-and-print="true"
+        ></file-system-card>
+      </v-tab-item>
+    </v-tabs-items>
+
+  </collapsable-card>
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import UtilsMixin from '@/mixins/utils'
 import FileSystemCard from '@/components/cards/FileSystemCard.vue'
 import PowerControlWidget from '@/components/widgets/PowerControlWidget.vue'
@@ -87,6 +88,9 @@ import TemperatureTargetsWidget from '@/components/widgets/TemperatureTargetsWid
   }
 })
 export default class ToolsCard extends Mixins(UtilsMixin) {
+  @Prop({ type: Boolean, default: true })
+  enabled!: boolean
+
   tab = 0
   // get activeTab () {
   //   return (this.$store.state.config.localConfig.dashTab === undefined)
@@ -106,18 +110,6 @@ export default class ToolsCard extends Mixins(UtilsMixin) {
     return (this.$store.getters['socket/getVisibleMacros'].length)
   }
 
-  get isCollapsed (): boolean {
-    const collapsed = (this.$store.state.config.localConfig.Tools === undefined)
-      ? false
-      : this.$store.state.config.localConfig.Tools
-
-    return collapsed
-  }
-
-  set isCollapsed (val: boolean) {
-    this.$store.dispatch('config/saveLocal', { Tools: val })
-  }
-
   get devicePowerPluginEnabled () {
     return (this.$store.state.socket.plugins.includes('power'))
   }
@@ -125,18 +117,14 @@ export default class ToolsCard extends Mixins(UtilsMixin) {
   get jobsInDash () {
     return this.$store.state.config.fileConfig.general.jobsInDash
   }
+
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-  .v-tabs-items {
-    > .v-window__container {
-      > .v-window-item.max-height {
-        // height: 400px;
-      }
-    }
-  }
-
   ::v-deep .v-tabs > .v-slide-group--is-overflowing.v-tabs-bar--is-mobile > .v-slide-group__prev,
   ::v-deep .v-tabs > .v-slide-group--is-overflowing.v-tabs-bar--is-mobile > .v-slide-group__next {
     display: none !important;
diff --git a/src/components/cards/settings/TemperaturePresetSettingsCard.vue b/src/components/cards/settings/TemperaturePresetSettingsCard.vue
index baa91ff475..a141be149e 100644
--- a/src/components/cards/settings/TemperaturePresetSettingsCard.vue
+++ b/src/components/cards/settings/TemperaturePresetSettingsCard.vue
@@ -1,6 +1,7 @@
 <template>
   <collapsable-card
     title="Temperature Presets"
+    cardKey="TemperaturePresetSettings"
     icon="$fire"
     subTitle="Apply predefined temperatures on the dashboard">
     <v-card-text>
diff --git a/src/components/inputs/BtnCollapse.vue b/src/components/inputs/BtnCollapse.vue
index 4161831c5d..3137d65a2d 100644
--- a/src/components/inputs/BtnCollapse.vue
+++ b/src/components/inputs/BtnCollapse.vue
@@ -1,10 +1,26 @@
 <template>
-  <v-btn
-    @click="emitChange(!value)"
-    fab small text>
-    <v-icon v-if="!value">$chevronUp</v-icon>
-    <v-icon v-if="value">$chevronDown</v-icon>
-  </v-btn>
+  <div>
+    <!-- Expand / Contract -->
+    <v-btn
+      v-if="!inLayout"
+      @click="emitChange(!value)"
+      fab small text>
+      <v-icon v-if="!value">$chevronUp</v-icon>
+      <v-icon v-if="value">$chevronDown</v-icon>
+    </v-btn>
+
+    <!-- In layout -->
+    <v-layout>
+      <v-checkbox
+        v-if="inLayout"
+        :input-value="enabled"
+        @change="$emit('layout-enabled', $event)"
+        hide-details
+        class="mt-0 pt-0">
+      </v-checkbox>
+      <v-icon class="handle" left v-if="inLayout">$drag</v-icon>
+    </v-layout>
+  </div>
 </template>
 
 <script lang="ts">
@@ -12,11 +28,23 @@ import { Component, Vue, Prop } from 'vue-property-decorator'
 
 @Component({})
 export default class BtnCollapse extends Vue {
-  @Prop({ default: false })
+  @Prop({ type: Boolean, default: false })
   value!: boolean
 
+  @Prop({ type: Boolean, default: false })
+  inLayout!: boolean
+
+  @Prop({ type: Boolean, default: true })
+  enabled!: boolean
+
   emitChange (value: boolean) {
     this.$emit('input', value)
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .handle {
+    cursor: pointer;
+  }
+</style>
diff --git a/src/globals.ts b/src/globals.ts
index 9b51723239..61299b848c 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -73,7 +73,9 @@ import {
   mdiRestartAlert,
   mdiUpdate,
   mdiChevronRight,
-  mdiChevronLeft
+  mdiChevronLeft,
+  mdiDrag,
+  mdiCheckboxMultipleBlank
 } from '@mdi/js'
 
 /**
@@ -85,7 +87,8 @@ export const Globals = Object.freeze({
   CONSOLE_SEND_PREFIX: '$ ',
   KLIPPY_RETRY_DELAY: 2000,
   KLIPPY_DISCONNECTED_REDIRECT: '/configuration',
-  LOCAL_APPCONFIG_STORAGE_KEY: 'appConfig',
+  LOCAL_CARDSTATE_STORAGE_KEY: 'cardState',
+  LOCAL_CARDLAYOUT_STORAGE_KEY: 'cardLayout',
   LOCAL_INSTANCES_STORAGE_KEY: 'appInstances',
   SETTINGS_FILENAME: '.fluidd.json',
   APP_NAME: 'Fluidd',
@@ -98,8 +101,10 @@ export const Icons = Object.freeze({
   help: mdiHelp,
   limits: mdiArrowHorizontalLock,
   send: mdiSend,
+  tabs: mdiCheckboxMultipleBlank,
   menu: mdiDotsVertical,
   menuAlt: mdiMenuDown,
+  drag: mdiDrag,
   chart: mdiChartTimelineVariant,
   power: mdiPower,
   powerCycle: mdiPowerCycle,
diff --git a/src/socketActions.ts b/src/socketActions.ts
index 6b21534b0d..f0e371dfc2 100644
--- a/src/socketActions.ts
+++ b/src/socketActions.ts
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import store from '@/store'
 import { Waits } from '@/globals'
 
 // /printer/restart (klipper restart) (DONE)
@@ -114,6 +115,7 @@ export const SocketActions = {
     const emit = (state === 'on')
       ? 'machine.device_power.on'
       : 'machine.device_power.off'
+    if (wait) store.dispatch('socket/addWait', wait)
     Vue.$socket.emit(
       emit, {
         dispatch: 'devicePower/onToggle',
@@ -188,6 +190,7 @@ export const SocketActions = {
   },
 
   async printerPrintCancel () {
+    store.dispatch('socket/addWait', Waits.onPrintCancel)
     Vue.$socket.emit(
       'printer.print.cancel', {
         dispatch: 'socket/onPrintCancel',
@@ -197,6 +200,7 @@ export const SocketActions = {
   },
 
   async printerPrintPause () {
+    store.dispatch('socket/addWait', Waits.onPrintPause)
     Vue.$socket.emit(
       'printer.print.pause', {
         dispatch: 'socket/onPrintPause',
@@ -206,6 +210,7 @@ export const SocketActions = {
   },
 
   async printerPrintResume () {
+    store.dispatch('socket/addWait', Waits.onPrintResume)
     Vue.$socket.emit(
       'printer.print.resume', {
         dispatch: 'socket/onPrintResume',
@@ -215,6 +220,7 @@ export const SocketActions = {
   },
 
   async printerGcodeScript (gcode: string, wait?: string) {
+    if (wait) store.dispatch('socket/addWait', wait)
     Vue.$socket.emit(
       'printer.gcode.script', {
         dispatch: 'socket/onGcodeScript',
diff --git a/src/store/config/actions.ts b/src/store/config/actions.ts
index d3c97b392a..447760ab63 100644
--- a/src/store/config/actions.ts
+++ b/src/store/config/actions.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { ActionTree } from 'vuex'
-import { ConfigState, LocalConfig, GenericSave, Config, InstanceConfig, FileConfig, HostConfig } from './types'
+import { ConfigState, GenericSave, Config, InstanceConfig, FileConfig, HostConfig, CardConfig, CardState } from './types'
 import { RootState } from '../types'
 import { Globals } from '@/globals'
 
@@ -34,17 +34,13 @@ export const actions: ActionTree<ConfigState, RootState> = {
     commit('onInitApiConfig', payload)
   },
 
-  /**
-   * Saves local keys to state and localstorage.
-   * Assumes a flat structure of key value pairs.
-   */
-  async saveLocal ({ commit }, payload: LocalConfig) {
-    commit('onSaveLocal', payload)
+  async saveCardConfig ({ commit }, payload: { group: string; cards: CardConfig[] }) {
+    commit('saveCardConfig', payload)
   },
 
-  // async addInstance ({ commit }, payload: InstanceConfig) {
-  //   commit('addInstance', payload)
-  // },
+  async saveCardState ({ commit }, payload: CardState) {
+    commit('saveCardState', payload)
+  },
 
   async removeInstance ({ commit }, payload: InstanceConfig) {
     commit('removeInstance', payload)
diff --git a/src/store/config/getters.ts b/src/store/config/getters.ts
index 4121c0136c..f660bc222d 100644
--- a/src/store/config/getters.ts
+++ b/src/store/config/getters.ts
@@ -1,5 +1,5 @@
 import { GetterTree } from 'vuex'
-import { ConfigState } from './types'
+import { CardConfig, ConfigState } from './types'
 import { RootState } from '../types'
 
 export const getters: GetterTree<ConfigState, RootState> = {
@@ -13,5 +13,9 @@ export const getters: GetterTree<ConfigState, RootState> = {
       return (a.active) ? -1 : (b.active) ? 1 : 0
     })
     return instances
+  },
+
+  getCards: (state) => (group: string): CardConfig[] => {
+    return state.cardLayout[group]
   }
 }
diff --git a/src/store/config/index.ts b/src/store/config/index.ts
index d064e4c3d7..bd5fbca8ca 100644
--- a/src/store/config/index.ts
+++ b/src/store/config/index.ts
@@ -11,7 +11,20 @@ export const defaultState = (): ConfigState => {
     apiUrl: '',
     socketUrl: '',
     unsavedChanges: false,
-    localConfig: {},
+    layoutMode: false,
+    cardState: {},
+    cardLayout: {
+      dashboard1: [
+        { name: 'toolhead-card', enabled: true },
+        { name: 'camera-card', enabled: true },
+        { name: 'printer-limits-card', enabled: true }
+      ],
+      dashboard2: [
+        { name: 'tools-card', enabled: true },
+        { name: 'console-card', enabled: true },
+        { name: 'temperature-graph-card', enabled: true }
+      ]
+    },
     instances: [],
     fileConfig: {
       general: {
diff --git a/src/store/config/mutations.ts b/src/store/config/mutations.ts
index 3aadcfcbf0..4c33923c99 100644
--- a/src/store/config/mutations.ts
+++ b/src/store/config/mutations.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { MutationTree } from 'vuex'
-import { ConfigState, FileConfig, LocalConfig, GenericSave, InstanceConfig, Config } from './types'
+import { ConfigState, FileConfig, GenericSave, InstanceConfig, Config, CardConfig } from './types'
 import { Macro } from '../socket/types'
 import { defaultState } from './index'
 import { Globals } from '@/globals'
@@ -48,9 +48,14 @@ export const mutations: MutationTree<ConfigState> = {
    * This would usually be set once loaded from localStorage.
    */
   onInitLocal (state) {
-    if (Globals.LOCAL_APPCONFIG_STORAGE_KEY in localStorage) {
-      const config = JSON.parse(localStorage[Globals.LOCAL_APPCONFIG_STORAGE_KEY])
-      Vue.set(state, 'localConfig', config)
+    if (Globals.LOCAL_CARDSTATE_STORAGE_KEY in localStorage) {
+      const config = JSON.parse(localStorage[Globals.LOCAL_CARDSTATE_STORAGE_KEY])
+      Vue.set(state, 'cardState', config)
+    }
+
+    if (Globals.LOCAL_CARDLAYOUT_STORAGE_KEY in localStorage) {
+      const config = JSON.parse(localStorage[Globals.LOCAL_CARDLAYOUT_STORAGE_KEY])
+      Vue.set(state, 'cardLayout', config)
     }
   },
 
@@ -130,13 +135,15 @@ export const mutations: MutationTree<ConfigState> = {
     set(state, payload.key, payload.value)
   },
 
-  /**
-   * Explicitly saves to the localConfig and match in localStorage.
-   */
-  onSaveLocal (state, payload: LocalConfig) {
-    const config = { ...state.localConfig, ...payload }
-    Vue.set(state, 'localConfig', config)
-    localStorage.setItem(Globals.LOCAL_APPCONFIG_STORAGE_KEY, JSON.stringify(config))
+  saveCardState (state, payload) {
+    const config = { ...state.cardState, ...payload }
+    Vue.set(state, 'cardState', config)
+    localStorage.setItem(Globals.LOCAL_CARDSTATE_STORAGE_KEY, JSON.stringify(config))
+  },
+
+  saveCardConfig (state, payload: { group: string; cards: CardConfig[] }) {
+    state.cardLayout[payload.group] = payload.cards
+    localStorage.setItem(Globals.LOCAL_CARDLAYOUT_STORAGE_KEY, JSON.stringify(state.cardLayout))
   },
 
   /**
@@ -176,6 +183,10 @@ export const mutations: MutationTree<ConfigState> = {
    */
   removePreset (state, payload) {
     state.fileConfig.dashboard.tempPresets.splice(payload, 1)
+  },
+
+  setLayoutMode (state, payload) {
+    state.layoutMode = payload
   }
 
 }
diff --git a/src/store/config/types.ts b/src/store/config/types.ts
index 1f68f24b0a..b4562c6116 100644
--- a/src/store/config/types.ts
+++ b/src/store/config/types.ts
@@ -1,17 +1,28 @@
 export interface ConfigState {
-  [key: string]: string | boolean | LocalConfig | InstanceConfig[] | FileConfig;
+  [key: string]: string | boolean | CardState | InstanceConfig[] | FileConfig | CardLayout;
   apiUrl: string;
   socketUrl: string;
   unsavedChanges: boolean;
-  localConfig: LocalConfig;
+  layoutMode: boolean;
+  cardState: CardState; // if a collapsable card is collapsed or not.
+  cardLayout: CardLayout; // position and state of draggable cards.
   instances: InstanceConfig[];
   fileConfig: FileConfig;
 }
 
-// This defines localstorage data.
-// We should keep these simple, so as to keep local storage to a minimum.
-export interface LocalConfig {
-  [key: string]: string | boolean | number;
+// Saved to local storage.
+export interface CardLayout {
+  [key: string]: CardConfig[];
+}
+
+export interface CardConfig {
+  name: string;
+  enabled: boolean;
+}
+
+// Saved to local storage.
+export interface CardState {
+  [key: string]: boolean;
 }
 
 export interface FileConfig {
@@ -76,6 +87,7 @@ export interface ApiConfig {
   socketUrl: string;
 }
 
+// Saved to localstorage.
 export interface InstanceConfig extends ApiConfig {
   name: string;
   active: boolean;
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 582565bee1..ce627faa27 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -2,16 +2,32 @@
   <v-container fluid class="constrained-width px-2 px-sm-4">
     <v-row class="mt-0 mt-sm-2">
       <v-col cols="12" md="6" class="pt-0">
-        <klippy-disconnected-card></klippy-disconnected-card>
+        <klippy-disconnected-card v-if="!klippyConnected"></klippy-disconnected-card>
         <status-card v-if="klippyConnected"></status-card>
-        <camera-card v-if="cameraEnabled"></camera-card>
-        <toolhead-card></toolhead-card>
-        <printer-limits-card></printer-limits-card>
+        <draggable
+          class="list-group"
+          v-model="col1"
+          v-bind="dragOptions"
+          @start.stop="drag = true"
+          @end.stop="drag = false"
+        >
+          <transition-group type="transition" :name="!drag ? 'flip-list' : null">
+            <component v-for="c in col1" :is="c.name" :key="c.name" :enabled="c.enabled" @enabled="onEnabled($event, c, 'dashboard1')"></component>
+          </transition-group>
+        </draggable>
       </v-col>
       <v-col cols="12" md="6" class="pt-0">
-        <tools-card></tools-card>
-        <console-card></console-card>
-        <temperature-graph-card></temperature-graph-card>
+        <draggable
+          class="list-group"
+          v-model="col2"
+          v-bind="dragOptions"
+          @start.stop="drag = true"
+          @end.stop="drag = false"
+        >
+          <transition-group type="transition" :name="!drag ? 'flip-list' : null">
+            <component v-for="c in col2" :is="c.name" :key="c.name" :enabled="c.enabled" @enabled="onEnabled($event, c, 'dashboard2')"></component>
+          </transition-group>
+        </draggable>
       </v-col>
     </v-row>
   </v-container>
@@ -19,6 +35,7 @@
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
+import draggable from 'vuedraggable'
 import StatusCard from '@/components/cards/dashboard/StatusCard.vue'
 import ToolsCard from '@/components/cards/dashboard/ToolsCard.vue'
 import ToolheadCard from '@/components/cards/dashboard/ToolheadCard.vue'
@@ -29,9 +46,12 @@ import ConsoleCard from '@/components/cards/dashboard/ConsoleCard.vue'
 import PrinterLimitsCard from '@/components/cards/dashboard/PrinterLimitsCard.vue'
 import KlippyDisconnectedCard from '@/components/cards/KlippyDisconnectedCard.vue'
 import UtilsMixin from '@/mixins/utils'
+import { CardConfig } from '@/store/config/types'
+import { cloneDeep } from 'lodash-es'
 
 @Component({
   components: {
+    draggable,
     StatusCard,
     ToolsCard,
     ToolheadCard,
@@ -44,8 +64,85 @@ import UtilsMixin from '@/mixins/utils'
   }
 })
 export default class Dashboard extends Mixins(UtilsMixin) {
+  drag = false
+
   get cameraEnabled (): boolean {
     return this.$store.state.config.fileConfig.camera.enabled
   }
+
+  get col1 (): CardConfig[] {
+    return this.filterComponents(this.$store.getters['config/getCards']('dashboard1'))
+  }
+
+  set col1 (cards: CardConfig[]) {
+    this.$store.dispatch('config/saveCardConfig', { group: 'dashboard1', cards })
+  }
+
+  get col2 (): CardConfig[] {
+    return this.filterComponents(this.$store.getters['config/getCards']('dashboard2'))
+  }
+
+  set col2 (cards: CardConfig[]) {
+    this.$store.dispatch('config/saveCardConfig', { group: 'dashboard2', cards })
+  }
+
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
+
+  get dragOptions () {
+    return {
+      animation: 200,
+      handle: '.handle',
+      group: 'dashboard',
+      disabled: !this.inLayout,
+      ghostClass: 'ghost'
+    }
+  }
+
+  filterComponents (componentArray: CardConfig[]) {
+    return componentArray.filter((s) => {
+      // Take care of special cases.
+      if (this.inLayout) return true
+      if (s.name === 'camera-card' && !this.cameraEnabled) return false
+
+      // Otherwise return whatever the enabled state is.
+      return s.enabled
+    })
+  }
+
+  onEnabled (enabled: boolean, c: CardConfig, group: string) {
+    const cards = cloneDeep(this.$store.getters['config/getCards'](group))
+    const card = cards.find((card: CardConfig) => c.name === card.name)
+    if (card) {
+      card.enabled = enabled
+      this.$store.dispatch('config/saveCardConfig', { group, cards })
+    }
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+  .flip-list-move {
+    transition: transform 0.5s;
+  }
+
+  .no-move {
+    transition: transform 0s;
+  }
+
+  .ghost {
+    opacity: 0.5;
+    background: #ccc;
+  }
+
+  .list-group {
+    min-height: 20px;
+
+    span {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+</style>
diff --git a/todo.md b/todo.md
index e31481b988..a2e59d841c 100644
--- a/todo.md
+++ b/todo.md
@@ -5,9 +5,9 @@
 - z-offset configuration + sheet config
 - upload progress indicator
 - add ability to delete bed mesh profile
-- 
 - update panel collapse so these are remembered per instance
 - stage 1 themes (pick a specific theme (red, green etc..)
+- ensure users can still download log files when the printer is not in an error state
 - docker image
 - load gcode help and implement in console
 - show mm/s in status
@@ -15,6 +15,15 @@
 - PID calibrate option via dialog maybe?
 - Drag and Drop move.
 - Add a way to specify a value for sliders
+- show known meta data on print dialog?
+
+- self update
+- draggable cards (vue-draggable)
+- side panel hamburger gets notification circle (orange or red) which indicates something new.
+- side panel itself gets an alert notifying of new updates
+- side panel itself gets toggle to allow dragging panels or not
+- side panel itself gets a button to save layouts?
+
 
 ## Refactoring / Core
 - cleanup socket store / move socket out and keep printer data
@@ -37,7 +46,6 @@
 - finish up update notification / pwa setup
 - figure out https
 - click / tap image camara update option (i.e., not constant image updates)
-- dynamic favicon that looks like the percent finished ring (maybe.. ?)
 - probed vs mesh bed level display option
 - should be able to force part speed fan during a print?
 - add UI to filter out temp waits from console
@@ -71,4 +79,4 @@
 - timelapses
 - plugins for raise cloud, astroprint and alike
 - to remote access without vpn
-- more security?
+- more security?
\ No newline at end of file