merge: Customize Sidebar/Visitor/About separately from app icon. (!632)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/632

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>

15 files changed, 98 insertions, 8 deletions

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 6d24bb5b41..c18e1281df 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1455,6 +1455,9 @@ _serverSettings:
   appIconUsageExample: "E.g. As PWA, or when displayed as a home screen bookmark on a phone"
   appIconStyleRecommendation: "As the icon may be cropped to a square or circle, an icon with colored margin around the content is recommended."
   appIconResolutionMustBe: "The minimum resolution is {resolution}."
+  sidebarLogoUrl: "Logo URL"
+  sidebarLogoDescription: "Specifies the logo to use instead of the regular icon in high definition, dynamic-width scenarios."
+  sidebarLogoUsageExample: "E.g. In the sidebar, to visitors and in the \"About\" page."
   manifestJsonOverride: "manifest.json Override"
   shortName: "Short name"
   shortNameDescription: "A shorthand for the instance's name that can be displayed if the full official name is long."
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 177a3c8160..9f0378a23f 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5793,6 +5793,18 @@ export interface Locale extends ILocale {
          */
         "appIconResolutionMustBe": ParameterizedString<"resolution">;
         /**
+         * ロゴURL
+         */
+        "sidebarLogoUrl": string;
+        /**
+         * 高精細、ダイナミック幅のシナリオで通常のアイコンの代わりに使用するロゴを指定します。
+         */
+        "sidebarLogoDescription": string;
+        /**
+         * 例：サイドバー、訪問者用、「情報」ページ
+         */
+        "sidebarLogoUsageExample": string;
+        /**
          * manifest.jsonのオーバーライド
          */
         "manifestJsonOverride": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b4d47a449c..57fdeb461f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1463,6 +1463,9 @@ _serverSettings:
   appIconUsageExample: "例: PWAや、スマートフォンのホーム画面にブックマークとして追加された時など"
   appIconStyleRecommendation: "円形もしくは角丸にクロップされる場合があるため、塗り潰された余白のある背景を持つことが推奨されます。"
   appIconResolutionMustBe: "解像度は必ず{resolution}である必要があります。"
+  sidebarLogoUrl: "ロゴURL"
+  sidebarLogoDescription: "高精細、ダイナミック幅のシナリオで通常のアイコンの代わりに使用するロゴを指定します。"
+  sidebarLogoUsageExample:  "例：サイドバー、訪問者用、「情報」ページ"
   manifestJsonOverride: "manifest.jsonのオーバーライド"
   shortName: "略称"
   shortNameDescription: "サーバーの正式名称が長い場合に、代わりに表示することのできる略称や通称。"
diff --git a/packages/backend/migration/1727027985575-SidebarLogo.js b/packages/backend/migration/1727027985575-SidebarLogo.js
new file mode 100644
index 0000000000..03344a367f
--- /dev/null
+++ b/packages/backend/migration/1727027985575-SidebarLogo.js
@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: piuvas and other Sharkey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class SidebarLogo1727027985575 {
+    name = 'SidebarLogo1727027985575';
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" ADD "sidebarLogoUrl" character varying(1024)`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "sidebarLogoUrl"`);
+    }
+}
diff --git a/packages/backend/src/core/entities/MetaEntityService.ts b/packages/backend/src/core/entities/MetaEntityService.ts
index 3128b762f4..afeefc9033 100644
--- a/packages/backend/src/core/entities/MetaEntityService.ts
+++ b/packages/backend/src/core/entities/MetaEntityService.ts
@@ -105,6 +105,7 @@ export class MetaEntityService {
 			serverErrorImageUrl: instance.serverErrorImageUrl,
 			notFoundImageUrl: instance.notFoundImageUrl,
 			iconUrl: instance.iconUrl,
+			sidebarLogoUrl: instance.sidebarLogoUrl,
 			backgroundImageUrl: instance.backgroundImageUrl,
 			logoImageUrl: instance.logoImageUrl,
 			maxNoteTextLength: this.config.maxNoteLength,
diff --git a/packages/backend/src/models/Meta.ts b/packages/backend/src/models/Meta.ts
index 07c4e28b3a..29e1dd032a 100644
--- a/packages/backend/src/models/Meta.ts
+++ b/packages/backend/src/models/Meta.ts
@@ -143,6 +143,12 @@ export class MiMeta {
 		length: 1024,
 		nullable: true,
 	})
+	public sidebarLogoUrl: string | null;
+	
+	@Column('varchar', {
+		length: 1024,
+		nullable: true,
+	})
 	public serverErrorImageUrl: string | null;
 
 	@Column('varchar', {
diff --git a/packages/backend/src/server/api/endpoints/admin/meta.ts b/packages/backend/src/server/api/endpoints/admin/meta.ts
index 063bb6751b..5a69fbf679 100644
--- a/packages/backend/src/server/api/endpoints/admin/meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/meta.ts
@@ -110,6 +110,10 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
+			sidebarLogoUrl: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
 			enableEmail: {
 				type: 'boolean',
 				optional: false, nullable: false,
@@ -582,6 +586,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				iconUrl: instance.iconUrl,
 				app192IconUrl: instance.app192IconUrl,
 				app512IconUrl: instance.app512IconUrl,
+				sidebarLogoUrl: instance.sidebarLogoUrl,
 				backgroundImageUrl: instance.backgroundImageUrl,
 				logoImageUrl: instance.logoImageUrl,
 				defaultLightTheme: instance.defaultLightTheme,
diff --git a/packages/backend/src/server/api/endpoints/admin/update-meta.ts b/packages/backend/src/server/api/endpoints/admin/update-meta.ts
index 6bda1ae6ad..c56dd053d3 100644
--- a/packages/backend/src/server/api/endpoints/admin/update-meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/update-meta.ts
@@ -55,6 +55,7 @@ export const paramDef = {
 		iconUrl: { type: 'string', nullable: true },
 		app192IconUrl: { type: 'string', nullable: true },
 		app512IconUrl: { type: 'string', nullable: true },
+		sidebarLogoUrl: { type: 'string', nullable: true },
 		backgroundImageUrl: { type: 'string', nullable: true },
 		logoImageUrl: { type: 'string', nullable: true },
 		name: { type: 'string', nullable: true },
@@ -250,6 +251,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				set.app512IconUrl = ps.app512IconUrl;
 			}
 
+			if (ps.sidebarLogoUrl !== undefined) {
+				set.sidebarLogoUrl = ps.sidebarLogoUrl;
+			}
+
 			if (ps.serverErrorImageUrl !== undefined) {
 				set.serverErrorImageUrl = ps.serverErrorImageUrl;
 			}
diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
index 6fb3304468..b154f7a5b3 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div v-if="instance" :class="$style.root">
 	<div :class="[$style.main, $style.panel]">
-		<img :src="instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="$style.mainIcon"/>
+		<img :src="instance.sidebarLogoUrl || instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="instance.sidebarLogoUrl ? $style.wideIcon : $style.mainIcon"/>
 		<button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
 		<div :class="$style.mainFg">
 			<h1 :class="$style.mainTitle">
@@ -126,6 +126,14 @@ function showMenu(ev: MouseEvent) {
 	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
 }
 
+.wideIcon {
+	min-width: 85px;
+	max-width: 60%;
+	margin-top: -47px;
+	vertical-align: bottom;
+	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
+}
+
 .mainMenu {
 	position: absolute;
 	top: 16px;
diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index c378c0a0b8..6fbb23265c 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div class="_gaps_m">
 	<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
 		<div style="overflow: clip;">
-			<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
+			<img :src="instance.sidebarLogoUrl ?? instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
 			<div :class="$style.bannerName">
 				<b>{{ instance.name ?? host }}</b>
 			</div>
@@ -160,7 +160,7 @@ const initStats = () => misskeyApi('stats', {});
 .bannerIcon {
 	display: block;
 	margin: 16px auto 0 auto;
-	height: 64px;
+	max-height: 96px;
 	border-radius: var(--radius-sm);;
 }
 
diff --git a/packages/frontend/src/pages/admin/branding.vue b/packages/frontend/src/pages/admin/branding.vue
index 2e14aef0b9..bab93514c3 100644
--- a/packages/frontend/src/pages/admin/branding.vue
+++ b/packages/frontend/src/pages/admin/branding.vue
@@ -37,6 +37,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</template>
 					</MkInput>
 
+					<MkInput v-model="sidebarLogoUrl" type="url">
+						<template #prefix><i class="ti ti-link"></i></template>
+						<template #label>{{ i18n.ts._serverSettings.sidebarLogoUrl }}</template>
+						<template #caption>
+							<div>{{ i18n.ts._serverSettings.sidebarLogoDescription }}</div>
+							<div>({{ i18n.ts._serverSettings.sidebarLogoUsageExample }})</div>
+						</template>
+					</MkInput>
+
 					<MkInput v-model="bannerUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts.bannerUrl }}</template>
@@ -128,6 +137,7 @@ import MkColorInput from '@/components/MkColorInput.vue';
 import { host } from '@/config.js';
 
 const iconUrl = ref<string | null>(null);
+const sidebarLogoUrl = ref<string | null>(null);
 const app192IconUrl = ref<string | null>(null);
 const app512IconUrl = ref<string | null>(null);
 const bannerUrl = ref<string | null>(null);
@@ -146,6 +156,7 @@ const manifestJsonOverride = ref<string>('{}');
 async function init() {
 	const meta = await misskeyApi('admin/meta');
 	iconUrl.value = meta.iconUrl;
+	sidebarLogoUrl.value = meta.sidebarLogoUrl;
 	app192IconUrl.value = meta.app192IconUrl;
 	app512IconUrl.value = meta.app512IconUrl;
 	bannerUrl.value = meta.bannerUrl;
@@ -165,6 +176,7 @@ async function init() {
 function save() {
 	os.apiWithDialog('admin/update-meta', {
 		iconUrl: iconUrl.value,
+		sidebarLogoUrl: sidebarLogoUrl.value,
 		app192IconUrl: app192IconUrl.value,
 		app512IconUrl: app512IconUrl.value,
 		bannerUrl: bannerUrl.value,
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index a3f9d6cf2c..9a4ac6c192 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.top">
 		<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 		<button class="_button" :class="$style.instance" @click="openInstanceMenu">
-			<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
+			<img :src="instance.sidebarLogoUrl || instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="instance.sidebarLogoUrl ? $style.wideInstanceIcon : $style.instanceIcon"/>
 		</button>
 	</div>
 	<div :class="$style.middle">
@@ -121,6 +121,13 @@ function more() {
 	aspect-ratio: 1;
 }
 
+.wideInstanceIcon {
+	display: inline-block;
+	min-width: 38px;
+	max-width: 100%;
+	max-height: 80px;
+}
+
 .bottom {
 	position: sticky;
 	bottom: 0;
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 1f1fd37def..c30cf42624 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.top">
 			<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
-				<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
+				<img :src="instance.sidebarLogoUrl && !iconOnly ? instance.sidebarLogoUrl : instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="instance.sidebarLogoUrl && !iconOnly ? $style.wideInstanceIcon : $style.instanceIcon"/>
 			</button>
 		</div>
 		<div :class="$style.middle">
@@ -183,6 +183,13 @@ function more(ev: MouseEvent) {
 		aspect-ratio: 1;
 	}
 
+	.wideInstanceIcon {
+		display: inline-block;
+		min-width: 38px;
+		max-width: 100%;
+		max-height: 80px;
+	}
+
 	.bottom {
 		position: sticky;
 		bottom: 0;
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index d49df8e8ac..b8d0761225 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div class="divider"></div>
 	<div class="about">
 		<button v-click-anime class="item _button" @click="openInstanceMenu">
-			<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
+			<img :src="instance.sidebarLogoUrl && !iconOnly ? instance.sidebarLogoUrl : instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" :class="{ wideIcon: instance.sidebarLogoUrl && !iconOnly }" class="_ghost" />
 		</button>
 	</div>
 	<!--<MisskeyLogo class="misskey"/>-->
@@ -180,12 +180,15 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
 
 		> .item {
 			display: block;
-			width: 32px;
 			margin: 0 auto;
 
 			img {
 				display: block;
-				width: 100%;
+				width: 32px;
+				&.wideIcon {
+				    width: 80%;
+					margin: 0 auto;
+				}
 			}
 		}
 	}
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index 562c498190..10354043fc 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -5191,6 +5191,7 @@ export type operations = {
             infoImageUrl: string | null;
             notFoundImageUrl: string | null;
             iconUrl: string | null;
+            sidebarLogoUrl: string | null;
             app192IconUrl: string | null;
             app512IconUrl: string | null;
             enableEmail: boolean;
@@ -9704,6 +9705,7 @@ export type operations = {
           infoImageUrl?: string | null;
           notFoundImageUrl?: string | null;
           iconUrl?: string | null;
+          sidebarLogoUrl?: string | null;
           app192IconUrl?: string | null;
           app512IconUrl?: string | null;
           backgroundImageUrl?: string | null;