Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge: upstream

Browse source
This commit is contained in:
Marie 2023-12-23 02:09:23 +01:00
commit 5db583a3eb
701 changed files with 50809 additions and 13660 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/frontend/src/ui/_common_/common.ts
View file

@ -64,7 +64,7 @@ export function openInstanceMenu(ev: MouseEvent) {
text: i18n.ts.charts,
icon: 'ph-chart-line ph-bold ph-lg',
to: '/about#charts',
}, null, {
}, { type: 'divider' }, {
type: 'link',
text: i18n.ts.ads,
icon: 'ph-flag ph-bold ph-lg',
@ -79,29 +79,29 @@ export function openInstanceMenu(ev: MouseEvent) {
text: i18n.ts.tools,
icon: 'ph-toolbox ph-bold ph-lg',
children: toolsMenuItems(),
}, null, (instance.impressumUrl) ? {
}, { type: 'divider' }, (instance.impressumUrl) ? {
text: i18n.ts.impressum,
icon: 'ph-newspaper-clipping ph-bold ph-lg',
action: () => {
window.open(instance.impressumUrl, '_blank');
window.open(instance.impressumUrl, '_blank', 'noopener');
},
} : undefined, (instance.tosUrl) ? {
text: i18n.ts.termsOfService,
icon: 'ph-notebook ph-bold ph-lg',
action: () => {
window.open(instance.tosUrl, '_blank');
window.open(instance.tosUrl, '_blank', 'noopener');
},
} : undefined, (instance.privacyPolicyUrl) ? {
text: i18n.ts.privacyPolicy,
icon: 'ph-shield ph-bold ph-lg',
action: () => {
window.open(instance.privacyPolicyUrl, '_blank');
window.open(instance.privacyPolicyUrl, '_blank', 'noopener');
},
} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : null, {
} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : { type: 'divider' }, {
text: i18n.ts.help,
icon: 'ph-question ph-bold ph-lg',
action: () => {
window.open('https://misskey-hub.net/help.html', '_blank');
window.open('https://misskey-hub.net/docs/for-users/', '_blank', 'noopener');
},
}, ($i) ? {
text: i18n.ts._initialTutorial.launchTutorial,

8
packages/frontend/src/ui/_common_/common.vue
View file

@ -63,7 +63,7 @@ const XUpload = defineAsyncComponent(() => import('./upload.vue'));
const dev = _DEV_;
let notifications = $ref<Misskey.entities.Notification[]>([]);
const notifications = ref<Misskey.entities.Notification[]>([]);
function onNotification(notification: Misskey.entities.Notification, isClient = false) {
if (document.visibilityState === 'visible') {
@ -72,13 +72,13 @@ function onNotification(notification: Misskey.entities.Notification, isClient =
useStream().send('readNotification');
}
notifications.unshift(notification);
notifications.value.unshift(notification);
window.setTimeout(() => {
if (notifications.length > 3) notifications.pop();
if (notifications.value.length > 3) notifications.value.pop();
}, 500);
window.setTimeout(() => {
notifications = notifications.filter(x => x.id !== notification.id);
notifications.value = notifications.value.filter(x => x.id !== notification.id);
}, 6000);
}

6
packages/frontend/src/ui/_common_/statusbar-federation.vue
View file

@ -47,9 +47,9 @@ const props = defineProps<{
refreshIntervalSec?: number;
}>();
const instances = ref<Misskey.entities.Instance[]>([]);
const instances = ref<Misskey.entities.FederationInstance[]>([]);
const fetching = ref(true);
let key = $ref(0);
const key = ref(0);
const tick = () => {
os.api('federation/instances', {
@ -58,7 +58,7 @@ const tick = () => {
}).then(res => {
instances.value = res;
fetching.value = false;
key++;
key.value++;
});
};

4
packages/frontend/src/ui/_common_/statusbar-rss.vue
View file

@ -44,7 +44,7 @@ const props = defineProps<{
const items = ref([]);
const fetching = ref(true);
let key = $ref(0);
const key = ref(0);
const tick = () => {
window.fetch(`/api/fetch-rss?url=${props.url}`, {}).then(res => {
@ -54,7 +54,7 @@ const tick = () => {
}
items.value = feed.items;
fetching.value = false;
key++;
key.value++;
});
});
};

4
packages/frontend/src/ui/_common_/statusbar-user-list.vue
View file

@ -50,7 +50,7 @@ const props = defineProps<{
const notes = ref<Misskey.entities.Note[]>([]);
const fetching = ref(true);
let key = $ref(0);
const key = ref(0);
const tick = () => {
if (props.userListId == null) return;
@ -59,7 +59,7 @@ const tick = () => {
}).then(res => {
notes.value = res;
fetching.value = false;
key++;
key.value++;
});
};

8
packages/frontend/src/ui/_common_/stream-indicator.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onUnmounted } from 'vue';
import { onUnmounted, ref } from 'vue';
import { useStream } from '@/stream.js';
import { i18n } from '@/i18n.js';
import MkButton from '@/components/MkButton.vue';
@ -23,14 +23,14 @@ import { defaultStore } from '@/store.js';
const zIndex = os.claimZIndex('high');
let hasDisconnected = $ref(false);
const hasDisconnected = ref(false);
function onDisconnected() {
hasDisconnected = true;
hasDisconnected.value = true;
}
function resetDisconnected() {
hasDisconnected = false;
hasDisconnected.value = false;
}
function reload() {

12
packages/frontend/src/ui/classic.header.vue
View file

@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, onMounted } from 'vue';
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import { openInstanceMenu } from './_common_/common';
import * as os from '@/os.js';
import { navbarItemDef } from '@/navbar';
@ -59,12 +59,12 @@ import { i18n } from '@/i18n.js';
const WINDOW_THRESHOLD = 1400;
let settingsWindowed = $ref(window.innerWidth > WINDOW_THRESHOLD);
let menu = $ref(defaultStore.state.menu);
const settingsWindowed = ref(window.innerWidth > WINDOW_THRESHOLD);
const menu = ref(defaultStore.state.menu);
// const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
let otherNavItemIndicated = computed<boolean>(() => {
const otherNavItemIndicated = computed<boolean>(() => {
for (const def in navbarItemDef) {
if (menu.includes(def)) continue;
if (menu.value.includes(def)) continue;
if (navbarItemDef[def].indicated) return true;
}
return false;
@ -86,7 +86,7 @@ function openAccountMenu(ev: MouseEvent) {
onMounted(() => {
window.addEventListener('resize', () => {
settingsWindowed = (window.innerWidth >= WINDOW_THRESHOLD);
settingsWindowed.value = (window.innerWidth >= WINDOW_THRESHOLD);
}, { passive: true });
});

16
packages/frontend/src/ui/classic.sidebar.vue
View file

@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, onMounted, computed, watch, nextTick } from 'vue';
import { defineAsyncComponent, computed, watch, ref, shallowRef } from 'vue';
import { openInstanceMenu } from './_common_/common.js';
// import { host } from '@/config.js';
import * as os from '@/os.js';
@ -65,24 +65,24 @@ import { i18n } from '@/i18n.js';
const WINDOW_THRESHOLD = 1400;
const menu = $ref(defaultStore.state.menu);
const menu = ref(defaultStore.state.menu);
const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
const otherNavItemIndicated = computed<boolean>(() => {
for (const def in navbarItemDef) {
if (menu.includes(def)) continue;
if (menu.value.includes(def)) continue;
if (navbarItemDef[def].indicated) return true;
}
return false;
});
let el = $shallowRef<HTMLElement>();
const el = shallowRef<HTMLElement>();
// let accounts = $ref([]);
// let connection = $ref(null);
let iconOnly = $ref(false);
let settingsWindowed = $ref(false);
const iconOnly = ref(false);
const settingsWindowed = ref(false);
function calcViewState() {
iconOnly = (window.innerWidth <= WINDOW_THRESHOLD) || (menuDisplay.value === 'sideIcon');
settingsWindowed = (window.innerWidth > WINDOW_THRESHOLD);
iconOnly.value = (window.innerWidth <= WINDOW_THRESHOLD) || (menuDisplay.value === 'sideIcon');
settingsWindowed.value = (window.innerWidth > WINDOW_THRESHOLD);
}
function more(ev: MouseEvent) {

42
packages/frontend/src/ui/classic.vue
View file

@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!showMenuOnTop" class="sidebar">
<XSidebar/>
</div>
<div v-else ref="widgetsLeft" class="widgets left">
<div v-else-if="!pageMetadata?.needWideArea" ref="widgetsLeft" class="widgets left">
<XWidgets place="left" :marginTop="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/>
</div>
@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</main>
<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
<div v-if="isDesktop && !pageMetadata?.needWideArea" ref="widgetsRight" class="widgets right">
<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--margin)'" @mounted="attachSticky(widgetsRight)"/>
</div>
</div>
@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ComputedRef, onMounted, provide } from 'vue';
import { defineAsyncComponent, onMounted, provide, ref, computed, shallowRef } from 'vue';
import XSidebar from './classic.sidebar.vue';
import XCommon from './_common_/common.vue';
import { instanceName } from '@/config.js';
@ -62,26 +62,26 @@ const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
const DESKTOP_THRESHOLD = 1100;
let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
let widgetsShowing = $ref(false);
let fullView = $ref(false);
let globalHeaderHeight = $ref(0);
const pageMetadata = ref<null | PageMetadata>();
const widgetsShowing = ref(false);
const fullView = ref(false);
const globalHeaderHeight = ref(0);
const wallpaper = miLocalStorage.getItem('wallpaper') != null;
const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === 'top');
let live2d = $shallowRef<HTMLIFrameElement>();
let widgetsLeft = $ref();
let widgetsRight = $ref();
const showMenuOnTop = computed(() => defaultStore.state.menuDisplay === 'top');
const live2d = shallowRef<HTMLIFrameElement>();
const widgetsLeft = ref();
const widgetsRight = ref();
provide('router', mainRouter);
provideMetadataReceiver((info) => {
pageMetadata = info;
pageMetadata.value = info.value;
if (pageMetadata.value) {
document.title = `${pageMetadata.value.title} | ${instanceName}`;
}
});
provide('shouldHeaderThin', showMenuOnTop);
provide('shouldHeaderThin', showMenuOnTop.value);
provide('forceSpacerMin', true);
function attachSticky(el) {
@ -110,10 +110,10 @@ function onContextmenu(ev: MouseEvent) {
type: 'label',
text: path,
}, {
icon: fullView ? 'ph-arrows-in-simple ph-bold ph-lg' : 'ph-frame-corners ph-bold ph-lg',
text: fullView ? i18n.ts.quitFullView : i18n.ts.fullView,
icon: fullView.value ? 'ph-arrows-in-simple ph-bold ph-lg' : 'ph-frame-corners ph-bold ph-lg',
text: fullView.value ? i18n.ts.quitFullView : i18n.ts.fullView,
action: () => {
fullView = !fullView;
fullView.value = !fullView.value;
},
}, {
icon: 'ph-frame-corners ph-bold ph-lg',
@ -154,13 +154,13 @@ defaultStore.loaded.then(() => {
onMounted(() => {
window.addEventListener('resize', () => {
isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
isDesktop.value = (window.innerWidth >= DESKTOP_THRESHOLD);
}, { passive: true });
if (defaultStore.state.aiChanMode) {
const iframeRect = live2d.getBoundingClientRect();
const iframeRect = live2d.value.getBoundingClientRect();
window.addEventListener('mousemove', ev => {
live2d.contentWindow.postMessage({
live2d.value.contentWindow.postMessage({
type: 'moveCursor',
body: {
x: ev.clientX - iframeRect.left,
@ -169,7 +169,7 @@ onMounted(() => {
}, '*');
}, { passive: true });
window.addEventListener('touchmove', ev => {
live2d.contentWindow.postMessage({
live2d.value.contentWindow.postMessage({
type: 'moveCursor',
body: {
x: ev.touches[0].clientX - iframeRect.left,

11
packages/frontend/src/ui/deck.vue
View file

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XSidebar v-if="!isMobile"/>
<div :class="$style.main">
<XAnnouncements v-if="$i" :class="$style.announcements"/>
<XAnnouncements v-if="$i"/>
<XStatusBars/>
<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.self="onWheel">
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
@ -92,14 +92,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, ref, watch } from 'vue';
import { computed, defineAsyncComponent, ref, watch, shallowRef } from 'vue';
import { v4 as uuid } from 'uuid';
import XCommon from './_common_/common.vue';
import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store.js';
import XSidebar from '@/ui/_common_/navbar.vue';
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import MkButton from '@/components/MkButton.vue';
import { getScrollContainer } from '@/scripts/scroll.js';
import * as os from '@/os.js';
import { navbarItemDef } from '@/navbar.js';
import { $i } from '@/account.js';
@ -171,7 +170,7 @@ function showSettings() {
os.pageWindow('/settings/deck');
}
let columnsEl = $shallowRef<HTMLElement>();
const columnsEl = shallowRef<HTMLElement>();
const addColumn = async (ev) => {
const columns = [
@ -212,7 +211,7 @@ const onContextmenu = (ev) => {
function onWheel(ev: WheelEvent) {
if (ev.deltaX === 0) {
columnsEl.scrollLeft += ev.deltaY;
columnsEl.value.scrollLeft += ev.deltaY;
}
}
@ -236,7 +235,7 @@ function changeProfile(ev: MouseEvent) {
deckStore.set('profile', k);
unisonReload();
},
}))), null, {
}))), { type: 'divider' }, {
text: i18n.ts._deck.newProfile,
icon: 'ph-plus ph-bold ph-lg',
action: async () => {

4
packages/frontend/src/ui/deck/antenna-column.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, shallowRef } from 'vue';
import XColumn from './column.vue';
import { updateColumn, Column } from './deck-store.js';
import MkTimeline from '@/components/MkTimeline.vue';
@ -26,7 +26,7 @@ const props = defineProps<{
isStacked: boolean;
}>();
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
onMounted(() => {
if (props.column.antennaId == null) {

11
packages/frontend/src/ui/deck/channel-column.vue
View file

@ -19,6 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { shallowRef } from 'vue';
import * as Misskey from 'misskey-js';
import XColumn from './column.vue';
import { updateColumn, Column } from './deck-store.js';
@ -32,8 +33,8 @@ const props = defineProps<{
isStacked: boolean;
}>();
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
let channel = $shallowRef<Misskey.entities.Channel>();
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const channel = shallowRef<Misskey.entities.Channel>();
if (props.column.channelId == null) {
setChannel();
@ -58,14 +59,14 @@ async function setChannel() {
}
async function post() {
if (!channel || channel.id !== props.column.channelId) {
channel = await os.api('channels/show', {
if (!channel.value || channel.value.id !== props.column.channelId) {
channel.value = await os.api('channels/show', {
channelId: props.column.channelId,
});
}
os.post({
channel,
channel: channel.value,
});
}

42
packages/frontend/src/ui/deck/column.vue
View file

@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, provide, watch } from 'vue';
import { onBeforeUnmount, onMounted, provide, watch, shallowRef, ref, computed } from 'vue';
import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn, Column } from './deck-store';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
@ -67,16 +67,16 @@ const emit = defineEmits<{
(ev: 'headerWheel', ctx: WheelEvent): void;
}>();
let body = $shallowRef<HTMLDivElement | null>();
const body = shallowRef<HTMLDivElement | null>();
let dragging = $ref(false);
watch($$(dragging), v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));
const dragging = ref(false);
watch(dragging, v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));
let draghover = $ref(false);
let dropready = $ref(false);
const draghover = ref(false);
const dropready = ref(false);
const isMainColumn = $computed(() => props.column.type === 'main');
const active = $computed(() => props.column.active !== false);
const isMainColumn = computed(() => props.column.type === 'main');
const active = computed(() => props.column.active !== false);
onMounted(() => {
os.deckGlobalEvents.on('column.dragStart', onOtherDragStart);
@ -89,11 +89,11 @@ onBeforeUnmount(() => {
});
function onOtherDragStart() {
dropready = true;
dropready.value = true;
}
function onOtherDragEnd() {
dropready = false;
dropready.value = false;
}
function toggleActive() {
@ -104,7 +104,7 @@ function toggleActive() {
}
function getMenu() {
let items = [{
let items: MenuItem[] = [{
icon: 'ph-gear ph-bold ph-lg',
text: i18n.ts._deck.configureColumn,
action: async () => {
@ -170,7 +170,7 @@ function getMenu() {
action: () => {
popRightColumn(props.column.id);
},
} : undefined, null, {
} : undefined, { type: 'divider' }, {
icon: 'ph-trash ph-bold ph-lg',
text: i18n.ts.remove,
danger: true,
@ -180,7 +180,7 @@ function getMenu() {
}];
if (props.menu) {
items.unshift(null);
items.unshift({ type: 'divider' });
items = props.menu.concat(items);
}
@ -208,8 +208,8 @@ function onContextmenu(ev: MouseEvent) {
}
function goTop() {
if (body) {
body.scrollTo({
if (body.value) {
body.value.scrollTo({
top: 0,
behavior: 'smooth',
});
@ -223,17 +223,17 @@ function onDragstart(ev) {
// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
window.setTimeout(() => {
dragging = true;
dragging.value = true;
}, 10);
}
function onDragend(ev) {
dragging = false;
dragging.value = false;
}
function onDragover(ev) {
// 自分自身がドラッグされている場合
if (dragging) {
if (dragging.value) {
// 自分自身にはドロップさせない
ev.dataTransfer.dropEffect = 'none';
} else {
@ -241,16 +241,16 @@ function onDragover(ev) {
ev.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
if (isDeckColumn) draghover = true;
if (isDeckColumn) draghover.value = true;
}
}
function onDragleave() {
draghover = false;
draghover.value = false;
}
function onDrop(ev) {
draghover = false;
draghover.value = false;
os.deckGlobalEvents.emit('column.dragEnd');
const id = ev.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);

6
packages/frontend/src/ui/deck/direct-column.vue
View file

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { } from 'vue';
import { ref } from 'vue';
import XColumn from './column.vue';
import { Column } from './deck-store.js';
import MkNotes from '@/components/MkNotes.vue';
@ -30,11 +30,11 @@ const pagination = {
},
};
const tlComponent: InstanceType<typeof MkNotes> = $ref();
const tlComponent = ref<InstanceType<typeof MkNotes>>();
function reloadTimeline() {
return new Promise<void>((res) => {
tlComponent.pagingComponent?.reload().then(() => {
tlComponent.value.pagingComponent?.reload().then(() => {
res();
});
});

10
packages/frontend/src/ui/deck/list-column.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import { watch, shallowRef, ref } from 'vue';
import XColumn from './column.vue';
import { updateColumn, Column } from './deck-store';
import MkTimeline from '@/components/MkTimeline.vue';
@ -26,14 +26,14 @@ const props = defineProps<{
isStacked: boolean;
}>();
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
const withRenotes = $ref(props.column.withRenotes ?? true);
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const withRenotes = ref(props.column.withRenotes ?? true);
if (props.column.listId == null) {
setList();
}
watch($$(withRenotes), v => {
watch(withRenotes, v => {
updateColumn(props.column.id, {
withRenotes: v,
});
@ -72,7 +72,7 @@ const menu = [
{
type: 'switch',
text: i18n.ts.showRenotes,
ref: $$(withRenotes),
ref: withRenotes,
},
];
</script>

6
packages/frontend/src/ui/deck/main-column.vue
View file

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { ComputedRef, provide, shallowRef } from 'vue';
import { ComputedRef, provide, shallowRef, ref } from 'vue';
import XColumn from './column.vue';
import { deckStore, Column } from '@/ui/deck/deck-store.js';
import * as os from '@/os.js';
@ -35,11 +35,11 @@ defineProps<{
}>();
const contents = shallowRef<HTMLElement>();
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
provide('router', mainRouter);
provideMetadataReceiver((info) => {
pageMetadata = info;
pageMetadata.value = info;
});
/*

6
packages/frontend/src/ui/deck/mentions-column.vue
View file

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { } from 'vue';
import { ref } from 'vue';
import XColumn from './column.vue';
import { Column } from './deck-store.js';
import MkNotes from '@/components/MkNotes.vue';
@ -22,11 +22,11 @@ defineProps<{
isStacked: boolean;
}>();
const tlComponent: InstanceType<typeof MkNotes> = $ref();
const tlComponent = ref<InstanceType<typeof MkNotes>>();
function reloadTimeline() {
return new Promise<void>((res) => {
tlComponent.pagingComponent?.reload().then(() => {
tlComponent.value.pagingComponent?.reload().then(() => {
res();
});
});

4
packages/frontend/src/ui/deck/notifications-column.vue
View file

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { defineAsyncComponent, shallowRef } from 'vue';
import XColumn from './column.vue';
import { updateColumn, Column } from './deck-store.js';
import XNotifications from '@/components/MkNotifications.vue';
@ -24,7 +24,7 @@ const props = defineProps<{
isStacked: boolean;
}>();
let notificationsComponent = $shallowRef<InstanceType<typeof XNotifications>>();
const notificationsComponent = shallowRef<InstanceType<typeof XNotifications>>();
function func() {
os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {

4
packages/frontend/src/ui/deck/role-timeline-column.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, shallowRef } from 'vue';
import XColumn from './column.vue';
import { updateColumn, Column } from './deck-store.js';
import MkTimeline from '@/components/MkTimeline.vue';
@ -26,7 +26,7 @@ const props = defineProps<{
isStacked: boolean;
}>();
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
onMounted(() => {
if (props.column.roleId == null) {

28
packages/frontend/src/ui/deck/tl-column.vue
View file

@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted, watch } from 'vue';
import { onMounted, watch, ref, shallowRef } from 'vue';
import XColumn from './column.vue';
import { removeColumn, updateColumn, Column } from './deck-store.js';
import MkTimeline from '@/components/MkTimeline.vue';
@ -48,29 +48,29 @@ const props = defineProps<{
isStacked: boolean;
}>();
let disabled = $ref(false);
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
const disabled = ref(false);
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const isLocalTimelineAvailable = (($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable));
const isGlobalTimelineAvailable = (($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable));
const isBubbleTimelineAvailable = ($i == null && instance.policies.btlAvailable) || ($i != null && $i.policies.btlAvailable);
const withRenotes = $ref(props.column.withRenotes ?? true);
const withReplies = $ref(props.column.withReplies ?? false);
const onlyFiles = $ref(props.column.onlyFiles ?? false);
const withRenotes = ref(props.column.withRenotes ?? true);
const withReplies = ref(props.column.withReplies ?? false);
const onlyFiles = ref(props.column.onlyFiles ?? false);
watch($$(withRenotes), v => {
watch(withRenotes, v => {
updateColumn(props.column.id, {
withRenotes: v,
});
});
watch($$(withReplies), v => {
watch(withReplies, v => {
updateColumn(props.column.id, {
withReplies: v,
});
});
watch($$(onlyFiles), v => {
watch(onlyFiles, v => {
updateColumn(props.column.id, {
onlyFiles: v,
});
@ -80,7 +80,7 @@ onMounted(() => {
if (props.column.tl == null) {
setType();
} else if ($i) {
disabled = (
disabled.value = (
(!((instance.policies.ltlAvailable) || ($i.policies.ltlAvailable)) && ['local', 'social'].includes(props.column.tl)) ||
(!((instance.policies.gtlAvailable) || ($i.policies.gtlAvailable)) && ['global'].includes(props.column.tl)) ||
(!((instance.policies.btlAvailable) || ($i.policies.btlAvailable)) && ['bubble'].includes(props.column.tl)));
@ -120,15 +120,17 @@ const menu = [{
}, {
type: 'switch',
text: i18n.ts.showRenotes,
ref: $$(withRenotes),
ref: withRenotes,
}, props.column.tl === 'local' || props.column.tl === 'social' ? {
type: 'switch',
text: i18n.ts.showRepliesToOthersInTimeline,
ref: $$(withReplies),
ref: withReplies,
disabled: onlyFiles,
} : undefined, {
type: 'switch',
text: i18n.ts.fileAttachedOnly,
ref: $$(onlyFiles),
ref: onlyFiles,
disabled: props.column.tl === 'local' || props.column.tl === 'social' ? withReplies : false,
}];
</script>

6
packages/frontend/src/ui/deck/widgets-column.vue
View file

@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { } from 'vue';
import { ref } from 'vue';
import XColumn from './column.vue';
import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store.js';
import XWidgets from '@/components/MkWidgets.vue';
@ -26,7 +26,7 @@ const props = defineProps<{
isStacked: boolean;
}>();
let edit = $ref(false);
const edit = ref(false);
function addWidget(widget) {
addColumnWidget(props.column.id, widget);
@ -45,7 +45,7 @@ function updateWidgets(widgets) {
}
function func() {
edit = !edit;
edit.value = !edit.value;
}
const menu = [{

10
packages/frontend/src/ui/minimum.vue
View file

@ -14,19 +14,19 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { provide, ComputedRef } from 'vue';
import { provide, ComputedRef, ref } from 'vue';
import XCommon from './_common_/common.vue';
import { mainRouter } from '@/router.js';
import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
import { instanceName } from '@/config.js';
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
provide('router', mainRouter);
provideMetadataReceiver((info) => {
pageMetadata = info;
if (pageMetadata.value) {
document.title = `${pageMetadata.value.title} | ${instanceName}`;
pageMetadata.value = info;
if (pageMetadata.value.value) {
document.title = `${pageMetadata.value.value.title} | ${instanceName}`;
}
});

30
packages/frontend/src/ui/universal.vue
View file

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
<template #header>
<div>
<XAnnouncements v-if="$i" :class="$style.announcements"/>
<XAnnouncements v-if="$i"/>
<XStatusBars :class="$style.statusbars"/>
</div>
</template>
@ -18,11 +18,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.spacer"></div>
</MkStickyContainer>
<div v-if="isDesktop" :class="$style.widgets">
<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
<XWidgets/>
</div>
<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ph-squares-four ph-bold ph-lg"></i></button>
<button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ph-squares-four ph-bold ph-lg"></i></button>
<div v-if="isMobile" ref="navFooter" :class="$style.nav">
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ph-list ph-bold ph-lg-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
@ -95,7 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, shallowRef, Ref } from 'vue';
import { defineAsyncComponent, provide, onMounted, computed, ref, watch, shallowRef, Ref } from 'vue';
import XCommon from './_common_/common.vue';
import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
import { instanceName } from '@/config.js';
@ -127,14 +127,14 @@ window.addEventListener('resize', () => {
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
});
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const widgetsShowing = $ref(false);
const navFooter = $shallowRef<HTMLElement>();
const pageMetadata = ref<null | PageMetadata>();
const widgetsShowing = ref(false);
const navFooter = shallowRef<HTMLElement>();
const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
provide('router', mainRouter);
provideMetadataReceiver((info) => {
pageMetadata = info;
pageMetadata.value = info.value;
if (pageMetadata.value) {
document.title = `${pageMetadata.value.title} | ${instanceName}`;
}
@ -216,16 +216,16 @@ function top() {
});
}
let navFooterHeight = $ref(0);
provide<Ref<number>>(CURRENT_STICKY_BOTTOM, $$(navFooterHeight));
const navFooterHeight = ref(0);
provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
watch($$(navFooter), () => {
if (navFooter) {
navFooterHeight = navFooter.offsetHeight;
document.body.style.setProperty('--stickyBottom', `${navFooterHeight}px`);
watch(navFooter, () => {
if (navFooter.value) {
navFooterHeight.value = navFooter.value.offsetHeight;
document.body.style.setProperty('--stickyBottom', `${navFooterHeight.value}px`);
document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)');
} else {
navFooterHeight = 0;
navFooterHeight.value = 0;
document.body.style.setProperty('--stickyBottom', '0px');
document.body.style.setProperty('--minBottomSpacing', '0px');
}

6
packages/frontend/src/ui/universal.widgets.vue
View file

@ -13,10 +13,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts">
let editMode = $ref(false);
import { computed, ref } from 'vue';
const editMode = ref(false);
</script>
<script lang="ts" setup>
import { } from 'vue';
import XWidgets from '@/components/MkWidgets.vue';
import { i18n } from '@/i18n.js';
import { defaultStore } from '@/store.js';
@ -30,7 +30,7 @@ const props = withDefaults(defineProps<{
place: null,
});
const widgets = $computed(() => {
const widgets = computed(() => {
if (props.place === null) return defaultStore.reactiveState.widgets.value;
if (props.place === 'left') return defaultStore.reactiveState.widgets.value.filter(w => w.place === 'left');
return defaultStore.reactiveState.widgets.value.filter(w => w.place !== 'left');

34
packages/frontend/src/ui/visitor.vue
View file

@ -67,9 +67,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { ComputedRef, onMounted, provide } from 'vue';
import { ComputedRef, onMounted, provide, ref, computed } from 'vue';
import XCommon from './_common_/common.vue';
import { host, instanceName } from '@/config.js';
import { instanceName } from '@/config.js';
import * as os from '@/os.js';
import { instance } from '@/instance.js';
import XSigninDialog from '@/components/MkSigninDialog.vue';
@ -82,13 +82,13 @@ import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
const DESKTOP_THRESHOLD = 1100;
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
provide('router', mainRouter);
provideMetadataReceiver((info) => {
pageMetadata = info;
if (pageMetadata.value) {
document.title = `${pageMetadata.value.title} | ${instanceName}`;
pageMetadata.value = info;
if (pageMetadata.value.value) {
document.title = `${pageMetadata.value.value.title} | ${instanceName}`;
}
});
@ -97,14 +97,14 @@ const announcements = {
limit: 10,
};
const isTimelineAvailable = $ref(instance.policies?.ltlAvailable || instance.policies?.gtlAvailable);
const isTimelineAvailable = ref(instance.policies?.ltlAvailable || instance.policies?.gtlAvailable);
let showMenu = $ref(false);
let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
let narrow = $ref(window.innerWidth < 1280);
let meta = $ref();
const showMenu = ref(false);
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
const narrow = ref(window.innerWidth < 1280);
const meta = ref();
const keymap = $computed(() => {
const keymap = computed(() => {
return {
'd': () => {
if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
@ -116,10 +116,10 @@ const keymap = $computed(() => {
};
});
const root = $computed(() => mainRouter.currentRoute.value.name === 'index');
const root = computed(() => mainRouter.currentRoute.value.name === 'index');
os.api('meta', { detail: true }).then(res => {
meta = res;
meta.value = res;
});
function signin() {
@ -135,15 +135,15 @@ function signup() {
}
onMounted(() => {
if (!isDesktop) {
if (!isDesktop.value) {
window.addEventListener('resize', () => {
if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop = true;
if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
}, { passive: true });
}
});
defineExpose({
showMenu: $$(showMenu),
showMenu: showMenu,
});
</script>

10
packages/frontend/src/ui/zen.vue
View file

@ -22,22 +22,22 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { provide, ComputedRef } from 'vue';
import { provide, ComputedRef, ref } from 'vue';
import XCommon from './_common_/common.vue';
import { mainRouter } from '@/router.js';
import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
import { instanceName, ui } from '@/config.js';
import { i18n } from '@/i18n.js';
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
const showBottom = !(new URLSearchParams(location.search)).has('zen') && ui === 'deck';
provide('router', mainRouter);
provideMetadataReceiver((info) => {
pageMetadata = info;
if (pageMetadata.value) {
document.title = `${pageMetadata.value.title} | ${instanceName}`;
pageMetadata.value = info;
if (pageMetadata.value.value) {
document.title = `${pageMetadata.value.value.title} | ${instanceName}`;
}
});