Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ allow users to choose icon set

Browse Source 
Co-authored-by: naskya <m@naskya.net>
This commit is contained in:
Kainoa Kanter 2023-10-17 01:57:20 +00:00
parent b41fd4fef6
commit 78d8767124
283 changed files with 1711 additions and 1523 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
locales/en-US.yml
View File

@ -1153,6 +1153,7 @@ detectPostLanguage: "Automatically detect the language and show a translate butt
for posts in foreign languages" for posts in foreign languages"
vibrate: "Play vibrations" vibrate: "Play vibrations"
openServerInfo: "Show server information by clicking the server ticker on a post" openServerInfo: "Show server information by clicking the server ticker on a post"
iconSet: "Icon set"
_sensitiveMediaDetection: _sensitiveMediaDetection:
description: "Reduces the effort of server moderation through automatically recognizing description: "Reduces the effort of server moderation through automatically recognizing
@ -2152,3 +2153,9 @@ _feeds:
rss: "RSS" rss: "RSS"
atom: "Atom" atom: "Atom"
jsonFeed: "JSON feed" jsonFeed: "JSON feed"
_iconSets:
bold: "Bold"
light: "Light"
regular: "Regular"
fill: "Filled"
duotone: "Duotone"

7
locales/ja-JP.yml
View File

@ -991,6 +991,7 @@ remindMeLater: "また後で"
addRe: "閲覧注意の投稿への返信で、注釈の先頭に\"re:\"を追加する" addRe: "閲覧注意の投稿への返信で、注釈の先頭に\"re:\"を追加する"
languageForTranslation: "投稿翻訳に使用する言語" languageForTranslation: "投稿翻訳に使用する言語"
detectPostLanguage: "投稿の言語を自動検出し、外国語の投稿に翻訳ボタンを表示する" detectPostLanguage: "投稿の言語を自動検出し、外国語の投稿に翻訳ボタンを表示する"
iconSet: "アイコンのスタイル"
_sensitiveMediaDetection: _sensitiveMediaDetection:
description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。" description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"
@ -1994,3 +1995,9 @@ indexableDescription: MastodonやFirefishなどの検索機能に、あなたの
clickToShowPatterns: クリックしてトラックを表示 clickToShowPatterns: クリックしてトラックを表示
vibrate: 振動を有効にする vibrate: 振動を有効にする
indexable: 投稿検索に登録 indexable: 投稿検索に登録
_iconSets:
bold: "太め"
light: "細め"
regular: "標準"
fill: "塗りつぶし"
duotone: "2色"

1
packages/client/package.json
View File

@ -31,6 +31,7 @@
"@types/uuid": "9.0.3", "@types/uuid": "9.0.3",
"@vitejs/plugin-vue": "4.3.4", "@vitejs/plugin-vue": "4.3.4",
"@vue/compiler-sfc": "3.3.4", "@vue/compiler-sfc": "3.3.4",
"@vue/runtime-core": "3.3.4",
"autobind-decorator": "2.4.0", "autobind-decorator": "2.4.0",
"autosize": "6.0.1", "autosize": "6.0.1",
"blurhash": "2.0.5", "blurhash": "2.0.5",

9
packages/client/src/account.ts
View File

@ -3,8 +3,9 @@ import type * as firefish from "firefish-js";
import { i18n } from "./i18n"; import { i18n } from "./i18n";
import { del, get, set } from "@/scripts/idb-proxy"; import { del, get, set } from "@/scripts/idb-proxy";
import { apiUrl } from "@/config"; import { apiUrl } from "@/config";
import { alert, api, popup, popupMenu, success, waiting } from "@/os"; import { alert, api, popup, popupMenu, waiting } from "@/os";
import { reloadChannel, unisonReload } from "@/scripts/unison-reload"; import { reloadChannel, unisonReload } from "@/scripts/unison-reload";
import icon from "@/scripts/icon";
// TODO: 他のタブと永続化されたstateを同期 // TODO: 他のタブと永続化されたstateを同期
@ -249,7 +250,7 @@ export async function openAccountMenu(
...accountItemPromises, ...accountItemPromises,
{ {
type: "parent", type: "parent",
icon: "ph-plus ph-bold ph-lg", icon: `${icon("ph-plus")}`,
text: i18n.ts.addAccount, text: i18n.ts.addAccount,
children: [ children: [
{ {
@ -268,13 +269,13 @@ export async function openAccountMenu(
}, },
{ {
type: "link", type: "link",
icon: "ph-users ph-bold ph-lg", icon: `${icon("ph-users")}`,
text: i18n.ts.manageAccounts, text: i18n.ts.manageAccounts,
to: "/settings/accounts", to: "/settings/accounts",
}, },
{ {
type: "button", type: "button",
icon: "ph-sign-out ph-bold ph-lg", icon: `${icon("ph-sign-out")}`,
text: i18n.ts.logout, text: i18n.ts.logout,
action: () => { action: () => {
signout(); signout();

3
packages/client/src/components/MkAbuseReportWindow.vue
View File

@ -8,7 +8,7 @@
> >
<template #header> <template #header>
<i <i
class="ph-warning-circle ph-bold ph-lg" :class="icon('ph-warning-circle')"
style="margin-right: 0.5em" style="margin-right: 0.5em"
></i> ></i>
<I18n :src="i18n.ts.reportAbuseOf" tag="span"> <I18n :src="i18n.ts.reportAbuseOf" tag="span">
@ -47,6 +47,7 @@ import MkTextarea from "@/components/form/textarea.vue";
import MkButton from "@/components/MkButton.vue"; import MkButton from "@/components/MkButton.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
user: firefish.entities.User; user: firefish.entities.User;

7
packages/client/src/components/MkChannelFollowButton.vue
View File

@ -8,16 +8,16 @@
<template v-if="!wait"> <template v-if="!wait">
<template v-if="isFollowing"> <template v-if="isFollowing">
<span v-if="full">{{ i18n.ts.unfollow }}</span <span v-if="full">{{ i18n.ts.unfollow }}</span
><i class="ph-minus ph-bold ph-lg"></i> ><i :class="icon('ph-minus')"></i>
</template> </template>
<template v-else> <template v-else>
<span v-if="full">{{ i18n.ts.follow }}</span <span v-if="full">{{ i18n.ts.follow }}</span
><i class="ph-plus ph-bold ph-lg"></i> ><i :class="icon('ph-plus')"></i>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<span v-if="full">{{ i18n.ts.processing }}</span <span v-if="full">{{ i18n.ts.processing }}</span
><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i> ><i :class="icon('ph-circle-notch fa-pulse ph-fw')"></i>
</template> </template>
</button> </button>
</template> </template>
@ -26,6 +26,7 @@
import { ref } from "vue"; import { ref } from "vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

8
packages/client/src/components/MkChannelPreview.vue
View File

@ -3,11 +3,12 @@
<div class="banner" :style="bannerStyle"> <div class="banner" :style="bannerStyle">
<div class="fade"></div> <div class="fade"></div>
<div class="name"> <div class="name">
<i class="ph-television ph-bold ph-lg"></i> {{ channel.name }} <i :class="icon('ph-television')"></i>
{{ channel.name }}
</div> </div>
<div class="status"> <div class="status">
<div> <div>
<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i> <i :class="icon('ph-users ph-fw')"></i>
<I18n <I18n
:src="i18n.ts._channel.usersCount" :src="i18n.ts._channel.usersCount"
tag="span" tag="span"
@ -19,7 +20,7 @@
</I18n> </I18n>
</div> </div>
<div> <div>
<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i> <i :class="icon('ph-pencil ph-fw')"></i>
<I18n <I18n
:src="i18n.ts._channel.notesCount" :src="i18n.ts._channel.notesCount"
tag="span" tag="span"
@ -52,6 +53,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed } from "vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
channel: Record<string, any>; channel: Record<string, any>;

10
packages/client/src/components/MkContainer.vue
View File

@ -20,16 +20,16 @@
@click="() => (showBody = !showBody)" @click="() => (showBody = !showBody)"
> >
<template v-if="showBody" <template v-if="showBody"
><i class="ph-caret-up ph-bold ph-lg"></i ><i :class="icon('ph-caret-up')"></i
></template> ></template>
<template v-else <template v-else
><i class="ph-caret-down ph-bold ph-lg"></i ><i :class="icon('ph-caret-down')"></i
></template> ></template>
</button> </button>
</div> </div>
</header> </header>
<transition <transition
:name="$store.state.animation ? 'container-toggle' : ''" :name="defaultStore.state.animation ? 'container-toggle' : ''"
@enter="enter" @enter="enter"
@after-enter="afterEnter" @after-enter="afterEnter"
@leave="leave" @leave="leave"
@ -62,6 +62,8 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
export default defineComponent({ export default defineComponent({
props: { props: {
@ -107,6 +109,8 @@ export default defineComponent({
omitted: null, omitted: null,
ignoreOmit: false, ignoreOmit: false,
i18n, i18n,
icon,
defaultStore,
}; };
}, },
mounted() { mounted() {

3
packages/client/src/components/MkContextMenu.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<transition :name="$store.state.animation ? 'fade' : ''" appear> <transition :name="defaultStore.state.animation ? 'fade' : ''" appear>
<div <div
ref="rootEl" ref="rootEl"
class="nvlagfpb" class="nvlagfpb"
@ -17,6 +17,7 @@ import MkMenu from "@/components/MkMenu.vue";
import type { MenuItem } from "@/types/menu"; import type { MenuItem } from "@/types/menu";
import contains from "@/scripts/contains"; import contains from "@/scripts/contains";
import * as os from "@/os"; import * as os from "@/os";
import { defaultStore } from "@/store";
const props = defineProps<{ const props = defineProps<{
items: MenuItem[]; items: MenuItem[];

5
packages/client/src/components/MkDateSeparatedList.vue
View File

@ -4,6 +4,7 @@ import { TransitionGroup, defineComponent, h } from "vue";
import MkAd from "@/components/global/MkAd.vue"; import MkAd from "@/components/global/MkAd.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
export default defineComponent({ export default defineComponent({
props: { props: {
@ -75,14 +76,14 @@ export default defineComponent({
[ [
h("span", [ h("span", [
h("i", { h("i", {
class: "ph-caret-up ph-bold ph-lg icon", class: `${icon("ph-caret-up")} icon`,
}), }),
getDateText(item.createdAt), getDateText(item.createdAt),
]), ]),
h("span", [ h("span", [
getDateText(props.items[i + 1].createdAt), getDateText(props.items[i + 1].createdAt),
h("i", { h("i", {
class: "ph-caret-down ph-bold ph-lg icon", class: `${icon("ph-caret-down")} icon`,
}), }),
]), ]),
], ],

37
packages/client/src/components/MkDialog.vue
View File

@ -16,27 +16,27 @@
<i <i
v-if="type === 'success'" v-if="type === 'success'"
:class="$style.iconInner" :class="$style.iconInner"
class="ph-check ph-bold ph-lg" class="ph-check ph-lg"
></i> ></i>
<i <i
v-else-if="type === 'error'" v-else-if="type === 'error'"
:class="$style.iconInner" :class="$style.iconInner"
class="ph-circle-wavy-warning ph-bold ph-lg" class="ph-circle-wavy-warning ph-lg"
></i> ></i>
<i <i
v-else-if="type === 'warning'" v-else-if="type === 'warning'"
:class="$style.iconInner" :class="$style.iconInner"
class="ph-warning ph-bold ph-lg" class="ph-warning ph-lg"
></i> ></i>
<i <i
v-else-if="type === 'info'" v-else-if="type === 'info'"
:class="$style.iconInner" :class="$style.iconInner"
class="ph-info ph-bold ph-lg" class="ph-info ph-lg"
></i> ></i>
<i <i
v-else-if="type === 'question'" v-else-if="type === 'question'"
:class="$style.iconInner" :class="$style.iconInner"
class="ph-circle-question ph-bold ph-lg" class="ph-circle-question ph-lg"
></i> ></i>
<MkLoading <MkLoading
v-else-if="type === 'waiting'" v-else-if="type === 'waiting'"
@ -75,7 +75,7 @@
@keydown="onInputKeydown" @keydown="onInputKeydown"
> >
<template v-if="input.type === 'password'" #prefix <template v-if="input.type === 'password'" #prefix
><i class="ph-password ph-bold ph-lg"></i ><i :class="iconClass('ph-password')"></i
></template> ></template>
<template #caption> <template #caption>
<span <span
@ -109,7 +109,7 @@
class="_buttonIcon" class="_buttonIcon"
@click.stop="openSearchFilters" @click.stop="openSearchFilters"
> >
<i class="ph-funnel ph-bold"></i> <i :class="iconClass('ph-funnel', false)"></i>
</button> </button>
</template> </template>
</MkInput> </MkInput>
@ -213,6 +213,7 @@ import MkTextarea from "@/components/form/textarea.vue";
import MkSelect from "@/components/form/select.vue"; import MkSelect from "@/components/form/select.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import iconClass from "@/scripts/icon";
interface Input { interface Input {
type: HTMLInputElement["type"]; type: HTMLInputElement["type"];
@ -364,7 +365,7 @@ async function openSearchFilters(ev) {
await os.popupMenu( await os.popupMenu(
[ [
{ {
icon: "ph-user ph-bold ph-lg", icon: `${icon("ph-user")}`,
text: i18n.ts._filters.fromUser, text: i18n.ts._filters.fromUser,
action: () => { action: () => {
os.selectUser().then((user) => { os.selectUser().then((user) => {
@ -375,32 +376,32 @@ async function openSearchFilters(ev) {
{ {
type: "parent", type: "parent",
text: i18n.ts._filters.withFile, text: i18n.ts._filters.withFile,
icon: "ph-paperclip ph-bold ph-lg", icon: `${icon("ph-paperclip")}`,
children: [ children: [
{ {
text: i18n.ts.image, text: i18n.ts.image,
icon: "ph-image-square ph-bold ph-lg", icon: `${icon("ph-image-square")}`,
action: () => { action: () => {
inputValue.value += " has:image"; inputValue.value += " has:image";
}, },
}, },
{ {
text: i18n.ts.video, text: i18n.ts.video,
icon: "ph-video-camera ph-bold ph-lg", icon: `${icon("ph-video-camera")}`,
action: () => { action: () => {
inputValue.value += " has:video"; inputValue.value += " has:video";
}, },
}, },
{ {
text: i18n.ts.audio, text: i18n.ts.audio,
icon: "ph-music-note ph-bold ph-lg", icon: `${icon("ph-music-note")}`,
action: () => { action: () => {
inputValue.value += " has:audio"; inputValue.value += " has:audio";
}, },
}, },
{ {
text: i18n.ts.file, text: i18n.ts.file,
icon: "ph-file ph-bold ph-lg", icon: `${icon("ph-file")}`,
action: () => { action: () => {
inputValue.value += " has:file"; inputValue.value += " has:file";
}, },
@ -408,14 +409,14 @@ async function openSearchFilters(ev) {
], ],
}, },
{ {
icon: "ph-link ph-bold ph-lg", icon: `${icon("ph-link")}`,
text: i18n.ts._filters.fromDomain, text: i18n.ts._filters.fromDomain,
action: () => { action: () => {
inputValue.value += " domain:"; inputValue.value += " domain:";
}, },
}, },
{ {
icon: "ph-calendar-blank ph-bold ph-lg", icon: `${icon("ph-calendar-blank")}`,
text: i18n.ts._filters.notesBefore, text: i18n.ts._filters.notesBefore,
action: () => { action: () => {
os.inputDate({ os.inputDate({
@ -428,7 +429,7 @@ async function openSearchFilters(ev) {
}, },
}, },
{ {
icon: "ph-calendar-blank ph-bold ph-lg", icon: `${icon("ph-calendar-blank")}`,
text: i18n.ts._filters.notesAfter, text: i18n.ts._filters.notesAfter,
action: () => { action: () => {
os.inputDate({ os.inputDate({
@ -441,14 +442,14 @@ async function openSearchFilters(ev) {
}, },
}, },
{ {
icon: "ph-eye ph-bold ph-lg", icon: `${icon("ph-eye")}`,
text: i18n.ts._filters.followingOnly, text: i18n.ts._filters.followingOnly,
action: () => { action: () => {
inputValue.value += " filter:following "; inputValue.value += " filter:following ";
}, },
}, },
{ {
icon: "ph-users-three ph-bold ph-lg", icon: `${icon("ph-users-three")}`,
text: i18n.ts._filters.followersOnly, text: i18n.ts._filters.followersOnly,
action: () => { action: () => {
inputValue.value += " filter:followers "; inputValue.value += " filter:followers ";

5
packages/client/src/components/MkDonation.vue
View File

@ -2,7 +2,7 @@
<transition name="slide-fade"> <transition name="slide-fade">
<div v-if="show" class="_panel _shadow _acrylic" :class="$style.root"> <div v-if="show" class="_panel _shadow _acrylic" :class="$style.root">
<div :class="$style.icon"> <div :class="$style.icon">
<i class="ph-hand-heart ph-bold ph-5x" /> <i :class="icon('ph-hand-heart ph-5x', false)" />
</div> </div>
<div :class="$style.main"> <div :class="$style.main">
<div :class="$style.title"> <div :class="$style.title">
@ -52,7 +52,7 @@
:aria-label="i18n.t('close')" :aria-label="i18n.t('close')"
@click="close" @click="close"
> >
<i class="ph-x ph-bold ph-lg"></i> <i :class="icon('ph-x')"></i>
</button> </button>
</div> </div>
</transition> </transition>
@ -65,6 +65,7 @@ import { host } from "@/config";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import * as os from "@/os"; import * as os from "@/os";
import { instance } from "@/instance"; import { instance } from "@/instance";
import icon from "@/scripts/icon";
const show = ref(false); const show = ref(false);

15
packages/client/src/components/MkDrive.file.vue
View File

@ -46,6 +46,7 @@ import bytes from "@/filters/bytes";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { $i } from "@/account"; import { $i } from "@/account";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -75,7 +76,7 @@ function getMenu() {
return [ return [
{ {
text: i18n.ts.rename, text: i18n.ts.rename,
icon: "ph-cursor-text ph-bold ph-lg", icon: `${icon("ph-cursor-text")}`,
action: rename, action: rename,
}, },
{ {
@ -83,19 +84,19 @@ function getMenu() {
? i18n.ts.unmarkAsSensitive ? i18n.ts.unmarkAsSensitive
: i18n.ts.markAsSensitive, : i18n.ts.markAsSensitive,
icon: props.file.isSensitive icon: props.file.isSensitive
? "ph-eye ph-bold ph-lg" ? "ph-eye ph-lg"
: "ph-eye-slash ph-bold ph-lg", : "ph-eye-slash ph-lg",
action: toggleSensitive, action: toggleSensitive,
}, },
{ {
text: i18n.ts.describeFile, text: i18n.ts.describeFile,
icon: "ph-subtitles ph-bold ph-lg", icon: `${icon("ph-subtitles")}`,
action: describe, action: describe,
}, },
null, null,
{ {
text: i18n.ts.copyUrl, text: i18n.ts.copyUrl,
icon: "ph-link-simple ph-bold ph-lg", icon: `${icon("ph-link-simple")}`,
action: copyUrl, action: copyUrl,
}, },
{ {
@ -103,13 +104,13 @@ function getMenu() {
href: props.file.url, href: props.file.url,
target: "_blank", target: "_blank",
text: i18n.ts.download, text: i18n.ts.download,
icon: "ph-download-simple ph-bold ph-lg", icon: `${icon("ph-download-simple")}`,
download: props.file.name, download: props.file.name,
}, },
null, null,
{ {
text: i18n.ts.delete, text: i18n.ts.delete,
icon: "ph-trash ph-bold ph-lg", icon: `${icon("ph-trash")}`,
danger: true, danger: true,
action: deleteFile, action: deleteFile,
}, },

11
packages/client/src/components/MkDrive.folder.vue
View File

@ -17,10 +17,10 @@
> >
<p class="name"> <p class="name">
<template v-if="hover" <template v-if="hover"
><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i ><i :class="icon('ph-folder-notch-open ph-fw')"></i
></template> ></template>
<template v-if="!hover" <template v-if="!hover"
><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i ><i :class="icon('ph-folder-notch ph-fw')"></i
></template> ></template>
{{ folder.name }} {{ folder.name }}
</p> </p>
@ -42,6 +42,7 @@ import type * as firefish from "firefish-js";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -248,7 +249,7 @@ function onContextmenu(ev: MouseEvent) {
[ [
{ {
text: i18n.ts.openInWindow, text: i18n.ts.openInWindow,
icon: "ph-copy ph-bold ph-lg", icon: `${icon("ph-copy")}`,
action: () => { action: () => {
os.popup( os.popup(
defineAsyncComponent( defineAsyncComponent(
@ -265,13 +266,13 @@ function onContextmenu(ev: MouseEvent) {
null, null,
{ {
text: i18n.ts.rename, text: i18n.ts.rename,
icon: "ph-cursor-text ph-bold ph-lg", icon: `${icon("ph-cursor-text")}`,
action: rename, action: rename,
}, },
null, null,
{ {
text: i18n.ts.delete, text: i18n.ts.delete,
icon: "ph-trash ph-bold ph-lg", icon: `${icon("ph-trash")}`,
danger: true, danger: true,
action: deleteFolder, action: deleteFolder,
}, },

3
packages/client/src/components/MkDrive.navFolder.vue
View File

@ -8,7 +8,7 @@
@dragleave="onDragleave" @dragleave="onDragleave"
@drop.stop="onDrop" @drop.stop="onDrop"
> >
<i v-if="folder == null" class="ph-cloud ph-bold ph-lg"></i> <i v-if="folder == null" :class="icon('ph-cloud')"></i>
<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span> <span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
</div> </div>
</template> </template>
@ -18,6 +18,7 @@ import { ref } from "vue";
import type * as firefish from "firefish-js"; import type * as firefish from "firefish-js";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
folder?: firefish.entities.DriveFolder; folder?: firefish.entities.DriveFolder;

17
packages/client/src/components/MkDrive.vue
View File

@ -12,7 +12,7 @@
/> />
<template v-for="f in hierarchyFolders"> <template v-for="f in hierarchyFolders">
<span class="separator" <span class="separator"
><i class="ph-caret-right ph-bold ph-lg"></i ><i :class="icon('ph-caret-right')"></i
></span> ></span>
<XNavFolder <XNavFolder
:folder="f" :folder="f"
@ -24,14 +24,14 @@
/> />
</template> </template>
<span v-if="folder != null" class="separator" <span v-if="folder != null" class="separator"
><i class="ph-caret-right ph-bold ph-lg"></i ><i :class="icon('ph-caret-right')"></i
></span> ></span>
<span v-if="folder != null" class="folder current">{{ <span v-if="folder != null" class="folder current">{{
folder.name folder.name
}}</span> }}</span>
</div> </div>
<button class="menu _button" @click="showMenu"> <button class="menu _button" @click="showMenu">
<i class="ph-dots-three-outline ph-bold ph-lg"></i> <i :class="icon('ph-dots-three-outline')"></i>
</button> </button>
</nav> </nav>
<div <div
@ -149,6 +149,7 @@ import { stream } from "@/stream";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { uploadFile, uploads } from "@/scripts/upload"; import { uploadFile, uploads } from "@/scripts/upload";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -677,14 +678,14 @@ function getMenu() {
}, },
{ {
text: i18n.ts.upload, text: i18n.ts.upload,
icon: "ph-upload-simple ph-bold ph-lg", icon: `${icon("ph-upload-simple")}`,
action: () => { action: () => {
selectLocalFile(); selectLocalFile();
}, },
}, },
{ {
text: i18n.ts.fromUrl, text: i18n.ts.fromUrl,
icon: "ph-link-simple ph-bold ph-lg", icon: `${icon("ph-link-simple")}`,
action: () => { action: () => {
urlUpload(); urlUpload();
}, },
@ -697,7 +698,7 @@ function getMenu() {
folder.value folder.value
? { ? {
text: i18n.ts.renameFolder, text: i18n.ts.renameFolder,
icon: "ph-cursor-text ph-bold ph-lg", icon: `${icon("ph-cursor-text")}`,
action: () => { action: () => {
renameFolder(folder.value); renameFolder(folder.value);
}, },
@ -706,7 +707,7 @@ function getMenu() {
folder.value folder.value
? { ? {
text: i18n.ts.deleteFolder, text: i18n.ts.deleteFolder,
icon: "ph-trash ph-bold ph-lg", icon: `${icon("ph-trash")}`,
action: () => { action: () => {
deleteFolder( deleteFolder(
folder.value as firefish.entities.DriveFolder, folder.value as firefish.entities.DriveFolder,
@ -716,7 +717,7 @@ function getMenu() {
: undefined, : undefined,
{ {
text: i18n.ts.createFolder, text: i18n.ts.createFolder,
icon: "ph-folder-notch-plus ph-bold ph-lg", icon: `${icon("ph-folder-notch-plus")}`,
action: () => { action: () => {
createFolder(); createFolder();
}, },

31
packages/client/src/components/MkDriveFileThumbnail.vue
View File

@ -8,33 +8,21 @@
:title="file.name" :title="file.name"
:cover="fit !== 'contain'" :cover="fit !== 'contain'"
/> />
<i <i v-else-if="is === 'image'" :class="icon('ph-file-image icon')"></i>
v-else-if="is === 'image'" <i v-else-if="is === 'video'" :class="icon('ph-file-video icon')"></i>
class="ph-file-image ph-bold ph-lg icon"
></i>
<i
v-else-if="is === 'video'"
class="ph-file-video ph-bold ph-lg icon"
></i>
<i <i
v-else-if="is === 'audio' || is === 'midi'" v-else-if="is === 'audio' || is === 'midi'"
class="ph-file-audio ph-bold ph-lg icon" :class="icon('ph-file-audio icon')"
></i> ></i>
<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i> <i v-else-if="is === 'csv'" :class="icon('ph-file-csv icon')"></i>
<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i> <i v-else-if="is === 'pdf'" :class="icon('ph-file-pdf icon')"></i>
<i <i v-else-if="is === 'textfile'" :class="icon('ph-file-text icon')"></i>
v-else-if="is === 'textfile'" <i v-else-if="is === 'archive'" :class="icon('ph-file-zip icon')"></i>
class="ph-file-text ph-bold ph-lg icon" <i v-else :class="icon('ph-file icon')"></i>
></i>
<i
v-else-if="is === 'archive'"
class="ph-file-zip ph-bold ph-lg icon"
></i>
<i v-else class="ph-file ph-bold ph-lg icon"></i>
<i <i
v-if="isThumbnailAvailable && is === 'video'" v-if="isThumbnailAvailable && is === 'video'"
class="ph-file-video ph-bold ph-lg icon-sub" :class="icon('ph-file-video icon-sub')"
></i> ></i>
</button> </button>
</template> </template>
@ -43,6 +31,7 @@
import { computed } from "vue"; import { computed } from "vue";
import type * as firefish from "firefish-js"; import type * as firefish from "firefish-js";
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue"; import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
file: firefish.entities.DriveFile; file: firefish.entities.DriveFile;

7
packages/client/src/components/MkEmojiPicker.section.vue
View File

@ -4,9 +4,7 @@
<i <i
class="toggle ph-fw ph-lg" class="toggle ph-fw ph-lg"
:class=" :class="
shown icon(shown ? 'ph-caret-down ph-lg' : 'ph-caret-up ph-lg')
? 'ph-caret-down ph-bold ph-lg'
: 'ph-caret-up ph-bold ph-lg'
" "
></i> ></i>
<slot></slot> ({{ emojis.length }}) <slot></slot> ({{ emojis.length }})
@ -21,7 +19,7 @@
" "
> >
<i <i
class="ph-circle ph-fill ph-fw ph-lg" class="ph-circle ph-fill ph-fw"
:style="{ color: skinTone + ' !important' }" :style="{ color: skinTone + ' !important' }"
:aria-label=" :aria-label="
props.skinToneLabels props.skinToneLabels
@ -50,6 +48,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, watch } from "vue"; import { onMounted, ref, watch } from "vue";
import { addSkinTone } from "@/scripts/emojilist"; import { addSkinTone } from "@/scripts/emojilist";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
emojis: string[]; emojis: string[];

11
packages/client/src/components/MkEmojiPicker.vue
View File

@ -75,7 +75,7 @@
<section> <section>
<header class="_acrylic"> <header class="_acrylic">
<i class="ph-alarm ph-bold ph-fw ph-lg"></i> <i :class="icon('ph-alarm ph-fw')"></i>
{{ i18n.ts.recentUsed }} {{ i18n.ts.recentUsed }}
</header> </header>
<div class="body"> <div class="body">
@ -135,28 +135,28 @@
:class="{ active: tab === 'index' }" :class="{ active: tab === 'index' }"
@click="tab = 'index'" @click="tab = 'index'"
> >
<i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i> <i :class="icon('ph-asterisk ph-fw')"></i>
</button> </button>
<button <button
class="_button tab" class="_button tab"
:class="{ active: tab === 'custom' }" :class="{ active: tab === 'custom' }"
@click="tab = 'custom'" @click="tab = 'custom'"
> >
<i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i> <i :class="icon('ph-smiley ph-fw')"></i>
</button> </button>
<button <button
class="_button tab" class="_button tab"
:class="{ active: tab === 'unicode' }" :class="{ active: tab === 'unicode' }"
@click="tab = 'unicode'" @click="tab = 'unicode'"
> >
<i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i> <i :class="icon('ph-leaf ph-fw')"></i>
</button> </button>
<button <button
class="_button tab" class="_button tab"
:class="{ active: tab === 'tags' }" :class="{ active: tab === 'tags' }"
@click="tab = 'tags'" @click="tab = 'tags'"
> >
<i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i> <i :class="icon('ph-hash ph-fw')"></i>
</button> </button>
</div> </div>
</div> </div>
@ -182,6 +182,7 @@ import { deviceKind } from "@/scripts/device-kind";
import { emojiCategories, instance } from "@/instance"; import { emojiCategories, instance } from "@/instance";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

3
packages/client/src/components/MkFileTypeIcon.vue
View File

@ -1,13 +1,14 @@
<template> <template>
<span class="mk-file-type-icon"> <span class="mk-file-type-icon">
<template v-if="kind == 'image'" <template v-if="kind == 'image'"
><i class="ph-file-image ph-bold ph-lg"></i ><i :class="icon('ph-file-image')"></i
></template> ></template>
</span> </span>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed } from "vue";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
type: string; type: string;

8
packages/client/src/components/MkFolder.vue
View File

@ -10,15 +10,15 @@
:aria-controls="bodyId" :aria-controls="bodyId"
> >
<template v-if="showBody" <template v-if="showBody"
><i class="ph-caret-up ph-bold ph-lg"></i ><i :class="icon('ph-caret-up')"></i
></template> ></template>
<template v-else <template v-else
><i class="ph-caret-down ph-bold ph-lg"></i ><i :class="icon('ph-caret-down')"></i
></template> ></template>
</button> </button>
</header> </header>
<transition <transition
:name="$store.state.animation ? 'folder-toggle' : ''" :name="defaultStore.state.animation ? 'folder-toggle' : ''"
@enter="enter" @enter="enter"
@after-enter="afterEnter" @after-enter="afterEnter"
@leave="leave" @leave="leave"
@ -34,6 +34,8 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { getUniqueId } from "@/os"; import { getUniqueId } from "@/os";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const localStoragePrefix = "ui:folder:"; const localStoragePrefix = "ui:folder:";

17
packages/client/src/components/MkFollowButton.vue
View File

@ -5,7 +5,7 @@
class="menu _button" class="menu _button"
@click.stop="menu" @click.stop="menu"
> >
<i class="ph-dots-three-outline ph-bold ph-lg"></i> <i :class="icon('ph-dots-three-outline')"></i>
</button> </button>
<button <button
v-if="$i != null && $i.id != user.id" v-if="$i != null && $i.id != user.id"
@ -25,37 +25,37 @@
<template v-if="!wait"> <template v-if="!wait">
<template v-if="isBlocking"> <template v-if="isBlocking">
<span>{{ (state = i18n.ts.blocked) }}</span <span>{{ (state = i18n.ts.blocked) }}</span
><i class="ph-prohibit ph-bold ph-lg"></i> ><i :class="icon('ph-prohibit')"></i>
</template> </template>
<template <template
v-else-if="hasPendingFollowRequestFromYou && user.isLocked" v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
> >
<span>{{ (state = i18n.ts.followRequestPending) }}</span <span>{{ (state = i18n.ts.followRequestPending) }}</span
><i class="ph-hourglass-medium ph-bold ph-lg"></i> ><i :class="icon('ph-hourglass-medium')"></i>
</template> </template>
<template <template
v-else-if="hasPendingFollowRequestFromYou && !user.isLocked" v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
> >
<!-- つまりリモートフォローの場合。 --> <!-- つまりリモートフォローの場合。 -->
<span>{{ (state = i18n.ts.processing) }}</span <span>{{ (state = i18n.ts.processing) }}</span
><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i> ><i :class="icon('ph-circle-notch fa-pulse')"></i>
</template> </template>
<template v-else-if="isFollowing"> <template v-else-if="isFollowing">
<span>{{ (state = i18n.ts.unfollow) }}</span <span>{{ (state = i18n.ts.unfollow) }}</span
><i class="ph-minus ph-bold ph-lg"></i> ><i :class="icon('ph-minus')"></i>
</template> </template>
<template v-else-if="!isFollowing && user.isLocked"> <template v-else-if="!isFollowing && user.isLocked">
<span>{{ (state = i18n.ts.followRequest) }}</span <span>{{ (state = i18n.ts.followRequest) }}</span
><i class="ph-lock-open ph-bold ph-lg"></i> ><i :class="icon('ph-lock-open')"></i>
</template> </template>
<template v-else-if="!isFollowing && !user.isLocked"> <template v-else-if="!isFollowing && !user.isLocked">
<span>{{ (state = i18n.ts.follow) }}</span <span>{{ (state = i18n.ts.follow) }}</span
><i class="ph-plus ph-bold ph-lg"></i> ><i :class="icon('ph-plus')"></i>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<span>{{ (state = i18n.ts.processing) }}</span <span>{{ (state = i18n.ts.processing) }}</span
><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i> ><i :class="icon('ph-circle-notch fa-pulse ph-fw')"></i>
</template> </template>
</button> </button>
</template> </template>
@ -70,6 +70,7 @@ import { $i } from "@/account";
import { getUserMenu } from "@/scripts/get-user-menu"; import { getUserMenu } from "@/scripts/get-user-menu";
import { useRouter } from "@/router"; import { useRouter } from "@/router";
import { vibrate } from "@/scripts/vibrate"; import { vibrate } from "@/scripts/vibrate";
import icon from "@/scripts/icon";
const router = useRouter(); const router = useRouter();

3
packages/client/src/components/MkGoogle.vue
View File

@ -2,7 +2,7 @@
<div class="mk-google" @click.stop> <div class="mk-google" @click.stop>
<input v-model="query" type="search" :placeholder="q" /> <input v-model="query" type="search" :placeholder="q" />
<button @click="search"> <button @click="search">
<i class="ph-magnifying-glass ph-bold ph-lg"></i> <i :class="icon('ph-magnifying-glass')"></i>
{{ i18n.ts.searchByGoogle }} {{ i18n.ts.searchByGoogle }}
</button> </button>
</div> </div>
@ -12,6 +12,7 @@
import { ref } from "vue"; import { ref } from "vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { useRouter } from "@/router"; import { useRouter } from "@/router";
import icon from "@/scripts/icon";
const router = useRouter(); const router = useRouter();

11
packages/client/src/components/MkInfo.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<div v-if="visible" class="info" :class="{ warn, card }"> <div v-if="visible" class="info" :class="{ warn, card }">
<i v-if="warn" class="ph-warning ph-bold ph-lg"></i> <i v-if="warn" :class="iconClass('ph-warning')"></i>
<i <i v-else :class="iconClass(icon ? `ph-${icon}` : 'ph-info')"></i>
v-else
class="ph-bold ph-lg"
:class="icon ? `ph-${icon}` : 'ph-info'"
></i>
<slot></slot> <slot></slot>
<button <button
v-if="closeable" v-if="closeable"
@ -14,7 +10,7 @@
:aria-label="i18n.t('close')" :aria-label="i18n.t('close')"
@click.stop="close" @click.stop="close"
> >
<i class="ph-x ph-bold ph-lg"></i> <i :class="iconClass('ph-x')"></i>
</button> </button>
</div> </div>
</template> </template>
@ -22,6 +18,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import iconClass from "@/scripts/icon";
const visible = ref(true); const visible = ref(true);

4
packages/client/src/components/MkKeyValue.vue
View File

@ -12,17 +12,17 @@
style="margin-left: 0.5em" style="margin-left: 0.5em"
@click="copy_" @click="copy_"
> >
<i class="ph-clipboard-text ph-bold"></i> <i :class="icon('ph-clipboard-text', false)"></i>
</button> </button>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue";
import copyToClipboard from "@/scripts/copy-to-clipboard"; import copyToClipboard from "@/scripts/copy-to-clipboard";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

4
packages/client/src/components/MkLaunchPad.vue
View File

@ -33,7 +33,7 @@
v-if="item.indicate" v-if="item.indicate"
class="indicator" class="indicator"
:class="{ :class="{
animateIndicator: $store.state.animation, animateIndicator: defaultStore.state.animation,
}" }"
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
@ -50,7 +50,7 @@
v-if="item.indicate" v-if="item.indicate"
class="indicator" class="indicator"
:class="{ :class="{
animateIndicator: $store.state.animation, animateIndicator: defaultStore.state.animation,
}" }"
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>

5
packages/client/src/components/MkLink.vue
View File

@ -3,7 +3,7 @@
:is="self ? 'MkA' : 'a'" :is="self ? 'MkA' : 'a'"
ref="el" ref="el"
class="xlcxczvw _link" class="xlcxczvw _link"
:[attr]="self ? url.substr(local.length) : url" :[attr]="self ? url.substring(local.length) : url"
:rel="rel" :rel="rel"
:target="target" :target="target"
:title="url" :title="url"
@ -12,7 +12,7 @@
<slot></slot> <slot></slot>
<i <i
v-if="target === '_blank'" v-if="target === '_blank'"
class="ph-arrow-square-out ph-bold ph-lg icon" :class="icon('ph-arrow-square-out icon')"
></i> ></i>
</component> </component>
</template> </template>
@ -22,6 +22,7 @@ import { defineAsyncComponent, ref } from "vue";
import { url as local } from "@/config"; import { url as local } from "@/config";
import { useTooltip } from "@/scripts/use-tooltip"; import { useTooltip } from "@/scripts/use-tooltip";
import * as os from "@/os"; import * as os from "@/os";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

7
packages/client/src/components/MkMedia.vue
View File

@ -9,7 +9,7 @@
<div class="text"> <div class="text">
<div class="wrapper"> <div class="wrapper">
<b style="display: block" <b style="display: block"
><i class="ph-warning ph-bold ph-lg"></i> ><i :class="icon('ph-warning')"></i>
{{ i18n.ts.sensitive }}</b {{ i18n.ts.sensitive }}</b
> >
<span style="display: block">{{ <span style="display: block">{{
@ -74,7 +74,7 @@
class="_button" class="_button"
@click.stop="captionPopup" @click.stop="captionPopup"
> >
<i class="ph-subtitles ph-bold ph-lg"></i> <i :class="icon('ph-subtitles')"></i>
</button> </button>
<button <button
v-if="!hide" v-if="!hide"
@ -82,7 +82,7 @@
class="_button" class="_button"
@click.stop="hide = true" @click.stop="hide = true"
> >
<i class="ph-eye-slash ph-bold ph-lg"></i> <i :class="icon('ph-eye-slash')"></i>
</button> </button>
</div> </div>
</div> </div>
@ -98,6 +98,7 @@ import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import * as os from "@/os"; import * as os from "@/os";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
media: firefish.entities.DriveFile; media: firefish.entities.DriveFile;

5
packages/client/src/components/MkMediaBanner.vue
View File

@ -5,7 +5,7 @@
class="sensitive" class="sensitive"
@click="hide = false" @click="hide = false"
> >
<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span> <span class="icon"><i :class="icon('ph-warning')"></i></span>
<b>{{ i18n.ts.sensitive }}</b> <b>{{ i18n.ts.sensitive }}</b>
<span>{{ i18n.ts.clickToShow }}</span> <span>{{ i18n.ts.clickToShow }}</span>
</div> </div>
@ -48,7 +48,7 @@
:download="media.name" :download="media.name"
> >
<span class="icon" <span class="icon"
><i class="ph-download-simple ph-bold ph-lg"></i ><i :class="icon('ph-download-simple')"></i
></span> ></span>
<b>{{ media.name }}</b> <b>{{ media.name }}</b>
</a> </a>
@ -62,6 +62,7 @@ import type * as firefish from "firefish-js";
import { ColdDeviceStorage } from "@/store"; import { ColdDeviceStorage } from "@/store";
import "vue-plyr/dist/vue-plyr.css"; import "vue-plyr/dist/vue-plyr.css";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

3
packages/client/src/components/MkMention.vue
View File

@ -11,7 +11,7 @@
<span class="main"> <span class="main">
<span class="username">@{{ username }}</span> <span class="username">@{{ username }}</span>
<span <span
v-if="host != localHost || $store.state.showFullAcct" v-if="host != localHost || defaultStore.state.showFullAcct"
class="host" class="host"
>@{{ toUnicode(host) }}</span >@{{ toUnicode(host) }}</span
> >
@ -38,6 +38,7 @@ import { toUnicode } from "punycode";
import {} from "vue"; import {} from "vue";
import { host as localHost } from "@/config"; import { host as localHost } from "@/config";
import { $i } from "@/account"; import { $i } from "@/account";
import { defaultStore } from "@/store";
const props = defineProps<{ const props = defineProps<{
username: string; username: string;

24
packages/client/src/components/MkMenu.vue
View File

@ -57,7 +57,7 @@
v-if="item.indicate" v-if="item.indicate"
class="indicator" class="indicator"
:class="{ :class="{
animateIndicator: $store.state.animation, animateIndicator: defaultStore.state.animation,
}" }"
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
@ -74,8 +74,7 @@
> >
<i <i
v-if="item.icon" v-if="item.icon"
class="ph-fw ph-lg" :class="icon(`${item.icon} ph-fw`)"
:class="item.icon"
></i> ></i>
<span :style="item.textStyle || ''">{{ <span :style="item.textStyle || ''">{{
item.text item.text
@ -84,7 +83,7 @@
v-if="item.indicate" v-if="item.indicate"
class="indicator" class="indicator"
:class="{ :class="{
animateIndicator: $store.state.animation, animateIndicator: defaultStore.state.animation,
}" }"
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
@ -107,7 +106,7 @@
v-if="item.indicate" v-if="item.indicate"
class="indicator" class="indicator"
:class="{ :class="{
animateIndicator: $store.state.animation, animateIndicator: defaultStore.state.animation,
}" }"
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
@ -135,16 +134,13 @@
> >
<i <i
v-if="item.icon" v-if="item.icon"
class="ph-fw ph-lg" :class="icon(`${item.icon} ph-fw`)"
:class="item.icon"
></i> ></i>
<span :style="item.textStyle || ''">{{ <span :style="item.textStyle || ''">{{
item.text item.text
}}</span> }}</span>
<span class="caret" <span class="caret"
><i ><i :class="icon('ph-caret-right ph-fw')"></i
class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"
></i
></span> ></span>
</button> </button>
<button <button
@ -162,8 +158,7 @@
> >
<i <i
v-if="item.icon" v-if="item.icon"
class="ph-fw ph-lg" :class="icon(`${item.icon} ph-fw`)"
:class="item.icon"
></i> ></i>
<MkAvatar <MkAvatar
v-if="item.avatar" v-if="item.avatar"
@ -178,7 +173,7 @@
v-if="item.indicate" v-if="item.indicate"
class="indicator" class="indicator"
:class="{ :class="{
animateIndicator: $store.state.animation, animateIndicator: defaultStore.state.animation,
}" }"
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
@ -190,6 +185,7 @@
</div> </div>
<div v-if="childMenu" class="child"> <div v-if="childMenu" class="child">
<XChild <XChild
v-if="childTarget && itemsEl"
ref="child" ref="child"
:items="childMenu" :items="childMenu"
:target-element="childTarget" :target-element="childTarget"
@ -221,6 +217,8 @@ import type {
} from "@/types/menu"; } from "@/types/menu";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue")); const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
const focusTrap = ref(); const focusTrap = ref();

26
packages/client/src/components/MkModPlayer.vue
View File

@ -5,10 +5,7 @@
</div> </div>
<div class="mod-player-disabled" v-else-if="hide" @click="toggleVisible()"> <div class="mod-player-disabled" v-else-if="hide" @click="toggleVisible()">
<div> <div>
<b <b><i class="ph-warning"></i> {{ i18n.ts.sensitive }}</b>
><i class="ph-warning ph-bold ph-lg"></i>
{{ i18n.ts.sensitive }}</b
>
<span>{{ i18n.ts.clickToShow }}</span> <span>{{ i18n.ts.clickToShow }}</span>
</div> </div>
</div> </div>
@ -40,16 +37,16 @@
</div> </div>
<div class="controls"> <div class="controls">
<button class="play" @click="playPause()" v-if="!loading"> <button class="play" @click="playPause()" v-if="!loading">
<i class="ph-pause ph-fill ph-lg" v-if="playing"></i> <i class="ph-pause ph-fill" v-if="playing"></i>
<i class="ph-play ph-fill ph-lg" v-else></i> <i class="ph-play ph-fill" v-else></i>
</button> </button>
<MkLoading v-else :em="true" /> <MkLoading v-else :em="true" />
<button class="stop" @click="stop()"> <button class="stop" @click="stop()">
<i class="ph-stop ph-fill ph-lg"></i> <i class="ph-stop ph-fill"></i>
</button> </button>
<button class="loop" @click="toggleLoop()"> <button class="loop" @click="toggleLoop()">
<i class="ph-repeat ph-fill ph-lg" v-if="loop === -1"></i> <i class="ph-repeat ph-fill" v-if="loop === -1"></i>
<i class="ph-repeat-once ph-fill ph-lg" v-else></i> <i class="ph-repeat-once ph-fill" v-else></i>
</button> </button>
<FormRange <FormRange
class="progress" class="progress"
@ -64,8 +61,8 @@
@update:modelValue="performSeek()" @update:modelValue="performSeek()"
></FormRange> ></FormRange>
<button class="mute" @click="toggleMute()"> <button class="mute" @click="toggleMute()">
<i class="ph-speaker-simple-x ph-fill ph-lg" v-if="muted"></i> <i class="ph-speaker-simple-x ph-fill" v-if="muted"></i>
<i class="ph-speaker-simple-high ph-fill ph-lg" v-else></i> <i class="ph-speaker-simple-high ph-fill" v-else></i>
</button> </button>
<FormRange <FormRange
class="volume" class="volume"
@ -84,7 +81,7 @@
:href="module.url" :href="module.url"
target="_blank" target="_blank"
> >
<i class="ph-download-simple ph-fill ph-lg"></i> <i class="ph-download-simple ph-fill"></i>
</a> </a>
</div> </div>
<div class="buttons"> <div class="buttons">
@ -94,7 +91,7 @@
class="_button" class="_button"
@click.stop="captionPopup" @click.stop="captionPopup"
> >
<i class="ph-subtitles ph-bold ph-lg"></i> <i class="ph-subtitles"></i>
</button> </button>
<button <button
v-if="!hide" v-if="!hide"
@ -102,7 +99,7 @@
class="_button" class="_button"
@click.stop="toggleVisible()" @click.stop="toggleVisible()"
> >
<i class="ph-eye-slash ph-bold ph-lg"></i> <i class="ph-eye-slash"></i>
</button> </button>
</div> </div>
</div> </div>
@ -116,6 +113,7 @@ import { i18n } from "@/i18n";
import * as os from "@/os"; import * as os from "@/os";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { ChiptuneJsPlayer, ChiptuneJsConfig } from "@/scripts/chiptune2"; import { ChiptuneJsPlayer, ChiptuneJsConfig } from "@/scripts/chiptune2";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
module: firefish.entities.DriveFile; module: firefish.entities.DriveFile;

16
packages/client/src/components/MkModalPageWindow.vue
View File

@ -15,14 +15,14 @@
class="_button" class="_button"
@click="back()" @click="back()"
> >
<i class="ph-caret-left ph-bold ph-lg"></i> <i :class="icon('ph-caret-left')"></i>
</button> </button>
<span v-else style="display: inline-block; width: 20px"></span> <span v-else style="display: inline-block; width: 20px"></span>
<span v-if="pageMetadata?.value" class="title"> <span v-if="pageMetadata?.value" class="title">
<i <i
v-if="pageMetadata?.value.icon" v-if="pageMetadata?.value.icon"
class="icon" class="icon"
:class="pageMetadata?.value.icon" :class="icon(pageMetadata?.value.icon)"
></i> ></i>
<span>{{ pageMetadata?.value.title }}</span> <span>{{ pageMetadata?.value.title }}</span>
</span> </span>
@ -31,7 +31,7 @@
:aria-label="i18n.t('close')" :aria-label="i18n.t('close')"
@click="$refs.modal.close()" @click="$refs.modal.close()"
> >
<i class="ph-x ph-bold ph-lg"></i> <i :class="icon('ph-x')"></i>
</button> </button>
</div> </div>
<div class="body"> <div class="body">
@ -64,6 +64,8 @@ import { i18n } from "@/i18n";
import type { PageMetadata } from "@/scripts/page-metadata"; import type { PageMetadata } from "@/scripts/page-metadata";
import { provideMetadataReceiver } from "@/scripts/page-metadata"; import { provideMetadataReceiver } from "@/scripts/page-metadata";
import { Router } from "@/nirax"; import { Router } from "@/nirax";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
initialPath: string; initialPath: string;
@ -101,18 +103,18 @@ const contextmenu = computed(() => {
text: path.value, text: path.value,
}, },
{ {
icon: "ph-arrows-out-simple ph-bold ph-lg", icon: `${icon("ph-arrows-out-simple")}`,
text: i18n.ts.showInPage, text: i18n.ts.showInPage,
action: expand, action: expand,
}, },
{ {
icon: "ph-arrow-square-out ph-bold ph-lg", icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.popout, text: i18n.ts.popout,
action: popout, action: popout,
}, },
null, null,
{ {
icon: "ph-arrow-square-out ph-bold ph-lg", icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.openInNewTab, text: i18n.ts.openInNewTab,
action: () => { action: () => {
window.open(pageUrl.value, "_blank"); window.open(pageUrl.value, "_blank");
@ -120,7 +122,7 @@ const contextmenu = computed(() => {
}, },
}, },
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: `${icon("ph-link-simple")}`,
text: i18n.ts.copyLink, text: i18n.ts.copyLink,
action: () => { action: () => {
copyToClipboard(pageUrl.value); copyToClipboard(pageUrl.value);

7
packages/client/src/components/MkModalWindow.vue
View File

@ -30,7 +30,7 @@
class="_button" class="_button"
@click="$emit('close')" @click="$emit('close')"
> >
<i class="ph-x ph-bold ph-lg"></i> <i :class="icon('ph-x')"></i>
</button> </button>
<span class="title"> <span class="title">
<slot name="header"></slot> <slot name="header"></slot>
@ -41,7 +41,7 @@
class="_button" class="_button"
@click="$emit('close')" @click="$emit('close')"
> >
<i class="ph-x ph-bold ph-lg"></i> <i :class="icon('ph-x')"></i>
</button> </button>
<button <button
v-if="props.withOkButton" v-if="props.withOkButton"
@ -50,7 +50,7 @@
:disabled="props.okButtonDisabled" :disabled="props.okButtonDisabled"
@click="$emit('ok')" @click="$emit('ok')"
> >
<i class="ph-check ph-bold ph-lg"></i> <i :class="icon('ph-check')"></i>
</button> </button>
</div> </div>
<div class="body"> <div class="body">
@ -67,6 +67,7 @@ import { shallowRef } from "vue";
import { FocusTrap } from "focus-trap-vue"; import { FocusTrap } from "focus-trap-vue";
import MkModal from "./MkModal.vue"; import MkModal from "./MkModal.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

6
packages/client/src/components/MkMoved.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<div class="msjugskd _block"> <div class="msjugskd _block">
<i <i :class="icon('ph-airplane-takeoff')" style="margin-right: 8px" />
class="ph-airplane-takeoff ph-bold ph-lg"
style="margin-right: 8px"
/>
{{ i18n.ts.accountMoved }} {{ i18n.ts.accountMoved }}
<MkMention class="link" :username="acct" :host="host" /> <MkMention class="link" :username="acct" :host="host" />
</div> </div>
@ -12,6 +9,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import MkMention from "./MkMention.vue"; import MkMention from "./MkMention.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
defineProps<{ defineProps<{
acct: string; acct: string;

38
packages/client/src/components/MkNote.vue
View File

@ -27,23 +27,22 @@
> >
<div class="line"></div> <div class="line"></div>
<div v-if="appearNote._prId_" class="info"> <div v-if="appearNote._prId_" class="info">
<i class="ph-megaphone-simple-bold ph-lg"></i> <i :class="icon('ph-megaphone-simple-bold')"></i>
{{ i18n.ts.promotion {{ i18n.ts.promotion
}}<button class="_textButton hide" @click.stop="readPromo()"> }}<button class="_textButton hide" @click.stop="readPromo()">
{{ i18n.ts.hideThisNote }} {{ i18n.ts.hideThisNote }}
<i class="ph-x ph-bold ph-lg"></i> <i :class="icon('ph-x')"></i>
</button> </button>
</div> </div>
<div v-if="appearNote._featuredId_" class="info"> <div v-if="appearNote._featuredId_" class="info">
<i class="ph-lightning ph-bold ph-lg"></i> <i :class="icon('ph-lightning')"></i>
{{ i18n.ts.featured }} {{ i18n.ts.featured }}
</div> </div>
<div v-if="pinned" class="info"> <div v-if="pinned" class="info">
<i class="ph-push-pin ph-bold ph-lg"></i <i :class="icon('ph-push-pin')"></i>{{ i18n.ts.pinnedNote }}
>{{ i18n.ts.pinnedNote }}
</div> </div>
<div v-if="isRenote" class="renote"> <div v-if="isRenote" class="renote">
<i class="ph-rocket-launch ph-bold ph-lg"></i> <i :class="icon('ph-rocket-launch')"></i>
<I18n :src="i18n.ts.renotedBy" tag="span"> <I18n :src="i18n.ts.renotedBy" tag="span">
<template #user> <template #user>
<MkA <MkA
@ -64,7 +63,7 @@
> >
<i <i
v-if="isMyRenote" v-if="isMyRenote"
class="ph-dots-three-outline ph-bold ph-lg dropdownIcon" :class="icon('ph-dots-three-outline dropdownIcon')"
></i> ></i>
<MkTime :time="note.createdAt" /> <MkTime :time="note.createdAt" />
</button> </button>
@ -149,7 +148,7 @@
class="channel" class="channel"
:to="`/channels/${appearNote.channel.id}`" :to="`/channels/${appearNote.channel.id}`"
@click.stop @click.stop
><i class="ph-television ph-bold"></i> ><i :class="icon('ph-television', false)"></i>
{{ appearNote.channel.name }}</MkA {{ appearNote.channel.name }}</MkA
> >
</div> </div>
@ -164,7 +163,7 @@
class="button _button" class="button _button"
@click.stop="reply()" @click.stop="reply()"
> >
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <i :class="icon('ph-arrow-u-up-left')"></i>
<template <template
v-if="appearNote.repliesCount > 0 && !detailedView" v-if="appearNote.repliesCount > 0 && !detailedView"
> >
@ -209,7 +208,7 @@
class="button _button" class="button _button"
@click.stop="react()" @click.stop="react()"
> >
<i class="ph-smiley ph-bold ph-lg"></i> <i :class="icon('ph-smiley')"></i>
</button> </button>
<button <button
v-if=" v-if="
@ -221,7 +220,7 @@
class="button _button reacted" class="button _button reacted"
@click.stop="undoReact(appearNote)" @click.stop="undoReact(appearNote)"
> >
<i class="ph-minus ph-bold ph-lg"></i> <i :class="icon('ph-minus')"></i>
</button> </button>
<XQuoteButton class="button" :note="appearNote" /> <XQuoteButton class="button" :note="appearNote" />
<button <button
@ -234,7 +233,7 @@
class="button _button" class="button _button"
@click.stop="translate" @click.stop="translate"
> >
<i class="ph-translate ph-bold ph-lg"></i> <i :class="icon('ph-translate')"></i>
</button> </button>
<button <button
ref="menuButton" ref="menuButton"
@ -242,7 +241,7 @@
class="button _button" class="button _button"
@click.stop="menu()" @click.stop="menu()"
> >
<i class="ph-dots-three-outline ph-bold ph-lg"></i> <i :class="icon('ph-dots-three-outline')"></i>
</button> </button>
</footer> </footer>
</div> </div>
@ -302,6 +301,7 @@ import { useNoteCapture } from "@/scripts/use-note-capture";
import { notePage } from "@/filters/note"; import { notePage } from "@/filters/note";
import { deepClone } from "@/scripts/clone"; import { deepClone } from "@/scripts/clone";
import { getNoteSummary } from "@/scripts/get-note-summary"; import { getNoteSummary } from "@/scripts/get-note-summary";
import icon from "@/scripts/icon";
const router = useRouter(); const router = useRouter();
@ -494,7 +494,7 @@ function onContextmenu(ev: MouseEvent): void {
text: notePage(appearNote.value), text: notePage(appearNote.value),
}, },
{ {
icon: "ph-browser ph-bold ph-lg", icon: `${icon("ph-browser")}`,
text: i18n.ts.openInWindow, text: i18n.ts.openInWindow,
action: () => { action: () => {
os.pageWindow(notePage(appearNote.value)); os.pageWindow(notePage(appearNote.value));
@ -502,7 +502,7 @@ function onContextmenu(ev: MouseEvent): void {
}, },
notePage(appearNote.value) != location.pathname notePage(appearNote.value) != location.pathname
? { ? {
icon: "ph-arrows-out-simple ph-bold ph-lg", icon: `${icon("ph-arrows-out-simple")}`,
text: i18n.ts.showInPage, text: i18n.ts.showInPage,
action: () => { action: () => {
router.push( router.push(
@ -515,13 +515,13 @@ function onContextmenu(ev: MouseEvent): void {
null, null,
{ {
type: "a", type: "a",
icon: "ph-arrow-square-out ph-bold ph-lg", icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.openInNewTab, text: i18n.ts.openInNewTab,
href: notePage(appearNote.value), href: notePage(appearNote.value),
target: "_blank", target: "_blank",
}, },
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: `${icon("ph-link-simple")}`,
text: i18n.ts.copyLink, text: i18n.ts.copyLink,
action: () => { action: () => {
copyToClipboard(`${url}${notePage(appearNote.value)}`); copyToClipboard(`${url}${notePage(appearNote.value)}`);
@ -530,7 +530,7 @@ function onContextmenu(ev: MouseEvent): void {
appearNote.value.user.host != null appearNote.value.user.host != null
? { ? {
type: "a", type: "a",
icon: "ph-arrow-square-up-right ph-bold ph-lg", icon: `${icon("ph-arrow-square-up-right")}`,
text: i18n.ts.showOnRemote, text: i18n.ts.showOnRemote,
href: href:
appearNote.value.url ?? appearNote.value.url ??
@ -568,7 +568,7 @@ function showRenoteMenu(viaKeyboard = false): void {
[ [
{ {
text: i18n.ts.unrenote, text: i18n.ts.unrenote,
icon: "ph-trash ph-bold ph-lg", icon: `${icon("ph-trash")}`,
danger: true, danger: true,
action: () => { action: () => {
os.api("notes/delete", { os.api("notes/delete", {

11
packages/client/src/components/MkNoteDetailed.vue
View File

@ -35,7 +35,7 @@
<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab"> <MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
<option value="replies"> <option value="replies">
<!-- <i class="ph-arrow-u-up-left ph-bold ph-lg"></i> --> <!-- <i :class="icon('ph-arrow-u-up-left')"></i> -->
{{ {{
wordWithCount( wordWithCount(
note.repliesCount, note.repliesCount,
@ -45,7 +45,7 @@
}} }}
</option> </option>
<option v-if="note.renoteCount > 0" value="renotes"> <option v-if="note.renoteCount > 0" value="renotes">
<!-- <i class="ph-rocket-launch ph-bold ph-lg"></i> --> <!-- <i :class="icon('ph-rocket-launch')"></i> -->
{{ {{
wordWithCount( wordWithCount(
note.renoteCount, note.renoteCount,
@ -55,7 +55,7 @@
}} }}
</option> </option>
<option v-if="reactionsCount > 0" value="reactions"> <option v-if="reactionsCount > 0" value="reactions">
<!-- <i class="ph-smiley ph-bold ph-lg"></i> --> <!-- <i :class="icon('ph-smiley')"></i> -->
{{ {{
wordWithCount( wordWithCount(
reactionsCount, reactionsCount,
@ -65,7 +65,7 @@
}} }}
</option> </option>
<option v-if="directQuotes?.length > 0" value="quotes"> <option v-if="directQuotes?.length > 0" value="quotes">
<!-- <i class="ph-quotes ph-bold ph-lg"></i> --> <!-- <i :class="icon('ph-quotes')"></i> -->
{{ {{
wordWithCount( wordWithCount(
directQuotes.length, directQuotes.length,
@ -75,7 +75,7 @@
}} }}
</option> </option>
<option v-if="clips?.length > 0" value="clips"> <option v-if="clips?.length > 0" value="clips">
<!-- <i class="ph-paperclip ph-bold ph-lg"></i> --> <!-- <i :class="icon('ph-paperclip')"></i> -->
{{ wordWithCount(clips.length, i18n.ts.clip, i18n.ts.clips) }} {{ wordWithCount(clips.length, i18n.ts.clip, i18n.ts.clips) }}
</option> </option>
</MkTab> </MkTab>
@ -188,6 +188,7 @@ import { getNoteMenu } from "@/scripts/get-note-menu";
import { useNoteCapture } from "@/scripts/use-note-capture"; import { useNoteCapture } from "@/scripts/use-note-capture";
import { deepClone } from "@/scripts/clone"; import { deepClone } from "@/scripts/clone";
import { stream } from "@/stream"; import { stream } from "@/stream";
// import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
note: firefish.entities.Note; note: firefish.entities.Note;

3
packages/client/src/components/MkNoteHeader.vue
View File

@ -30,7 +30,7 @@
).toLocaleTimeString(), ).toLocaleTimeString(),
}) })
" "
class="ph-pencil ph-bold" :class="icon('ph-pencil', false)"
style="margin-left: 0.4rem" style="margin-left: 0.4rem"
></i> ></i>
</MkA> </MkA>
@ -58,6 +58,7 @@ import { notePage } from "@/filters/note";
import { userPage } from "@/filters/user"; import { userPage } from "@/filters/user";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { pageWindow } from "@/os"; import { pageWindow } from "@/os";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
note: firefish.entities.Note; note: firefish.entities.Note;

24
packages/client/src/components/MkNoteSub.vue
View File

@ -67,7 +67,7 @@
class="button _button" class="button _button"
@click.stop="reply()" @click.stop="reply()"
> >
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <i :class="icon('ph-arrow-u-up-left')"></i>
<template v-if="appearNote.repliesCount > 0"> <template v-if="appearNote.repliesCount > 0">
<p class="count">{{ appearNote.repliesCount }}</p> <p class="count">{{ appearNote.repliesCount }}</p>
</template> </template>
@ -109,7 +109,7 @@
class="button _button" class="button _button"
@click.stop="react()" @click.stop="react()"
> >
<i class="ph-smiley ph-bold ph-lg"></i> <i :class="icon('ph-smiley')"></i>
</button> </button>
<button <button
v-if=" v-if="
@ -121,7 +121,7 @@
class="button _button reacted" class="button _button reacted"
@click.stop="undoReact(appearNote)" @click.stop="undoReact(appearNote)"
> >
<i class="ph-minus ph-bold ph-lg"></i> <i :class="icon('ph-minus')"></i>
</button> </button>
<XQuoteButton class="button" :note="appearNote" /> <XQuoteButton class="button" :note="appearNote" />
<button <button
@ -134,7 +134,7 @@
class="button _button" class="button _button"
@click.stop="translate" @click.stop="translate"
> >
<i class="ph-translate ph-bold ph-lg"></i> <i :class="icon('ph-translate')"></i>
</button> </button>
<button <button
ref="menuButton" ref="menuButton"
@ -142,7 +142,7 @@
class="button _button" class="button _button"
@click.stop="menu()" @click.stop="menu()"
> >
<i class="ph-dots-three-outline ph-bold ph-lg"></i> <i :class="icon('ph-dots-three-outline')"></i>
</button> </button>
</footer> </footer>
</div> </div>
@ -165,7 +165,7 @@
<div class="line"></div> <div class="line"></div>
<MkA class="text _link" :to="notePage(note)" <MkA class="text _link" :to="notePage(note)"
>{{ i18n.ts.continueThread }} >{{ i18n.ts.continueThread }}
<i class="ph-caret-double-right ph-bold ph-lg"></i <i :class="icon('ph-caret-double-right')"></i
></MkA> ></MkA>
</div> </div>
</template> </template>
@ -192,7 +192,6 @@
import { computed, inject, ref } from "vue"; import { computed, inject, ref } from "vue";
import type { Ref } from "vue"; import type { Ref } from "vue";
import type * as firefish from "firefish-js"; import type * as firefish from "firefish-js";
import * as mfm from "mfm-js";
import XNoteHeader from "@/components/MkNoteHeader.vue"; import XNoteHeader from "@/components/MkNoteHeader.vue";
import MkSubNoteContent from "@/components/MkSubNoteContent.vue"; import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
import XReactionsViewer from "@/components/MkReactionsViewer.vue"; import XReactionsViewer from "@/components/MkReactionsViewer.vue";
@ -216,6 +215,7 @@ import { i18n } from "@/i18n";
import { useNoteCapture } from "@/scripts/use-note-capture"; import { useNoteCapture } from "@/scripts/use-note-capture";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { deepClone } from "@/scripts/clone"; import { deepClone } from "@/scripts/clone";
import icon from "@/scripts/icon";
const router = useRouter(); const router = useRouter();
@ -412,7 +412,7 @@ function onContextmenu(ev: MouseEvent): void {
text: notePage(appearNote.value), text: notePage(appearNote.value),
}, },
{ {
icon: "ph-browser ph-bold ph-lg", icon: `${icon("ph-browser")}`,
text: i18n.ts.openInWindow, text: i18n.ts.openInWindow,
action: () => { action: () => {
os.pageWindow(notePage(appearNote.value)); os.pageWindow(notePage(appearNote.value));
@ -420,7 +420,7 @@ function onContextmenu(ev: MouseEvent): void {
}, },
notePage(appearNote.value) != location.pathname notePage(appearNote.value) != location.pathname
? { ? {
icon: "ph-arrows-out-simple ph-bold ph-lg", icon: `${icon("ph-arrows-out-simple")}`,
text: i18n.ts.showInPage, text: i18n.ts.showInPage,
action: () => { action: () => {
router.push( router.push(
@ -433,13 +433,13 @@ function onContextmenu(ev: MouseEvent): void {
null, null,
{ {
type: "a", type: "a",
icon: "ph-arrow-square-out ph-bold ph-lg", icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.openInNewTab, text: i18n.ts.openInNewTab,
href: notePage(appearNote.value), href: notePage(appearNote.value),
target: "_blank", target: "_blank",
}, },
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: `${icon("ph-link-simple")}`,
text: i18n.ts.copyLink, text: i18n.ts.copyLink,
action: () => { action: () => {
copyToClipboard(`${url}${notePage(appearNote.value)}`); copyToClipboard(`${url}${notePage(appearNote.value)}`);
@ -448,7 +448,7 @@ function onContextmenu(ev: MouseEvent): void {
note.value.user.host != null note.value.user.host != null
? { ? {
type: "a", type: "a",
icon: "ph-arrow-square-up-right ph-bold ph-lg", icon: `${icon("ph-arrow-square-up-right")}`,
text: i18n.ts.showOnRemote, text: i18n.ts.showOnRemote,
href: note.value.url ?? note.value.uri ?? "", href: note.value.url ?? note.value.uri ?? "",
target: "_blank", target: "_blank",

31
packages/client/src/components/MkNotification.vue
View File

@ -25,43 +25,43 @@
<div class="sub-icon" :class="notification.type"> <div class="sub-icon" :class="notification.type">
<i <i
v-if="notification.type === 'follow'" v-if="notification.type === 'follow'"
class="ph-hand-waving ph-bold" :class="icon('ph-hand-waving', false)"
></i> ></i>
<i <i
v-else-if="notification.type === 'receiveFollowRequest'" v-else-if="notification.type === 'receiveFollowRequest'"
class="ph-clock ph-bold" :class="icon('ph-clock', false)"
></i> ></i>
<i <i
v-else-if="notification.type === 'followRequestAccepted'" v-else-if="notification.type === 'followRequestAccepted'"
class="ph-check ph-bold" :class="icon('ph-check', false)"
></i> ></i>
<i <i
v-else-if="notification.type === 'groupInvited'" v-else-if="notification.type === 'groupInvited'"
class="ph-identification-card ph-bold" :class="icon('ph-identification-card', false)"
></i> ></i>
<i <i
v-else-if="notification.type === 'renote'" v-else-if="notification.type === 'renote'"
class="ph-rocket-launch ph-bold" :class="icon('ph-rocket-launch', false)"
></i> ></i>
<i <i
v-else-if="notification.type === 'reply'" v-else-if="notification.type === 'reply'"
class="ph-arrow-bend-up-left ph-bold" :class="icon('ph-arrow-bend-up-left', false)"
></i> ></i>
<i <i
v-else-if="notification.type === 'mention'" v-else-if="notification.type === 'mention'"
class="ph-at ph-bold" :class="icon('ph-at', false)"
></i> ></i>
<i <i
v-else-if="notification.type === 'quote'" v-else-if="notification.type === 'quote'"
class="ph-quotes ph-bold" :class="icon('ph-quotes', false)"
></i> ></i>
<i <i
v-else-if="notification.type === 'pollVote'" v-else-if="notification.type === 'pollVote'"
class="ph-microphone-stage ph-bold" :class="icon('ph-microphone-stage', false)"
></i> ></i>
<i <i
v-else-if="notification.type === 'pollEnded'" v-else-if="notification.type === 'pollEnded'"
class="ph-microphone-stage ph-bold" :class="icon('ph-microphone-stage', false)"
></i> ></i>
<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 --> <!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
<XReactionIcon <XReactionIcon
@ -122,7 +122,7 @@
:nowrap="!full" :nowrap="!full"
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
<i class="ph-quotes ph-fill ph-lg"></i> <i class="ph-quotes ph-fill"></i>
</MkA> </MkA>
<MkA <MkA
v-if="notification.type === 'renote'" v-if="notification.type === 'renote'"
@ -138,7 +138,7 @@
:nowrap="!full" :nowrap="!full"
:custom-emojis="notification.note.renote.emojis" :custom-emojis="notification.note.renote.emojis"
/> />
<i class="ph-quotes ph-fill ph-lg"></i> <i class="ph-quotes ph-fill"></i>
</MkA> </MkA>
<MkA <MkA
v-if="notification.type === 'reply'" v-if="notification.type === 'reply'"
@ -193,7 +193,7 @@
:nowrap="!full" :nowrap="!full"
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
<i class="ph-quotes ph-fill ph-lg"></i> <i class="ph-quotes ph-fill"></i>
</MkA> </MkA>
<MkA <MkA
v-if="notification.type === 'pollEnded'" v-if="notification.type === 'pollEnded'"
@ -201,14 +201,14 @@
:to="notePage(notification.note)" :to="notePage(notification.note)"
:title="getNoteSummary(notification.note)" :title="getNoteSummary(notification.note)"
> >
<i class="ph-quotes ph-fill ph-lg"></i> <i class="ph-quotes ph-fill"></i>
<Mfm <Mfm
:text="getNoteSummary(notification.note)" :text="getNoteSummary(notification.note)"
:plain="true" :plain="true"
:nowrap="!full" :nowrap="!full"
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
<i class="ph-quotes ph-fill ph-lg"></i> <i class="ph-quotes ph-fill"></i>
</MkA> </MkA>
<span <span
v-if="notification.type === 'follow'" v-if="notification.type === 'follow'"
@ -287,6 +287,7 @@ import { stream } from "@/stream";
import { useTooltip } from "@/scripts/use-tooltip"; import { useTooltip } from "@/scripts/use-tooltip";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { instance } from "@/instance"; import { instance } from "@/instance";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

3
packages/client/src/components/MkNotificationToast.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-notification-toast" :style="{ zIndex }"> <div class="mk-notification-toast" :style="{ zIndex }">
<transition <transition
:name="$store.state.animation ? 'notification-toast' : ''" :name="defaultStore.state.animation ? 'notification-toast' : ''"
appear appear
@after-leave="$emit('closed')" @after-leave="$emit('closed')"
> >
@ -18,6 +18,7 @@
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import XNotification from "@/components/MkNotification.vue"; import XNotification from "@/components/MkNotification.vue";
import * as os from "@/os"; import * as os from "@/os";
import { defaultStore } from "@/store";
defineProps<{ defineProps<{
notification: any; // TODO notification: any; // TODO

13
packages/client/src/components/MkPageWindow.vue
View File

@ -42,6 +42,7 @@ import { Router } from "@/nirax";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import type { PageMetadata } from "@/scripts/page-metadata"; import type { PageMetadata } from "@/scripts/page-metadata";
import { provideMetadataReceiver } from "@/scripts/page-metadata"; import { provideMetadataReceiver } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
initialPath: string; initialPath: string;
@ -66,7 +67,7 @@ const buttonsLeft = computed(() => {
if (history.value.length > 1) { if (history.value.length > 1) {
buttons.push({ buttons.push({
icon: "ph-caret-left ph-bold ph-lg", icon: `${icon("ph-caret-left")}`,
onClick: back, onClick: back,
}); });
} }
@ -76,7 +77,7 @@ const buttonsLeft = computed(() => {
const buttonsRight = computed(() => { const buttonsRight = computed(() => {
const buttons = [ const buttons = [
{ {
icon: "ph-arrows-out-simple ph-bold ph-lg", icon: `${icon("ph-arrows-out-simple")}`,
title: i18n.ts.showInPage, title: i18n.ts.showInPage,
onClick: expand, onClick: expand,
}, },
@ -99,17 +100,17 @@ provide("shouldHeaderThin", true);
const contextmenu = computed(() => [ const contextmenu = computed(() => [
{ {
icon: "ph-arrows-out-simple ph-bold ph-lg", icon: `${icon("ph-arrows-out-simple")}`,
text: i18n.ts.showInPage, text: i18n.ts.showInPage,
action: expand, action: expand,
}, },
{ {
icon: "ph-arrow-square-out ph-bold ph-lg", icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.popout, text: i18n.ts.popout,
action: popout, action: popout,
}, },
{ {
icon: "ph-arrow-square-out ph-bold ph-lg", icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.openInNewTab, text: i18n.ts.openInNewTab,
action: () => { action: () => {
window.open(url + router.getCurrentPath(), "_blank"); window.open(url + router.getCurrentPath(), "_blank");
@ -117,7 +118,7 @@ const contextmenu = computed(() => [
}, },
}, },
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: `${icon("ph-link-simple")}`,
text: i18n.ts.copyLink, text: i18n.ts.copyLink,
action: () => { action: () => {
copyToClipboard(url + router.getCurrentPath()); copyToClipboard(url + router.getCurrentPath());

9
packages/client/src/components/MkPagination.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <transition
:name="defaultStore.state.animation ? 'fade' : ''"
mode="out-in"
>
<MkLoading v-if="fetching" /> <MkLoading v-if="fetching" />
<MkError v-else-if="error" @retry="init()" /> <MkError v-else-if="error" @retry="init()" />
@ -44,7 +47,8 @@
<MkButton <MkButton
v-if="!moreFetching" v-if="!moreFetching"
v-appear=" v-appear="
$store.state.enableInfiniteScroll && !disableAutoLoad defaultStore.state.enableInfiniteScroll &&
!disableAutoLoad
? fetchMore ? fetchMore
: null : null
" "
@ -75,6 +79,7 @@ import {
} from "@/scripts/scroll"; } from "@/scripts/scroll";
import MkButton from "@/components/MkButton.vue"; import MkButton from "@/components/MkButton.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
export interface Paging< export interface Paging<
E extends keyof firefish.Endpoints = keyof firefish.Endpoints, E extends keyof firefish.Endpoints = keyof firefish.Endpoints,

3
packages/client/src/components/MkPoll.vue
View File

@ -17,7 +17,7 @@
></div> ></div>
<span> <span>
<template v-if="choice.isVoted" <template v-if="choice.isVoted"
><i class="ph-check ph-bold ph-lg"></i ><i :class="icon('ph-check')"></i
></template> ></template>
<Mfm <Mfm
:text="choice.text" :text="choice.text"
@ -59,6 +59,7 @@ import { pleaseLogin } from "@/scripts/please-login";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { useInterval } from "@/scripts/use-interval"; import { useInterval } from "@/scripts/use-interval";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
note: firefish.entities.Note; note: firefish.entities.Note;

5
packages/client/src/components/MkPollEditor.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="zmdxowus"> <div class="zmdxowus">
<p v-if="choices.length < 2" class="caution"> <p v-if="choices.length < 2" class="caution">
<i class="ph-warning ph-bold ph-lg"></i <i :class="icon('ph-warning')"></i
>{{ i18n.ts._poll.noOnlyOneChoice }} >{{ i18n.ts._poll.noOnlyOneChoice }}
</p> </p>
<ul> <ul>
@ -19,7 +19,7 @@
:aria-label="i18n.t('remove')" :aria-label="i18n.t('remove')"
@click="remove(i)" @click="remove(i)"
> >
<i class="ph-x ph-bold ph-lg"></i> <i :class="icon('ph-x')"></i>
</button> </button>
</li> </li>
</ul> </ul>
@ -83,6 +83,7 @@ import MkButton from "./MkButton.vue";
import { formatDateTimeString } from "@/scripts/format-time-string"; import { formatDateTimeString } from "@/scripts/format-time-string";
import { addTime } from "@/scripts/time"; import { addTime } from "@/scripts/time";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
modelValue: { modelValue: {

51
packages/client/src/components/MkPostForm.vue
View File

@ -11,7 +11,7 @@
> >
<header> <header>
<button v-if="!fixed" class="cancel _button" @click="cancel"> <button v-if="!fixed" class="cancel _button" @click="cancel">
<i class="ph-x ph-bold ph-lg" :aria-label="i18n.t('close')"></i> <i :class="icon('ph-x')" :aria-label="i18n.t('close')"></i>
</button> </button>
<button <button
v-if="$props.editId == null" v-if="$props.editId == null"
@ -29,7 +29,7 @@
>{{ maxTextLength - textLength }}</span >{{ maxTextLength - textLength }}</span
> >
<span v-if="localOnly" class="local-only" <span v-if="localOnly" class="local-only"
><i class="ph-users ph-bold ph-lg"></i ><i :class="icon('ph-users')"></i
></span> ></span>
<button <button
ref="visibilityButton" ref="visibilityButton"
@ -39,16 +39,16 @@
@click="setVisibility" @click="setVisibility"
> >
<span v-if="visibility === 'public'" <span v-if="visibility === 'public'"
><i class="ph-planet ph-bold ph-lg"></i ><i :class="icon('ph-planet')"></i
></span> ></span>
<span v-if="visibility === 'home'" <span v-if="visibility === 'home'"
><i class="ph-house ph-bold ph-lg"></i ><i :class="icon('ph-house')"></i
></span> ></span>
<span v-if="visibility === 'followers'" <span v-if="visibility === 'followers'"
><i class="ph-lock ph-bold ph-lg"></i ><i :class="icon('ph-lock')"></i
></span> ></span>
<span v-if="visibility === 'specified'" <span v-if="visibility === 'specified'"
><i class="ph-envelope-simple-open ph-bold ph-lg"></i ><i :class="icon('ph-envelope-simple-open')"></i
></span> ></span>
</button> </button>
<button <button
@ -57,7 +57,7 @@
:class="{ active: showPreview }" :class="{ active: showPreview }"
@click="showPreview = !showPreview" @click="showPreview = !showPreview"
> >
<i class="ph-binoculars ph-bold ph-lg"></i> <i :class="icon('ph-binoculars')"></i>
</button> </button>
<button <button
class="submit _buttonGradate" class="submit _buttonGradate"
@ -68,11 +68,13 @@
{{ submitText {{ submitText
}}<i }}<i
:class=" :class="
reply icon(
? 'ph-arrow-u-up-left ph-bold ph-lg' reply
: renote ? 'ph-arrow-u-up-left'
? 'ph-quotes ph-bold ph-lg' : renote
: 'ph-paper-plane-tilt ph-bold ph-lg' ? 'ph-quotes'
: 'ph-paper-plane-tilt',
)
" "
></i> ></i>
</button> </button>
@ -82,14 +84,14 @@
<XNoteSimple v-if="reply" class="preview" :note="reply" /> <XNoteSimple v-if="reply" class="preview" :note="reply" />
<XNoteSimple v-if="renote" class="preview" :note="renote" /> <XNoteSimple v-if="renote" class="preview" :note="renote" />
<div v-if="quoteId" class="with-quote"> <div v-if="quoteId" class="with-quote">
<i class="ph-quotes ph-bold ph-lg"></i> <i :class="icon('ph-quotes')"></i>
{{ i18n.ts.quoteAttached {{ i18n.ts.quoteAttached
}}<button }}<button
class="_button" class="_button"
:aria-label="i18n.t('removeQuote')" :aria-label="i18n.t('removeQuote')"
@click="quoteId = null" @click="quoteId = null"
> >
<i class="ph-x ph-bold ph-lg"></i> <i :class="icon('ph-x')"></i>
</button> </button>
</div> </div>
<div v-if="visibility === 'specified'" class="to-specified"> <div v-if="visibility === 'specified'" class="to-specified">
@ -102,11 +104,11 @@
:aria-label="i18n.t('removeRecipient')" :aria-label="i18n.t('removeRecipient')"
@click="removeVisibleUser(u)" @click="removeVisibleUser(u)"
> >
<i class="ph-x ph-bold ph-lg"></i> <i :class="icon('ph-x')"></i>
</button> </button>
</span> </span>
<button class="_button" @click="addVisibleUser"> <button class="_button" @click="addVisibleUser">
<i class="ph-plus ph-bold ph-md ph-fw ph-lg"></i> <i :class="icon('ph-plus ph-md ph-fw')"></i>
</button> </button>
</div> </div>
</div> </div>
@ -164,7 +166,7 @@
class="_button" class="_button"
@click="chooseFileFrom" @click="chooseFileFrom"
> >
<i class="ph-upload ph-bold ph-lg"></i> <i :class="icon('ph-upload')"></i>
</button> </button>
<button <button
v-tooltip="i18n.ts.poll" v-tooltip="i18n.ts.poll"
@ -172,7 +174,7 @@
:class="{ active: poll }" :class="{ active: poll }"
@click="togglePoll" @click="togglePoll"
> >
<i class="ph-microphone-stage ph-bold ph-lg"></i> <i :class="icon('ph-microphone-stage')"></i>
</button> </button>
<button <button
v-tooltip="i18n.ts.useCw" v-tooltip="i18n.ts.useCw"
@ -180,14 +182,14 @@
:class="{ active: useCw }" :class="{ active: useCw }"
@click="useCw = !useCw" @click="useCw = !useCw"
> >
<i class="ph-eye-slash ph-bold ph-lg"></i> <i :class="icon('ph-eye-slash')"></i>
</button> </button>
<button <button
v-tooltip="i18n.ts.mention" v-tooltip="i18n.ts.mention"
class="_button" class="_button"
@click="insertMention" @click="insertMention"
> >
<i class="ph-at ph-bold ph-lg"></i> <i :class="icon('ph-at')"></i>
</button> </button>
<button <button
v-tooltip="i18n.ts.hashtags" v-tooltip="i18n.ts.hashtags"
@ -195,14 +197,14 @@
:class="{ active: withHashtags }" :class="{ active: withHashtags }"
@click="withHashtags = !withHashtags" @click="withHashtags = !withHashtags"
> >
<i class="ph-hash ph-bold ph-lg"></i> <i :class="icon('ph-hash')"></i>
</button> </button>
<button <button
v-tooltip="i18n.ts.emoji" v-tooltip="i18n.ts.emoji"
class="_button" class="_button"
@click="insertEmoji" @click="insertEmoji"
> >
<i class="ph-smiley ph-bold ph-lg"></i> <i :class="icon('ph-smiley')"></i>
</button> </button>
<button <button
v-if="postFormActions.length > 0" v-if="postFormActions.length > 0"
@ -210,7 +212,7 @@
class="_button" class="_button"
@click="showActions" @click="showActions"
> >
<i class="ph-plug ph-bold ph-lg"></i> <i :class="icon('ph-plug')"></i>
</button> </button>
<!-- v-if="showMfmCheatsheet" --> <!-- v-if="showMfmCheatsheet" -->
<button <button
@ -218,7 +220,7 @@
class="_button right" class="_button right"
@click="openCheatSheet" @click="openCheatSheet"
> >
<i class="ph-question ph-bold ph-lg"></i> <i :class="icon('ph-question')"></i>
</button> </button>
</footer> </footer>
<datalist id="hashtags"> <datalist id="hashtags">
@ -276,6 +278,7 @@ import { deepClone } from "@/scripts/clone";
import XCheatSheet from "@/components/MkCheatSheetDialog.vue"; import XCheatSheet from "@/components/MkCheatSheetDialog.vue";
import preprocess from "@/scripts/preprocess"; import preprocess from "@/scripts/preprocess";
import { vibrate } from "@/scripts/vibrate"; import { vibrate } from "@/scripts/vibrate";
import icon from "@/scripts/icon";
const modal = inject("modal"); const modal = inject("modal");

16
packages/client/src/components/MkPostFormAttaches.vue
View File

@ -21,7 +21,7 @@
fit="cover" fit="cover"
/> />
<div v-if="element.isSensitive" class="sensitive"> <div v-if="element.isSensitive" class="sensitive">
<i class="ph-warning ph-bold ph-lg icon"></i> <i :class="icon('ph-warning icon')"></i>
</div> </div>
</div> </div>
</VueDraggable> </VueDraggable>
@ -30,11 +30,13 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, defineAsyncComponent, ref } from "vue"; import { computed, defineAsyncComponent } from "vue";
import { VueDraggable } from "vue-draggable-plus"; import { VueDraggable } from "vue-draggable-plus";
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue"; import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const props = defineProps({ const props = defineProps({
files: { files: {
@ -124,7 +126,7 @@ function showFileMenu(file, ev: MouseEvent) {
[ [
{ {
text: i18n.ts.renameFile, text: i18n.ts.renameFile,
icon: "ph-cursor-text ph-bold ph-lg", icon: `${icon("ph-cursor-text")}`,
action: () => { action: () => {
rename(file); rename(file);
}, },
@ -133,23 +135,21 @@ function showFileMenu(file, ev: MouseEvent) {
text: file.isSensitive text: file.isSensitive
? i18n.ts.unmarkAsSensitive ? i18n.ts.unmarkAsSensitive
: i18n.ts.markAsSensitive, : i18n.ts.markAsSensitive,
icon: file.isSensitive icon: file.isSensitive ? "ph-eye ph-lg" : "ph-eye-slash ph-lg",
? "ph-eye ph-bold ph-lg"
: "ph-eye-slash ph-bold ph-lg",
action: () => { action: () => {
toggleSensitive(file); toggleSensitive(file);
}, },
}, },
{ {
text: i18n.ts.describeFile, text: i18n.ts.describeFile,
icon: "ph-subtitles ph-bold ph-lg", icon: `${icon("ph-subtitles")}`,
action: () => { action: () => {
describe(file); describe(file);
}, },
}, },
{ {
text: i18n.ts.attachCancel, text: i18n.ts.attachCancel,
icon: "ph-x ph-bold ph-lg", icon: `${icon("ph-x")}`,
action: () => { action: () => {
detachMedia(file.id); detachMedia(file.id);
}, },

6
packages/client/src/components/MkQuoteButton.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<button <button
v-if="canRenote && $store.state.seperateRenoteQuote" v-if="canRenote && defaultStore.state.seperateRenoteQuote"
v-tooltip.noDelay.bottom="i18n.ts.quote" v-tooltip.noDelay.bottom="i18n.ts.quote"
class="eddddedb _button" class="eddddedb _button"
@click.stop="quote()" @click.stop="quote()"
> >
<i class="ph-quotes ph-bold ph-lg"></i> <i :class="icon('ph-quotes')"></i>
</button> </button>
</template> </template>
@ -16,6 +16,8 @@ import { pleaseLogin } from "@/scripts/please-login";
import * as os from "@/os"; import * as os from "@/os";
import { $i } from "@/account"; import { $i } from "@/account";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
note: Note; note: Note;

19
packages/client/src/components/MkRenoteButton.vue
View File

@ -7,7 +7,7 @@
:class="{ renoted: hasRenotedBefore }" :class="{ renoted: hasRenotedBefore }"
@click.stop="renote(false, $event)" @click.stop="renote(false, $event)"
> >
<i class="ph-rocket-launch ph-bold ph-lg"></i> <i :class="icon('ph-rocket-launch')"></i>
<p v-if="count > 0 && !detailedView" class="count">{{ count }}</p> <p v-if="count > 0 && !detailedView" class="count">{{ count }}</p>
</button> </button>
<button <button
@ -16,7 +16,7 @@
class="_button" class="_button"
disabled="true" disabled="true"
> >
<i class="ph-rocket-launch ph-bold ph-lg"></i> <i :class="icon('ph-rocket-launch')"></i>
</button> </button>
</template> </template>
@ -33,6 +33,7 @@ import { i18n } from "@/i18n";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import type { MenuItem } from "@/types/menu"; import type { MenuItem } from "@/types/menu";
import { vibrate } from "@/scripts/vibrate"; import { vibrate } from "@/scripts/vibrate";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
note: firefish.entities.Note; note: firefish.entities.Note;
@ -88,7 +89,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
if (props.note.visibility === "public") { if (props.note.visibility === "public") {
buttonActions.push({ buttonActions.push({
text: i18n.ts.renote, text: i18n.ts.renote,
icon: "ph-rocket-launch ph-bold ph-lg", icon: `${icon("ph-rocket-launch")}`,
danger: false, danger: false,
action: () => { action: () => {
os.api("notes/create", { os.api("notes/create", {
@ -115,7 +116,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
if (["public", "home"].includes(props.note.visibility)) { if (["public", "home"].includes(props.note.visibility)) {
buttonActions.push({ buttonActions.push({
text: `${i18n.ts.renote} (${i18n.ts._visibility.home})`, text: `${i18n.ts.renote} (${i18n.ts._visibility.home})`,
icon: "ph-house ph-bold ph-lg", icon: `${icon("ph-house")}`,
danger: false, danger: false,
action: () => { action: () => {
os.api("notes/create", { os.api("notes/create", {
@ -142,7 +143,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
if (props.note.visibility === "specified") { if (props.note.visibility === "specified") {
buttonActions.push({ buttonActions.push({
text: `${i18n.ts.renote} (${i18n.ts.recipient})`, text: `${i18n.ts.renote} (${i18n.ts.recipient})`,
icon: "ph-envelope-simple-open ph-bold ph-lg", icon: `${icon("ph-envelope-simple-open")}`,
danger: false, danger: false,
action: () => { action: () => {
os.api("notes/create", { os.api("notes/create", {
@ -168,7 +169,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
} else { } else {
buttonActions.push({ buttonActions.push({
text: `${i18n.ts.renote} (${i18n.ts._visibility.followers})`, text: `${i18n.ts.renote} (${i18n.ts._visibility.followers})`,
icon: "ph-lock ph-bold ph-lg", icon: `${icon("ph-lock")}`,
danger: false, danger: false,
action: () => { action: () => {
os.api("notes/create", { os.api("notes/create", {
@ -195,7 +196,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
if (canRenote.value) { if (canRenote.value) {
buttonActions.push({ buttonActions.push({
text: `${i18n.ts.renote} (${i18n.ts.local})`, text: `${i18n.ts.renote} (${i18n.ts.local})`,
icon: "ph-users ph-bold ph-lg", icon: `${icon("ph-users")}`,
danger: false, danger: false,
action: () => { action: () => {
vibrate([30, 30, 60]); vibrate([30, 30, 60]);
@ -234,7 +235,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
if (!defaultStore.state.seperateRenoteQuote) { if (!defaultStore.state.seperateRenoteQuote) {
buttonActions.push({ buttonActions.push({
text: i18n.ts.quote, text: i18n.ts.quote,
icon: "ph-quotes ph-bold ph-lg", icon: `${icon("ph-quotes")}`,
danger: false, danger: false,
action: () => { action: () => {
os.post({ os.post({
@ -247,7 +248,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
if (hasRenotedBefore.value) { if (hasRenotedBefore.value) {
buttonActions.push({ buttonActions.push({
text: i18n.ts.unrenote, text: i18n.ts.unrenote,
icon: "ph-trash ph-bold ph-lg", icon: `${icon("ph-trash")}`,
danger: true, danger: true,
action: () => { action: () => {
os.api("notes/unrenote", { os.api("notes/unrenote", {

7
packages/client/src/components/MkSignin.vue
View File

@ -44,7 +44,7 @@
data-cy-signin-password data-cy-signin-password
> >
<template #prefix <template #prefix
><i class="ph-lock ph-bold ph-lg"></i ><i :class="icon('ph-lock')"></i
></template> ></template>
<template #caption <template #caption
><button ><button
@ -96,7 +96,7 @@
> >
<template #label>{{ i18n.ts.password }}</template> <template #label>{{ i18n.ts.password }}</template>
<template #prefix <template #prefix
><i class="ph-lock ph-bold ph-lg"></i ><i :class="icon('ph-lock')"></i
></template> ></template>
</MkInput> </MkInput>
<MkInput <MkInput
@ -109,7 +109,7 @@
> >
<template #label>{{ i18n.ts._2fa.token }}</template> <template #label>{{ i18n.ts._2fa.token }}</template>
<template #prefix <template #prefix
><i class="ph-poker-chip ph-bold ph-lg"></i ><i :class="icon('ph-poker-chip')"></i
></template> ></template>
</MkInput> </MkInput>
<MkButton <MkButton
@ -138,6 +138,7 @@ import { byteify, hexify } from "@/scripts/2fa";
import * as os from "@/os"; import * as os from "@/os";
import { login } from "@/account"; import { login } from "@/account";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const signing = ref(false); const signing = ref(false);
const user = ref(null); const user = ref(null);

63
packages/client/src/components/MkSignup.vue
View File

@ -23,7 +23,7 @@
@update:modelValue="onChangeInvitationCode" @update:modelValue="onChangeInvitationCode"
> >
<template #label>{{ i18n.ts.invitationCode }}</template> <template #label>{{ i18n.ts.invitationCode }}</template>
<template #prefix><i class="ph-key ph-bold ph-lg"></i></template> <template #prefix><i :class="icon('ph-key')"></i></template>
</MkInput> </MkInput>
<div <div
v-if=" v-if="
@ -47,51 +47,49 @@
v-tooltip:dialog="i18n.ts.usernameInfo" v-tooltip:dialog="i18n.ts.usernameInfo"
class="_button _help" class="_button _help"
> >
<i class="ph-question ph-bold"></i></div <i :class="icon('ph-question', false)"></i></div
></template> ></template>
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template> <template #suffix>@{{ host }}</template>
<template #caption> <template #caption>
<span v-if="usernameState === 'wait'" style="color: #6e6a86" <span v-if="usernameState === 'wait'" style="color: #6e6a86"
><i ><i :class="icon('ph-circle-notch fa-pulse ph-fw')"></i>
class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
></i>
{{ i18n.ts.checking }}</span {{ i18n.ts.checking }}</span
> >
<span <span
v-else-if="usernameState === 'ok'" v-else-if="usernameState === 'ok'"
style="color: var(--success)" style="color: var(--success)"
><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-check ph-fw')"></i>
{{ i18n.ts.available }}</span {{ i18n.ts.available }}</span
> >
<span <span
v-else-if="usernameState === 'unavailable'" v-else-if="usernameState === 'unavailable'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts.unavailable }}</span {{ i18n.ts.unavailable }}</span
> >
<span <span
v-else-if="usernameState === 'error'" v-else-if="usernameState === 'error'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts.error }}</span {{ i18n.ts.error }}</span
> >
<span <span
v-else-if="usernameState === 'invalid-format'" v-else-if="usernameState === 'invalid-format'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts.usernameInvalidFormat }}</span {{ i18n.ts.usernameInvalidFormat }}</span
> >
<span <span
v-else-if="usernameState === 'min-range'" v-else-if="usernameState === 'min-range'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts.tooShort }}</span {{ i18n.ts.tooShort }}</span
> >
<span <span
v-else-if="usernameState === 'max-range'" v-else-if="usernameState === 'max-range'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts.tooLong }}</span {{ i18n.ts.tooLong }}</span
> >
</template> </template>
@ -113,64 +111,62 @@
v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" v-tooltip:dialog="i18n.ts._signup.emailAddressInfo"
class="_button _help" class="_button _help"
> >
<i class="ph-question ph-bold"></i></div <i :class="icon('ph-question', false)"></i></div
></template> ></template>
<template #prefix <template #prefix
><i class="ph-envelope-simple-open ph-bold ph-lg"></i ><i :class="icon('ph-envelope-simple-open')"></i
></template> ></template>
<template #caption> <template #caption>
<span v-if="emailState === 'wait'" style="color: #6e6a86" <span v-if="emailState === 'wait'" style="color: #6e6a86"
><i ><i :class="icon('ph-circle-notch fa-pulse ph-fw')"></i>
class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
></i>
{{ i18n.ts.checking }}</span {{ i18n.ts.checking }}</span
> >
<span <span
v-else-if="emailState === 'ok'" v-else-if="emailState === 'ok'"
style="color: var(--success)" style="color: var(--success)"
><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-check ph-fw')"></i>
{{ i18n.ts.available }}</span {{ i18n.ts.available }}</span
> >
<span <span
v-else-if="emailState === 'unavailable:used'" v-else-if="emailState === 'unavailable:used'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts._emailUnavailable.used }}</span {{ i18n.ts._emailUnavailable.used }}</span
> >
<span <span
v-else-if="emailState === 'unavailable:format'" v-else-if="emailState === 'unavailable:format'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts._emailUnavailable.format }}</span {{ i18n.ts._emailUnavailable.format }}</span
> >
<span <span
v-else-if="emailState === 'unavailable:disposable'" v-else-if="emailState === 'unavailable:disposable'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts._emailUnavailable.disposable }}</span {{ i18n.ts._emailUnavailable.disposable }}</span
> >
<span <span
v-else-if="emailState === 'unavailable:mx'" v-else-if="emailState === 'unavailable:mx'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts._emailUnavailable.mx }}</span {{ i18n.ts._emailUnavailable.mx }}</span
> >
<span <span
v-else-if="emailState === 'unavailable:smtp'" v-else-if="emailState === 'unavailable:smtp'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts._emailUnavailable.smtp }}</span {{ i18n.ts._emailUnavailable.smtp }}</span
> >
<span <span
v-else-if="emailState === 'unavailable'" v-else-if="emailState === 'unavailable'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts.unavailable }}</span {{ i18n.ts.unavailable }}</span
> >
<span <span
v-else-if="emailState === 'error'" v-else-if="emailState === 'error'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts.error }}</span {{ i18n.ts.error }}</span
> >
</template> </template>
@ -185,26 +181,24 @@
@update:modelValue="onChangePassword" @update:modelValue="onChangePassword"
> >
<template #label>{{ i18n.ts.password }}</template> <template #label>{{ i18n.ts.password }}</template>
<template #prefix <template #prefix><i :class="icon('ph-lock')"></i></template>
><i class="ph-lock ph-bold ph-lg"></i
></template>
<template #caption> <template #caption>
<span <span
v-if="passwordStrength == 'low'" v-if="passwordStrength == 'low'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts.weakPassword }}</span {{ i18n.ts.weakPassword }}</span
> >
<span <span
v-if="passwordStrength == 'medium'" v-if="passwordStrength == 'medium'"
style="color: var(--warn)" style="color: var(--warn)"
><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-check ph-fw')"></i>
{{ i18n.ts.normalPassword }}</span {{ i18n.ts.normalPassword }}</span
> >
<span <span
v-if="passwordStrength == 'high'" v-if="passwordStrength == 'high'"
style="color: var(--success)" style="color: var(--success)"
><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-check ph-fw')"></i>
{{ i18n.ts.strongPassword }}</span {{ i18n.ts.strongPassword }}</span
> >
</template> </template>
@ -221,20 +215,18 @@
<template #label <template #label
>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template >{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template
> >
<template #prefix <template #prefix><i :class="icon('ph-lock')"></i></template>
><i class="ph-lock ph-bold ph-lg"></i
></template>
<template #caption> <template #caption>
<span <span
v-if="passwordRetypeState == 'match'" v-if="passwordRetypeState == 'match'"
style="color: var(--success)" style="color: var(--success)"
><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-check ph-fw')"></i>
{{ i18n.ts.passwordMatched }}</span {{ i18n.ts.passwordMatched }}</span
> >
<span <span
v-if="passwordRetypeState == 'not-match'" v-if="passwordRetypeState == 'not-match'"
style="color: var(--error)" style="color: var(--error)"
><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> ><i :class="icon('ph-warning ph-fw')"></i>
{{ i18n.ts.passwordNotMatched }}</span {{ i18n.ts.passwordNotMatched }}</span
> >
</template> </template>
@ -297,6 +289,7 @@ import * as os from "@/os";
import { login } from "@/account"; import { login } from "@/account";
import { instance } from "@/instance"; import { instance } from "@/instance";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

7
packages/client/src/components/MkStarButton.vue
View File

@ -31,13 +31,13 @@
</svg> </svg>
<i <i
v-else-if="instance.defaultReaction === '👍'" v-else-if="instance.defaultReaction === '👍'"
class="ph-thumbs-up ph-bold ph-lg" :class="icon('ph-thumbs-up')"
></i> ></i>
<i <i
v-else-if="instance.defaultReaction === '❤️'" v-else-if="instance.defaultReaction === '❤️'"
class="ph-heart ph-bold ph-lg" :class="icon('ph-heart')"
></i> ></i>
<i v-else class="ph-star ph-bold ph-lg"></i> <i v-else :class="icon('ph-star')"></i>
</button> </button>
</template> </template>
@ -49,6 +49,7 @@ import * as os from "@/os";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { instance } from "@/instance"; import { instance } from "@/instance";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
note: Note; note: Note;

17
packages/client/src/components/MkStarButtonNoEmoji.vue
View File

@ -10,30 +10,26 @@
<span v-if="!reacted"> <span v-if="!reacted">
<i <i
v-if="instance.defaultReaction === '👍'" v-if="instance.defaultReaction === '👍'"
class="ph-thumbs-up ph-bold ph-lg" :class="icon('ph-thumbs-up')"
></i> ></i>
<i <i
v-else-if="instance.defaultReaction === '❤️'" v-else-if="instance.defaultReaction === '❤️'"
class="ph-heart ph-bold ph-lg" :class="icon('ph-heart')"
></i> ></i>
<i v-else class="ph-star ph-bold ph-lg"></i> <i v-else :class="icon('ph-star')"></i>
</span> </span>
<span v-else> <span v-else>
<i <i
v-if="instance.defaultReaction === '👍'" v-if="instance.defaultReaction === '👍'"
class="ph-thumbs-up ph-bold ph-lg ph-fill" class="ph-thumbs-up ph-lg ph-fill"
:class="$style.yellow" :class="$style.yellow"
></i> ></i>
<i <i
v-else-if="instance.defaultReaction === '❤️'" v-else-if="instance.defaultReaction === '❤️'"
class="ph-heart ph-bold ph-lg ph-fill" class="ph-heart ph-lg ph-fill"
:class="$style.red" :class="$style.red"
></i> ></i>
<i <i v-else class="ph-star ph-lg ph-fill" :class="$style.yellow"></i>
v-else
class="ph-star ph-bold ph-lg ph-fill"
:class="$style.yellow"
></i>
</span> </span>
<template v-if="count > 0" <template v-if="count > 0"
><p class="count">{{ count }}</p></template ><p class="count">{{ count }}</p></template
@ -51,6 +47,7 @@ import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { instance } from "@/instance"; import { instance } from "@/instance";
import { useTooltip } from "@/scripts/use-tooltip"; import { useTooltip } from "@/scripts/use-tooltip";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
note: Note; note: Note;

15
packages/client/src/components/MkSubNoteContent.vue
View File

@ -9,7 +9,7 @@
class="reply-icon" class="reply-icon"
@click.stop @click.stop
> >
<i class="ph-quotes ph-bold ph-lg"></i> <i :class="icon('ph-quotes')"></i>
</MkA> </MkA>
<MkA <MkA
v-else-if="!detailed && note.replyId" v-else-if="!detailed && note.replyId"
@ -23,7 +23,7 @@
class="reply-icon" class="reply-icon"
@click.stop @click.stop
> >
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i> <i :class="icon('ph-arrow-bend-left-up')"></i>
</MkA> </MkA>
<Mfm <Mfm
v-if="note.cw != ''" v-if="note.cw != ''"
@ -81,7 +81,7 @@
class="reply-icon" class="reply-icon"
@click.stop @click.stop
> >
<i class="ph-quotes ph-bold ph-lg"></i> <i :class="icon('ph-quotes')"></i>
</MkA> </MkA>
<MkA <MkA
v-else-if="!detailed && note.replyId" v-else-if="!detailed && note.replyId"
@ -95,7 +95,7 @@
class="reply-icon" class="reply-icon"
@click.stop @click.stop
> >
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i> <i :class="icon('ph-arrow-bend-left-up')"></i>
</MkA> </MkA>
</template> </template>
<Mfm <Mfm
@ -162,10 +162,12 @@
@click.stop="toggleMfm" @click.stop="toggleMfm"
> >
<template v-if="disableMfm"> <template v-if="disableMfm">
<i class="ph-play ph-bold"></i> {{ i18n.ts._mfm.play }} <i :class="icon('ph-play', false)"></i>
{{ i18n.ts._mfm.play }}
</template> </template>
<template v-else> <template v-else>
<i class="ph-stop ph-bold"></i> {{ i18n.ts._mfm.stop }} <i :class="icon('ph-stop', false)"></i>
{{ i18n.ts._mfm.stop }}
</template> </template>
</MkButton> </MkButton>
<!-- <div <!-- <div
@ -192,6 +194,7 @@ import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
import { extractMfmWithAnimation } from "@/scripts/extract-mfm"; import { extractMfmWithAnimation } from "@/scripts/extract-mfm";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
note: firefish.entities.Note; note: firefish.entities.Note;

7
packages/client/src/components/MkTimeline.vue
View File

@ -12,16 +12,16 @@
<div v-if="queue > 0" class="new"> <div v-if="queue > 0" class="new">
<button <button
class="_buttonPrimary _shadow" class="_buttonPrimary _shadow"
:class="{ instant: !$store.state.animation }" :class="{ instant: !defaultStore.state.animation }"
@click="tlComponent.scrollTop()" @click="tlComponent.scrollTop()"
> >
{{ i18n.ts.newNoteRecived }} {{ i18n.ts.newNoteRecived }}
<i class="ph-arrow-up ph-bold"></i> <i :class="icon('ph-arrow-up', false)"></i>
</button> </button>
</div> </div>
<XNotes <XNotes
ref="tlComponent" ref="tlComponent"
:no-gap="!$store.state.showGapBetweenNotesInTimeline" :no-gap="!defaultStore.state.showGapBetweenNotesInTimeline"
:pagination="pagination" :pagination="pagination"
@queue="(x) => (queue = x)" @queue="(x) => (queue = x)"
/> />
@ -36,6 +36,7 @@ import * as sound from "@/scripts/sound";
import { $i } from "@/account"; import { $i } from "@/account";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
src: string; src: string;

3
packages/client/src/components/MkToast.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-toast"> <div class="mk-toast">
<transition <transition
:name="$store.state.animation ? 'toast' : ''" :name="defaultStore.state.animation ? 'toast' : ''"
appear appear
@after-leave="emit('closed')" @after-leave="emit('closed')"
> >
@ -20,6 +20,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import * as os from "@/os"; import * as os from "@/os";
import { defaultStore } from "@/store";
defineProps<{ defineProps<{
message: string; message: string;

3
packages/client/src/components/MkTooltip.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition <transition
:name="$store.state.animation ? 'tooltip' : ''" :name="defaultStore.state.animation ? 'tooltip' : ''"
appear appear
@after-leave="emit('closed')" @after-leave="emit('closed')"
> >
@ -22,6 +22,7 @@
import { nextTick, onMounted, onUnmounted, ref } from "vue"; import { nextTick, onMounted, onUnmounted, ref } from "vue";
import * as os from "@/os"; import * as os from "@/os";
import { calcPopupPosition } from "@/scripts/popup-position"; import { calcPopupPosition } from "@/scripts/popup-position";
import { defaultStore } from "@/store";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

31
packages/client/src/components/MkTutorialDialog.vue
View File

@ -17,7 +17,7 @@
:disabled="tutorial === 0" :disabled="tutorial === 0"
@click="tutorial--" @click="tutorial--"
> >
<i class="ph-caret-left ph-bold ph-lg"></i> <i :class="icon('ph-caret-left')"></i>
</button> </button>
<span>{{ tutorial + 1 }} / 6</span> <span>{{ tutorial + 1 }} / 6</span>
<button <button
@ -25,7 +25,7 @@
:disabled="tutorial === 5" :disabled="tutorial === 5"
@click="tutorial++" @click="tutorial++"
> >
<i class="ph-caret-right ph-bold ph-lg"></i> <i :class="icon('ph-caret-right')"></i>
</button> </button>
</div> </div>
<MkButton <MkButton
@ -33,18 +33,18 @@
class="ok" class="ok"
primary primary
@click="close" @click="close"
><i class="ph-check ph-bold ph-lg"></i> ><i :class="icon('ph-check')"></i>
{{ i18n.ts.gotIt }}</MkButton {{ i18n.ts.gotIt }}</MkButton
> >
<MkButton v-else class="ok" primary @click="tutorial++" <MkButton v-else class="ok" primary @click="tutorial++"
><i class="ph-check ph-bold ph-lg"></i> ><i :class="icon('ph-check')"></i>
{{ i18n.ts.next }}</MkButton {{ i18n.ts.next }}</MkButton
> >
</div> </div>
<Transition name="fade"> <Transition name="fade">
<section v-if="tutorial === 0" key="1" class="_content"> <section v-if="tutorial === 0" key="1" class="_content">
<h2 class="_title title"> <h2 class="_title title">
<i class="ph-info ph-bold ph-lg"></i> <i :class="icon('ph-info')"></i>
{{ i18n.ts._tutorial.title }} {{ i18n.ts._tutorial.title }}
</h2> </h2>
<h3>{{ i18n.ts._tutorial.step1_1 }}</h3> <h3>{{ i18n.ts._tutorial.step1_1 }}</h3>
@ -53,7 +53,7 @@
<!-- <FormSwitch v-model="autoplayMfm" class="_formBlock"> <!-- <FormSwitch v-model="autoplayMfm" class="_formBlock">
{{ i18n.ts._mfm.alwaysPlay }} {{ i18n.ts._mfm.alwaysPlay }}
<template #caption> <template #caption>
<i class="ph-warning ph-bold ph-lg" style="color: var(--warn)"></i> <i :class="icon('ph-warning')" style="color: var(--warn)"></i>
{{ i18n.ts._mfm.warn }} {{ i18n.ts._mfm.warn }}
</template> </template>
</FormSwitch> --> </FormSwitch> -->
@ -85,7 +85,7 @@
<XFeaturedUsers /> <XFeaturedUsers />
<br /> <br />
<MkButton class="ok" primary @click="tutorial++" <MkButton class="ok" primary @click="tutorial++"
><i class="ph-check ph-bold ph-lg"></i> ><i :class="icon('ph-check')"></i>
{{ i18n.ts.next }}</MkButton {{ i18n.ts.next }}</MkButton
> >
</section> </section>
@ -126,7 +126,7 @@
tag="div" tag="div"
> >
<template #icon> <template #icon>
<i class="ph-house ph-bold ph-lg" /> <i :class="icon('ph-house')" />
</template> </template>
</I18n> </I18n>
</li> </li>
@ -136,7 +136,7 @@
tag="div" tag="div"
> >
<template #icon> <template #icon>
<i class="ph-users ph-bold ph-lg" /> <i :class="icon('ph-users')" />
</template> </template>
</I18n> </I18n>
</li> </li>
@ -146,9 +146,7 @@
tag="div" tag="div"
> >
<template #icon> <template #icon>
<i <i :class="icon('ph-handshake')" />
class="ph-handshake ph-bold ph-lg"
/>
</template> </template>
</I18n> </I18n>
</li> </li>
@ -158,9 +156,7 @@
tag="div" tag="div"
> >
<template #icon> <template #icon>
<i <i :class="icon('ph-thumbs-up')" />
class="ph-thumbs-up ph-bold ph-lg"
/>
</template> </template>
</I18n> </I18n>
</li> </li>
@ -170,9 +166,7 @@
tag="div" tag="div"
> >
<template #icon> <template #icon>
<i <i :class="icon('ph-planet')" />
class="ph-planet ph-bold ph-lg"
/>
</template> </template>
</I18n> </I18n>
</li> </li>
@ -219,6 +213,7 @@ import { defaultStore } from "@/store";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { $i } from "@/account"; import { $i } from "@/account";
import { instance } from "@/instance"; import { instance } from "@/instance";
import icon from "@/scripts/icon";
const isLocalTimelineAvailable = const isLocalTimelineAvailable =
!instance.disableLocalTimeline || !instance.disableLocalTimeline ||

9
packages/client/src/components/MkUrlPreview.vue
View File

@ -28,9 +28,9 @@
> >
<i <i
v-if="!tweetExpanded" v-if="!tweetExpanded"
class="ph-twitter-logo ph-bold ph-lg" :class="iconClass('ph-twitter-logo')"
></i> ></i>
<i v-else class="ph-x ph-bold ph-lg"></i> <i v-else :class="iconClass('ph-x')"></i>
</button> </button>
<button <button
v-else-if="player.url" v-else-if="player.url"
@ -42,9 +42,9 @@
> >
<i <i
v-if="!playerEnabled" v-if="!playerEnabled"
class="ph-play ph-bold ph-lg" :class="iconClass('ph-play')"
></i> ></i>
<i v-else class="ph-x ph-bold ph-lg"></i> <i v-else :class="iconClass('ph-x')"></i>
</button> </button>
</div> </div>
<div v-if="fetching"> <div v-if="fetching">
@ -103,6 +103,7 @@ import { onUnmounted, ref } from "vue";
import { lang, url as local } from "@/config"; import { lang, url as local } from "@/config";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import iconClass from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{

3
packages/client/src/components/MkUrlPreviewPopup.vue
View File

@ -4,7 +4,7 @@
:style="{ zIndex, top: top + 'px', left: left + 'px' }" :style="{ zIndex, top: top + 'px', left: left + 'px' }"
> >
<transition <transition
:name="$store.state.animation ? 'zoom' : ''" :name="defaultStore.state.animation ? 'zoom' : ''"
@after-leave="emit('closed')" @after-leave="emit('closed')"
> >
<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url" /> <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url" />
@ -16,6 +16,7 @@
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import MkUrlPreview from "@/components/MkUrlPreview.vue"; import MkUrlPreview from "@/components/MkUrlPreview.vue";
import * as os from "@/os"; import * as os from "@/os";
import { defaultStore } from "@/store";
const props = defineProps<{ const props = defineProps<{
showing: boolean; showing: boolean;

3
packages/client/src/components/MkUserPreview.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition <transition
:name="$store.state.animation ? 'popup' : ''" :name="defaultStore.state.animation ? 'popup' : ''"
appear appear
@after-leave="emit('closed')" @after-leave="emit('closed')"
> >
@ -33,6 +33,7 @@ import * as Acct from "firefish-js/built/acct";
import type * as firefish from "firefish-js"; import type * as firefish from "firefish-js";
import MkUserInfo from "@/components/MkUserInfo.vue"; import MkUserInfo from "@/components/MkUserInfo.vue";
import * as os from "@/os"; import * as os from "@/os";
import { defaultStore } from "@/store";
const props = defineProps<{ const props = defineProps<{
showing: boolean; showing: boolean;

13
packages/client/src/components/MkVisibility.vue
View File

@ -3,34 +3,31 @@
<i <i
v-if="note.visibility === 'home'" v-if="note.visibility === 'home'"
v-tooltip="i18n.ts._visibility.home" v-tooltip="i18n.ts._visibility.home"
class="ph-house ph-bold ph-lg" :class="icon('ph-house')"
></i> ></i>
<i <i
v-else-if="note.visibility === 'followers'" v-else-if="note.visibility === 'followers'"
v-tooltip="i18n.ts._visibility.followers" v-tooltip="i18n.ts._visibility.followers"
class="ph-lock ph-bold ph-lg" :class="icon('ph-lock')"
></i> ></i>
<i <i
v-else-if="note.visibility === 'specified'" v-else-if="note.visibility === 'specified'"
ref="specified" ref="specified"
class="ph-envelope-simple-open ph-bold ph-lg" :class="icon('ph-envelope-simple-open')"
></i> ></i>
</span> </span>
<span v-if="note.localOnly" :class="$style.localOnly" <span v-if="note.localOnly" :class="$style.localOnly"
><i ><i v-tooltip="i18n.ts._visibility.localOnly" class="ph-users ph-lg"></i
v-tooltip="i18n.ts._visibility.localOnly"
class="ph-users ph-bold ph-lg"
></i
></span> ></span>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
import XDetails from "@/components/MkUsersTooltip.vue"; import XDetails from "@/components/MkUsersTooltip.vue";
import * as os from "@/os"; import * as os from "@/os";
import { useTooltip } from "@/scripts/use-tooltip"; import { useTooltip } from "@/scripts/use-tooltip";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
note: { note: {

20
packages/client/src/components/MkVisibilityPicker.vue
View File

@ -15,7 +15,7 @@
@click="choose('public')" @click="choose('public')"
> >
<div :class="$style.icon"> <div :class="$style.icon">
<i class="ph-planet ph-bold ph-lg"></i> <i :class="icon('ph-planet')"></i>
</div> </div>
<div :class="$style.body"> <div :class="$style.body">
<span :class="$style.itemTitle">{{ <span :class="$style.itemTitle">{{
@ -34,7 +34,7 @@
@click="choose('home')" @click="choose('home')"
> >
<div :class="$style.icon"> <div :class="$style.icon">
<i class="ph-house ph-bold ph-lg"></i> <i :class="icon('ph-house')"></i>
</div> </div>
<div :class="$style.body"> <div :class="$style.body">
<span :class="$style.itemTitle">{{ <span :class="$style.itemTitle">{{
@ -53,7 +53,7 @@
@click="choose('followers')" @click="choose('followers')"
> >
<div :class="$style.icon"> <div :class="$style.icon">
<i class="ph-lock ph-bold ph-lg"></i> <i :class="icon('ph-lock')"></i>
</div> </div>
<div :class="$style.body"> <div :class="$style.body">
<span :class="$style.itemTitle">{{ <span :class="$style.itemTitle">{{
@ -73,7 +73,7 @@
@click="choose('specified')" @click="choose('specified')"
> >
<div :class="$style.icon"> <div :class="$style.icon">
<i class="ph-envelope-simple-open ph-bold ph-lg"></i> <i :class="icon('ph-envelope-simple-open')"></i>
</div> </div>
<div :class="$style.body"> <div :class="$style.body">
<span :class="$style.itemTitle">{{ <span :class="$style.itemTitle">{{
@ -97,7 +97,7 @@
@click="localOnly = !localOnly" @click="localOnly = !localOnly"
> >
<div :class="$style.icon"> <div :class="$style.icon">
<i class="ph-users ph-bold ph-lg"></i> <i :class="icon('ph-users')"></i>
</div> </div>
<div :class="$style.body"> <div :class="$style.body">
<span :class="$style.itemTitle">{{ <span :class="$style.itemTitle">{{
@ -110,9 +110,11 @@
<div :class="$style.toggle"> <div :class="$style.toggle">
<i <i
:class=" :class="
localOnly icon(
? 'ph-toggle-right ph-bold ph-lg' localOnly
: 'ph-toggle-left ph-bold ph-lg' ? 'ph-toggle-right'
: 'ph-toggle-left',
)
" "
></i> ></i>
</div> </div>
@ -126,6 +128,8 @@ import { nextTick, ref, shallowRef, watch } from "vue";
import type * as firefish from "firefish-js"; import type * as firefish from "firefish-js";
import MkModal from "@/components/MkModal.vue"; import MkModal from "@/components/MkModal.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const modal = shallowRef<InstanceType<typeof MkModal>>(); const modal = shallowRef<InstanceType<typeof MkModal>>();

2
packages/client/src/components/MkWaitingDialog.vue
View File

@ -15,7 +15,7 @@
<i <i
v-if="success" v-if="success"
:class="[$style.icon, $style.success]" :class="[$style.icon, $style.success]"
class="ph-check ph-bold ph-lg" class="ph-check ph-lg"
></i> ></i>
<MkLoading <MkLoading
v-else v-else

9
packages/client/src/components/MkWidgets.vue
View File

@ -21,7 +21,7 @@
primary primary
class="mk-widget-add" class="mk-widget-add"
@click="addWidget" @click="addWidget"
><i class="ph-plus ph-bold ph-lg"></i> ><i :class="icon('ph-plus')"></i>
{{ i18n.ts.add }}</MkButton {{ i18n.ts.add }}</MkButton
> >
<MkButton inline @click="$emit('exit')">{{ <MkButton inline @click="$emit('exit')">{{
@ -35,14 +35,14 @@
class="config _button" class="config _button"
@click.prevent.stop="configWidget(element.id)" @click.prevent.stop="configWidget(element.id)"
> >
<i class="ph-gear-six ph-bold ph-lg"></i> <i :class="icon('ph-gear-six')"></i>
</button> </button>
<button <button
class="remove _button" class="remove _button"
:aria-label="i18n.t('close')" :aria-label="i18n.t('close')"
@click.prevent.stop="removeWidget(element)" @click.prevent.stop="removeWidget(element)"
> >
<i class="ph-x ph-bold ph-lg"></i> <i :class="icon('ph-x')"></i>
</button> </button>
<div class="handle"> <div class="handle">
<component <component
@ -80,6 +80,7 @@ import MkButton from "@/components/MkButton.vue";
import { widgets as widgetDefs } from "@/widgets"; import { widgets as widgetDefs } from "@/widgets";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
interface Widget { interface Widget {
name: string; name: string;
@ -153,7 +154,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
text: i18n.t(`_widgets.${widget.name}`), text: i18n.t(`_widgets.${widget.name}`),
}, },
{ {
icon: "ph-gear-six ph-bold ph-lg", icon: `${icon("ph-gear-six")}`,
text: i18n.ts.settings, text: i18n.ts.settings,
action: () => { action: () => {
configWidget(widget.id); configWidget(widget.id);

10
packages/client/src/components/MkWindow.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition <transition
:name="$store.state.animation ? 'window' : ''" :name="defaultStore.state.animation ? 'window' : ''"
appear appear
@after-leave="$emit('closed')" @after-leave="$emit('closed')"
> >
@ -54,21 +54,21 @@
class="button _button" class="button _button"
@click="unMaximize()" @click="unMaximize()"
> >
<i class="ph-copy ph-bold ph-lg"></i> <i :class="icon('ph-copy')"></i>
</button> </button>
<button <button
v-else-if="canResize && !maximized" v-else-if="canResize && !maximized"
class="button _button" class="button _button"
@click="maximize()" @click="maximize()"
> >
<i class="ph-browser ph-bold ph-lg"></i> <i :class="icon('ph-browser')"></i>
</button> </button>
<button <button
v-if="closeButton" v-if="closeButton"
class="button _button" class="button _button"
@click="close()" @click="close()"
> >
<i class="ph-x ph-bold ph-lg"></i> <i :class="icon('ph-x')"></i>
</button> </button>
</span> </span>
</div> </div>
@ -119,6 +119,8 @@ import { onBeforeUnmount, onMounted, provide, ref } from "vue";
import contains from "@/scripts/contains"; import contains from "@/scripts/contains";
import * as os from "@/os"; import * as os from "@/os";
import type { MenuItem } from "@/types/menu"; import type { MenuItem } from "@/types/menu";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const minHeight = 50; const minHeight = 50;
const minWidth = 250; const minWidth = 250;

2
packages/client/src/components/form/checkbox.vue
View File

@ -13,7 +13,7 @@
class="button" class="button"
@click.prevent="toggle" @click.prevent="toggle"
> >
<i class="check ph-check ph-bold ph-lg"></i> <i class="check ph-check ph-lg"></i>
</span> </span>
<span class="label"> <span class="label">
<!-- TODO: 無名slotの方は廃止 --> <!-- TODO: 無名slotの方は廃止 -->

6
packages/client/src/components/form/folder.vue
View File

@ -5,8 +5,8 @@
<span class="text"><slot name="label"></slot></span> <span class="text"><slot name="label"></slot></span>
<span class="right"> <span class="right">
<span class="text"><slot name="suffix"></slot></span> <span class="text"><slot name="suffix"></slot></span>
<i v-if="opened" class="ph-caret-up ph-bold ph-lg icon"></i> <i v-if="opened" :class="icon('ph-caret-up icon')"></i>
<i v-else class="ph-caret-down ph-bold ph-lg icon"></i> <i v-else :class="icon('ph-caret-down icon')"></i>
</span> </span>
</summary> </summary>
<div class="body"> <div class="body">
@ -18,6 +18,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import icon from "@/scripts/icon";
defineProps<{ defineProps<{
defaultOpen: boolean; defaultOpen: boolean;
}>(); }>();

3
packages/client/src/components/form/input.vue
View File

@ -40,7 +40,7 @@
primary primary
class="save" class="save"
@click="updated" @click="updated"
><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton ><i :class="icon('ph-check')"></i> {{ i18n.ts.save }}</MkButton
> >
</div> </div>
</template> </template>
@ -51,6 +51,7 @@ import { debounce } from "throttle-debounce";
import MkButton from "@/components/MkButton.vue"; import MkButton from "@/components/MkButton.vue";
import { useInterval } from "@/scripts/use-interval"; import { useInterval } from "@/scripts/use-interval";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
modelValue: string | number | null; modelValue: string | number | null;

8
packages/client/src/components/form/link.vue
View File

@ -5,7 +5,7 @@
<span class="text"><slot></slot></span> <span class="text"><slot></slot></span>
<span class="right"> <span class="right">
<span class="text"><slot name="suffix"></slot></span> <span class="text"><slot name="suffix"></slot></span>
<i class="ph-arrow-square-out ph-bold ph-lg icon"></i> <i :class="icon('ph-arrow-square-out icon')"></i>
</span> </span>
</a> </a>
<MkA <MkA
@ -19,14 +19,16 @@
<span class="text"><slot></slot></span> <span class="text"><slot></slot></span>
<span class="right"> <span class="right">
<span class="text"><slot name="suffix"></slot></span> <span class="text"><slot name="suffix"></slot></span>
<i class="ph-caret-right ph-bold ph-lg icon"></i> <i :class="icon('ph-caret-right icon')"></i>
</span> </span>
</MkA> </MkA>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ import icon from "@/scripts/icon";
defineProps<{
to: string; to: string;
active?: boolean; active?: boolean;
external?: boolean; external?: boolean;

5
packages/client/src/components/form/select.vue
View File

@ -25,7 +25,7 @@
</select> </select>
<div ref="suffixEl" class="suffix"> <div ref="suffixEl" class="suffix">
<i <i
class="ph-caret-down ph-bold ph-lg" class="ph-caret-down ph-lg"
:class="[ :class="[
$style.chevron, $style.chevron,
{ [$style.chevronOpening]: opening }, { [$style.chevronOpening]: opening },
@ -36,7 +36,7 @@
<div class="caption"><slot name="caption"></slot></div> <div class="caption"><slot name="caption"></slot></div>
<MkButton v-if="manualSave && changed" primary @click="updated" <MkButton v-if="manualSave && changed" primary @click="updated"
><i class="ph-floppy-disk-back ph-bold ph-lg"></i> ><i :class="icon('ph-floppy-disk-back')"></i>
{{ i18n.ts.save }}</MkButton {{ i18n.ts.save }}</MkButton
> >
</div> </div>
@ -57,6 +57,7 @@ import MkButton from "@/components/MkButton.vue";
import * as os from "@/os"; import * as os from "@/os";
import { useInterval } from "@/scripts/use-interval"; import { useInterval } from "@/scripts/use-interval";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
modelValue: string | null; modelValue: string | null;

11
packages/client/src/components/form/suspense.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <transition
:name="defaultStore.state.animation ? 'fade' : ''"
mode="out-in"
>
<div v-if="pending"> <div v-if="pending">
<MkLoading /> <MkLoading />
</div> </div>
@ -9,11 +12,11 @@
<div v-else> <div v-else>
<div class="wszdbhzo"> <div class="wszdbhzo">
<div> <div>
<i class="ph-warning ph-bold ph-lg"></i> <i :class="icon('ph-warning')"></i>
{{ i18n.ts.somethingHappened }} {{ i18n.ts.somethingHappened }}
</div> </div>
<MkButton inline class="retry" @click="retry" <MkButton inline class="retry" @click="retry"
><i class="ph-arrow-clockwise ph-bold ph-lg"></i> ><i :class="icon('ph-arrow-clockwise')"></i>
{{ i18n.ts.retry }}</MkButton {{ i18n.ts.retry }}</MkButton
> >
</div> </div>
@ -26,6 +29,8 @@ import type { PropType } from "vue";
import { defineComponent, ref, watch } from "vue"; import { defineComponent, ref, watch } from "vue";
import MkButton from "@/components/MkButton.vue"; import MkButton from "@/components/MkButton.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
export default defineComponent({ export default defineComponent({
components: { components: {

6
packages/client/src/components/form/textarea.vue
View File

@ -31,7 +31,10 @@
primary primary
class="save" class="save"
@click="updated" @click="updated"
><i class="ph-floppy-disk-back ph-bold ph-lg"></i> >
<!-- FIXME: icon function doesn't work here -->
<!-- <i :class="icon('ph-floppy-disk-back')"></i> -->
<i class="ph-floppy-disk-back ph-bold ph-lg"></i>
{{ i18n.ts.save }}</MkButton {{ i18n.ts.save }}</MkButton
> >
</div> </div>
@ -50,6 +53,7 @@ import {
import { debounce } from "throttle-debounce"; import { debounce } from "throttle-debounce";
import MkButton from "@/components/MkButton.vue"; import MkButton from "@/components/MkButton.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
// import icon from "@/scripts/icon";
export default defineComponent({ export default defineComponent({
components: { components: {

9
packages/client/src/components/global/MkA.vue
View File

@ -18,6 +18,7 @@ import { url } from "@/config";
// import { popout as popout_ } from "@/scripts/popout"; // import { popout as popout_ } from "@/scripts/popout";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { useRouter } from "@/router"; import { useRouter } from "@/router";
import icon from "@/scripts/icon";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -53,14 +54,14 @@ function onContextmenu(ev) {
text: props.to, text: props.to,
}, },
{ {
icon: "ph-browser ph-bold ph-lg", icon: `${icon("ph-browser")}`,
text: i18n.ts.openInWindow, text: i18n.ts.openInWindow,
action: () => { action: () => {
os.pageWindow(props.to); os.pageWindow(props.to);
}, },
}, },
{ {
icon: "ph-arrows-out-simple ph-bold ph-lg", icon: `${icon("ph-arrows-out-simple")}`,
text: i18n.ts.showInPage, text: i18n.ts.showInPage,
action: () => { action: () => {
router.push(props.to, "forcePage"); router.push(props.to, "forcePage");
@ -68,14 +69,14 @@ function onContextmenu(ev) {
}, },
null, null,
{ {
icon: "ph-arrow-square-out ph-bold ph-lg", icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.openInNewTab, text: i18n.ts.openInNewTab,
action: () => { action: () => {
window.open(props.to, "_blank"); window.open(props.to, "_blank");
}, },
}, },
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: `${icon("ph-link-simple")}`,
text: i18n.ts.copyLink, text: i18n.ts.copyLink,
action: () => { action: () => {
copyToClipboard(`${url}${props.to}`); copyToClipboard(`${url}${props.to}`);

3
packages/client/src/components/global/MkAcct.vue
View File

@ -2,7 +2,7 @@
<span class="mk-acct"> <span class="mk-acct">
<span class="name">@{{ user.username }}</span> <span class="name">@{{ user.username }}</span>
<span <span
v-if="user.host || detail || $store.state.showFullAcct" v-if="user.host || detail || defaultStore.state.showFullAcct"
class="host" class="host"
>@{{ user.host || host }}</span >@{{ user.host || host }}</span
> >
@ -13,6 +13,7 @@
import type * as firefish from "firefish-js"; import type * as firefish from "firefish-js";
import { toUnicode } from "punycode/"; import { toUnicode } from "punycode/";
import { host as hostRaw } from "@/config"; import { host as hostRaw } from "@/config";
import { defaultStore } from "@/store";
defineProps<{ defineProps<{
user: firefish.entities.UserDetailed; user: firefish.entities.UserDetailed;

3
packages/client/src/components/global/MkAd.vue
View File

@ -15,7 +15,7 @@
<a :href="chosen.url" target="_blank"> <a :href="chosen.url" target="_blank">
<img :src="chosen.imageUrl" /> <img :src="chosen.imageUrl" />
<button class="_button menu" @click.prevent.stop="toggleMenu"> <button class="_button menu" @click.prevent.stop="toggleMenu">
<span class="ph-info ph-bold ph-lg info-circle"></span> <span :class="icon('ph-info info-circle')"></span>
</button> </button>
</a> </a>
</div> </div>
@ -46,6 +46,7 @@ import MkButton from "@/components/MkButton.vue";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
type Ad = (typeof instance)["ads"][number]; type Ad = (typeof instance)["ads"][number];

10
packages/client/src/components/global/MkAvatar.vue
View File

@ -3,7 +3,10 @@
v-if="disableLink" v-if="disableLink"
v-user-preview="disablePreview ? undefined : user.id" v-user-preview="disablePreview ? undefined : user.id"
class="eiwwqkts _noSelect" class="eiwwqkts _noSelect"
:class="{ cat: user.isCat, square: $store.state.squareAvatars }" :class="{
cat: user.isCat,
square: defaultStore.state.squareAvatars,
}"
:style="{ color }" :style="{ color }"
:title="acct(user)" :title="acct(user)"
@click="onClick" @click="onClick"
@ -19,7 +22,10 @@
v-else v-else
v-user-preview="disablePreview ? undefined : user.id" v-user-preview="disablePreview ? undefined : user.id"
class="eiwwqkts _noSelect" class="eiwwqkts _noSelect"
:class="{ cat: user.isCat, square: $store.state.squareAvatars }" :class="{
cat: user.isCat,
square: defaultStore.state.squareAvatars,
}"
:style="{ color }" :style="{ color }"
:to="userPage(user)" :to="userPage(user)"
:title="acct(user)" :title="acct(user)"

6
packages/client/src/components/global/MkError.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<transition :name="$store.state.animation ? 'zoom' : ''" appear> <transition :name="defaultStore.state.animation ? 'zoom' : ''" appear>
<div class="mjndxjcg"> <div class="mjndxjcg">
<img <img
src="/static-assets/badges/error.webp" src="/static-assets/badges/error.webp"
@ -7,7 +7,7 @@
alt="Error" alt="Error"
/> />
<p> <p>
<i class="ph-warning ph-bold ph-lg"></i> <i :class="icon('ph-warning')"></i>
{{ i18n.ts.somethingHappened }} {{ i18n.ts.somethingHappened }}
</p> </p>
<MkButton class="button" @click="() => $emit('retry')">{{ <MkButton class="button" @click="() => $emit('retry')">{{
@ -20,6 +20,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import MkButton from "@/components/MkButton.vue"; import MkButton from "@/components/MkButton.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

3
packages/client/src/components/global/MkPageHeader.vue
View File

@ -17,7 +17,7 @@
@click.stop="goBack()" @click.stop="goBack()"
@touchstart="preventDrag" @touchstart="preventDrag"
> >
<i class="ph-caret-left ph-bold ph-lg"></i> <i :class="icon('ph-caret-left')"></i>
</button> </button>
<MkAvatar <MkAvatar
v-if="narrow && props.displayMyAvatar && $i" v-if="narrow && props.displayMyAvatar && $i"
@ -140,6 +140,7 @@ import { scrollToTop } from "@/scripts/scroll";
import { injectPageMetadata } from "@/scripts/page-metadata"; import { injectPageMetadata } from "@/scripts/page-metadata";
import { $i, openAccountMenu as openAccountMenu_ } from "@/account"; import { $i, openAccountMenu as openAccountMenu_ } from "@/account";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
interface Tab { interface Tab {
key?: string | null; key?: string | null;

3
packages/client/src/components/global/MkUrl.vue
View File

@ -25,7 +25,7 @@
<span class="hash">{{ hash }}</span> <span class="hash">{{ hash }}</span>
<i <i
v-if="target === '_blank'" v-if="target === '_blank'"
class="ph-arrow-square-out ph-bold ph-lg icon" :class="icon('ph-arrow-square-out icon')"
></i> ></i>
</component> </component>
</template> </template>
@ -37,6 +37,7 @@ import { url as local } from "@/config";
import * as os from "@/os"; import * as os from "@/os";
import { useTooltip } from "@/scripts/use-tooltip"; import { useTooltip } from "@/scripts/use-tooltip";
import { safeURIDecode } from "@/scripts/safe-uri-decode"; import { safeURIDecode } from "@/scripts/safe-uri-decode";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
url: string; url: string;

9
packages/client/src/components/page/page.post.vue
View File

@ -7,8 +7,8 @@
:disabled="posting || posted" :disabled="posting || posted"
@click="post()" @click="post()"
> >
<i v-if="posted" class="ph-check ph-bold ph-lg"></i> <i v-if="posted" :class="icon('ph-check')"></i>
<i v-else class="ph-paper-plane-tilt ph-bold ph-lg"></i> <i v-else :class="icon('ph-paper-plane-tilt')"></i>
</MkButton> </MkButton>
</div> </div>
</template> </template>
@ -22,6 +22,7 @@ import { apiUrl } from "@/config";
import * as os from "@/os"; import * as os from "@/os";
import type { PostBlock } from "@/scripts/hpml/block"; import type { PostBlock } from "@/scripts/hpml/block";
import type { Hpml } from "@/scripts/hpml/evaluator"; import type { Hpml } from "@/scripts/hpml/evaluator";
import icon from "@/scripts/icon";
export default defineComponent({ export default defineComponent({
components: { components: {
@ -60,10 +61,10 @@ export default defineComponent({
canvas.toBlob((blob) => { canvas.toBlob((blob) => {
const formData = new FormData(); const formData = new FormData();
formData.append("file", blob); formData.append("file", blob);
if (this.$store.state.uploadFolder) { if (this.defaultStore.state.uploadFolder) {
formData.append( formData.append(
"folderId", "folderId",
this.$store.state.uploadFolder, this.defaultStore.state.uploadFolder,
); );
} }

10
packages/client/src/init.ts
View File

@ -6,8 +6,12 @@
import "vite/modulepreload-polyfill"; import "vite/modulepreload-polyfill";
import "@/style.scss"; import "@/style.scss";
import "@phosphor-icons/web/bold";
import "@phosphor-icons/web/fill"; import "@phosphor-icons/web/fill";
import "@phosphor-icons/web/bold";
import "@phosphor-icons/web/regular";
import "@phosphor-icons/web/light";
import "@phosphor-icons/web/duotone";
// #region account indexedDB migration // #region account indexedDB migration
import { set } from "@/scripts/idb-proxy"; import { set } from "@/scripts/idb-proxy";
@ -72,7 +76,6 @@ function checkForSplash() {
console.info(`vue ${vueVersion}`); console.info(`vue ${vueVersion}`);
(window as any).$i = $i; (window as any).$i = $i;
(window as any).$store = defaultStore;
window.addEventListener("error", (event) => { window.addEventListener("error", (event) => {
console.error(event); console.error(event);
@ -201,10 +204,7 @@ function checkForSplash() {
app.config.globalProperties = { app.config.globalProperties = {
$i, $i,
$store: defaultStore,
$instance: instance, $instance: instance,
$t: i18n.t,
$ts: i18n.ts,
}; };
widgets(app); widgets(app);

37
packages/client/src/navbar.ts
View File

@ -1,102 +1,103 @@
import { computed, reactive, ref } from "vue"; import { computed, reactive } from "vue";
import { $i } from "./account"; import { $i } from "./account";
import { search } from "@/scripts/search"; import { search } from "@/scripts/search";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { ui } from "@/config"; import { ui } from "@/config";
import { unisonReload } from "@/scripts/unison-reload"; import { unisonReload } from "@/scripts/unison-reload";
import icon from "@/scripts/icon";
export const navbarItemDef = reactive({ export const navbarItemDef = reactive({
notifications: { notifications: {
title: "notifications", title: "notifications",
icon: "ph-bell ph-bold ph-lg", icon: `${icon("ph-bell")}`,
show: computed(() => $i != null), show: computed(() => $i != null),
indicated: computed(() => $i?.hasUnreadNotification), indicated: computed(() => $i?.hasUnreadNotification),
to: "/my/notifications", to: "/my/notifications",
}, },
messaging: { messaging: {
title: "messaging", title: "messaging",
icon: "ph-chats-teardrop ph-bold ph-lg", icon: `${icon("ph-chats-teardrop")}`,
show: computed(() => $i != null), show: computed(() => $i != null),
indicated: computed(() => $i?.hasUnreadMessagingMessage), indicated: computed(() => $i?.hasUnreadMessagingMessage),
to: "/my/messaging", to: "/my/messaging",
}, },
drive: { drive: {
title: "drive", title: "drive",
icon: "ph-cloud ph-bold ph-lg", icon: `${icon("ph-cloud")}`,
show: computed(() => $i != null), show: computed(() => $i != null),
to: "/my/drive", to: "/my/drive",
}, },
followRequests: { followRequests: {
title: "followRequests", title: "followRequests",
icon: "ph-hand-waving ph-bold ph-lg", icon: `${icon("ph-hand-waving")}`,
show: computed(() => $i?.isLocked || $i?.hasPendingReceivedFollowRequest), show: computed(() => $i?.isLocked || $i?.hasPendingReceivedFollowRequest),
indicated: computed(() => $i?.hasPendingReceivedFollowRequest), indicated: computed(() => $i?.hasPendingReceivedFollowRequest),
to: "/my/follow-requests", to: "/my/follow-requests",
}, },
explore: { explore: {
title: "explore", title: "explore",
icon: "ph-compass ph-bold ph-lg", icon: `${icon("ph-compass")}`,
to: "/explore", to: "/explore",
}, },
announcements: { announcements: {
title: "announcements", title: "announcements",
icon: "ph-megaphone-simple ph-bold ph-lg", icon: `${icon("ph-megaphone-simple")}`,
indicated: computed(() => $i?.hasUnreadAnnouncement), indicated: computed(() => $i?.hasUnreadAnnouncement),
to: "/announcements", to: "/announcements",
}, },
search: { search: {
title: "search", title: "search",
icon: "ph-magnifying-glass ph-bold ph-lg", icon: `${icon("ph-magnifying-glass")}`,
action: () => search(), action: () => search(),
}, },
lists: { lists: {
title: "lists", title: "lists",
icon: "ph-list-bullets ph-bold ph-lg", icon: `${icon("ph-list-bullets")}`,
show: computed(() => $i != null), show: computed(() => $i != null),
to: "/my/lists", to: "/my/lists",
}, },
antennas: { antennas: {
title: "antennas", title: "antennas",
icon: "ph-flying-saucer ph-bold ph-lg", icon: `${icon("ph-flying-saucer")}`,
show: computed(() => $i != null), show: computed(() => $i != null),
to: "/my/antennas", to: "/my/antennas",
}, },
favorites: { favorites: {
title: "favorites", title: "favorites",
icon: "ph-bookmark-simple ph-bold ph-lg", icon: `${icon("ph-bookmark-simple")}`,
show: computed(() => $i != null), show: computed(() => $i != null),
to: "/my/favorites", to: "/my/favorites",
}, },
pages: { pages: {
title: "pages", title: "pages",
icon: "ph-file-text ph-bold ph-lg", icon: `${icon("ph-file-text")}`,
to: "/pages", to: "/pages",
}, },
gallery: { gallery: {
title: "gallery", title: "gallery",
icon: "ph-image-square ph-bold ph-lg", icon: `${icon("ph-image-square")}`,
to: "/gallery", to: "/gallery",
}, },
clips: { clips: {
title: "clips", title: "clips",
icon: "ph-paperclip ph-bold ph-lg", icon: `${icon("ph-paperclip")}`,
show: computed(() => $i != null), show: computed(() => $i != null),
to: "/my/clips", to: "/my/clips",
}, },
channels: { channels: {
title: "channel", title: "channel",
icon: "ph-television ph-bold ph-lg", icon: `${icon("ph-television")}`,
to: "/channels", to: "/channels",
}, },
groups: { groups: {
title: "groups", title: "groups",
icon: "ph-users-three ph-bold ph-lg", icon: `${icon("ph-users-three")}`,
to: "/my/groups", to: "/my/groups",
}, },
ui: { ui: {
title: "switchUi", title: "switchUi",
icon: "ph-layout ph-bold ph-lg", icon: `${icon("ph-layout")}`,
action: (ev) => { action: (ev) => {
os.popupMenu( os.popupMenu(
[ [
@ -131,7 +132,7 @@ export const navbarItemDef = reactive({
}, },
reload: { reload: {
title: "reload", title: "reload",
icon: "ph-arrows-clockwise ph-bold ph-lg", icon: `${icon("ph-arrows-clockwise")}`,
action: (ev) => { action: (ev) => {
location.reload(); location.reload();
}, },

10
packages/client/src/pages/_error_.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<MkLoading v-if="!loaded" /> <MkLoading v-if="!loaded" />
<transition :name="$store.state.animation ? 'zoom' : ''" appear> <transition :name="defaultStore.state.animation ? 'zoom' : ''" appear>
<div v-show="loaded" class="mjndxjch"> <div v-show="loaded" class="mjndxjch">
<img <img
src="/static-assets/badges/error.webp" src="/static-assets/badges/error.webp"
@ -9,7 +9,7 @@
/> />
<p> <p>
<b <b
><i class="ph-warning ph-bold ph-lg"></i> ><i :class="icon('ph-warning')"></i>
{{ i18n.ts.pageLoadError }}</b {{ i18n.ts.pageLoadError }}</b
> >
</p> </p>
@ -44,8 +44,10 @@ import * as os from "@/os";
import { unisonReload } from "@/scripts/unison-reload"; import { unisonReload } from "@/scripts/unison-reload";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const props = withDefaults( withDefaults(
defineProps<{ defineProps<{
error?: Error; error?: Error;
}>(), }>(),
@ -77,7 +79,7 @@ function reload() {
definePageMetadata({ definePageMetadata({
title: i18n.ts.error, title: i18n.ts.error,
icon: "ph-warning ph-bold ph-lg", icon: `${icon("ph-warning")}`,
}); });
</script> </script>

7
packages/client/src/pages/about-firefish.vue
View File

@ -61,7 +61,7 @@
external external
> >
<template #icon <template #icon
><i class="ph-code ph-bold ph-lg"></i ><i :class="icon('ph-code')"></i
></template> ></template>
{{ i18n.ts._aboutFirefish.source }} {{ i18n.ts._aboutFirefish.source }}
<template #suffix>GitLab</template> <template #suffix>GitLab</template>
@ -71,7 +71,7 @@
external external
> >
<template #icon <template #icon
><i class="ph-money ph-bold ph-lg"></i ><i :class="icon('ph-money')"></i
></template> ></template>
{{ i18n.ts._aboutFirefish.donate }} {{ i18n.ts._aboutFirefish.donate }}
<template #suffix>Donate</template> <template #suffix>Donate</template>
@ -81,7 +81,7 @@
external external
> >
<template #icon <template #icon
><i class="ph-translate ph-bold ph-lg"></i ><i :class="icon('ph-translate')"></i
></template> ></template>
{{ i18n.ts._aboutFirefish.translation }} {{ i18n.ts._aboutFirefish.translation }}
<template #suffix>Translate</template> <template #suffix>Translate</template>
@ -219,6 +219,7 @@ import { i18n } from "@/i18n";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import * as os from "@/os"; import * as os from "@/os";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
let patrons = [], let patrons = [],
sponsors = []; sponsors = [];

3
packages/client/src/pages/about.emojis.vue
View File

@ -3,7 +3,7 @@
<div class="query"> <div class="query">
<MkInput v-model="q" class="" :placeholder="i18n.ts.search"> <MkInput v-model="q" class="" :placeholder="i18n.ts.search">
<template #prefix <template #prefix
><i class="ph-magnifying-glass ph-bold ph-lg"></i ><i :class="icon('ph-magnifying-glass')"></i
></template> ></template>
</MkInput> </MkInput>
@ -56,6 +56,7 @@ import MkFolder from "@/components/MkFolder.vue";
import MkTab from "@/components/MkTab.vue"; import MkTab from "@/components/MkTab.vue";
import { emojiCategories, emojiTags } from "@/instance"; import { emojiCategories, emojiTags } from "@/instance";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
export default defineComponent({ export default defineComponent({
components: { components: {

3
packages/client/src/pages/about.federation.vue
View File

@ -3,7 +3,7 @@
<div class="query"> <div class="query">
<MkInput v-model="host" :debounce="true" class=""> <MkInput v-model="host" :debounce="true" class="">
<template #prefix <template #prefix
><i class="ph-magnifying-glass ph-bold ph-lg"></i ><i :class="icon('ph-magnifying-glass')"></i
></template> ></template>
<template #label>{{ i18n.ts.host }}</template> <template #label>{{ i18n.ts.host }}</template>
</MkInput> </MkInput>
@ -112,6 +112,7 @@ import MkPagination from "@/components/MkPagination.vue";
import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue"; import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
import FormSplit from "@/components/form/split.vue"; import FormSplit from "@/components/form/split.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const host = ref(""); const host = ref("");
const state = ref("federating"); const state = ref("federating");

13
packages/client/src/pages/about.vue
View File

@ -95,7 +95,7 @@
external external
> >
<template #icon <template #icon
><i class="ph-money ph-bold ph-lg"></i ><i :class="icon('ph-money')"></i
></template> ></template>
{{ {{
i18n.t("_aboutFirefish.donateHost", { i18n.t("_aboutFirefish.donateHost", {
@ -193,6 +193,7 @@ import { deviceKind } from "@/scripts/device-kind";
import { iAmModerator } from "@/account"; import { iAmModerator } from "@/account";
import { instance } from "@/instance"; import { instance } from "@/instance";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
import "swiper/scss"; import "swiper/scss";
import "swiper/scss/virtual"; import "swiper/scss/virtual";
@ -227,17 +228,17 @@ const theTabs = [
{ {
key: "overview", key: "overview",
title: i18n.ts.overview, title: i18n.ts.overview,
icon: "ph-map-trifold ph-bold ph-lg", icon: `${icon("ph-map-trifold")}`,
}, },
{ {
key: "emojis", key: "emojis",
title: i18n.ts.customEmojis, title: i18n.ts.customEmojis,
icon: "ph-smiley ph-bold ph-lg", icon: `${icon("ph-smiley")}`,
}, },
{ {
key: "charts", key: "charts",
title: i18n.ts.charts, title: i18n.ts.charts,
icon: "ph-chart-bar ph-bold ph-lg", icon: `${icon("ph-chart-bar")}`,
}, },
]; ];
@ -245,7 +246,7 @@ if (iAmModerator) {
theTabs.push({ theTabs.push({
key: "federation", key: "federation",
title: i18n.ts.federation, title: i18n.ts.federation,
icon: "ph-planet ph-bold ph-lg", icon: `${icon("ph-planet")}`,
}); });
} }
@ -254,7 +255,7 @@ const headerTabs = computed(() => theTabs);
definePageMetadata( definePageMetadata(
computed(() => ({ computed(() => ({
title: i18n.ts.instanceInfo, title: i18n.ts.instanceInfo,
icon: "ph-info ph-bold ph-lg", icon: `${icon("ph-info")}`,
})), })),
); );

13
packages/client/src/pages/admin-file.vue
View File

@ -111,7 +111,7 @@
<div class="_formBlock"> <div class="_formBlock">
<MkButton danger @click="del" <MkButton danger @click="del"
><i class="ph-trash ph-bold ph-lg"></i> ><i :class="icon('ph-trash')"></i>
{{ i18n.ts.delete }}</MkButton {{ i18n.ts.delete }}</MkButton
> >
</div> </div>
@ -174,6 +174,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
import { deviceKind } from "@/scripts/device-kind"; import { deviceKind } from "@/scripts/device-kind";
import { iAmAdmin, iAmModerator } from "@/account"; import { iAmAdmin, iAmModerator } from "@/account";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
import "swiper/scss"; import "swiper/scss";
import "swiper/scss/virtual"; import "swiper/scss/virtual";
@ -224,7 +225,7 @@ async function toggleIsSensitive(v) {
const headerActions = computed(() => [ const headerActions = computed(() => [
{ {
text: i18n.ts.openInNewTab, text: i18n.ts.openInNewTab,
icon: "ph-arrow-square-out ph-bold ph-lg", icon: `${icon("ph-arrow-square-out")}`,
handler: () => { handler: () => {
window.open(file.value.url, "_blank"); window.open(file.value.url, "_blank");
}, },
@ -235,19 +236,19 @@ const headerTabs = computed(() => [
{ {
key: "overview", key: "overview",
title: i18n.ts.overview, title: i18n.ts.overview,
icon: "ph-info ph-bold ph-lg", icon: `${icon("ph-info")}`,
}, },
iAmModerator iAmModerator
? { ? {
key: "ip", key: "ip",
title: "IP", title: "IP",
icon: "ph-receipt ph-bold ph-lg", icon: `${icon("ph-receipt")}`,
} }
: null, : null,
{ {
key: "raw", key: "raw",
title: "Raw data", title: "Raw data",
icon: "ph-code ph-bold ph-lg", icon: `${icon("ph-code")}`,
}, },
]); ]);
@ -256,7 +257,7 @@ definePageMetadata(
title: file.value title: file.value
? i18n.ts.file + ": " + file.value.name ? i18n.ts.file + ": " + file.value.name
: i18n.ts.file, : i18n.ts.file,
icon: "ph-file ph-bold ph-lg", icon: `${icon("ph-file")}`,
})), })),
); );

3
packages/client/src/pages/admin/abuses.vue
View File

@ -98,6 +98,7 @@ import MkPagination from "@/components/MkPagination.vue";
import XAbuseReport from "@/components/MkAbuseReport.vue"; import XAbuseReport from "@/components/MkAbuseReport.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const reports = ref<InstanceType<typeof MkPagination>>(); const reports = ref<InstanceType<typeof MkPagination>>();
@ -127,7 +128,7 @@ const headerTabs = computed(() => []);
definePageMetadata({ definePageMetadata({
title: i18n.ts.abuseReports, title: i18n.ts.abuseReports,
icon: "ph-warning-circle ph-bold ph-lg", icon: `${icon("ph-warning-circle")}`,
}); });
</script> </script>

11
packages/client/src/pages/admin/announcements.vue
View File

@ -44,16 +44,14 @@
inline inline
primary primary
@click="save(announcement)" @click="save(announcement)"
><i ><i :class="icon('ph-floppy-disk-back')"></i>
class="ph-floppy-disk-back ph-bold ph-lg"
></i>
{{ i18n.ts.save }}</MkButton {{ i18n.ts.save }}</MkButton
> >
<MkButton <MkButton
class="button" class="button"
inline inline
@click="remove(announcement)" @click="remove(announcement)"
><i class="ph-trash ph-bold ph-lg"></i> ><i :class="icon('ph-trash')"></i>
{{ i18n.ts.remove }}</MkButton {{ i18n.ts.remove }}</MkButton
> >
</div> </div>
@ -74,6 +72,7 @@ import MkTextarea from "@/components/form/textarea.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const announcements = ref<any[]>([]); const announcements = ref<any[]>([]);
@ -140,7 +139,7 @@ function save(announcement) {
const headerActions = computed(() => [ const headerActions = computed(() => [
{ {
asFullButton: true, asFullButton: true,
icon: "ph-plus ph-bold ph-lg", icon: `${icon("ph-plus")}`,
text: i18n.ts.add, text: i18n.ts.add,
handler: add, handler: add,
}, },
@ -150,7 +149,7 @@ const headerTabs = computed(() => []);
definePageMetadata({ definePageMetadata({
title: i18n.ts.announcements, title: i18n.ts.announcements,
icon: "ph-megaphone-simple ph-bold ph-lg", icon: `${icon("ph-megaphone-simple")}`,
}); });
</script> </script>

11
packages/client/src/pages/admin/bot-protection.vue
View File

@ -13,7 +13,7 @@
<template v-if="provider === 'hcaptcha'"> <template v-if="provider === 'hcaptcha'">
<FormInput v-model="hcaptchaSiteKey" class="_formBlock"> <FormInput v-model="hcaptchaSiteKey" class="_formBlock">
<template #prefix <template #prefix
><i class="ph-key ph-bold ph-lg"></i ><i :class="icon('ph-key')"></i
></template> ></template>
<template #label>{{ <template #label>{{
i18n.ts.hcaptchaSiteKey i18n.ts.hcaptchaSiteKey
@ -21,7 +21,7 @@
</FormInput> </FormInput>
<FormInput v-model="hcaptchaSecretKey" class="_formBlock"> <FormInput v-model="hcaptchaSecretKey" class="_formBlock">
<template #prefix <template #prefix
><i class="ph-key ph-bold ph-lg"></i ><i :class="icon('ph-key')"></i
></template> ></template>
<template #label>{{ <template #label>{{
i18n.ts.hcaptchaSecretKey i18n.ts.hcaptchaSecretKey
@ -41,7 +41,7 @@
<template v-else-if="provider === 'recaptcha'"> <template v-else-if="provider === 'recaptcha'">
<FormInput v-model="recaptchaSiteKey" class="_formBlock"> <FormInput v-model="recaptchaSiteKey" class="_formBlock">
<template #prefix <template #prefix
><i class="ph-key ph-bold ph-lg"></i ><i :class="icon('ph-key')"></i
></template> ></template>
<template #label>{{ <template #label>{{
i18n.ts.recaptchaSiteKey i18n.ts.recaptchaSiteKey
@ -49,7 +49,7 @@
</FormInput> </FormInput>
<FormInput v-model="recaptchaSecretKey" class="_formBlock"> <FormInput v-model="recaptchaSecretKey" class="_formBlock">
<template #prefix <template #prefix
><i class="ph-key ph-bold ph-lg"></i ><i :class="icon('ph-key')"></i
></template> ></template>
<template #label>{{ <template #label>{{
i18n.ts.recaptchaSecretKey i18n.ts.recaptchaSecretKey
@ -65,7 +65,7 @@
</template> </template>
<FormButton primary @click="save" <FormButton primary @click="save"
><i class="ph-floppy-disk-back ph-bold ph-lg"></i> ><i :class="icon('ph-floppy-disk-back')"></i>
{{ i18n.ts.save }}</FormButton {{ i18n.ts.save }}</FormButton
> >
</div> </div>
@ -83,6 +83,7 @@ import FormSlot from "@/components/form/slot.vue";
import * as os from "@/os"; import * as os from "@/os";
import { fetchInstance } from "@/instance"; import { fetchInstance } from "@/instance";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const MkCaptcha = defineAsyncComponent( const MkCaptcha = defineAsyncComponent(
() => import("@/components/MkCaptcha.vue"), () => import("@/components/MkCaptcha.vue"),

3
packages/client/src/pages/admin/custom-css.vue
View File

@ -22,6 +22,7 @@ import FormTextarea from "@/components/form/textarea.vue";
import FormInfo from "@/components/MkInfo.vue"; import FormInfo from "@/components/MkInfo.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
// const localCustomCss = ref(localStorage.getItem("customCss") ?? ""); // const localCustomCss = ref(localStorage.getItem("customCss") ?? "");
@ -45,6 +46,6 @@ watch(globalCustomCss, async () => {
definePageMetadata({ definePageMetadata({
title: i18n.ts.customCss, title: i18n.ts.customCss,
icon: "ph-code ph-bold ph-lg", icon: `${icon("ph-code")}`,
}); });
</script> </script>

3
packages/client/src/pages/admin/database.vue
View File

@ -45,6 +45,7 @@ import number from "@/filters/number";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import { indexPosts } from "@/scripts/index-posts"; import { indexPosts } from "@/scripts/index-posts";
import icon from "@/scripts/icon";
const databasePromiseFactory = () => const databasePromiseFactory = () =>
os os
@ -59,6 +60,6 @@ const headerTabs = computed(() => []);
definePageMetadata({ definePageMetadata({
title: i18n.ts.database, title: i18n.ts.database,
icon: "ph-database ph-bold ph-lg", icon: `${icon("ph-database")}`,
}); });
</script> </script>

7
packages/client/src/pages/admin/email-settings.vue
View File

@ -103,6 +103,7 @@ import * as os from "@/os";
import { fetchInstance, instance } from "@/instance"; import { fetchInstance, instance } from "@/instance";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const enableEmail = ref(false); const enableEmail = ref(false);
const email: any = ref(null); const email: any = ref(null);
@ -154,13 +155,13 @@ function save() {
const headerActions = computed(() => [ const headerActions = computed(() => [
{ {
asFullButton: true, asFullButton: true,
icon: "ph-test-tube ph-bold ph-lg", icon: `${icon("ph-test-tube")}`,
text: i18n.ts.testEmail, text: i18n.ts.testEmail,
handler: testEmail, handler: testEmail,
}, },
{ {
asFullButton: true, asFullButton: true,
icon: "ph-check ph-bold ph-lg", icon: `${icon("ph-check")}`,
text: i18n.ts.save, text: i18n.ts.save,
handler: save, handler: save,
}, },
@ -170,6 +171,6 @@ const headerTabs = computed(() => []);
definePageMetadata({ definePageMetadata({
title: i18n.ts.emailServer, title: i18n.ts.emailServer,
icon: "ph-envelope-simple-open ph-bold ph-lg", icon: `${icon("ph-envelope-simple-open")}`,
}); });
</script> </script>

3
packages/client/src/pages/admin/emoji-edit-dialog.vue
View File

@ -32,7 +32,7 @@
<template #label>{{ i18n.ts.license }}</template> <template #label>{{ i18n.ts.license }}</template>
</MkTextarea> </MkTextarea>
<MkButton danger @click="del()" <MkButton danger @click="del()"
><i class="ph-trash ph-bold ph-lg"></i> ><i :class="icon('ph-trash')"></i>
{{ i18n.ts.delete }}</MkButton {{ i18n.ts.delete }}</MkButton
> >
</div> </div>
@ -50,6 +50,7 @@ import MkTextarea from "@/components/form/textarea.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { emojiCategories } from "@/instance"; import { emojiCategories } from "@/instance";
import icon from "@/scripts/icon";
const props = defineProps<{ const props = defineProps<{
emoji: any; emoji: any;

27
packages/client/src/pages/admin/emojis.vue
View File

@ -13,9 +13,7 @@
<div v-if="tab === 'local'" class="local"> <div v-if="tab === 'local'" class="local">
<MkInput v-model="query" :debounce="true" type="search"> <MkInput v-model="query" :debounce="true" type="search">
<template #prefix <template #prefix
><i ><i :class="icon('ph-magnifying-glass')"></i
class="ph-magnifying-glass ph-bold ph-lg"
></i
></template> ></template>
<template #label>{{ i18n.ts.search }}</template> <template #label>{{ i18n.ts.search }}</template>
</MkInput> </MkInput>
@ -105,9 +103,7 @@
type="search" type="search"
> >
<template #prefix <template #prefix
><i ><i :class="icon('ph-magnifying-glass')"></i
class="ph-magnifying-glass ph-bold ph-lg"
></i
></template> ></template>
<template #label>{{ i18n.ts.search }}</template> <template #label>{{ i18n.ts.search }}</template>
</MkInput> </MkInput>
@ -164,6 +160,7 @@ import { selectFile, selectFiles } from "@/scripts/select-file";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>(); const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
@ -272,7 +269,7 @@ const remoteMenu = (emoji, ev: MouseEvent) => {
}, },
{ {
text: i18n.ts.import, text: i18n.ts.import,
icon: "ph-plus ph-bold ph-lg", icon: `${icon("ph-plus")}`,
action: () => { action: () => {
im(emoji); im(emoji);
}, },
@ -286,7 +283,7 @@ const menu = (ev: MouseEvent) => {
os.popupMenu( os.popupMenu(
[ [
{ {
icon: "ph-download-simple ph-bold ph-lg", icon: `${icon("ph-download-simple")}`,
text: i18n.ts.exportZip, text: i18n.ts.exportZip,
action: async () => { action: async () => {
os.api("export-custom-emojis", {}) os.api("export-custom-emojis", {})
@ -305,7 +302,7 @@ const menu = (ev: MouseEvent) => {
}, },
}, },
{ {
icon: "ph-upload-simple ph-bold ph-lg", icon: `${icon("ph-upload-simple")}`,
text: i18n.ts.importZip, text: i18n.ts.importZip,
action: async () => { action: async () => {
const file = await selectFile( const file = await selectFile(
@ -329,7 +326,7 @@ const menu = (ev: MouseEvent) => {
}, },
}, },
{ {
icon: "ph-info ph-bold ph-lg", icon: `${icon("ph-info")}`,
text: i18n.ts.emojiPackCreator, text: i18n.ts.emojiPackCreator,
action: () => { action: () => {
window.open( window.open(
@ -418,12 +415,12 @@ const delBulk = async () => {
const headerActions = computed(() => [ const headerActions = computed(() => [
{ {
asFullButton: true, asFullButton: true,
icon: "ph-plus ph-bold ph-lg", icon: `${icon("ph-plus")}`,
text: i18n.ts.addEmoji, text: i18n.ts.addEmoji,
handler: add, handler: add,
}, },
{ {
icon: "ph-file-zip ph-bold ph-lg", icon: `${icon("ph-file-zip")}`,
handler: menu, handler: menu,
}, },
]); ]);
@ -431,12 +428,12 @@ const headerActions = computed(() => [
const headerTabs = computed(() => [ const headerTabs = computed(() => [
{ {
key: "local", key: "local",
icon: "ph-users ph-bold ph-lg", icon: `${icon("ph-users")}`,
title: i18n.ts.local, title: i18n.ts.local,
}, },
{ {
key: "remote", key: "remote",
icon: "ph-planet ph-bold ph-lg", icon: `${icon("ph-planet")}`,
title: i18n.ts.remote, title: i18n.ts.remote,
}, },
]); ]);
@ -444,7 +441,7 @@ const headerTabs = computed(() => [
definePageMetadata( definePageMetadata(
computed(() => ({ computed(() => ({
title: i18n.ts.customEmojis, title: i18n.ts.customEmojis,
icon: "ph-smiley ph-bold ph-lg", icon: `${icon("ph-smiley")}`,
})), })),
); );
</script> </script>

5
packages/client/src/pages/admin/experiments.vue
View File

@ -14,7 +14,7 @@
@update:modelValue="save" @update:modelValue="save"
> >
<template #label> <template #label>
<i class="ph-download-simple ph-bold ph-lg"></i> <i :class="icon('ph-download-simple')"></i>
{{ i18n.ts._experiments.enablePostImports }} {{ i18n.ts._experiments.enablePostImports }}
</template> </template>
<template #caption>{{ <template #caption>{{
@ -36,6 +36,7 @@ import * as os from "@/os";
import { fetchInstance } from "@/instance"; import { fetchInstance } from "@/instance";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const enablePostImports = ref(false); const enablePostImports = ref(false);
const meta = ref<MetaExperiments | null>(null); const meta = ref<MetaExperiments | null>(null);
@ -71,6 +72,6 @@ const headerTabs = computed(() => []);
definePageMetadata({ definePageMetadata({
title: i18n.ts._experiments.title, title: i18n.ts._experiments.title,
icon: "ph-flask ph-bold ph-lg", icon: `${icon("ph-flask")}`,
}); });
</script> </script>

3
packages/client/src/pages/admin/federation.vue
View File

@ -19,6 +19,7 @@ import { computed } from "vue";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import XFederation from "@/pages/about.federation.vue"; import XFederation from "@/pages/about.federation.vue";
import icon from "@/scripts/icon";
const headerActions = computed(() => []); const headerActions = computed(() => []);
@ -27,7 +28,7 @@ const headerTabs = computed(() => []);
definePageMetadata( definePageMetadata(
computed(() => ({ computed(() => ({
title: i18n.ts.federation, title: i18n.ts.federation,
icon: "ph-planet ph-bold ph-lg", icon: `${icon("ph-planet")}`,
})), })),
); );
</script> </script>

7
packages/client/src/pages/admin/files.vue
View File

@ -88,6 +88,7 @@ import { lookupFile } from "@/scripts/lookup-file";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const origin = ref("local"); const origin = ref("local");
const type = ref(null); const type = ref(null);
@ -122,12 +123,12 @@ function clear() {
const headerActions = computed(() => [ const headerActions = computed(() => [
{ {
text: i18n.ts.lookup, text: i18n.ts.lookup,
icon: "ph-magnifying-glass ph-bold ph-lg", icon: `${icon("ph-magnifying-glass")}`,
handler: lookupFile, handler: lookupFile,
}, },
{ {
text: i18n.ts.clearCachedFiles, text: i18n.ts.clearCachedFiles,
icon: "ph-trash ph-bold ph-lg", icon: `${icon("ph-trash")}`,
handler: clear, handler: clear,
}, },
]); ]);
@ -135,7 +136,7 @@ const headerActions = computed(() => [
definePageMetadata( definePageMetadata(
computed(() => ({ computed(() => ({
title: i18n.ts.files, title: i18n.ts.files,
icon: "ph-cloud ph-bold ph-lg", icon: `${icon("ph-cloud")}`,
})), })),
); );
</script> </script>

Some files were not shown because too many files have changed in this diff Show More