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

Merge branch 'develop' into img-max

Browse source
This commit is contained in:
tamaina 2023-04-13 12:47:16 +00:00
commit 2cc7f5c322
55 changed files with 1096 additions and 317 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/frontend/.storybook/generate.tsx
View file

@ -118,7 +118,7 @@ function toStories(component: string): string {
.replace(/[-.]|^(?=\d)/g, '_')
.replace(/(?<=^[^A-Z_]*$)/, '_')}
/> as estree.Identifier;
const parameters = (
const parameters =
<object-expression
properties={[
<property
@ -137,9 +137,8 @@ function toStories(component: string): string {
]
: []),
]}
/>
) as estree.ObjectExpression;
const program = (
/> as estree.ObjectExpression;
const program =
<program
body={[
<import-declaration
@ -379,11 +378,11 @@ function toStories(component: string): string {
declaration={(<identifier name='meta' />) as estree.Identifier}
/> as estree.ExportDefaultDeclaration,
]}
/>
) as estree.Program;
/> as estree.Program;
return format(
'/* eslint-disable @typescript-eslint/explicit-function-return-type */\n' +
'/* eslint-disable import/no-default-export */\n' +
'/* eslint-disable import/no-duplicates */\n' +
generate(program, { generator }) +
(hasImplStories ? readFileSync(`${implStories}.ts`, 'utf-8') : ''),
{
@ -397,6 +396,7 @@ function toStories(component: string): string {
// glob('src/{components,pages,ui,widgets}/**/*.vue')
Promise.all([
glob('src/components/global/*.vue'),
glob('src/components/Mk{A,B}*.vue'),
glob('src/components/MkGalleryPostPreview.vue'),
glob('src/pages/user/home.vue'),
])

10
packages/frontend/.storybook/mocks.ts
View file

@ -8,6 +8,16 @@ export const onUnhandledRequest = ((req, print) => {
}) satisfies SharedOptions['onUnhandledRequest'];
export const commonHandlers = [
rest.get('/fluent-emoji/:codepoints.png', async (req, res, ctx) => {
const { codepoints } = req.params;
const value = await fetch(`https://raw.githubusercontent.com/misskey-dev/emojis/main/dist/${codepoints}.png`).then((response) => response.blob());
return res(ctx.set('Content-Type', 'image/png'), ctx.body(value));
}),
rest.get('/fluent-emojis/:codepoints.png', async (req, res, ctx) => {
const { codepoints } = req.params;
const value = await fetch(`https://raw.githubusercontent.com/misskey-dev/emojis/main/dist/${codepoints}.png`).then((response) => response.blob());
return res(ctx.set('Content-Type', 'image/png'), ctx.body(value));
}),
rest.get('/twemoji/:codepoints.svg', async (req, res, ctx) => {
const { codepoints } = req.params;
const value = await fetch(`https://unpkg.com/@discordapp/twemoji@14.1.2/dist/svg/${codepoints}.svg`).then((response) => response.blob());

2
packages/frontend/.storybook/preview-head.html
View file

@ -1,3 +1,5 @@
<link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true" as="image" type="image/png" crossorigin="anonymous">
<link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true" as="image" type="image/jpeg" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@2.12.0/tabler-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/@fontsource/m-plus-rounded-1c/index.css">
<style>

84
packages/frontend/.vscode/storybook.code-snippets vendored Normal file
View file

@ -0,0 +1,84 @@
{
"Storybook Story Impl File": {
"scope": "typescript",
"prefix": "storyimpl",
"body": [
"/* eslint-disable @typescript-eslint/explicit-function-return-type */",
"import { StoryObj } from '@storybook/vue3';",
"import $1 from './$1.vue';",
"export const Default = {",
"\trender(args) {",
"\t\treturn {",
"\t\t\tcomponents: {",
"\t\t\t\t$1,",
"\t\t\t},",
"\t\t\tsetup() {",
"\t\t\t\treturn {",
"\t\t\t\t\targs,",
"\t\t\t\t};",
"\t\t\t},",
"\t\t\tcomputed: {",
"\t\t\t\tprops() {",
"\t\t\t\t\treturn {",
"\t\t\t\t\t\t...this.args,",
"\t\t\t\t\t};",
"\t\t\t\t},",
"\t\t\t},",
"\t\t\ttemplate: '<$1 v-bind=\"props\" />',",
"\t\t};",
"\t},",
"\targs: {",
"\t\t$2",
"\t},",
"\tparameters: {",
"\t\tlayout: 'centered',",
"\t},",
"} satisfies StoryObj<typeof $1>;",
""
]
},
"Storybook Story Impl File (w/ events)": {
"scope": "typescript",
"prefix": "storyimplevent",
"body": [
"/* eslint-disable @typescript-eslint/explicit-function-return-type */",
"import { action } from '@storybook/addon-actions';",
"import { StoryObj } from '@storybook/vue3';",
"import $1 from './$1.vue';",
"export const Default = {",
"\trender(args) {",
"\t\treturn {",
"\t\t\tcomponents: {",
"\t\t\t\t$1,",
"\t\t\t},",
"\t\t\tsetup() {",
"\t\t\t\treturn {",
"\t\t\t\t\targs,",
"\t\t\t\t};",
"\t\t\t},",
"\t\t\tcomputed: {",
"\t\t\t\tprops() {",
"\t\t\t\t\treturn {",
"\t\t\t\t\t\t...this.args,",
"\t\t\t\t\t};",
"\t\t\t\t},",
"\t\t\t\tevents() {",
"\t\t\t\t\treturn {",
"\t\t\t\t\t\t$3",
"\t\t\t\t\t};",
"\t\t\t\t},",
"\t\t\t},",
"\t\t\ttemplate: '<$1 v-bind=\"props\" v-on=\"events\" />',",
"\t\t};",
"\t},",
"\targs: {",
"\t\t$2",
"\t},",
"\tparameters: {",
"\t\tlayout: 'centered',",
"\t},",
"} satisfies StoryObj<typeof $1>;",
""
]
}
}

1
packages/frontend/package.json
View file

@ -74,6 +74,7 @@
"vuedraggable": "next"
},
"devDependencies": {
"@storybook/addon-actions": "7.0.2",
"@storybook/addon-essentials": "7.0.2",
"@storybook/addon-interactions": "7.0.2",
"@storybook/addon-links": "7.0.2",

49
packages/frontend/src/components/MkAbuseReport.stories.impl.ts Normal file
View file

@ -0,0 +1,49 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { action } from '@storybook/addon-actions';
import { StoryObj } from '@storybook/vue3';
import { rest } from 'msw';
import { abuseUserReport } from '../../.storybook/fakes';
import { commonHandlers } from '../../.storybook/mocks';
import MkAbuseReport from './MkAbuseReport.vue';
export const Default = {
render(args) {
return {
components: {
MkAbuseReport,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
events() {
return {
resolved: action('resolved'),
};
},
},
template: '<MkAbuseReport v-bind="props" v-on="events" />',
};
},
args: {
report: abuseUserReport(),
},
parameters: {
layout: 'fullscreen',
msw: {
handlers: [
...commonHandlers,
rest.post('/api/admin/resolve-abuse-user-report', async (req, res, ctx) => {
action('POST /api/admin/resolve-abuse-user-report')(await req.json());
return res(ctx.json({}));
}),
],
},
},
} satisfies StoryObj<typeof MkAbuseReport>;

49
packages/frontend/src/components/MkAbuseReportWindow.stories.impl.ts Normal file
View file

@ -0,0 +1,49 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { action } from '@storybook/addon-actions';
import { StoryObj } from '@storybook/vue3';
import { rest } from 'msw';
import { userDetailed } from '../../.storybook/fakes';
import { commonHandlers } from '../../.storybook/mocks';
import MkAbuseReportWindow from './MkAbuseReportWindow.vue';
export const Default = {
render(args) {
return {
components: {
MkAbuseReportWindow,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
events() {
return {
'closed': action('closed'),
};
},
},
template: '<MkAbuseReportWindow v-bind="props" v-on="events" />',
};
},
args: {
user: userDetailed(),
},
parameters: {
layout: 'centered',
msw: {
handlers: [
...commonHandlers,
rest.post('/api/users/report-abuse', async (req, res, ctx) => {
action('POST /api/users/report-abuse')(await req.json());
return res(ctx.json({}));
}),
],
},
},
} satisfies StoryObj<typeof MkAbuseReportWindow>;

33
packages/frontend/src/components/MkAccountMoved.stories.impl.ts Normal file
View file

@ -0,0 +1,33 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import { userDetailed } from '../../.storybook/fakes';
import MkAccountMoved from './MkAccountMoved.vue';
export const Default = {
render(args) {
return {
components: {
MkAccountMoved,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkAccountMoved v-bind="props" />',
};
},
args: {
username: userDetailed().username,
host: userDetailed().host,
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkAccountMoved>;

4
packages/frontend/src/components/MkAccountMoved.vue
View file

@ -2,7 +2,7 @@
<div :class="$style.root">
<i class="ti ti-plane-departure" style="margin-right: 8px;"></i>
{{ i18n.ts.accountMoved }}
<MkMention :class="$style.link" :username="acct" :host="host ?? localHost"/>
<MkMention :class="$style.link" :username="username" :host="host ?? localHost"/>
</div>
</template>
@ -12,7 +12,7 @@ import { i18n } from '@/i18n';
import { host as localHost } from '@/config';
defineProps<{
acct: string;
username: string;
host: string;
}>();
</script>

56
packages/frontend/src/components/MkAchievements.stories.impl.ts Normal file
View file

@ -0,0 +1,56 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import { rest } from 'msw';
import { userDetailed } from '../../.storybook/fakes';
import { commonHandlers } from '../../.storybook/mocks';
import MkAchievements from './MkAchievements.vue';
import { ACHIEVEMENT_TYPES } from '@/scripts/achievements';
export const Empty = {
render(args) {
return {
components: {
MkAchievements,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkAchievements v-bind="props" />',
};
},
args: {
user: userDetailed(),
},
parameters: {
layout: 'fullscreen',
msw: {
handlers: [
...commonHandlers,
rest.post('/api/users/achievements', (req, res, ctx) => {
return res(ctx.json([]));
}),
],
},
},
} satisfies StoryObj<typeof MkAchievements>;
export const All = {
...Empty,
parameters: {
msw: {
handlers: [
...commonHandlers,
rest.post('/api/users/achievements', (req, res, ctx) => {
return res(ctx.json(ACHIEVEMENT_TYPES.map((name) => ({ name, unlockedAt: 0 }))));
}),
],
},
},
} satisfies StoryObj<typeof MkAchievements>;

9
packages/frontend/src/components/MkAnalogClock.stories.impl.ts
View file

@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import MkAnalogClock from './MkAnalogClock.vue';
import isChromatic from 'chromatic';
export const Default = {
render(args) {
return {
@ -22,6 +23,14 @@ export const Default = {
template: '<MkAnalogClock v-bind="props" />',
};
},
args: {
now: isChromatic() ? () => new Date('2023-01-01T10:10:30') : undefined,
},
decorators: [
() => ({
template: '<div style="container-type:inline-size;height:100%"><div style="height:100cqmin;margin:auto;width:100cqmin"><story/></div></div>',
}),
],
parameters: {
layout: 'fullscreen',
},

12
packages/frontend/src/components/MkAnalogClock.vue
View file

@ -99,6 +99,7 @@ const props = withDefaults(defineProps<{
graduations?: 'none' | 'dots' | 'numbers';
fadeGraduations?: boolean;
sAnimation?: 'none' | 'elastic' | 'easeOut';
now?: () => Date;
}>(), {
numbers: false,
thickness: 0.1,
@ -107,6 +108,7 @@ const props = withDefaults(defineProps<{
graduations: 'dots',
fadeGraduations: true,
sAnimation: 'elastic',
now: () => new Date(),
});
const graduationsMajor = computed(() => {
@ -145,11 +147,17 @@ let disableSAnimate = $ref(false);
let sOneRound = false;
function tick() {
const now = new Date();
now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
const now = props.now();
now.setMinutes(now.getMinutes() + now.getTimezoneOffset() + props.offset);
const previousS = s;
const previousM = m;
const previousH = h;
s = now.getSeconds();
m = now.getMinutes();
h = now.getHours();
if (previousS === s && previousM === m && previousH === h) {
return;
}
hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
mAngle = Math.PI * (m + s / 60) / 30;
if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)

2
packages/frontend/src/components/MkAsUi.stories.impl.ts Normal file
View file

@ -0,0 +1,2 @@
import MkAsUi from './MkAsUi.vue';
void MkAsUi;

176
packages/frontend/src/components/MkAutocomplete.stories.impl.ts Normal file
View file

@ -0,0 +1,176 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { action } from '@storybook/addon-actions';
import { expect } from '@storybook/jest';
import { userEvent, waitFor, within } from '@storybook/testing-library';
import { StoryObj } from '@storybook/vue3';
import { rest } from 'msw';
import { userDetailed } from '../../.storybook/fakes';
import { commonHandlers } from '../../.storybook/mocks';
import MkAutocomplete from './MkAutocomplete.vue';
import MkInput from './MkInput.vue';
import { tick } from '@/scripts/test-utils';
const common = {
render(args) {
return {
components: {
MkAutocomplete,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
events() {
return {
open: action('open'),
closed: action('closed'),
};
},
},
template: '<MkAutocomplete v-bind="props" v-on="events" :textarea="textarea" />',
};
},
args: {
close: action('close'),
x: 0,
y: 0,
},
decorators: [
(_, context) => ({
components: {
MkInput,
},
data() {
return {
q: context.args.q,
textarea: null,
};
},
methods: {
inputMounted() {
this.textarea = this.$refs.input.$refs.inputEl;
},
},
template: '<MkInput v-model="q" ref="input" @vue:mounted="inputMounted"/><story v-if="textarea" :q="q" :textarea="textarea"/>',
}),
],
parameters: {
controls: {
exclude: ['textarea'],
},
layout: 'centered',
chromatic: {
// FIXME: flaky
disableSnapshot: true,
},
},
} satisfies StoryObj<typeof MkAutocomplete>;
export const User = {
...common,
args: {
...common.args,
type: 'user',
},
async play({ canvasElement }) {
const canvas = within(canvasElement);
const input = canvas.getByRole('combobox');
await waitFor(() => userEvent.hover(input));
await waitFor(() => userEvent.click(input));
await waitFor(() => userEvent.type(input, 'm'));
await waitFor(async () => {
await userEvent.type(input, ' ', { delay: 256 });
await tick();
return await expect(canvas.getByRole('list')).toBeInTheDocument();
}, { timeout: 16384 });
},
parameters: {
...common.parameters,
msw: {
handlers: [
...commonHandlers,
rest.post('/api/users/search-by-username-and-host', (req, res, ctx) => {
return res(ctx.json([
userDetailed('44', 'mizuki', 'misskey-hub.net', 'Mizuki'),
userDetailed('49', 'momoko', 'misskey-hub.net', 'Momoko'),
]));
}),
],
},
},
};
export const Hashtag = {
...common,
args: {
...common.args,
type: 'hashtag',
},
async play({ canvasElement }) {
const canvas = within(canvasElement);
const input = canvas.getByRole('combobox');
await waitFor(() => userEvent.hover(input));
await waitFor(() => userEvent.click(input));
await waitFor(() => userEvent.type(input, '気象'));
await waitFor(async () => {
await userEvent.type(input, ' ', { delay: 256 });
await tick();
return await expect(canvas.getByRole('list')).toBeInTheDocument();
}, { interval: 256, timeout: 16384 });
},
parameters: {
...common.parameters,
msw: {
handlers: [
...commonHandlers,
rest.post('/api/hashtags/search', (req, res, ctx) => {
return res(ctx.json([
'気象警報注意報',
'気象警報',
'気象情報',
]));
}),
],
},
},
};
export const Emoji = {
...common,
args: {
...common.args,
type: 'emoji',
},
async play({ canvasElement }) {
const canvas = within(canvasElement);
const input = canvas.getByRole('combobox');
await waitFor(() => userEvent.hover(input));
await waitFor(() => userEvent.click(input));
await waitFor(() => userEvent.type(input, 'smile'));
await waitFor(async () => {
await userEvent.type(input, ' ', { delay: 256 });
await tick();
return await expect(canvas.getByRole('list')).toBeInTheDocument();
}, { interval: 256, timeout: 16384 });
},
} satisfies StoryObj<typeof MkAutocomplete>;
export const MfmTag = {
...common,
args: {
...common.args,
type: 'mfmTag',
},
async play({ canvasElement }) {
const canvas = within(canvasElement);
const input = canvas.getByRole('combobox');
await waitFor(() => userEvent.hover(input));
await waitFor(() => userEvent.click(input));
await waitFor(async () => {
await tick();
return await expect(canvas.getByRole('list')).toBeInTheDocument();
}, { interval: 256, timeout: 16384 });
},
} satisfies StoryObj<typeof MkAutocomplete>;

46
packages/frontend/src/components/MkAvatars.stories.impl.ts Normal file
View file

@ -0,0 +1,46 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import { rest } from 'msw';
import { userDetailed } from '../../.storybook/fakes';
import { commonHandlers } from '../../.storybook/mocks';
import MkAvatars from './MkAvatars.vue';
export const Default = {
render(args) {
return {
components: {
MkAvatars,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkAvatars v-bind="props" />',
};
},
args: {
userIds: ['17', '20', '18'],
},
parameters: {
layout: 'centered',
msw: {
handlers: [
...commonHandlers,
rest.post('/api/users/show', (req, res, ctx) => {
return res(ctx.json([
userDetailed('17'),
userDetailed('20'),
userDetailed('18'),
]));
}),
],
},
},
} satisfies StoryObj<typeof MkAvatars>;

53
packages/frontend/src/components/MkButton.stories.impl.ts
View file

@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable import/no-default-export */
/* eslint-disable import/no-duplicates */
import { action } from '@storybook/addon-actions';
import { StoryObj } from '@storybook/vue3';
import MkButton from './MkButton.vue';
export const Default = {
@ -20,11 +20,60 @@ export const Default = {
...this.args,
};
},
events() {
return {
click: action('click'),
};
},
},
template: '<MkButton v-bind="props">Text</MkButton>',
template: '<MkButton v-bind="props" v-on="events">Text</MkButton>',
};
},
args: {
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkButton>;
export const Primary = {
...Default,
args: {
...Default.args,
primary: true,
},
} satisfies StoryObj<typeof MkButton>;
export const Gradate = {
...Default,
args: {
...Default.args,
gradate: true,
},
} satisfies StoryObj<typeof MkButton>;
export const Rounded = {
...Default,
args: {
...Default.args,
rounded: true,
},
} satisfies StoryObj<typeof MkButton>;
export const Danger = {
...Default,
args: {
...Default.args,
danger: true,
},
} satisfies StoryObj<typeof MkButton>;
export const Small = {
...Default,
args: {
...Default.args,
small: true,
},
} satisfies StoryObj<typeof MkButton>;
export const Large = {
...Default,
args: {
...Default.args,
large: true,
},
} satisfies StoryObj<typeof MkButton>;

5
packages/frontend/src/components/MkNote.vue
View file

@ -484,6 +484,11 @@ function showReactions(): void {
}
}
.footer {
position: relative;
z-index: 1;
}
&:hover > .article > .main > .footer > .footerButton {
opacity: 1;
}

9
packages/frontend/src/components/MkPostForm.vue
View file

@ -900,27 +900,28 @@ defineExpose({
}
.headerLeft {
display: grid;
grid-template-columns: repeat(2, minmax(36px, 50px));
grid-template-rows: minmax(40px, 100%);
display: flex;
flex: 0 1 100px;
}
.cancel {
padding: 0;
font-size: 1em;
height: 100%;
flex: 0 1 50px;
}
.account {
height: 100%;
display: inline-flex;
vertical-align: bottom;
flex: 0 1 50px;
}
.avatar {
width: 28px;
height: 28px;
margin: auto 0;
margin: auto;
}
.headerRight {

10
packages/frontend/src/components/global/MkError.stories.impl.ts
View file

@ -1,4 +1,5 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { action } from '@storybook/addon-actions';
import { expect } from '@storybook/jest';
import { waitFor } from '@storybook/testing-library';
import { StoryObj } from '@storybook/vue3';
@ -20,14 +21,21 @@ export const Default = {
...this.args,
};
},
events() {
return {
retry: action('retry'),
};
},
},
template: '<MkError v-bind="props" />',
template: '<MkError v-bind="props" v-on="events" />',
};
},
async play({ canvasElement }) {
await expect(canvasElement.firstElementChild).not.toBeNull();
await waitFor(async () => expect(canvasElement.firstElementChild?.classList).not.toContain('_transition_zoom-enter-active'));
},
args: {
},
parameters: {
layout: 'centered',
},

11
packages/frontend/src/config.ts
View file

@ -1,21 +1,22 @@
import { miLocalStorage } from "./local-storage";
import { miLocalStorage } from './local-storage';
const address = new URL(location.href);
const siteName = (document.querySelector('meta[property="og:site_name"]') as HTMLMetaElement)?.content;
const siteName = document.querySelector<HTMLMetaElement>('meta[property="og:site_name"]')?.content;
export const host = address.host;
export const hostname = address.hostname;
export const url = address.origin;
export const apiUrl = url + '/api';
export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + '/streaming';
export const lang = miLocalStorage.getItem('lang');
export const lang = miLocalStorage.getItem('lang') ?? 'en-US';
export const langs = _LANGS_;
export let locale = JSON.parse(miLocalStorage.getItem('locale'));
const preParseLocale = miLocalStorage.getItem('locale');
export let locale = preParseLocale ? JSON.parse(preParseLocale) : null;
export const version = _VERSION_;
export const instanceName = siteName === 'Misskey' ? host : siteName;
export const ui = miLocalStorage.getItem('ui');
export const debug = miLocalStorage.getItem('debug') === 'true';
export function updateLocale(newLocale) {
export function updateLocale(newLocale): void {
locale = newLocale;
}

45
packages/frontend/src/init.ts
View file

@ -6,18 +6,6 @@ import 'vite/modulepreload-polyfill';
import '@/style.scss';
//#region account indexedDB migration
import { set } from '@/scripts/idb-proxy';
{
const accounts = miLocalStorage.getItem('accounts');
if (accounts) {
set('accounts', JSON.parse(accounts));
miLocalStorage.removeItem('accounts');
}
}
//#endregion
import { computed, createApp, watch, markRaw, version as vueVersion, defineAsyncComponent } from 'vue';
import { compareVersions } from 'compare-versions';
import JSON5 from 'json5';
@ -42,11 +30,11 @@ import { reloadChannel } from '@/scripts/unison-reload';
import { reactionPicker } from '@/scripts/reaction-picker';
import { getUrlWithoutLoginId } from '@/scripts/login-id';
import { getAccountFromId } from '@/scripts/get-account-from-id';
import { deckStore } from './ui/deck/deck-store';
import { miLocalStorage } from './local-storage';
import { claimAchievement, claimedAchievements } from './scripts/achievements';
import { fetchCustomEmojis } from './custom-emojis';
import { mainRouter } from './router';
import { deckStore } from '@/ui/deck/deck-store';
import { miLocalStorage } from '@/local-storage';
import { claimAchievement, claimedAchievements } from '@/scripts/achievements';
import { fetchCustomEmojis } from '@/custom-emojis';
import { mainRouter } from '@/router';
console.info(`Misskey v${version}`);
@ -55,7 +43,9 @@ if (_DEV_) {
console.info(`vue ${vueVersion}`);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(window as any).$i = $i;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(window as any).$store = defaultStore;
window.addEventListener('error', event => {
@ -184,7 +174,7 @@ fetchInstanceMetaPromise.then(() => {
try {
await fetchCustomEmojis();
} catch (err) {}
} catch (err) { /* empty */ }
const app = createApp(
new URLSearchParams(window.location.search).has('zen') ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
@ -212,20 +202,20 @@ await deckStore.ready;
// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
const rootEl = (() => {
const rootEl = ((): HTMLElement => {
const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
const currentRoot = document.getElementById(MISSKEY_MOUNT_DIV_ID);
if (currentEl) {
if (currentRoot) {
console.warn('multiple import detected');
return currentEl;
return currentRoot;
}
const rootEl = document.createElement('div');
rootEl.id = MISSKEY_MOUNT_DIV_ID;
document.body.appendChild(rootEl);
return rootEl;
const root = document.createElement('div');
root.id = MISSKEY_MOUNT_DIV_ID;
document.body.appendChild(root);
return root;
})();
app.mount(rootEl);
@ -256,8 +246,7 @@ if (lastVersion !== version) {
popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed');
}
}
} catch (err) {
}
} catch (err) { /* empty */ }
}
await defaultStore.ready;

7
packages/frontend/src/local-storage.ts
View file

@ -24,6 +24,7 @@ type Keys =
'customCss' |
'message_drafts' |
'scratchpad' |
'debug' |
`miux:${string}` |
`ui:folder:${string}` |
`themes:${string}` |
@ -32,7 +33,7 @@ type Keys =
'emojis' // DEPRECATED, stored in indexeddb (13.9.0~);
export const miLocalStorage = {
getItem: (key: Keys) => window.localStorage.getItem(key),
setItem: (key: Keys, value: string) => window.localStorage.setItem(key, value),
removeItem: (key: Keys) => window.localStorage.removeItem(key),
getItem: (key: Keys): string | null => window.localStorage.getItem(key),
setItem: (key: Keys, value: string): void => window.localStorage.setItem(key, value),
removeItem: (key: Keys): void => window.localStorage.removeItem(key),
};

1
packages/frontend/src/pages/about-misskey.vue
View file

@ -218,6 +218,7 @@ const patrons = [
'Ebise Lutica',
'巣黒るい@リスケモ男の娘VTuber!',
'ふぇいぽむ',
'依古田イコ',
];
let thereIsTreasure = $ref($i && !claimedAchievements.includes('foundTreasure'));

2
packages/frontend/src/pages/channels.vue
View file

@ -65,7 +65,7 @@ const props = defineProps<{
}>();
let key = $ref('');
let tab = $ref('search');
let tab = $ref('featured');
let searchQuery = $ref('');
let searchType = $ref('nameAndDescription');
let channelPagination = $ref();

97
packages/frontend/src/pages/user/home.vue
View file

@ -7,7 +7,7 @@
<!-- <div class="punished" v-if="user.isSilenced"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
<div class="profile _gaps">
<MkAccountMoved v-if="user.movedToUri" :host="user.movedToUri.host" :acct="user.movedToUri.username"/>
<MkAccountMoved v-if="user.movedToUri" :host="user.movedToUri.host" :username="user.movedToUri.username"/>
<MkRemoteCaution v-if="user.host != null" :href="user.url ?? user.uri!" class="warn"/>
<div :key="user.id" class="main _panel">
@ -21,6 +21,9 @@
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
<button v-if="!isEditingMemo && !memoDraft" class="_button add-note-button" @click="showMemoTextarea">
<i class="ti ti-edit"/> {{ i18n.ts.addMemo }}
</button>
</div>
</div>
<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
@ -39,6 +42,17 @@
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
</div>
</div>
<div v-if="isEditingMemo || memoDraft" class="memo" :class="{'no-memo': !memoDraft}">
<div class="heading" v-text="i18n.ts.memo"/>
<textarea
ref="memoTextareaEl"
v-model="memoDraft"
rows="1"
@focus="isEditingMemo = true"
@blur="updateMemo"
@input="adjustMemoTextarea"
/>
</div>
<div v-if="user.roles.length > 0" class="roles">
<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color }">
<img v-if="role.iconUrl" style="height: 1.3em; vertical-align: -22%;" :src="role.iconUrl"/>
@ -113,7 +127,7 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent, computed, onMounted, onUnmounted } from 'vue';
import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
import calcAge from 's-age';
import * as misskey from 'misskey-js';
import MkNote from '@/components/MkNote.vue';
@ -133,6 +147,7 @@ import { $i } from '@/account';
import { dateString } from '@/filters/date';
import { confetti } from '@/scripts/confetti';
import MkNotes from '@/components/MkNotes.vue';
import { api } from '@/os';
const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
@ -151,6 +166,10 @@ let parallaxAnimationId = $ref<null | number>(null);
let narrow = $ref<null | boolean>(null);
let rootEl = $ref<null | HTMLElement>(null);
let bannerEl = $ref<null | HTMLElement>(null);
let memoTextareaEl = $ref<null | HTMLElement>(null);
let memoDraft = $ref(props.user.memo);
let isEditingMemo = $ref(false);
const pagination = {
endpoint: 'users/notes' as const,
@ -193,6 +212,31 @@ function parallax() {
banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
}
function showMemoTextarea() {
isEditingMemo = true;
nextTick(() => {
memoTextareaEl?.focus();
});
}
function adjustMemoTextarea() {
if (!memoTextareaEl) return;
memoTextareaEl.style.height = '0px';
memoTextareaEl.style.height = `${memoTextareaEl.scrollHeight}px`;
}
async function updateMemo() {
await api('users/update-memo', {
memo: memoDraft,
userId: props.user.id,
});
isEditingMemo = false;
}
watch([props.user], () => {
memoDraft = props.user.memo;
});
onMounted(() => {
window.requestAnimationFrame(parallaxLoop);
narrow = rootEl!.clientWidth < 1000;
@ -208,6 +252,9 @@ onMounted(() => {
});
}
}
nextTick(() => {
adjustMemoTextarea();
});
});
onUnmounted(() => {
@ -323,6 +370,16 @@ onUnmounted(() => {
font-weight: bold;
}
}
> .add-note-button {
background: rgba(0, 0, 0, 0.2);
color: #fff;
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
border-radius: 24px;
padding: 4px 8px;
font-size: 80%;
}
}
}
}
@ -369,6 +426,38 @@ onUnmounted(() => {
}
}
> .memo {
margin: 12px 24px 0 154px;
background: transparent;
color: var(--fg);
border: 1px solid var(--divider);
border-radius: 8px;
padding: 8px;
line-height: 0;
> .heading {
text-align: left;
color: var(--fgTransparent);
line-height: 1.5;
}
textarea {
margin: 0;
padding: 0;
resize: none;
border: none;
outline: none;
width: 100%;
height: auto;
min-height: 0;
line-height: 1.5;
color: var(--fg);
overflow: hidden;
background: transparent;
font-family: inherit;
}
}
> .description {
padding: 24px 24px 24px 154px;
font-size: 0.95em;
@ -504,6 +593,10 @@ onUnmounted(() => {
justify-content: center;
}
> .memo {
margin: 16px 16px 0 16px;
}
> .description {
padding: 16px;
text-align: center;

27
packages/frontend/src/scripts/get-user-menu.ts
View file

@ -98,6 +98,27 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
});
}
async function editMemo(): Promise<void> {
const userDetailed = await os.api('users/show', {
userId: user.id,
});
const { canceled, result } = await os.form(i18n.ts.editMemo, {
memo: {
type: 'string',
required: true,
multiline: true,
label: i18n.ts.memo,
default: userDetailed.memo,
},
});
if (canceled) return;
os.apiWithDialog('users/update-memo', {
memo: result.memo,
userId: user.id,
});
}
let menu = [{
icon: 'ti ti-at',
text: i18n.ts.copyUsername,
@ -123,6 +144,12 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
os.post({ specified: user, initialText: `@${user.username} ` });
},
}, null, {
icon: 'ti ti-pencil',
text: i18n.ts.editMemo,
action: () => {
editMemo();
},
}, {
type: 'parent',
icon: 'ti ti-list',
text: i18n.ts.addToList,