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>

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."

locales/index.d.ts

@@ -5792,6 +5792,18 @@ export interface Locale extends ILocale {
          * 解像度は必ず{resolution}である必要があります。
          */
         "appIconResolutionMustBe": ParameterizedString<"resolution">;
+        /**
+         * ロゴURL
+         */
+        "sidebarLogoUrl": string;
+        /**
+         * 高精細、ダイナミック幅のシナリオで通常のアイコンの代わりに使用するロゴを指定します。
+         */
+        "sidebarLogoDescription": string;
+        /**
+         * 例：サイドバー、訪問者用、「情報」ページ
+         */
+        "sidebarLogoUsageExample": string;
         /**
          * manifest.jsonのオーバーライド
          */

locales/ja-JP.yml

@@ -1463,6 +1463,9 @@ _serverSettings:
   appIconUsageExample: "例: PWAや、スマートフォンのホーム画面にブックマークとして追加された時など"
   appIconStyleRecommendation: "円形もしくは角丸にクロップされる場合があるため、塗り潰された余白のある背景を持つことが推奨されます。"
   appIconResolutionMustBe: "解像度は必ず{resolution}である必要があります。"
+  sidebarLogoUrl: "ロゴURL"
+  sidebarLogoDescription: "高精細、ダイナミック幅のシナリオで通常のアイコンの代わりに使用するロゴを指定します。"
+  sidebarLogoUsageExample:  "例：サイドバー、訪問者用、「情報」ページ"
   manifestJsonOverride: "manifest.jsonのオーバーライド"
   shortName: "略称"
   shortNameDescription: "サーバーの正式名称が長い場合に、代わりに表示することのできる略称や通称。"

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"`);
+    }
+}

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,

packages/backend/src/models/Meta.ts

@@ -139,6 +139,12 @@ export class MiMeta {
 	})
 	public app512IconUrl: string | null;
 
+	@Column('varchar', {
+		length: 1024,
+		nullable: true,
+	})
+	public sidebarLogoUrl: string | null;
+	
 	@Column('varchar', {
 		length: 1024,
 		nullable: true,

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,

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;
 			}

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;

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);;
 }
 

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,

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;

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;

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;
+				}
 			}
 		}
 	}

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;