2.30.0

New Crowdin translations

locales/de.yml

@@ -78,9 +78,13 @@ common:
     list: "リスト"
     swap-left: "左に移動"
     swap-right: "右に移動"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "カラムを削除"
     add-column: "カラムを追加"
     rename: "名前を変更"
+    stack-left: "左に重ねる"
+    pop-right: "右に出す"
 common/views/components/connect-failed.vue:
   title: "Verbindung zum Server ist fehlgeschlagen"
   description: "Es gibt entweder ein Problem mit deiner Internetverbindung, der Server ist nicht erreichbar oder wird gerade gewartet. Bitte versuche es später noch einmal."

locales/en.yml

@@ -76,11 +76,15 @@ common:
     global: "Global"
     notifications: "Notifications"
     list: "List"
-    swap-left: "Move Left"
+    swap-left: "Move left"
-    swap-right: "Move Right"
+    swap-right: "Move right"
+    swap-up: "Move upward"
+    swap-down: "Move downward"
     remove: "Remove"
     add-column: "Add a column"
-    rename: "名前を変更"
+    rename: "Rename"
+    stack-left: "Stack to left"
+    pop-right: "Pop to right"
 common/views/components/connect-failed.vue:
   title: "Unable to connect to the server"
   description: "There is a problem either with your Internet connection, or the server may be down or under maintenance. Please {try again} later."

locales/es.yml

@@ -78,9 +78,13 @@ common:
     list: "リスト"
     swap-left: "左に移動"
     swap-right: "右に移動"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "カラムを削除"
     add-column: "カラムを追加"
     rename: "名前を変更"
+    stack-left: "左に重ねる"
+    pop-right: "右に出す"
 common/views/components/connect-failed.vue:
   title: "サーバーに接続できません"
   description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから{再度お試し}ください。"

locales/fr.yml

@@ -36,10 +36,10 @@ common:
     confused: "Confus"
     pudding: "Pudding"
   note-placeholders:
-    a: "今どうしてる？"
+    a: "Que faîtes vous à cet instant ?"
-    b: "何かありましたか？"
+    b: "Quoi de neuf ?"
     c: "Qu'avez-vous en tête ?"
-    d: "言いたいことは？"
+    d: "Voulez-vous exprimer quelque chose ?"
     e: "Écrivez ici"
     f: "En attente de vos écrits"
   delete: "Supprimer"
@@ -78,9 +78,13 @@ common:
     list: "Liste"
     swap-left: "Déplacer à gauche"
     swap-right: "Déplacer à droite"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "Supprimer"
     add-column: "Ajouter une colonne"
-    rename: "名前を変更"
+    rename: "Renommer"
+    stack-left: "左に重ねる"
+    pop-right: "右に出す"
 common/views/components/connect-failed.vue:
   title: "Impossible de se connecter au server."
   description: "Il y a soit un problème avec votre connexion internet, soit le serveur est hors-ligne ou en maintenance. Veuillez {ressayer} plus tard."
@@ -104,7 +108,7 @@ common/views/components/connect-failed.troubleshooter.vue:
   success: "Connexion au serveur de Misskey reussie!"
   success-desc: "La connexion au serveur a été reussie. Veuillez recharger la page."
   flush: "Vider le cache"
-  set-version: "バージョン指定"
+  set-version: "Choisissez une version"
 common/views/components/messaging.vue:
   search-user: "Trouver un utilisateur"
   you: "Vous"
@@ -199,7 +203,7 @@ common/views/components/uploader.vue:
 common/views/components/visibility-chooser.vue:
   public: "Public"
   home: "Accueil"
-  home-desc: "ホームタイムラインにのみ公開"
+  home-desc: "Publier sur le fil d'Accueil uniquement"
   followers: "Abonnés"
   followers-desc: "Publier à vos abonnés uniquement"
   specified: "Direct"
@@ -225,9 +229,9 @@ common/views/widgets/memo.vue:
   save: "Enregistrer"
 desktop/views/components/activity.chart.vue:
   total: "Black ... Total"
-  notes: "Blue ... Notes"
+  notes: "Bleu ... Notes"
-  replies: "Red ... Replies"
+  replies: "Rouge ... Réponses"
-  renotes: "Green ... Renotes"
+  renotes: "Vert ... Partages"
 desktop/views/components/activity.vue:
   title: "Activitié"
   toggle: "Afficher les vues"
@@ -323,7 +327,7 @@ desktop/views/components/friends-maker.vue:
 desktop/views/components/game-window.vue:
   game: "Othello"
 desktop/views/components/home.vue:
-  done: "完了"
+  done: "Envoyer"
   add-widget: "Ajouter un widget"
   add: "Ajouter"
 desktop/views/input-dialog.vue:
@@ -337,14 +341,14 @@ desktop/views/components/note-detail.vue:
   more: "Charger davantage de conversations"
   private: "cette publication est privée"
   deleted: "cette publication a été supprimée"
-  reposted-by: "{}がRenote"
+  reposted-by: "Republié par {}"
   location: "Géolocalisation"
-  renote: "Renote"
+  renote: "Republier"
   add-reaction: "Ajouter votre reaction"
 desktop/views/components/notes.note.vue:
   reposted-by: "Reposté par {}"
   reply: "Répondre"
-  renote: "Renote"
+  renote: "Republier"
   add-reaction: "Ajouter votre reaction"
   detail: "Afficher les détails"
   private: "cette publication est privée"
@@ -360,7 +364,7 @@ desktop/views/components/post-form.vue:
   quote-placeholder: "Citer cette note"
   submit: "Poster"
   reply: "Répondre"
-  renote: "Renote"
+  renote: "Republier"
   posted: "Posté!"
   replied: "Répondu!"
   reposted: "Reposté!"
@@ -384,7 +388,7 @@ desktop/views/components/progress-dialog.vue:
 desktop/views/components/renote-form.vue:
   quote: "Citer..."
   cancel: "Annuler"
-  renote: "Renote"
+  renote: "Republier"
   reposting: "Repost en cours..."
   success: "Reposté!"
   failure: "La renote a échoué"
@@ -405,25 +409,25 @@ desktop/views/components/settings.vue:
   other: "Autres"
   license: "License"
   behaviour: "Comportement"
-  fetch-on-scroll: "スクロールで自動読み込み"
+  fetch-on-scroll: "Chargement lors du défilement"
   fetch-on-scroll-desc: "ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。"
   auto-popout: "ウィンドウの自動ポップアウト"
   auto-popout-desc: "ウィンドウが開かれるとき、ポップアウト(ブラウザ外に切り離す)可能なら自動でポップアウトします。この設定はブラウザに記憶されます。"
   advanced: "Paramètres avancés"
-  api-via-stream: "ストリームを経由したAPIリクエスト"
+  api-via-stream: "Requête API via le flux"
   api-via-stream-desc: "この設定をオンにすると、websocket接続を経由してAPIリクエストが行われます(パフォーマンス向上が期待できます)。オフにすると、ネイティブの fetch APIが利用されます。この設定はこのデバイスのみ有効です。"
-  display: "デザインと表示"
+  display: "Affichage et design"
   customize: "Personnaliser l'Accueil"
   dark-mode: "Mode nuit"
   circle-icons: "Utiliser des icônes circulaires"
   gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
   post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
   show-reply-target: "リプライ先を表示する"
-  show-my-renotes: "自分の行ったRenoteをタイムラインに表示する"
+  show-my-renotes: "Afficher mes republications dans le fil"
   show-renoted-my-notes: "Renoteされた自分の投稿をタイムラインに表示する"
   show-maps: "Afficher la carte"
   show-maps-desc: "位置情報が添付された投稿のマップを自動的に展開します。"
-  sound: "サウンド"
+  sound: "Son"
   enable-sounds: "Activer le son"
   enable-sounds-desc: "投稿やメッセージを送受信したときなどにサウンドを再生します。この設定はブラウザに記憶されます。"
   volume: "Volume"
@@ -439,17 +443,17 @@ desktop/views/components/settings.vue:
   cache: "Cache"
   clean-cache: "Nettoyage"
   cache-warn: "クリーンアップを行うと、ブラウザに記憶されたアカウント情報のキャッシュ、書きかけの投稿・返信・メッセージ、およびその他のデータ(設定情報含む)が削除されます。クリーンアップを行った後はページを再度読み込みする必要があります。"
-  cache-cleared: "キャッシュを削除しました"
+  cache-cleared: "Cache nettoyé"
-  cache-cleared-desc: "ページを再度読み込みしてください。"
+  cache-cleared-desc: "Veuillez recharger la page."
   auto-watch: "投稿の自動ウォッチ"
   auto-watch-desc: "リアクションしたり返信したりした投稿に関する通知を自動的に受け取るようにします。"
   about: "À propose de Misskey"
-  operator: "このサーバーの運営者"
+  operator: "L'admin de cette instance"
   update: "Mise à jour de Misskey"
   version: "Version :"
   latest-version: "Dernière version :"
   update-checking: "Recherche de mises à jour"
-  do-update: "アップデートを確認"
+  do-update: "Rechercher des mises à jour"
   update-settings: "Paramètres avancés"
   prevent-update: "アップデートを延期する(非推奨)"
   prevent-update-desc: "この設定をオンにしてもアップデートが反映される場合があります。この設定はこのデバイスのみ有効です。"
@@ -458,13 +462,13 @@ desktop/views/components/settings.vue:
   update-available: "Nouvelle version disponible !"
   update-available-desc: "ページを再度読み込みすると更新が適用されます。"
   advanced-settings: "Réglages avancés"
-  debug-mode: "デバッグモードを有効にする"
+  debug-mode: "Activer le mode debug"
-  debug-mode-desc: "この設定はブラウザに記憶されます。"
+  debug-mode-desc: "Ce paramètre est stocké dans le navigateur."
-  experimental: "実験的機能を有効にする"
+  experimental: "Activer les fonctionnalités expérimentales"
   experimental-desc: "実験的機能を有効にするとMisskeyの動作が不安定になる可能性があります。この設定はブラウザに記憶されます。"
   tools: "Outils"
   task-manager: "Gestionnaire de tâches"
-  third-parties: "サードパーティ"
+  third-parties: "Services tiers"
 desktop/views/components/settings.2fa.vue:
   intro: "Si vous configurez la vérication en deux étapes vous aurez non seulement besoin de votre mot de passe mais aussi un appareil déjà pré-enregistré(tel que votre smartphone) ce qui ameliora grandement la sécurité de votre compte."
   detail: "Voir les détails..."
@@ -491,7 +495,7 @@ desktop/views/components/settings.api.vue:
   token: "Jeton :"
   enter-password: "Veuillez entrer le mot de passe"
 desktop/views/components/settings.apps.vue:
-  no-apps: "連携しているアプリケーションはありません"
+  no-apps: "Aucune application autorisée"
 desktop/views/components/settings.mute.vue:
   no-users: "Aucun utilisateurs mis en sourdine"
 desktop/views/components/settings.password.vue:
@@ -553,7 +557,7 @@ desktop/views/components/user-lists-window.vue:
   create-list: "Créer une liste"
 desktop/views/components/user-preview.vue:
   notes: "Publications"
-  following: "フォロー"
+  following: "Abonné à"
   followers: "Abonnés"
 desktop/views/components/users-list.vue:
   all: "Tout"
@@ -571,7 +575,7 @@ desktop/views/pages/welcome.vue:
   signin: "Connexion"
   signup: "S'enregistrer"
   signin-button: "Se connecter"
-  signup-button: "やる"
+  signup-button: "S'inscrire"
   timeline: "Fil d'actualité"
 desktop/views/pages/drive.vue:
   title: "Lecteur de Misskey"
@@ -679,7 +683,7 @@ mobile/views/components/follow-button.vue:
   request-pending: "フォロー許可待ち"
   follow-request: "Demande d'abonnement"
 mobile/views/components/friends-maker.vue:
-  title: "気になるユーザーをフォロー"
+  title: "Abonnez-vous aux utilisateurs"
   empty: "おすすめのユーザーは見つかりませんでした。"
   fetching: "Chargement"
   refresh: "Voir plus"
@@ -715,34 +719,34 @@ mobile/views/components/notifications.vue:
 mobile/views/components/post-form.vue:
   add-visible-user: "Ajouter un utilisateur"
   submit: "Poster"
-  reply: "返信"
+  reply: "Répondre"
-  renote: "Renote"
+  renote: "Republier"
-  quote-placeholder: "この投稿を引用... (オプション)"
+  quote-placeholder: "Citer ce billet ... (Facultatif)"
   reply-placeholder: "Répondre à cette note"
   cw-placeholder: "内容への注釈 (オプション)"
-  location-alert: "お使いの端末は位置情報に対応していません"
+  location-alert: "Votre appareil ne prend pas en charge les services de localisation"
-  error: "エラー"
+  error: "Erreur"
-  username-prompt: "ユーザー名を入力してください"
+  username-prompt: "Saisir un nom d'utilisateur"
 mobile/views/components/sub-note-content.vue:
-  private: "この投稿は非公開です"
+  private: "cette publication est privée"
-  deleted: "この投稿は削除されました"
+  deleted: "cette publication a été supprimée"
-  media-count: "{}つのメディア"
+  media-count: "{} médias attachés"
   poll: "Sondage"
 mobile/views/components/timeline.vue:
   empty: "Pas de notes"
   load-more: "Afficher plus"
 mobile/views/components/ui.nav.vue:
-  timeline: "タイムライン"
+  timeline: "Fil d'actualité"
   notifications: "Notifications"
   messaging: "Messages"
-  follow-requests: "フォロー申請"
+  follow-requests: "Demandes d'abonnement"
   search: "Rechercher"
   drive: "Drive"
-  favorites: "お気に入り"
+  favorites: "Favoris"
-  user-lists: "リスト"
+  user-lists: "Listes"
-  widgets: "ウィジェット"
+  widgets: "Modules"
-  game: "ゲーム"
+  game: "Jeux"
-  darkmode: "ダークモード"
+  darkmode: "Mode nuit"
   settings: "Réglages"
   about: "À propose de Misskey"
 mobile/views/components/user-timeline.vue:
@@ -757,10 +761,10 @@ mobile/views/pages/favorites.vue:
   title: "Favoris"
 mobile/views/pages/user-lists.vue:
   title: "Listes"
-  enter-list-name: "リスト名を入力してください"
+  enter-list-name: "Nom de la liste"
 mobile/views/pages/drive.vue:
   drive: "Drive"
-  more: "もっと見る"
+  more: "Afficher plus ..."
 mobile/views/pages/followers.vue:
   followers-of: "Abonnés de {}"
 mobile/views/pages/following.vue:
@@ -822,7 +826,7 @@ mobile/views/pages/settings.vue:
   post-style-standard: "Standard"
   post-style-smart: "Intelligent"
   behavior: "Comportement"
-  fetch-on-scroll: "スクロールで自動読み込み"
+  fetch-on-scroll: "Chargement lors du défilement"
   disable-via-mobile: "「モバイルからの投稿」フラグを付けない"
   load-raw-images: "Afficher les photos jointes en haute qualité"
   load-remote-media: "Afficher les médias sur le serveur distant"

locales/it.yml

@@ -78,9 +78,13 @@ common:
     list: "リスト"
     swap-left: "左に移動"
     swap-right: "右に移動"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "カラムを削除"
     add-column: "カラムを追加"
     rename: "名前を変更"
+    stack-left: "左に重ねる"
+    pop-right: "右に出す"
 common/views/components/connect-failed.vue:
   title: "サーバーに接続できません"
   description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから{再度お試し}ください。"

locales/ja.yml

@@ -85,9 +85,13 @@ common:
     list: "リスト"
     swap-left: "左に移動"
     swap-right: "右に移動"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "カラムを削除"
     add-column: "カラムを追加"
     rename: "名前を変更"
+    stack-left: "左に重ねる"
+    pop-right: "右に出す"
 
 common/views/components/connect-failed.vue:
   title: "サーバーに接続できません"

locales/ko.yml

@@ -78,9 +78,13 @@ common:
     list: "リスト"
     swap-left: "左に移動"
     swap-right: "右に移動"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "カラムを削除"
     add-column: "カラムを追加"
     rename: "名前を変更"
+    stack-left: "左に重ねる"
+    pop-right: "右に出す"
 common/views/components/connect-failed.vue:
   title: "サーバーに接続できません"
   description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから{再度お試し}ください。"

locales/pl.yml

@@ -5,7 +5,7 @@ meta:
 common:
   misskey: "Planeta Fediwersum"
   about-title: "⭐ Fediwersum"
-  about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
+  about: "Dziękujemy za znalezienie Misskey. Misskey jest <b>zdecentralizowaną platformą mikroblogową</b> powstałą na Ziemi. Ponieważ działa ona w Fediwersum (uniwersum, w którego skład wchodzi wiele sieci społecznościowych), jest ona połączona z innymi platformami społecznościowymi. Spróbujesz odpocząć od zatłoczoneo miasta i zanurzyć się w nowym Internecie?"
   time:
     unknown: "nieznany"
     future: "w przyszłości"
@@ -78,9 +78,13 @@ common:
     list: "Listy"
     swap-left: "Przesuń w lewo"
     swap-right: "Przesuń w prawo"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "Usuń"
     add-column: "Dodaj kolumnę"
-    rename: "名前を変更"
+    rename: "Zmień nazwę"
+    stack-left: "左に重ねる"
+    pop-right: "右に出す"
 common/views/components/connect-failed.vue:
   title: "Nie udało się połączyć z serwerem"
   description: "Wystąpił problem z Twoim połączeniem z Internetem, lub z serwerem. {Spróbuj ponownie} wkrótce."

locales/pt.yml

@@ -78,9 +78,13 @@ common:
     list: "リスト"
     swap-left: "左に移動"
     swap-right: "右に移動"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "カラムを削除"
     add-column: "カラムを追加"
     rename: "名前を変更"
+    stack-left: "左に重ねる"
+    pop-right: "右に出す"
 common/views/components/connect-failed.vue:
   title: "サーバーに接続できません"
   description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから{再度お試し}ください。"

locales/ru.yml

@@ -78,9 +78,13 @@ common:
     list: "リスト"
     swap-left: "左に移動"
     swap-right: "右に移動"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "カラムを削除"
     add-column: "カラムを追加"
     rename: "名前を変更"
+    stack-left: "左に重ねる"
+    pop-right: "右に出す"
 common/views/components/connect-failed.vue:
   title: "サーバーに接続できません"
   description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから{再度お試し}ください。"

locales/zh.yml

@@ -78,9 +78,13 @@ common:
     list: "リスト"
     swap-left: "左に移動"
     swap-right: "右に移動"
+    swap-up: "上に移動"
+    swap-down: "下に移動"
     remove: "カラムを削除"
     add-column: "カラムを追加"
     rename: "名前を変更"
+    stack-left: "左に重ねる"
+    pop-right: "右に出す"
 common/views/components/connect-failed.vue:
   title: "サーバーに接続できません"
   description: "インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから{再度お試し}ください。"

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "2.29.1",
+	"version": "2.30.0",
-	"clientVersion": "1.0.6218",
+	"clientVersion": "1.0.6253",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,

src/client/app/common/views/components/menu.vue

@@ -1,10 +1,10 @@
 <template>
 <div class="mk-menu">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
-	<div class="popover" :class="{ compact }" ref="popover">
+	<div class="popover" :class="{ hukidasi }" ref="popover">
 		<template v-for="item in items">
-			<div v-if="item == null"></div>
+			<div v-if="item === null"></div>
-			<button v-else @click="clicked(item.onClick)" v-html="item.content"></button>
+			<button v-if="item" @click="clicked(item.onClick)" v-html="item.content"></button>
 		</template>
 	</div>
 </div>
@@ -16,6 +16,11 @@ import * as anime from 'animejs';
 
 export default Vue.extend({
 	props: ['source', 'compact', 'items'],
+	data() {
+		return {
+			hukidasi: !this.compact
+		};
+	},
 	mounted() {
 		this.$nextTick(() => {
 			const popover = this.$refs.popover as any;
@@ -24,18 +29,34 @@ export default Vue.extend({
 			const width = popover.offsetWidth;
 			const height = popover.offsetHeight;
 
+			let left;
+			let top;
+
 			if (this.compact) {
 				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
 				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
-				popover.style.left = (x - (width / 2)) + 'px';
+				left = (x - (width / 2));
-				popover.style.top = (y - (height / 2)) + 'px';
+				top = (y - (height / 2));
 			} else {
 				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
 				const y = rect.top + window.pageYOffset + this.source.offsetHeight;
-				popover.style.left = (x - (width / 2)) + 'px';
+				left = (x - (width / 2));
-				popover.style.top = y + 'px';
+				top = y;
 			}
 
+			if (left + width > window.innerWidth) {
+				left = window.innerWidth - width;
+				this.hukidasi = false;
+			}
+
+			if (top + height > window.innerHeight) {
+				top = window.innerHeight - height;
+				this.hukidasi = false;
+			}
+
+			popover.style.left = left + 'px';
+			popover.style.top = top + 'px';
+
 			anime({
 				targets: this.$refs.backdrop,
 				opacity: 1,
@@ -113,7 +134,7 @@ $border-color = rgba(27, 31, 35, 0.15)
 
 		$balloon-size = 16px
 
-		&:not(.compact)
+		&.hukidasi
 			margin-top $balloon-size
 			transform-origin center -($balloon-size)
 

src/client/app/desktop/views/pages/deck/deck.column-core.vue

@@ -0,0 +1,48 @@
+<template>
+<x-widgets-column v-if="column.type == 'widgets'"/>
+<x-notifications-column v-else-if="column.type == 'notifications'"/>
+<x-tl-column v-else-if="column.type == 'home'"/>
+<x-tl-column v-else-if="column.type == 'local'"/>
+<x-tl-column v-else-if="column.type == 'global'"/>
+<x-tl-column v-else-if="column.type == 'list'"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XTlColumn from './deck.tl-column.vue';
+import XNotificationsColumn from './deck.notifications-column.vue';
+import XWidgetsColumn from './deck.widgets-column.vue';
+
+export default Vue.extend({
+	components: {
+		XTlColumn,
+		XNotificationsColumn,
+		XWidgetsColumn
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		isActive: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+
+	provide() {
+		return {
+			column: this.column,
+			isStacked: this.isStacked,
+			isActive: this.isActive
+		};
+	}
+});
+</script>

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -1,10 +1,11 @@
 <template>
-<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow }">
+<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, isActive, isStacked }">
-	<header :class="{ indicate }">
+	<header :class="{ indicate: count > 0 }" @click="toggleActive">
 		<slot name="header"></slot>
-		<button ref="menu" @click="showMenu">%fa:caret-down%</button>
+		<span class="count" v-if="count > 0">({{ count }})</span>
+		<button ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
 	</header>
-	<div ref="body">
+	<div ref="body" v-show="isActive">
 		<slot></slot>
 	</div>
 </div>
@@ -16,17 +17,14 @@ import Menu from '../../../../common/views/components/menu.vue';
 
 export default Vue.extend({
 	props: {
-		id: {
-			type: String,
-			required: false
-		},
 		name: {
 			type: String,
 			required: false
 		},
 		menu: {
 			type: Array,
-			required: false
+			required: false,
+			default: null
 		},
 		naked: {
 			type: Boolean,
@@ -40,17 +38,33 @@ export default Vue.extend({
 		}
 	},
 
+	inject: {
+		column: { from: 'column' },
+		_isActive: { from: 'isActive' },
+		isStacked: { from: 'isStacked' },
+		getColumnVm: { from: 'getColumnVm' }
+	},
+
 	data() {
 		return {
-			indicate: false
+			count: 0,
+			isActive: this._isActive
 		};
 	},
 
+	watch: {
+		isActive(v) {
+			if (v && this.isScrollTop()) {
+				this.$emit('top');
+			}
+		}
+	},
+
 	provide() {
 		return {
 			column: this,
 			isScrollTop: this.isScrollTop,
-			indicate: v => this.indicate = v
+			count: v => this.count = v
 		};
 	},
 
@@ -62,8 +76,15 @@ export default Vue.extend({
 	},
 
 	methods: {
+		toggleActive() {
+			if (!this.isStacked) return;
+			const vms = this.$store.state.settings.deck.layout.find(ids => ids.indexOf(this.column.id) != -1).map(id => this.getColumnVm(id));
+			if (this.isActive && vms.filter(vm => vm.$el.classList.contains('isActive')).length == 1) return;
+			this.isActive = !this.isActive;
+		},
+
 		isScrollTop() {
-			return this.$refs.body.scrollTop == 0;
+			return this.isActive && this.$refs.body.scrollTop == 0;
 		},
 
 		onScroll() {
@@ -86,23 +107,43 @@ export default Vue.extend({
 						default: this.name,
 						allowEmpty: false
 					}).then(name => {
-						this.$store.dispatch('settings/renameDeckColumn', { id: this.id, name });
+						this.$store.dispatch('settings/renameDeckColumn', { id: this.column.id, name });
 					});
 				}
 			}, null, {
 				content: '%fa:arrow-left% %i18n:common.deck.swap-left%',
 				onClick: () => {
-					this.$store.dispatch('settings/swapLeftDeckColumn', this.id);
+					this.$store.dispatch('settings/swapLeftDeckColumn', this.column.id);
 				}
 			}, {
 				content: '%fa:arrow-right% %i18n:common.deck.swap-right%',
 				onClick: () => {
-					this.$store.dispatch('settings/swapRightDeckColumn', this.id);
+					this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
 				}
-			}, null, {
+			}, this.isStacked ? {
+				content: '%fa:arrow-up% %i18n:common.deck.swap-up%',
+				onClick: () => {
+					this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
+				}
+			} : undefined, this.isStacked ? {
+				content: '%fa:arrow-down% %i18n:common.deck.swap-down%',
+				onClick: () => {
+					this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
+				}
+			} : undefined, null, {
+				content: '%fa:window-restore R% %i18n:common.deck.stack-left%',
+				onClick: () => {
+					this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
+				}
+			}, this.isStacked ? {
+				content: '%fa:window-maximize R% %i18n:common.deck.pop-right%',
+				onClick: () => {
+					this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
+				}
+			} : undefined, null, {
 				content: '%fa:trash-alt R% %i18n:common.deck.remove%',
 				onClick: () => {
-					this.$store.dispatch('settings/removeDeckColumn', this.id);
+					this.$store.dispatch('settings/removeDeckColumn', this.column.id);
 				}
 			}];
 
@@ -128,14 +169,20 @@ root(isDark)
 	$header-height = 42px
 
 	width 330px
+	min-width 330px
 	height 100%
 	background isDark ? #282C37 : #fff
 	border-radius 6px
 	box-shadow 0 2px 16px rgba(#000, 0.1)
 	overflow hidden
 
-	&.narrow
+	&:not(.isActive)
+		flex-basis $header-height
+		min-height $header-height
+
+	&:not(.isStacked).narrow
 		width 285px
+		min-width 285px
 
 	&.naked
 		background rgba(#000, isDark ? 0.25 : 0.1)
@@ -157,6 +204,9 @@ root(isDark)
 		background isDark ? #313543 : #fff
 		box-shadow 0 1px rgba(#000, 0.15)
 
+		&, *
+			user-select none
+
 		&.indicate
 			box-shadow 0 3px 0 0 $theme-color
 
@@ -164,6 +214,10 @@ root(isDark)
 			[data-fa]
 				margin-right 8px
 
+		> .count
+			margin-left 4px
+			opacity 0.5
+
 		> button
 			position absolute
 			top 0

src/client/app/desktop/views/pages/deck/deck.notes.vue

@@ -28,8 +28,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { url } from '../../../config';
-import getNoteSummary from '../../../../../renderers/get-note-summary';
 
 import XNote from './deck.note.vue';
 
@@ -40,7 +38,7 @@ export default Vue.extend({
 		XNote
 	},
 
-	inject: ['column', 'isScrollTop', 'indicate'],
+	inject: ['column', 'isScrollTop', 'count'],
 
 	props: {
 		more: {
@@ -55,7 +53,6 @@ export default Vue.extend({
 			requestInitPromise: null as () => Promise<any[]>,
 			notes: [],
 			queue: [],
-			unreadCount: 0,
 			fetching: true,
 			moreFetching: false
 		};
@@ -73,6 +70,12 @@ export default Vue.extend({
 		}
 	},
 
+	watch: {
+		queue(q) {
+			this.count(q.length);
+		}
+	},
+
 	created() {
 		this.column.$on('top', this.onTop);
 		this.column.$on('bottom', this.onBottom);
@@ -141,7 +144,6 @@ export default Vue.extend({
 				}
 			} else {
 				this.queue.push(note);
-				this.indicate(true);
 			}
 		},
 
@@ -156,7 +158,6 @@ export default Vue.extend({
 		releaseQueue() {
 			this.queue.forEach(n => this.prepend(n, true));
 			this.queue = [];
-			this.indicate(false);
 		},
 
 		async loadMore() {

src/client/app/desktop/views/pages/deck/deck.notifications-column.vue

@@ -1,11 +1,9 @@
 <template>
-<div>
+<x-column :name="name">
-	<x-column :id="column.id" :name="name">
+	<span slot="header">%fa:bell R%{{ name }}</span>
-		<span slot="header">%fa:bell R%{{ name }}</span>
 
-		<x-notifications/>
+	<x-notifications/>
-	</x-column>
+</x-column>
-</div>
 </template>
 
 <script lang="ts">
@@ -19,12 +17,7 @@ export default Vue.extend({
 		XNotifications
 	},
 
-	props: {
+	inject: ['column'],
-		column: {
-			type: Object,
-			required: true
-		}
-	},
 
 	computed: {
 		name(): string {

src/client/app/desktop/views/pages/deck/deck.tl-column.vue

@@ -1,22 +1,20 @@
 <template>
-<div>
+<x-column :menu="menu" :name="name">
-	<x-column :id="column.id" :menu="menu" :name="name">
+	<span slot="header">
-		<span slot="header">
+		<template v-if="column.type == 'home'">%fa:home%</template>
-			<template v-if="column.type == 'home'">%fa:home%</template>
+		<template v-if="column.type == 'local'">%fa:R comments%</template>
-			<template v-if="column.type == 'local'">%fa:R comments%</template>
+		<template v-if="column.type == 'global'">%fa:globe%</template>
-			<template v-if="column.type == 'global'">%fa:globe%</template>
+		<template v-if="column.type == 'list'">%fa:list%</template>
-			<template v-if="column.type == 'list'">%fa:list%</template>
+		<span>{{ name }}</span>
-			<span>{{ name }}</span>
+	</span>
-		</span>
 
-		<div class="editor" v-if="edit">
+	<div class="editor" v-if="edit">
-			<mk-switch v-model="column.isMediaOnly" @change="onChangeSettings" text="%i18n:@is-media-only%"/>
+		<mk-switch v-model="column.isMediaOnly" @change="onChangeSettings" text="%i18n:@is-media-only%"/>
-			<mk-switch v-model="column.isMediaView" @change="onChangeSettings" text="%i18n:@is-media-view%"/>
+		<mk-switch v-model="column.isMediaView" @change="onChangeSettings" text="%i18n:@is-media-view%"/>
-		</div>
+	</div>
-		<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly"/>
+	<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly"/>
-		<x-tl v-else :src="column.type" :media-only="column.isMediaOnly"/>
+	<x-tl v-else :src="column.type" :media-only="column.isMediaOnly"/>
-	</x-column>
+</x-column>
-</div>
 </template>
 
 <script lang="ts">
@@ -32,12 +30,7 @@ export default Vue.extend({
 		XListTl
 	},
 
-	props: {
+	inject: ['column'],
-		column: {
-			type: Object,
-			required: true
-		}
-	},
 
 	data() {
 		return {

src/client/app/desktop/views/pages/deck/deck.vue

@@ -1,13 +1,13 @@
 <template>
 <mk-ui :class="$style.root">
 	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-darkmode="$store.state.device.darkmode">
-		<template v-for="column in columns">
+		<template v-for="ids in layout">
-			<x-widgets-column v-if="column.type == 'widgets'" :key="column.id" :column="column"/>
+			<div v-if="ids.length > 1" class="folder">
-			<x-notifications-column v-if="column.type == 'notifications'" :key="column.id" :column="column"/>
+				<template v-for="id, i in ids">
-			<x-tl-column v-if="column.type == 'home'" :key="column.id" :column="column"/>
+					<x-column-core :ref="id" :key="id" :column="columns.find(c => c.id == id)" :is-stacked="true" :is-active="i == 0"/>
-			<x-tl-column v-if="column.type == 'local'" :key="column.id" :column="column"/>
+				</template>
-			<x-tl-column v-if="column.type == 'global'" :key="column.id" :column="column"/>
+			</div>
-			<x-tl-column v-if="column.type == 'list'" :key="column.id" :column="column"/>
+			<x-column-core v-else :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id == ids[0])"/>
 		</template>
 		<button ref="add" @click="add" title="%i18n:common.deck.add-column%">%fa:plus%</button>
 	</div>
@@ -16,27 +16,34 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import XTlColumn from './deck.tl-column.vue';
+import XColumnCore from './deck.column-core.vue';
-import XNotificationsColumn from './deck.notifications-column.vue';
-import XWidgetsColumn from './deck.widgets-column.vue';
 import Menu from '../../../../common/views/components/menu.vue';
 import MkUserListsWindow from '../../components/user-lists-window.vue';
 import * as uuid from 'uuid';
 
 export default Vue.extend({
 	components: {
-		XTlColumn,
+		XColumnCore
-		XNotificationsColumn,
-		XWidgetsColumn
 	},
 
 	computed: {
-		columns() {
+		columns(): any[] {
 			if (this.$store.state.settings.deck == null) return [];
 			return this.$store.state.settings.deck.columns;
+		},
+		layout(): any[] {
+			if (this.$store.state.settings.deck == null) return [];
+			if (this.$store.state.settings.deck.layout == null) return this.$store.state.settings.deck.columns.map(c => [c.id]);
+			return this.$store.state.settings.deck.layout;
 		}
 	},
 
+	provide() {
+		return {
+			getColumnVm: this.getColumnVm
+		};
+	},
+
 	created() {
 		if (this.$store.state.settings.deck == null) {
 			const deck = {
@@ -58,11 +65,23 @@ export default Vue.extend({
 				}]
 			};
 
+			deck.layout = deck.columns.map(c => [c.id]);
+
 			this.$store.dispatch('settings/set', {
 				key: 'deck',
 				value: deck
 			});
 		}
+
+		// 互換性のため
+		if (this.$store.state.settings.deck != null && this.$store.state.settings.deck.layout == null) {
+			this.$store.dispatch('settings/set', {
+				key: 'deck',
+				value: Object.assign({}, this.$store.state.settings.deck, {
+					layout: this.$store.state.settings.deck.columns.map(c => [c.id])
+				})
+			});
+		}
 	},
 
 	mounted() {
@@ -74,6 +93,10 @@ export default Vue.extend({
 	},
 
 	methods: {
+		getColumnVm(id) {
+			return this.$refs[id][0];
+		},
+
 		add() {
 			this.os.new(Menu, {
 				source: this.$refs.add,
@@ -159,6 +182,13 @@ root(isDark)
 		&:last-of-type
 			margin-right 0
 
+		&.folder
+			display flex
+			flex-direction column
+
+			> *:not(:last-child)
+				margin-bottom 8px
+
 	> *
 		&:first-child
 			margin-left auto

src/client/app/desktop/views/pages/deck/deck.widgets-column.vue

@@ -1,57 +1,55 @@
 <template>
-<div class="wtdtxvecapixsepjtcupubtsmometobz">
+<x-column :menu="menu" :naked="true" :narrow="true" :name="name" class="wtdtxvecapixsepjtcupubtsmometobz">
-	<x-column :id="column.id" :menu="menu" :naked="true" :narrow="true" :name="name">
+	<span slot="header">%fa:calculator%{{ name }}</span>
-		<span slot="header">%fa:calculator%{{ name }}</span>
 
-		<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
+	<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
-			<template v-if="edit">
+		<template v-if="edit">
-				<header>
+			<header>
-					<select v-model="widgetAdderSelected">
+				<select v-model="widgetAdderSelected">
-						<option value="profile">%i18n:common.widgets.profile%</option>
+					<option value="profile">%i18n:common.widgets.profile%</option>
-						<option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
+					<option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
-						<option value="calendar">%i18n:common.widgets.calendar%</option>
+					<option value="calendar">%i18n:common.widgets.calendar%</option>
-						<option value="timemachine">%i18n:common.widgets.timemachine%</option>
+					<option value="timemachine">%i18n:common.widgets.timemachine%</option>
-						<option value="activity">%i18n:common.widgets.activity%</option>
+					<option value="activity">%i18n:common.widgets.activity%</option>
-						<option value="rss">%i18n:common.widgets.rss%</option>
+					<option value="rss">%i18n:common.widgets.rss%</option>
-						<option value="trends">%i18n:common.widgets.trends%</option>
+					<option value="trends">%i18n:common.widgets.trends%</option>
-						<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
+					<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
-						<option value="slideshow">%i18n:common.widgets.slideshow%</option>
+					<option value="slideshow">%i18n:common.widgets.slideshow%</option>
-						<option value="version">%i18n:common.widgets.version%</option>
+					<option value="version">%i18n:common.widgets.version%</option>
-						<option value="broadcast">%i18n:common.widgets.broadcast%</option>
+					<option value="broadcast">%i18n:common.widgets.broadcast%</option>
-						<option value="notifications">%i18n:common.widgets.notifications%</option>
+					<option value="notifications">%i18n:common.widgets.notifications%</option>
-						<option value="users">%i18n:common.widgets.users%</option>
+					<option value="users">%i18n:common.widgets.users%</option>
-						<option value="polls">%i18n:common.widgets.polls%</option>
+					<option value="polls">%i18n:common.widgets.polls%</option>
-						<option value="post-form">%i18n:common.widgets.post-form%</option>
+					<option value="post-form">%i18n:common.widgets.post-form%</option>
-						<option value="messaging">%i18n:common.widgets.messaging%</option>
+					<option value="messaging">%i18n:common.widgets.messaging%</option>
-						<option value="memo">%i18n:common.widgets.memo%</option>
+					<option value="memo">%i18n:common.widgets.memo%</option>
-						<option value="server">%i18n:common.widgets.server%</option>
+					<option value="server">%i18n:common.widgets.server%</option>
-						<option value="donation">%i18n:common.widgets.donation%</option>
+					<option value="donation">%i18n:common.widgets.donation%</option>
-						<option value="nav">%i18n:common.widgets.nav%</option>
+					<option value="nav">%i18n:common.widgets.nav%</option>
-						<option value="tips">%i18n:common.widgets.tips%</option>
+					<option value="tips">%i18n:common.widgets.tips%</option>
-					</select>
+				</select>
-					<button @click="addWidget">%i18n:@add%</button>
+				<button @click="addWidget">%i18n:@add%</button>
-				</header>
+			</header>
-				<x-draggable
+			<x-draggable
-					:list="column.widgets"
+				:list="column.widgets"
-					:options="{ handle: '.handle', animation: 150 }"
+				:options="{ handle: '.handle', animation: 150 }"
-					@sort="onWidgetSort"
+				@sort="onWidgetSort"
-				>
+			>
-					<div v-for="widget in column.widgets" class="customize-container" :key="widget.id">
+				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id">
-						<header>
+					<header>
-							<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
+						<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
-						</header>
+					</header>
-						<div @click="widgetFunc(widget.id)">
+					<div @click="widgetFunc(widget.id)">
-							<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
+						<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
-						</div>
 					</div>
-				</x-draggable>
+				</div>
-			</template>
+			</x-draggable>
-			<template v-else>
+		</template>
-				<component class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="deck"/>
+		<template v-else>
-			</template>
+			<component class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="deck"/>
-		</div>
+		</template>
-	</x-column>
+	</div>
-</div>
+</x-column>
 </template>
 
 <script lang="ts">
@@ -66,12 +64,7 @@ export default Vue.extend({
 		XDraggable
 	},
 
-	props: {
+	inject: ['column'],
-		column: {
-			type: Object,
-			required: true
-		}
-	},
 
 	data() {
 		return {

src/client/app/store.ts

@@ -173,23 +173,22 @@ export default (os: MiOS) => new Vuex.Store({
 				},
 
 				addDeckColumn(state, column) {
-					if (state.deck.columns == null) state.deck.columns = [];
 					state.deck.columns.push(column);
+					state.deck.layout.push([column.id]);
 				},
 
 				removeDeckColumn(state, id) {
-					if (state.deck.columns == null) return;
 					state.deck.columns = state.deck.columns.filter(c => c.id != id);
+					state.deck.layout = state.deck.layout.map(ids => ids.filter(x => x != id));
 				},
 
 				swapLeftDeckColumn(state, id) {
-					if (state.deck.columns == null) return;
+					state.deck.layout.some((ids, i) => {
-					state.deck.columns.some((c, i) => {
+						if (ids.indexOf(id) != -1) {
-						if (c.id == id) {
+							const left = state.deck.layout[i - 1];
-							const left = state.deck.columns[i - 1];
 							if (left) {
-								state.deck.columns[i - 1] = state.deck.columns[i];
+								state.deck.layout[i - 1] = state.deck.layout[i];
-								state.deck.columns[i] = left;
+								state.deck.layout[i] = left;
 							}
 							return true;
 						}
@@ -197,28 +196,68 @@ export default (os: MiOS) => new Vuex.Store({
 				},
 
 				swapRightDeckColumn(state, id) {
-					if (state.deck.columns == null) return;
+					state.deck.layout.some((ids, i) => {
-					state.deck.columns.some((c, i) => {
+						if (ids.indexOf(id) != -1) {
-						if (c.id == id) {
+							const right = state.deck.layout[i + 1];
-							const right = state.deck.columns[i + 1];
 							if (right) {
-								state.deck.columns[i + 1] = state.deck.columns[i];
+								state.deck.layout[i + 1] = state.deck.layout[i];
-								state.deck.columns[i] = right;
+								state.deck.layout[i] = right;
 							}
 							return true;
 						}
 					});
 				},
 
+				swapUpDeckColumn(state, id) {
+					const ids = state.deck.layout.find(ids => ids.indexOf(id) != -1);
+					ids.some((x, i) => {
+						if (x == id) {
+							const up = ids[i - 1];
+							if (up) {
+								ids[i - 1] = id;
+								ids[i] = up;
+							}
+							return true;
+						}
+					});
+				},
+
+				swapDownDeckColumn(state, id) {
+					const ids = state.deck.layout.find(ids => ids.indexOf(id) != -1);
+					ids.some((x, i) => {
+						if (x == id) {
+							const down = ids[i + 1];
+							if (down) {
+								ids[i + 1] = id;
+								ids[i] = down;
+							}
+							return true;
+						}
+					});
+				},
+
+				stackLeftDeckColumn(state, id) {
+					const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1);
+					state.deck.layout = state.deck.layout.map(ids => ids.filter(x => x != id));
+					const left = state.deck.layout[i - 1];
+					if (left) state.deck.layout[i - 1].push(id);
+					state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
+				},
+
+				popRightDeckColumn(state, id) {
+					const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1);
+					state.deck.layout = state.deck.layout.map(ids => ids.filter(x => x != id));
+					state.deck.layout.splice(i + 1, 0, [id]);
+					state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
+				},
+
 				addDeckWidget(state, x) {
-					if (state.deck.columns == null) return;
 					const column = state.deck.columns.find(c => c.id == x.id);
 					if (column == null) return;
 					column.widgets.unshift(x.widget);
 				},
 
 				removeDeckWidget(state, x) {
-					if (state.deck.columns == null) return;
 					const column = state.deck.columns.find(c => c.id == x.id);
 					if (column == null) return;
 					column.widgets = column.widgets.filter(w => w.id != x.widget.id);
@@ -277,6 +316,26 @@ export default (os: MiOS) => new Vuex.Store({
 					ctx.dispatch('saveDeck');
 				},
 
+				swapUpDeckColumn(ctx, id) {
+					ctx.commit('swapUpDeckColumn', id);
+					ctx.dispatch('saveDeck');
+				},
+
+				swapDownDeckColumn(ctx, id) {
+					ctx.commit('swapDownDeckColumn', id);
+					ctx.dispatch('saveDeck');
+				},
+
+				stackLeftDeckColumn(ctx, id) {
+					ctx.commit('stackLeftDeckColumn', id);
+					ctx.dispatch('saveDeck');
+				},
+
+				popRightDeckColumn(ctx, id) {
+					ctx.commit('popRightDeckColumn', id);
+					ctx.dispatch('saveDeck');
+				},
+
 				addDeckWidget(ctx, x) {
 					ctx.commit('addDeckWidget', x);
 					ctx.dispatch('saveDeck');