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

Merge branch 'feat/selectable-icon-weight' into 'develop'

Browse Source 
feat: ✨ allow users to choose icon set

Co-authored-by: naskya <m@naskya.net>

See merge request firefish/firefish!10613
This commit is contained in:
Kainoa Kanter 2023-10-17 01:57:20 +00:00
commit 77b2050041
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"
vibrate: "Play vibrations"
openServerInfo: "Show server information by clicking the server ticker on a post"
iconSet: "Icon set"
_sensitiveMediaDetection:
description: "Reduces the effort of server moderation through automatically recognizing
@ -2152,3 +2153,9 @@ _feeds:
rss: "RSS"
atom: "Atom"
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:\"を追加する"
languageForTranslation: "投稿翻訳に使用する言語"
detectPostLanguage: "投稿の言語を自動検出し、外国語の投稿に翻訳ボタンを表示する"
iconSet: "アイコンのスタイル"
_sensitiveMediaDetection:
description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"
@ -1994,3 +1995,9 @@ indexableDescription: MastodonやFirefishなどの検索機能に、あなたの
clickToShowPatterns: クリックしてトラックを表示
vibrate: 振動を有効にする
indexable: 投稿検索に登録
_iconSets:
bold: "太め"
light: "細め"
regular: "標準"
fill: "塗りつぶし"
duotone: "2色"

1
packages/client/package.json
View File

@ -31,6 +31,7 @@
"@types/uuid": "9.0.3",
"@vitejs/plugin-vue": "4.3.4",
"@vue/compiler-sfc": "3.3.4",
"@vue/runtime-core": "3.3.4",
"autobind-decorator": "2.4.0",
"autosize": "6.0.1",
"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 { del, get, set } from "@/scripts/idb-proxy";
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 icon from "@/scripts/icon";
// TODO: 他のタブと永続化されたstateを同期
@ -249,7 +250,7 @@ export async function openAccountMenu(
...accountItemPromises,
{
type: "parent",
icon: "ph-plus ph-bold ph-lg",
icon: `${icon("ph-plus")}`,
text: i18n.ts.addAccount,
children: [
{
@ -268,13 +269,13 @@ export async function openAccountMenu(
},
{
type: "link",
icon: "ph-users ph-bold ph-lg",
icon: `${icon("ph-users")}`,
text: i18n.ts.manageAccounts,
to: "/settings/accounts",
},
{
type: "button",
icon: "ph-sign-out ph-bold ph-lg",
icon: `${icon("ph-sign-out")}`,
text: i18n.ts.logout,
action: () => {
signout();

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

@ -8,7 +8,7 @@
>
<template #header>
<i
class="ph-warning-circle ph-bold ph-lg"
:class="icon('ph-warning-circle')"
style="margin-right: 0.5em"
></i>
<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 * as os from "@/os";
import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{
user: firefish.entities.User;

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

@ -8,16 +8,16 @@
<template v-if="!wait">
<template v-if="isFollowing">
<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 v-else>
<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 v-else>
<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>
</button>
</template>
@ -26,6 +26,7 @@
import { ref } from "vue";
import * as os from "@/os";
import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = withDefaults(
defineProps<{

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

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

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

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

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

@ -1,5 +1,5 @@
<template>
<transition :name="$store.state.animation ? 'fade' : ''" appear>
<transition :name="defaultStore.state.animation ? 'fade' : ''" appear>
<div
ref="rootEl"
class="nvlagfpb"
@ -17,6 +17,7 @@ import MkMenu from "@/components/MkMenu.vue";
import type { MenuItem } from "@/types/menu";
import contains from "@/scripts/contains";
import * as os from "@/os";
import { defaultStore } from "@/store";
const props = defineProps<{
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 { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
export default defineComponent({
props: {
@ -75,14 +76,14 @@ export default defineComponent({
[
h("span", [
h("i", {
class: "ph-caret-up ph-bold ph-lg icon",
class: `${icon("ph-caret-up")} icon`,
}),
getDateText(item.createdAt),
]),
h("span", [
getDateText(props.items[i + 1].createdAt),
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
v-if="type === 'success'"
:class="$style.iconInner"
class="ph-check ph-bold ph-lg"
class="ph-check ph-lg"
></i>
<i
v-else-if="type === 'error'"
:class="$style.iconInner"
class="ph-circle-wavy-warning ph-bold ph-lg"
class="ph-circle-wavy-warning ph-lg"
></i>
<i
v-else-if="type === 'warning'"
:class="$style.iconInner"
class="ph-warning ph-bold ph-lg"
class="ph-warning ph-lg"
></i>
<i
v-else-if="type === 'info'"
:class="$style.iconInner"
class="ph-info ph-bold ph-lg"
class="ph-info ph-lg"
></i>
<i
v-else-if="type === 'question'"
:class="$style.iconInner"
class="ph-circle-question ph-bold ph-lg"
class="ph-circle-question ph-lg"
></i>
<MkLoading
v-else-if="type === 'waiting'"
@ -75,7 +75,7 @@
@keydown="onInputKeydown"
>
<template v-if="input.type === 'password'" #prefix
><i class="ph-password ph-bold ph-lg"></i
><i :class="iconClass('ph-password')"></i
></template>
<template #caption>
<span
@ -109,7 +109,7 @@
class="_buttonIcon"
@click.stop="openSearchFilters"
>
<i class="ph-funnel ph-bold"></i>
<i :class="iconClass('ph-funnel', false)"></i>
</button>
</template>
</MkInput>
@ -213,6 +213,7 @@ import MkTextarea from "@/components/form/textarea.vue";
import MkSelect from "@/components/form/select.vue";
import * as os from "@/os";
import { i18n } from "@/i18n";
import iconClass from "@/scripts/icon";
interface Input {
type: HTMLInputElement["type"];
@ -364,7 +365,7 @@ async function openSearchFilters(ev) {
await os.popupMenu(
[
{
icon: "ph-user ph-bold ph-lg",
icon: `${icon("ph-user")}`,
text: i18n.ts._filters.fromUser,
action: () => {
os.selectUser().then((user) => {
@ -375,32 +376,32 @@ async function openSearchFilters(ev) {
{
type: "parent",
text: i18n.ts._filters.withFile,
icon: "ph-paperclip ph-bold ph-lg",
icon: `${icon("ph-paperclip")}`,
children: [
{
text: i18n.ts.image,
icon: "ph-image-square ph-bold ph-lg",
icon: `${icon("ph-image-square")}`,
action: () => {
inputValue.value += " has:image";
},
},
{
text: i18n.ts.video,
icon: "ph-video-camera ph-bold ph-lg",
icon: `${icon("ph-video-camera")}`,
action: () => {
inputValue.value += " has:video";
},
},
{
text: i18n.ts.audio,
icon: "ph-music-note ph-bold ph-lg",
icon: `${icon("ph-music-note")}`,
action: () => {
inputValue.value += " has:audio";
},
},
{
text: i18n.ts.file,
icon: "ph-file ph-bold ph-lg",
icon: `${icon("ph-file")}`,
action: () => {
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,
action: () => {
inputValue.value += " domain:";
},
},
{
icon: "ph-calendar-blank ph-bold ph-lg",
icon: `${icon("ph-calendar-blank")}`,
text: i18n.ts._filters.notesBefore,
action: () => {
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,
action: () => {
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,
action: () => {
inputValue.value += " filter:following ";
},
},
{
icon: "ph-users-three ph-bold ph-lg",
icon: `${icon("ph-users-three")}`,
text: i18n.ts._filters.followersOnly,
action: () => {
inputValue.value += " filter:followers ";

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

@ -2,7 +2,7 @@
<transition name="slide-fade">
<div v-if="show" class="_panel _shadow _acrylic" :class="$style.root">
<div :class="$style.icon">
<i class="ph-hand-heart ph-bold ph-5x" />
<i :class="icon('ph-hand-heart ph-5x', false)" />
</div>
<div :class="$style.main">
<div :class="$style.title">
@ -52,7 +52,7 @@
:aria-label="i18n.t('close')"
@click="close"
>
<i class="ph-x ph-bold ph-lg"></i>
<i :class="icon('ph-x')"></i>
</button>
</div>
</transition>
@ -65,6 +65,7 @@ import { host } from "@/config";
import { i18n } from "@/i18n";
import * as os from "@/os";
import { instance } from "@/instance";
import icon from "@/scripts/icon";
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 { i18n } from "@/i18n";
import { $i } from "@/account";
import icon from "@/scripts/icon";
const props = withDefaults(
defineProps<{
@ -75,7 +76,7 @@ function getMenu() {
return [
{
text: i18n.ts.rename,
icon: "ph-cursor-text ph-bold ph-lg",
icon: `${icon("ph-cursor-text")}`,
action: rename,
},
{
@ -83,19 +84,19 @@ function getMenu() {
? i18n.ts.unmarkAsSensitive
: i18n.ts.markAsSensitive,
icon: props.file.isSensitive
? "ph-eye ph-bold ph-lg"
: "ph-eye-slash ph-bold ph-lg",
? "ph-eye ph-lg"
: "ph-eye-slash ph-lg",
action: toggleSensitive,
},
{
text: i18n.ts.describeFile,
icon: "ph-subtitles ph-bold ph-lg",
icon: `${icon("ph-subtitles")}`,
action: describe,
},
null,
{
text: i18n.ts.copyUrl,
icon: "ph-link-simple ph-bold ph-lg",
icon: `${icon("ph-link-simple")}`,
action: copyUrl,
},
{
@ -103,13 +104,13 @@ function getMenu() {
href: props.file.url,
target: "_blank",
text: i18n.ts.download,
icon: "ph-download-simple ph-bold ph-lg",
icon: `${icon("ph-download-simple")}`,
download: props.file.name,
},
null,
{
text: i18n.ts.delete,
icon: "ph-trash ph-bold ph-lg",
icon: `${icon("ph-trash")}`,
danger: true,
action: deleteFile,
},

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

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

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

@ -8,7 +8,7 @@
@dragleave="onDragleave"
@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>
</div>
</template>
@ -18,6 +18,7 @@ import { ref } from "vue";
import type * as firefish from "firefish-js";
import * as os from "@/os";
import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{
folder?: firefish.entities.DriveFolder;

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

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

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

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

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

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

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

@ -75,7 +75,7 @@
<section>
<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 }}
</header>
<div class="body">
@ -135,28 +135,28 @@
:class="{ active: 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
class="_button tab"
:class="{ active: 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
class="_button tab"
:class="{ active: 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
class="_button tab"
:class="{ active: 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>
</div>
</div>
@ -182,6 +182,7 @@ import { deviceKind } from "@/scripts/device-kind";
import { emojiCategories, instance } from "@/instance";
import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
const props = withDefaults(
defineProps<{

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -27,23 +27,22 @@
>
<div class="line"></div>
<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
}}<button class="_textButton hide" @click.stop="readPromo()">
{{ i18n.ts.hideThisNote }}
<i class="ph-x ph-bold ph-lg"></i>
<i :class="icon('ph-x')"></i>
</button>
</div>
<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 }}
</div>
<div v-if="pinned" class="info">
<i class="ph-push-pin ph-bold ph-lg"></i
>{{ i18n.ts.pinnedNote }}
<i :class="icon('ph-push-pin')"></i>{{ i18n.ts.pinnedNote }}
</div>
<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">
<template #user>
<MkA
@ -64,7 +63,7 @@
>
<i
v-if="isMyRenote"
class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
:class="icon('ph-dots-three-outline dropdownIcon')"
></i>
<MkTime :time="note.createdAt" />
</button>
@ -149,7 +148,7 @@
class="channel"
:to="`/channels/${appearNote.channel.id}`"
@click.stop
><i class="ph-television ph-bold"></i>
><i :class="icon('ph-television', false)"></i>
{{ appearNote.channel.name }}</MkA
>
</div>
@ -164,7 +163,7 @@
class="button _button"
@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 && !detailedView"
>
@ -209,7 +208,7 @@
class="button _button"
@click.stop="react()"
>
<i class="ph-smiley ph-bold ph-lg"></i>
<i :class="icon('ph-smiley')"></i>
</button>
<button
v-if="
@ -221,7 +220,7 @@
class="button _button reacted"
@click.stop="undoReact(appearNote)"
>
<i class="ph-minus ph-bold ph-lg"></i>
<i :class="icon('ph-minus')"></i>
</button>
<XQuoteButton class="button" :note="appearNote" />
<button
@ -234,7 +233,7 @@
class="button _button"
@click.stop="translate"
>
<i class="ph-translate ph-bold ph-lg"></i>
<i :class="icon('ph-translate')"></i>
</button>
<button
ref="menuButton"
@ -242,7 +241,7 @@
class="button _button"
@click.stop="menu()"
>
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
<i :class="icon('ph-dots-three-outline')"></i>
</button>
</footer>
</div>
@ -302,6 +301,7 @@ import { useNoteCapture } from "@/scripts/use-note-capture";
import { notePage } from "@/filters/note";
import { deepClone } from "@/scripts/clone";
import { getNoteSummary } from "@/scripts/get-note-summary";
import icon from "@/scripts/icon";
const router = useRouter();
@ -494,7 +494,7 @@ function onContextmenu(ev: MouseEvent): void {
text: notePage(appearNote.value),
},
{
icon: "ph-browser ph-bold ph-lg",
icon: `${icon("ph-browser")}`,
text: i18n.ts.openInWindow,
action: () => {
os.pageWindow(notePage(appearNote.value));
@ -502,7 +502,7 @@ function onContextmenu(ev: MouseEvent): void {
},
notePage(appearNote.value) != location.pathname
? {
icon: "ph-arrows-out-simple ph-bold ph-lg",
icon: `${icon("ph-arrows-out-simple")}`,
text: i18n.ts.showInPage,
action: () => {
router.push(
@ -515,13 +515,13 @@ function onContextmenu(ev: MouseEvent): void {
null,
{
type: "a",
icon: "ph-arrow-square-out ph-bold ph-lg",
icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.openInNewTab,
href: notePage(appearNote.value),
target: "_blank",
},
{
icon: "ph-link-simple ph-bold ph-lg",
icon: `${icon("ph-link-simple")}`,
text: i18n.ts.copyLink,
action: () => {
copyToClipboard(`${url}${notePage(appearNote.value)}`);
@ -530,7 +530,7 @@ function onContextmenu(ev: MouseEvent): void {
appearNote.value.user.host != null
? {
type: "a",
icon: "ph-arrow-square-up-right ph-bold ph-lg",
icon: `${icon("ph-arrow-square-up-right")}`,
text: i18n.ts.showOnRemote,
href:
appearNote.value.url ??
@ -568,7 +568,7 @@ function showRenoteMenu(viaKeyboard = false): void {
[
{
text: i18n.ts.unrenote,
icon: "ph-trash ph-bold ph-lg",
icon: `${icon("ph-trash")}`,
danger: true,
action: () => {
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">
<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(
note.repliesCount,
@ -45,7 +45,7 @@
}}
</option>
<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(
note.renoteCount,
@ -55,7 +55,7 @@
}}
</option>
<option v-if="reactionsCount > 0" value="reactions">
<!-- <i class="ph-smiley ph-bold ph-lg"></i> -->
<!-- <i :class="icon('ph-smiley')"></i> -->
{{
wordWithCount(
reactionsCount,
@ -65,7 +65,7 @@
}}
</option>
<option v-if="directQuotes?.length > 0" value="quotes">
<!-- <i class="ph-quotes ph-bold ph-lg"></i> -->
<!-- <i :class="icon('ph-quotes')"></i> -->
{{
wordWithCount(
directQuotes.length,
@ -75,7 +75,7 @@
}}
</option>
<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) }}
</option>
</MkTab>
@ -188,6 +188,7 @@ import { getNoteMenu } from "@/scripts/get-note-menu";
import { useNoteCapture } from "@/scripts/use-note-capture";
import { deepClone } from "@/scripts/clone";
import { stream } from "@/stream";
// import icon from "@/scripts/icon";
const props = defineProps<{
note: firefish.entities.Note;

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
<template>
<div class="mk-notification-toast" :style="{ zIndex }">
<transition
:name="$store.state.animation ? 'notification-toast' : ''"
:name="defaultStore.state.animation ? 'notification-toast' : ''"
appear
@after-leave="$emit('closed')"
>
@ -18,6 +18,7 @@
import { onMounted, ref } from "vue";
import XNotification from "@/components/MkNotification.vue";
import * as os from "@/os";
import { defaultStore } from "@/store";
defineProps<{
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 type { PageMetadata } from "@/scripts/page-metadata";
import { provideMetadataReceiver } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const props = defineProps<{
initialPath: string;
@ -66,7 +67,7 @@ const buttonsLeft = computed(() => {
if (history.value.length > 1) {
buttons.push({
icon: "ph-caret-left ph-bold ph-lg",
icon: `${icon("ph-caret-left")}`,
onClick: back,
});
}
@ -76,7 +77,7 @@ const buttonsLeft = computed(() => {
const buttonsRight = computed(() => {
const buttons = [
{
icon: "ph-arrows-out-simple ph-bold ph-lg",
icon: `${icon("ph-arrows-out-simple")}`,
title: i18n.ts.showInPage,
onClick: expand,
},
@ -99,17 +100,17 @@ provide("shouldHeaderThin", true);
const contextmenu = computed(() => [
{
icon: "ph-arrows-out-simple ph-bold ph-lg",
icon: `${icon("ph-arrows-out-simple")}`,
text: i18n.ts.showInPage,
action: expand,
},
{
icon: "ph-arrow-square-out ph-bold ph-lg",
icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.popout,
action: popout,
},
{
icon: "ph-arrow-square-out ph-bold ph-lg",
icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.openInNewTab,
action: () => {
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,
action: () => {
copyToClipboard(url + router.getCurrentPath());

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -13,7 +13,7 @@
class="button"
@click.prevent="toggle"
>
<i class="check ph-check ph-bold ph-lg"></i>
<i class="check ph-check ph-lg"></i>
</span>
<span class="label">
<!-- 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="right">
<span class="text"><slot name="suffix"></slot></span>
<i v-if="opened" class="ph-caret-up ph-bold ph-lg icon"></i>
<i v-else class="ph-caret-down ph-bold ph-lg icon"></i>
<i v-if="opened" :class="icon('ph-caret-up icon')"></i>
<i v-else :class="icon('ph-caret-down icon')"></i>
</span>
</summary>
<div class="body">
@ -18,6 +18,8 @@
</template>
<script lang="ts" setup>
import icon from "@/scripts/icon";
defineProps<{
defaultOpen: boolean;
}>();

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

@ -40,7 +40,7 @@
primary
class="save"
@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>
</template>
@ -51,6 +51,7 @@ import { debounce } from "throttle-debounce";
import MkButton from "@/components/MkButton.vue";
import { useInterval } from "@/scripts/use-interval";
import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{
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="right">
<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>
</a>
<MkA
@ -19,14 +19,16 @@
<span class="text"><slot></slot></span>
<span class="right">
<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>
</MkA>
</div>
</template>
<script lang="ts" setup>
const props = defineProps<{
import icon from "@/scripts/icon";
defineProps<{
to: string;
active?: boolean;
external?: boolean;

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

@ -25,7 +25,7 @@
</select>
<div ref="suffixEl" class="suffix">
<i
class="ph-caret-down ph-bold ph-lg"
class="ph-caret-down ph-lg"
:class="[
$style.chevron,
{ [$style.chevronOpening]: opening },
@ -36,7 +36,7 @@
<div class="caption"><slot name="caption"></slot></div>
<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
>
</div>
@ -57,6 +57,7 @@ import MkButton from "@/components/MkButton.vue";
import * as os from "@/os";
import { useInterval } from "@/scripts/use-interval";
import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const props = defineProps<{
modelValue: string | null;

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

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

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

@ -31,7 +31,10 @@
primary
class="save"
@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
>
</div>
@ -50,6 +53,7 @@ import {
import { debounce } from "throttle-debounce";
import MkButton from "@/components/MkButton.vue";
import { i18n } from "@/i18n";
// import icon from "@/scripts/icon";
export default defineComponent({
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 { i18n } from "@/i18n";
import { useRouter } from "@/router";
import icon from "@/scripts/icon";
const props = withDefaults(
defineProps<{
@ -53,14 +54,14 @@ function onContextmenu(ev) {
text: props.to,
},
{
icon: "ph-browser ph-bold ph-lg",
icon: `${icon("ph-browser")}`,
text: i18n.ts.openInWindow,
action: () => {
os.pageWindow(props.to);
},
},
{
icon: "ph-arrows-out-simple ph-bold ph-lg",
icon: `${icon("ph-arrows-out-simple")}`,
text: i18n.ts.showInPage,
action: () => {
router.push(props.to, "forcePage");
@ -68,14 +69,14 @@ function onContextmenu(ev) {
},
null,
{
icon: "ph-arrow-square-out ph-bold ph-lg",
icon: `${icon("ph-arrow-square-out")}`,
text: i18n.ts.openInNewTab,
action: () => {
window.open(props.to, "_blank");
},
},
{
icon: "ph-link-simple ph-bold ph-lg",
icon: `${icon("ph-link-simple")}`,
text: i18n.ts.copyLink,
action: () => {
copyToClipboard(`${url}${props.to}`);

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

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

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

@ -15,7 +15,7 @@
<a :href="chosen.url" target="_blank">
<img :src="chosen.imageUrl" />
<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>
</a>
</div>
@ -46,6 +46,7 @@ import MkButton from "@/components/MkButton.vue";
import { defaultStore } from "@/store";
import * as os from "@/os";
import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
type Ad = (typeof instance)["ads"][number];

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

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

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

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

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

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

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

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

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

@ -7,8 +7,8 @@
:disabled="posting || posted"
@click="post()"
>
<i v-if="posted" class="ph-check ph-bold ph-lg"></i>
<i v-else class="ph-paper-plane-tilt ph-bold ph-lg"></i>
<i v-if="posted" :class="icon('ph-check')"></i>
<i v-else :class="icon('ph-paper-plane-tilt')"></i>
</MkButton>
</div>
</template>
@ -22,6 +22,7 @@ import { apiUrl } from "@/config";
import * as os from "@/os";
import type { PostBlock } from "@/scripts/hpml/block";
import type { Hpml } from "@/scripts/hpml/evaluator";
import icon from "@/scripts/icon";
export default defineComponent({
components: {
@ -60,10 +61,10 @@ export default defineComponent({
canvas.toBlob((blob) => {
const formData = new FormData();
formData.append("file", blob);
if (this.$store.state.uploadFolder) {
if (this.defaultStore.state.uploadFolder) {
formData.append(
"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 "@/style.scss";
import "@phosphor-icons/web/bold";
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
import { set } from "@/scripts/idb-proxy";
@ -72,7 +76,6 @@ function checkForSplash() {
console.info(`vue ${vueVersion}`);
(window as any).$i = $i;
(window as any).$store = defaultStore;
window.addEventListener("error", (event) => {
console.error(event);
@ -201,10 +204,7 @@ function checkForSplash() {
app.config.globalProperties = {
$i,
$store: defaultStore,
$instance: instance,
$t: i18n.t,
$ts: i18n.ts,
};
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 { search } from "@/scripts/search";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { ui } from "@/config";
import { unisonReload } from "@/scripts/unison-reload";
import icon from "@/scripts/icon";
export const navbarItemDef = reactive({
notifications: {
title: "notifications",
icon: "ph-bell ph-bold ph-lg",
icon: `${icon("ph-bell")}`,
show: computed(() => $i != null),
indicated: computed(() => $i?.hasUnreadNotification),
to: "/my/notifications",
},
messaging: {
title: "messaging",
icon: "ph-chats-teardrop ph-bold ph-lg",
icon: `${icon("ph-chats-teardrop")}`,
show: computed(() => $i != null),
indicated: computed(() => $i?.hasUnreadMessagingMessage),
to: "/my/messaging",
},
drive: {
title: "drive",
icon: "ph-cloud ph-bold ph-lg",
icon: `${icon("ph-cloud")}`,
show: computed(() => $i != null),
to: "/my/drive",
},
followRequests: {
title: "followRequests",
icon: "ph-hand-waving ph-bold ph-lg",
icon: `${icon("ph-hand-waving")}`,
show: computed(() => $i?.isLocked || $i?.hasPendingReceivedFollowRequest),
indicated: computed(() => $i?.hasPendingReceivedFollowRequest),
to: "/my/follow-requests",
},
explore: {
title: "explore",
icon: "ph-compass ph-bold ph-lg",
icon: `${icon("ph-compass")}`,
to: "/explore",
},
announcements: {
title: "announcements",
icon: "ph-megaphone-simple ph-bold ph-lg",
icon: `${icon("ph-megaphone-simple")}`,
indicated: computed(() => $i?.hasUnreadAnnouncement),
to: "/announcements",
},
search: {
title: "search",
icon: "ph-magnifying-glass ph-bold ph-lg",
icon: `${icon("ph-magnifying-glass")}`,
action: () => search(),
},
lists: {
title: "lists",
icon: "ph-list-bullets ph-bold ph-lg",
icon: `${icon("ph-list-bullets")}`,
show: computed(() => $i != null),
to: "/my/lists",
},
antennas: {
title: "antennas",
icon: "ph-flying-saucer ph-bold ph-lg",
icon: `${icon("ph-flying-saucer")}`,
show: computed(() => $i != null),
to: "/my/antennas",
},
favorites: {
title: "favorites",
icon: "ph-bookmark-simple ph-bold ph-lg",
icon: `${icon("ph-bookmark-simple")}`,
show: computed(() => $i != null),
to: "/my/favorites",
},
pages: {
title: "pages",
icon: "ph-file-text ph-bold ph-lg",
icon: `${icon("ph-file-text")}`,
to: "/pages",
},
gallery: {
title: "gallery",
icon: "ph-image-square ph-bold ph-lg",
icon: `${icon("ph-image-square")}`,
to: "/gallery",
},
clips: {
title: "clips",
icon: "ph-paperclip ph-bold ph-lg",
icon: `${icon("ph-paperclip")}`,
show: computed(() => $i != null),
to: "/my/clips",
},
channels: {
title: "channel",
icon: "ph-television ph-bold ph-lg",
icon: `${icon("ph-television")}`,
to: "/channels",
},
groups: {
title: "groups",
icon: "ph-users-three ph-bold ph-lg",
icon: `${icon("ph-users-three")}`,
to: "/my/groups",
},
ui: {
title: "switchUi",
icon: "ph-layout ph-bold ph-lg",
icon: `${icon("ph-layout")}`,
action: (ev) => {
os.popupMenu(
[
@ -131,7 +132,7 @@ export const navbarItemDef = reactive({
},
reload: {
title: "reload",
icon: "ph-arrows-clockwise ph-bold ph-lg",
icon: `${icon("ph-arrows-clockwise")}`,
action: (ev) => {
location.reload();
},

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

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

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

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

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

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

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

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

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

@ -95,7 +95,7 @@
external
>
<template #icon
><i class="ph-money ph-bold ph-lg"></i
><i :class="icon('ph-money')"></i
></template>
{{
i18n.t("_aboutFirefish.donateHost", {
@ -193,6 +193,7 @@ import { deviceKind } from "@/scripts/device-kind";
import { iAmModerator } from "@/account";
import { instance } from "@/instance";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
import "swiper/scss";
import "swiper/scss/virtual";
@ -227,17 +228,17 @@ const theTabs = [
{
key: "overview",
title: i18n.ts.overview,
icon: "ph-map-trifold ph-bold ph-lg",
icon: `${icon("ph-map-trifold")}`,
},
{
key: "emojis",
title: i18n.ts.customEmojis,
icon: "ph-smiley ph-bold ph-lg",
icon: `${icon("ph-smiley")}`,
},
{
key: "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({
key: "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(
computed(() => ({
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">
<MkButton danger @click="del"
><i class="ph-trash ph-bold ph-lg"></i>
><i :class="icon('ph-trash')"></i>
{{ i18n.ts.delete }}</MkButton
>
</div>
@ -174,6 +174,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
import { deviceKind } from "@/scripts/device-kind";
import { iAmAdmin, iAmModerator } from "@/account";
import { defaultStore } from "@/store";
import icon from "@/scripts/icon";
import "swiper/scss";
import "swiper/scss/virtual";
@ -224,7 +225,7 @@ async function toggleIsSensitive(v) {
const headerActions = computed(() => [
{
text: i18n.ts.openInNewTab,
icon: "ph-arrow-square-out ph-bold ph-lg",
icon: `${icon("ph-arrow-square-out")}`,
handler: () => {
window.open(file.value.url, "_blank");
},
@ -235,19 +236,19 @@ const headerTabs = computed(() => [
{
key: "overview",
title: i18n.ts.overview,
icon: "ph-info ph-bold ph-lg",
icon: `${icon("ph-info")}`,
},
iAmModerator
? {
key: "ip",
title: "IP",
icon: "ph-receipt ph-bold ph-lg",
icon: `${icon("ph-receipt")}`,
}
: null,
{
key: "raw",
title: "Raw data",
icon: "ph-code ph-bold ph-lg",
icon: `${icon("ph-code")}`,
},
]);
@ -256,7 +257,7 @@ definePageMetadata(
title: file.value
? i18n.ts.file + ": " + file.value.name
: 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 { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const reports = ref<InstanceType<typeof MkPagination>>();
@ -127,7 +128,7 @@ const headerTabs = computed(() => []);
definePageMetadata({
title: i18n.ts.abuseReports,
icon: "ph-warning-circle ph-bold ph-lg",
icon: `${icon("ph-warning-circle")}`,
});
</script>

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

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

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

@ -13,7 +13,7 @@
<template v-if="provider === 'hcaptcha'">
<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
<template #prefix
><i class="ph-key ph-bold ph-lg"></i
><i :class="icon('ph-key')"></i
></template>
<template #label>{{
i18n.ts.hcaptchaSiteKey
@ -21,7 +21,7 @@
</FormInput>
<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
<template #prefix
><i class="ph-key ph-bold ph-lg"></i
><i :class="icon('ph-key')"></i
></template>
<template #label>{{
i18n.ts.hcaptchaSecretKey
@ -41,7 +41,7 @@
<template v-else-if="provider === 'recaptcha'">
<FormInput v-model="recaptchaSiteKey" class="_formBlock">
<template #prefix
><i class="ph-key ph-bold ph-lg"></i
><i :class="icon('ph-key')"></i
></template>
<template #label>{{
i18n.ts.recaptchaSiteKey
@ -49,7 +49,7 @@
</FormInput>
<FormInput v-model="recaptchaSecretKey" class="_formBlock">
<template #prefix
><i class="ph-key ph-bold ph-lg"></i
><i :class="icon('ph-key')"></i
></template>
<template #label>{{
i18n.ts.recaptchaSecretKey
@ -65,7 +65,7 @@
</template>
<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
>
</div>
@ -83,6 +83,7 @@ import FormSlot from "@/components/form/slot.vue";
import * as os from "@/os";
import { fetchInstance } from "@/instance";
import { i18n } from "@/i18n";
import icon from "@/scripts/icon";
const MkCaptcha = defineAsyncComponent(
() => 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 { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
// const localCustomCss = ref(localStorage.getItem("customCss") ?? "");
@ -45,6 +46,6 @@ watch(globalCustomCss, async () => {
definePageMetadata({
title: i18n.ts.customCss,
icon: "ph-code ph-bold ph-lg",
icon: `${icon("ph-code")}`,
});
</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 { definePageMetadata } from "@/scripts/page-metadata";
import { indexPosts } from "@/scripts/index-posts";
import icon from "@/scripts/icon";
const databasePromiseFactory = () =>
os
@ -59,6 +60,6 @@ const headerTabs = computed(() => []);
definePageMetadata({
title: i18n.ts.database,
icon: "ph-database ph-bold ph-lg",
icon: `${icon("ph-database")}`,
});
</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 { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const enableEmail = ref(false);
const email: any = ref(null);
@ -154,13 +155,13 @@ function save() {
const headerActions = computed(() => [
{
asFullButton: true,
icon: "ph-test-tube ph-bold ph-lg",
icon: `${icon("ph-test-tube")}`,
text: i18n.ts.testEmail,
handler: testEmail,
},
{
asFullButton: true,
icon: "ph-check ph-bold ph-lg",
icon: `${icon("ph-check")}`,
text: i18n.ts.save,
handler: save,
},
@ -170,6 +171,6 @@ const headerTabs = computed(() => []);
definePageMetadata({
title: i18n.ts.emailServer,
icon: "ph-envelope-simple-open ph-bold ph-lg",
icon: `${icon("ph-envelope-simple-open")}`,
});
</script>

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

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

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

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

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

@ -14,7 +14,7 @@
@update:modelValue="save"
>
<template #label>
<i class="ph-download-simple ph-bold ph-lg"></i>
<i :class="icon('ph-download-simple')"></i>
{{ i18n.ts._experiments.enablePostImports }}
</template>
<template #caption>{{
@ -36,6 +36,7 @@ import * as os from "@/os";
import { fetchInstance } from "@/instance";
import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const enablePostImports = ref(false);
const meta = ref<MetaExperiments | null>(null);
@ -71,6 +72,6 @@ const headerTabs = computed(() => []);
definePageMetadata({
title: i18n.ts._experiments.title,
icon: "ph-flask ph-bold ph-lg",
icon: `${icon("ph-flask")}`,
});
</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 { i18n } from "@/i18n";
import XFederation from "@/pages/about.federation.vue";
import icon from "@/scripts/icon";
const headerActions = computed(() => []);
@ -27,7 +28,7 @@ const headerTabs = computed(() => []);
definePageMetadata(
computed(() => ({
title: i18n.ts.federation,
icon: "ph-planet ph-bold ph-lg",
icon: `${icon("ph-planet")}`,
})),
);
</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 { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import icon from "@/scripts/icon";
const origin = ref("local");
const type = ref(null);
@ -122,12 +123,12 @@ function clear() {
const headerActions = computed(() => [
{
text: i18n.ts.lookup,
icon: "ph-magnifying-glass ph-bold ph-lg",
icon: `${icon("ph-magnifying-glass")}`,
handler: lookupFile,
},
{
text: i18n.ts.clearCachedFiles,
icon: "ph-trash ph-bold ph-lg",
icon: `${icon("ph-trash")}`,
handler: clear,
},
]);
@ -135,7 +136,7 @@ const headerActions = computed(() => [
definePageMetadata(
computed(() => ({
title: i18n.ts.files,
icon: "ph-cloud ph-bold ph-lg",
icon: `${icon("ph-cloud")}`,
})),
);
</script>

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