-
-
- {{ $ts._simkey.emojiColor }}
- #RRGGBB
-
- {{ $ts._simkey.colorPicker }}
-
+
+
+ {{ $ts._simkey.emojiColor }}
+ #RRGGBB
+
+ {{ $ts._simkey.colorPicker }}
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index c9ffe5fee..6bf99107b 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -108,7 +108,7 @@ const menuDef = $computed(() => [{
to: '/admin/emojis',
active: currentPage?.route.name === 'emojis',
}, {
- icon: 'fas fa-kiss-wink-heart',
+ icon: 'ti ti-mood-tongue',
text: i18n.ts._simkey.emojiGen,
to: '/admin/emojigen',
active: currentPage?.route.name === 'emojigen',
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index e62f3f992..5bb01df98 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -170,7 +170,7 @@ const menuDef = computed(() => [{
to: '/settings/other',
active: currentPage?.route.name === 'other',
}, {
- icon: 'fas fa-flask',
+ icon: 'ti ti-flask',
text: i18n.ts._simkey.experimentalFeatures,
to: '/settings/experimental-features',
active: currentPage?.route.name === 'experimental-features',
diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts
index c4335f769..1245fdb1c 100644
--- a/packages/frontend/src/scripts/get-note-menu.ts
+++ b/packages/frontend/src/scripts/get-note-menu.ts
@@ -235,7 +235,7 @@ export function getNoteMenu(props: {
action: pakuru,
},
{
- icon: 'fas fa-copy',
+ icon: 'ti ti-copy',
text: i18n.ts.copyContent,
action: copyContent,
}, {
@@ -260,7 +260,7 @@ export function getNoteMenu(props: {
action: translate,
} : undefined,
{
- icon: 'fas fa-kiss-wink-heart',
+ icon: 'ti ti-mood-tongue',
text: i18n.ts._simkey.reactionList,
action: () => reactionList(),
},
diff --git a/packages/frontend/src/ui/_common_old/common.ts b/packages/frontend/src/ui/_common_old/common.ts
new file mode 100644
index 000000000..cc152f9c1
--- /dev/null
+++ b/packages/frontend/src/ui/_common_old/common.ts
@@ -0,0 +1,85 @@
+import * as os from '@/os';
+import { instance } from '@/instance';
+import { host } from '@/config';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+
+export function openInstanceMenu(ev: MouseEvent) {
+ os.popupMenu([{
+ text: instance.name ?? host,
+ type: 'label',
+ }, {
+ type: 'link',
+ text: i18n.ts.instanceInfo,
+ icon: 'ti ti-info-circle',
+ to: '/about',
+ }, {
+ type: 'link',
+ text: i18n.ts.customEmojis,
+ icon: 'ti ti-icons',
+ to: '/about#emojis',
+ }, {
+ type: 'link',
+ text: i18n.ts.federation,
+ icon: 'ti ti-whirl',
+ to: '/about#federation',
+ }, {
+ type: 'link',
+ text: i18n.ts.charts,
+ icon: 'ti ti-chart-line',
+ to: '/about#charts',
+ }, null, {
+ type: 'parent',
+ text: i18n.ts.tools,
+ icon: 'ti ti-tool',
+ children: [{
+ type: 'link',
+ to: '/scratchpad',
+ text: i18n.ts.scratchpad,
+ icon: 'ti ti-terminal-2',
+ }, {
+ type: 'link',
+ to: '/api-console',
+ text: 'API Console',
+ icon: 'ti ti-terminal-2',
+ }, {
+ type: 'link',
+ to: '/clicker',
+ text: '🍪👈',
+ icon: 'ti ti-cookie',
+ }, ($i && ($i.isAdmin || $i.role.canInvite) && instance.disableRegistration) ? {
+ text: i18n.ts.invite,
+ icon: 'ti ti-user-plus',
+ action: () => {
+ os.api('invite').then(x => {
+ os.alert({
+ type: 'info',
+ text: x.code,
+ });
+ }).catch(err => {
+ os.alert({
+ type: 'error',
+ text: err,
+ });
+ });
+ },
+ } : undefined, ($i && ($i.isAdmin || $i.role.canManageCustomEmojis)) ? {
+ type: 'link',
+ to: '/custom-emojis-manager',
+ text: i18n.ts.manageCustomEmojis,
+ icon: 'ti ti-icons',
+ } : undefined],
+ }, null, {
+ text: i18n.ts.help,
+ icon: 'ti ti-question-circle',
+ action: () => {
+ window.open('https://misskey-hub.net/help.html', '_blank');
+ },
+ }, {
+ type: 'link',
+ text: i18n.ts.aboutMisskey,
+ to: '/about-misskey',
+ }], ev.currentTarget ?? ev.target, {
+ align: 'left',
+ });
+}
diff --git a/packages/frontend/src/ui/_common_old/common.vue b/packages/frontend/src/ui/_common_old/common.vue
index c5abdd992..84500a62d 100644
--- a/packages/frontend/src/ui/_common_old/common.vue
+++ b/packages/frontend/src/ui/_common_old/common.vue
@@ -1,131 +1,206 @@
-
-
-
-
+
+
-
+
+ DEV BUILD
-
-
-
-
-
+
+DEV BUILD
+
+{{ i18n.ts.loggedInAsBot }}
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/_common_old/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_old/navbar-for-mobile.vue
new file mode 100644
index 000000000..989d861d2
--- /dev/null
+++ b/packages/frontend/src/ui/_common_old/navbar-for-mobile.vue
@@ -0,0 +1,258 @@
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/_common_old/navbar.vue b/packages/frontend/src/ui/_common_old/navbar.vue
new file mode 100644
index 000000000..e90098397
--- /dev/null
+++ b/packages/frontend/src/ui/_common_old/navbar.vue
@@ -0,0 +1,466 @@
+
+
+
+
+
+
+
+
+
+ {{ i18n.ts.timeline }}
+
+
+
+
+ {{ navbarItemDef[item].title }}
+
+
+
+
+
+ {{ i18n.ts.controlPanel }}
+
+
+
+ {{ i18n.ts.settings }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/_common_old/notification.vue b/packages/frontend/src/ui/_common_old/notification.vue
new file mode 100644
index 000000000..1f9c675a1
--- /dev/null
+++ b/packages/frontend/src/ui/_common_old/notification.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+ {{ i18n.ts.timeline }}
+
+
+
+
+ {{ navbarItemDef[item].title }}
+
+
+
+
+
+ {{ i18n.ts.controlPanel }}
+
+
+
+ {{ i18n.ts.settings }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/_common_old/statusbar-federation.vue b/packages/frontend/src/ui/_common_old/statusbar-federation.vue
new file mode 100644
index 000000000..70d683d75
--- /dev/null
+++ b/packages/frontend/src/ui/_common_old/statusbar-federation.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/_common_old/stream-indicator.vue b/packages/frontend/src/ui/_common_old/stream-indicator.vue
index 5e811e1b8..9a67c15cb 100644
--- a/packages/frontend/src/ui/_common_old/stream-indicator.vue
+++ b/packages/frontend/src/ui/_common_old/stream-indicator.vue
@@ -1,9 +1,9 @@
+ {{ x.name }}
+
+
-
@@ -11,6 +11,7 @@
-
-
+
+{{ $ts.disconnectedFromServer }}
+ {{ i18n.ts.disconnectedFromServer }}
-
-
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/_common_old2/common.vue b/packages/frontend/src/ui/_common_old2/common.vue
new file mode 100644
index 000000000..c5abdd992
--- /dev/null
+++ b/packages/frontend/src/ui/_common_old2/common.vue
@@ -0,0 +1,131 @@
+
+-
+
-
+
+ ++ +
+{{ ctx.name }} + {{ i18n.ts.waiting }}
++ {{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}KB / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}KB + {{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }} +
+
DEV BUILD
+
+
+
+
+
diff --git a/packages/frontend/src/ui/_common_old/sidebar-for-mobile.vue b/packages/frontend/src/ui/_common_old2/sidebar-for-mobile.vue
similarity index 100%
rename from packages/frontend/src/ui/_common_old/sidebar-for-mobile.vue
rename to packages/frontend/src/ui/_common_old2/sidebar-for-mobile.vue
diff --git a/packages/frontend/src/ui/_common_old/sidebar.vue b/packages/frontend/src/ui/_common_old2/sidebar.vue
similarity index 100%
rename from packages/frontend/src/ui/_common_old/sidebar.vue
rename to packages/frontend/src/ui/_common_old2/sidebar.vue
diff --git a/packages/frontend/src/ui/_common_old2/stream-indicator.vue b/packages/frontend/src/ui/_common_old2/stream-indicator.vue
new file mode 100644
index 000000000..5e811e1b8
--- /dev/null
+++ b/packages/frontend/src/ui/_common_old2/stream-indicator.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/_common_old2/sw-inject.ts b/packages/frontend/src/ui/_common_old2/sw-inject.ts
new file mode 100644
index 000000000..de612438b
--- /dev/null
+++ b/packages/frontend/src/ui/_common_old2/sw-inject.ts
@@ -0,0 +1,35 @@
+import { inject } from 'vue';
+import { post } from '@/os';
+import { $i, login } from '@/account';
+import { defaultStore } from '@/store';
+import { getAccountFromId } from '@/scripts/get-account-from-id';
+import { mainRouter } from '@/router';
+
+export function swInject() {
+ navigator.serviceWorker.addEventListener('message', ev => {
+ if (_DEV_) {
+ console.log('sw msg', ev.data);
+ }
+
+ if (ev.data.type !== 'order') return;
+
+ if (ev.data.loginId !== $i?.id) {
+ return getAccountFromId(ev.data.loginId).then(account => {
+ if (!account) return;
+ return login(account.token, ev.data.url);
+ });
+ }
+
+ switch (ev.data.order) {
+ case 'post':
+ return post(ev.data.options);
+ case 'push':
+ if (mainRouter.currentRoute.value.path === ev.data.url) {
+ return window.scroll({ top: 0, behavior: 'smooth' });
+ }
+ return mainRouter.push(ev.data.url);
+ default:
+ return;
+ }
+ });
+}
diff --git a/packages/frontend/src/ui/_common_old2/upload.vue b/packages/frontend/src/ui/_common_old2/upload.vue
new file mode 100644
index 000000000..3f73daf26
--- /dev/null
+++ b/packages/frontend/src/ui/_common_old2/upload.vue
@@ -0,0 +1,128 @@
+
+{{ $ts.disconnectedFromServer }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/deckold.vue b/packages/frontend/src/ui/deckold.vue
index eefb61213..125ef5429 100644
--- a/packages/frontend/src/ui/deckold.vue
+++ b/packages/frontend/src/ui/deckold.vue
@@ -1,49 +1,82 @@
--
+
-
+
+ ++ +
{{ ctx.name }}
++ {{ $ts.waiting }}
++ {{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}KB / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}KB + {{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }} +
+
+
-
-
+
- {{ column.name }}
+ {{ column.name }}
-
-
-
+
(x: T): T {
- return JSON.parse(JSON.stringify(x));
-}
-
export const deckStore = markRaw(new Storage('deck', {
profile: {
where: 'deviceAccount',
@@ -54,14 +51,6 @@ export const deckStore = markRaw(new Storage('deck', {
where: 'deviceAccount',
default: true,
},
- columnMargin: {
- where: 'deviceAccount',
- default: 12,
- },
- columnHeaderHeight: {
- where: 'deviceAccount',
- default: 42,
- },
}));
export const loadDeck = async () => {
@@ -80,18 +69,8 @@ export const loadDeck = async () => {
return;
}
- deckStore.set('columns', [{
- id: 'a',
- type: 'main',
- name: i18n.ts._deck._columns.main,
- width: 350,
- }, {
- id: 'b',
- type: 'notifications',
- name: i18n.ts._deck._columns.notifications,
- width: 330,
- }]);
- deckStore.set('layout', [['a'], ['b']]);
+ deckStore.set('columns', []);
+ deckStore.set('layout', []);
return;
}
throw err;
@@ -146,7 +125,7 @@ export function swapColumn(a: Column['id'], b: Column['id']) {
const aY = deckStore.state.layout[aX].findIndex(id => id === a);
const bX = deckStore.state.layout.findIndex(ids => ids.indexOf(b) !== -1);
const bY = deckStore.state.layout[bX].findIndex(id => id === b);
- const layout = copy(deckStore.state.layout);
+ const layout = deepClone(deckStore.state.layout);
layout[aX][aY] = b;
layout[bX][bY] = a;
deckStore.set('layout', layout);
@@ -154,7 +133,7 @@ export function swapColumn(a: Column['id'], b: Column['id']) {
}
export function swapLeftColumn(id: Column['id']) {
- const layout = copy(deckStore.state.layout);
+ const layout = deepClone(deckStore.state.layout);
deckStore.state.layout.some((ids, i) => {
if (ids.includes(id)) {
const left = deckStore.state.layout[i - 1];
@@ -170,7 +149,7 @@ export function swapLeftColumn(id: Column['id']) {
}
export function swapRightColumn(id: Column['id']) {
- const layout = copy(deckStore.state.layout);
+ const layout = deepClone(deckStore.state.layout);
deckStore.state.layout.some((ids, i) => {
if (ids.includes(id)) {
const right = deckStore.state.layout[i + 1];
@@ -186,9 +165,9 @@ export function swapRightColumn(id: Column['id']) {
}
export function swapUpColumn(id: Column['id']) {
- const layout = copy(deckStore.state.layout);
+ const layout = deepClone(deckStore.state.layout);
const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
- const ids = copy(deckStore.state.layout[idsIndex]);
+ const ids = deepClone(deckStore.state.layout[idsIndex]);
ids.some((x, i) => {
if (x === id) {
const up = ids[i - 1];
@@ -206,9 +185,9 @@ export function swapUpColumn(id: Column['id']) {
}
export function swapDownColumn(id: Column['id']) {
- const layout = copy(deckStore.state.layout);
+ const layout = deepClone(deckStore.state.layout);
const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
- const ids = copy(deckStore.state.layout[idsIndex]);
+ const ids = deepClone(deckStore.state.layout[idsIndex]);
ids.some((x, i) => {
if (x === id) {
const down = ids[i + 1];
@@ -226,7 +205,7 @@ export function swapDownColumn(id: Column['id']) {
}
export function stackLeftColumn(id: Column['id']) {
- let layout = copy(deckStore.state.layout);
+ let layout = deepClone(deckStore.state.layout);
const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
layout = layout.map(ids => ids.filter(_id => _id !== id));
layout[i - 1].push(id);
@@ -236,7 +215,7 @@ export function stackLeftColumn(id: Column['id']) {
}
export function popRightColumn(id: Column['id']) {
- let layout = copy(deckStore.state.layout);
+ let layout = deepClone(deckStore.state.layout);
const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
const affected = layout[i];
layout = layout.map(ids => ids.filter(_id => _id !== id));
@@ -244,7 +223,7 @@ export function popRightColumn(id: Column['id']) {
layout = layout.filter(ids => ids.length > 0);
deckStore.set('layout', layout);
- const columns = copy(deckStore.state.columns);
+ const columns = deepClone(deckStore.state.columns);
for (const column of columns) {
if (affected.includes(column.id)) {
column.active = true;
@@ -256,9 +235,9 @@ export function popRightColumn(id: Column['id']) {
}
export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
- const columns = copy(deckStore.state.columns);
+ const columns = deepClone(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
- const column = copy(deckStore.state.columns[columnIndex]);
+ const column = deepClone(deckStore.state.columns[columnIndex]);
if (column == null) return;
if (column.widgets == null) column.widgets = [];
column.widgets.unshift(widget);
@@ -268,9 +247,9 @@ export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
}
export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
- const columns = copy(deckStore.state.columns);
+ const columns = deepClone(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
- const column = copy(deckStore.state.columns[columnIndex]);
+ const column = deepClone(deckStore.state.columns[columnIndex]);
if (column == null) return;
column.widgets = column.widgets.filter(w => w.id !== widget.id);
columns[columnIndex] = column;
@@ -279,9 +258,9 @@ export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
}
export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
- const columns = copy(deckStore.state.columns);
+ const columns = deepClone(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
- const column = copy(deckStore.state.columns[columnIndex]);
+ const column = deepClone(deckStore.state.columns[columnIndex]);
if (column == null) return;
column.widgets = widgets;
columns[columnIndex] = column;
@@ -290,9 +269,9 @@ export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
}
export function updateColumnWidget(id: Column['id'], widgetId: string, widgetData: any) {
- const columns = copy(deckStore.state.columns);
+ const columns = deepClone(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
- const column = copy(deckStore.state.columns[columnIndex]);
+ const column = deepClone(deckStore.state.columns[columnIndex]);
if (column == null) return;
column.widgets = column.widgets.map(w => w.id === widgetId ? {
...w,
@@ -304,9 +283,9 @@ export function updateColumnWidget(id: Column['id'], widgetId: string, widgetDat
}
export function updateColumn(id: Column['id'], column: Partial) {
- const columns = copy(deckStore.state.columns);
+ const columns = deepClone(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
- const currentColumn = copy(deckStore.state.columns[columnIndex]);
+ const currentColumn = deepClone(deckStore.state.columns[columnIndex]);
if (currentColumn == null) return;
for (const [k, v] of Object.entries(column)) {
currentColumn[k] = v;
diff --git a/packages/frontend/src/ui/deckold/direct-column.vue b/packages/frontend/src/ui/deckold/direct-column.vue
index 104f781b3..75b018cac 100644
--- a/packages/frontend/src/ui/deckold/direct-column.vue
+++ b/packages/frontend/src/ui/deckold/direct-column.vue
@@ -1,6 +1,6 @@
- {{ column.name }}
+ {{ column.name }}
@@ -25,7 +25,7 @@ const pagination = {
endpoint: 'notes/mentions' as const,
limit: 10,
params: {
- visibility: 'specified'
+ visibility: 'specified',
},
};
diff --git a/packages/frontend/src/ui/deckold/list-column.vue b/packages/frontend/src/ui/deckold/list-column.vue
index 4a45412d1..58633e567 100644
--- a/packages/frontend/src/ui/deckold/list-column.vue
+++ b/packages/frontend/src/ui/deckold/list-column.vue
@@ -1,7 +1,7 @@
-
+
- {{ column.name }}
+ {{ column.name }}
- {{ column.name }}
+ {{ column.name }}
diff --git a/packages/frontend/src/ui/deckold/notifications-column.vue b/packages/frontend/src/ui/deckold/notifications-column.vue
index ccc7b0514..9d133035f 100644
--- a/packages/frontend/src/ui/deckold/notifications-column.vue
+++ b/packages/frontend/src/ui/deckold/notifications-column.vue
@@ -1,6 +1,6 @@
-
- {{ column.name }}
+
+ {{ column.name }}
@@ -9,10 +9,10 @@
diff --git a/packages/frontend/src/ui/deckold/tl-column.vue b/packages/frontend/src/ui/deckold/tl-column.vue
index 3707bf786..8bde7e4ce 100644
--- a/packages/frontend/src/ui/deckold/tl-column.vue
+++ b/packages/frontend/src/ui/deckold/tl-column.vue
@@ -1,30 +1,30 @@
-
+
-
-
-
-
+
+
+
+
{{ column.name }}
-
-
- {{ column.name }}
+
+ {{ column.name }}
-
- +
+
- + {{ $t('disabled-timeline.title') }}
-{{ $t('disabled-timeline.description') }}
+{{ $t('disabled-timeline.description') }}
-
+
+ {{ column.name }}
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/deckold2/column-core.vue b/packages/frontend/src/ui/deckold2/column-core.vue
new file mode 100644
index 000000000..2667b6d74
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2/column-core.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/deckold2/deck-store.ts b/packages/frontend/src/ui/deckold2/deck-store.ts
new file mode 100644
index 000000000..290913a52
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2/deck-store.ts
@@ -0,0 +1,317 @@
+import { throttle } from 'throttle-debounce';
+import { markRaw } from 'vue';
+import { notificationTypes } from 'misskey-js';
+import { Storage } from '../../pizzax';
+import { i18n } from '@/i18n';
+import { api } from '@/os';
+
+type ColumnWidget = {
+ name: string;
+ id: string;
+ data: Record;
+};
+
+export type Column = {
+ id: string;
+ type: 'main' | 'widgets' | 'notifications' | 'tl' | 'antenna' | 'list' | 'mentions' | 'direct';
+ name: string | null;
+ width: number;
+ widgets?: ColumnWidget[];
+ active?: boolean;
+ flexible?: boolean;
+ antennaId?: string;
+ listId?: string;
+ includingTypes?: typeof notificationTypes[number][];
+ tl?: 'home' | 'local' | 'social' | 'global';
+};
+
+function copy(x: T): T {
+ return JSON.parse(JSON.stringify(x));
+}
+
+export const deckStore = markRaw(new Storage('deck', {
+ profile: {
+ where: 'deviceAccount',
+ default: 'default',
+ },
+ columns: {
+ where: 'deviceAccount',
+ default: [] as Column[],
+ },
+ layout: {
+ where: 'deviceAccount',
+ default: [] as Column['id'][][],
+ },
+ columnAlign: {
+ where: 'deviceAccount',
+ default: 'left' as 'left' | 'right' | 'center',
+ },
+ alwaysShowMainColumn: {
+ where: 'deviceAccount',
+ default: true,
+ },
+ navWindow: {
+ where: 'deviceAccount',
+ default: true,
+ },
+ columnMargin: {
+ where: 'deviceAccount',
+ default: 12,
+ },
+ columnHeaderHeight: {
+ where: 'deviceAccount',
+ default: 42,
+ },
+}));
+
+export const loadDeck = async () => {
+ let deck;
+
+ try {
+ deck = await api('i/registry/get', {
+ scope: ['client', 'deck', 'profiles'],
+ key: deckStore.state.profile,
+ });
+ } catch (err) {
+ if (err.code === 'NO_SUCH_KEY') {
+ // 後方互換性のため
+ if (deckStore.state.profile === 'default') {
+ saveDeck();
+ return;
+ }
+
+ deckStore.set('columns', [{
+ id: 'a',
+ type: 'main',
+ name: i18n.ts._deck._columns.main,
+ width: 350,
+ }, {
+ id: 'b',
+ type: 'notifications',
+ name: i18n.ts._deck._columns.notifications,
+ width: 330,
+ }]);
+ deckStore.set('layout', [['a'], ['b']]);
+ return;
+ }
+ throw err;
+ }
+
+ deckStore.set('columns', deck.columns);
+ deckStore.set('layout', deck.layout);
+};
+
+// TODO: deckがloadされていない状態でsaveすると意図せず上書きが発生するので対策する
+export const saveDeck = throttle(1000, () => {
+ api('i/registry/set', {
+ scope: ['client', 'deck', 'profiles'],
+ key: deckStore.state.profile,
+ value: {
+ columns: deckStore.reactiveState.columns.value,
+ layout: deckStore.reactiveState.layout.value,
+ },
+ });
+});
+
+export async function getProfiles(): Promise {
+ return await api('i/registry/keys', {
+ scope: ['client', 'deck', 'profiles'],
+ });
+}
+
+export async function deleteProfile(key: string): Promise {
+ return await api('i/registry/remove', {
+ scope: ['client', 'deck', 'profiles'],
+ key: key,
+ });
+}
+
+export function addColumn(column: Column) {
+ if (column.name === undefined) column.name = null;
+ deckStore.push('columns', column);
+ deckStore.push('layout', [column.id]);
+ saveDeck();
+}
+
+export function removeColumn(id: Column['id']) {
+ deckStore.set('columns', deckStore.state.columns.filter(c => c.id !== id));
+ deckStore.set('layout', deckStore.state.layout
+ .map(ids => ids.filter(_id => _id !== id))
+ .filter(ids => ids.length > 0));
+ saveDeck();
+}
+
+export function swapColumn(a: Column['id'], b: Column['id']) {
+ const aX = deckStore.state.layout.findIndex(ids => ids.indexOf(a) !== -1);
+ const aY = deckStore.state.layout[aX].findIndex(id => id === a);
+ const bX = deckStore.state.layout.findIndex(ids => ids.indexOf(b) !== -1);
+ const bY = deckStore.state.layout[bX].findIndex(id => id === b);
+ const layout = copy(deckStore.state.layout);
+ layout[aX][aY] = b;
+ layout[bX][bY] = a;
+ deckStore.set('layout', layout);
+ saveDeck();
+}
+
+export function swapLeftColumn(id: Column['id']) {
+ const layout = copy(deckStore.state.layout);
+ deckStore.state.layout.some((ids, i) => {
+ if (ids.includes(id)) {
+ const left = deckStore.state.layout[i - 1];
+ if (left) {
+ layout[i - 1] = deckStore.state.layout[i];
+ layout[i] = left;
+ deckStore.set('layout', layout);
+ }
+ return true;
+ }
+ });
+ saveDeck();
+}
+
+export function swapRightColumn(id: Column['id']) {
+ const layout = copy(deckStore.state.layout);
+ deckStore.state.layout.some((ids, i) => {
+ if (ids.includes(id)) {
+ const right = deckStore.state.layout[i + 1];
+ if (right) {
+ layout[i + 1] = deckStore.state.layout[i];
+ layout[i] = right;
+ deckStore.set('layout', layout);
+ }
+ return true;
+ }
+ });
+ saveDeck();
+}
+
+export function swapUpColumn(id: Column['id']) {
+ const layout = copy(deckStore.state.layout);
+ const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
+ const ids = copy(deckStore.state.layout[idsIndex]);
+ ids.some((x, i) => {
+ if (x === id) {
+ const up = ids[i - 1];
+ if (up) {
+ ids[i - 1] = id;
+ ids[i] = up;
+
+ layout[idsIndex] = ids;
+ deckStore.set('layout', layout);
+ }
+ return true;
+ }
+ });
+ saveDeck();
+}
+
+export function swapDownColumn(id: Column['id']) {
+ const layout = copy(deckStore.state.layout);
+ const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
+ const ids = copy(deckStore.state.layout[idsIndex]);
+ ids.some((x, i) => {
+ if (x === id) {
+ const down = ids[i + 1];
+ if (down) {
+ ids[i + 1] = id;
+ ids[i] = down;
+
+ layout[idsIndex] = ids;
+ deckStore.set('layout', layout);
+ }
+ return true;
+ }
+ });
+ saveDeck();
+}
+
+export function stackLeftColumn(id: Column['id']) {
+ let layout = copy(deckStore.state.layout);
+ const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
+ layout = layout.map(ids => ids.filter(_id => _id !== id));
+ layout[i - 1].push(id);
+ layout = layout.filter(ids => ids.length > 0);
+ deckStore.set('layout', layout);
+ saveDeck();
+}
+
+export function popRightColumn(id: Column['id']) {
+ let layout = copy(deckStore.state.layout);
+ const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
+ const affected = layout[i];
+ layout = layout.map(ids => ids.filter(_id => _id !== id));
+ layout.splice(i + 1, 0, [id]);
+ layout = layout.filter(ids => ids.length > 0);
+ deckStore.set('layout', layout);
+
+ const columns = copy(deckStore.state.columns);
+ for (const column of columns) {
+ if (affected.includes(column.id)) {
+ column.active = true;
+ }
+ }
+ deckStore.set('columns', columns);
+
+ saveDeck();
+}
+
+export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
+ const columns = copy(deckStore.state.columns);
+ const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+ const column = copy(deckStore.state.columns[columnIndex]);
+ if (column == null) return;
+ if (column.widgets == null) column.widgets = [];
+ column.widgets.unshift(widget);
+ columns[columnIndex] = column;
+ deckStore.set('columns', columns);
+ saveDeck();
+}
+
+export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
+ const columns = copy(deckStore.state.columns);
+ const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+ const column = copy(deckStore.state.columns[columnIndex]);
+ if (column == null) return;
+ column.widgets = column.widgets.filter(w => w.id !== widget.id);
+ columns[columnIndex] = column;
+ deckStore.set('columns', columns);
+ saveDeck();
+}
+
+export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
+ const columns = copy(deckStore.state.columns);
+ const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+ const column = copy(deckStore.state.columns[columnIndex]);
+ if (column == null) return;
+ column.widgets = widgets;
+ columns[columnIndex] = column;
+ deckStore.set('columns', columns);
+ saveDeck();
+}
+
+export function updateColumnWidget(id: Column['id'], widgetId: string, widgetData: any) {
+ const columns = copy(deckStore.state.columns);
+ const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+ const column = copy(deckStore.state.columns[columnIndex]);
+ if (column == null) return;
+ column.widgets = column.widgets.map(w => w.id === widgetId ? {
+ ...w,
+ data: widgetData,
+ } : w);
+ columns[columnIndex] = column;
+ deckStore.set('columns', columns);
+ saveDeck();
+}
+
+export function updateColumn(id: Column['id'], column: Partial) {
+ const columns = copy(deckStore.state.columns);
+ const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+ const currentColumn = copy(deckStore.state.columns[columnIndex]);
+ if (currentColumn == null) return;
+ for (const [k, v] of Object.entries(column)) {
+ currentColumn[k] = v;
+ }
+ columns[columnIndex] = currentColumn;
+ deckStore.set('columns', columns);
+ saveDeck();
+}
diff --git a/packages/frontend/src/ui/deckold2/direct-column.vue b/packages/frontend/src/ui/deckold2/direct-column.vue
new file mode 100644
index 000000000..104f781b3
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2/direct-column.vue
@@ -0,0 +1,31 @@
+
+
+ {{ column.name }}
+
+
+
+
+
diff --git a/packages/frontend/src/ui/deckold2/list-column.vue b/packages/frontend/src/ui/deckold2/list-column.vue
new file mode 100644
index 000000000..4a45412d1
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2/list-column.vue
@@ -0,0 +1,66 @@
+
+
+
+ {{ column.name }}
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/deckold2/main-column.vue b/packages/frontend/src/ui/deckold2/main-column.vue
new file mode 100644
index 000000000..9a5fd43af
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2/main-column.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+ {{ pageMetadata?.value.title }}
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/deckold2/mentions-column.vue b/packages/frontend/src/ui/deckold2/mentions-column.vue
new file mode 100644
index 000000000..18055215d
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2/mentions-column.vue
@@ -0,0 +1,28 @@
+
+
+ {{ column.name }}
+
+
+
+
+
diff --git a/packages/frontend/src/ui/deckold2/notifications-column.vue b/packages/frontend/src/ui/deckold2/notifications-column.vue
new file mode 100644
index 000000000..ccc7b0514
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2/notifications-column.vue
@@ -0,0 +1,38 @@
+
+
+ {{ column.name }}
+
+
+
+
+
diff --git a/packages/frontend/src/ui/deckold2/tl-column.vue b/packages/frontend/src/ui/deckold2/tl-column.vue
new file mode 100644
index 000000000..3707bf786
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2/tl-column.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+ {{ column.name }}
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/deckold2/widgets-column.vue b/packages/frontend/src/ui/deckold2/widgets-column.vue
new file mode 100644
index 000000000..d6da8a008
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2/widgets-column.vue
@@ -0,0 +1,63 @@
+
+
+ {{ column.name }}
+
+
+
+
+
+
+
{{ i18n.ts._deck.widgetsIntroduction }}
-
+
@@ -46,18 +46,24 @@ function updateWidgets(widgets) {
function func() {
edit = !edit;
}
+
+const menu = [{
+ icon: 'ti ti-pencil',
+ text: i18n.ts.editWidgets,
+ action: func,
+}];
-
diff --git a/packages/frontend/src/ui/deckold2.vue b/packages/frontend/src/ui/deckold2.vue
new file mode 100644
index 000000000..a1b611316
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2.vue
@@ -0,0 +1,305 @@
+
+{{ i18n.ts._deck.widgetsIntroduction }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/ui/deckold2/antenna-column.vue b/packages/frontend/src/ui/deckold2/antenna-column.vue
new file mode 100644
index 000000000..be89c9dbf
--- /dev/null
+++ b/packages/frontend/src/ui/deckold2/antenna-column.vue
@@ -0,0 +1,63 @@
+
+たぶん見えちゃいけないやつ
+
+
+
+
+
+
+ + + {{ $t('disabled-timeline.title') }} +
+{{ $t('disabled-timeline.description') }}
+
+
+{{ i18n.ts._deck.widgetsIntroduction }}
+