Add maskable icons for better iOS/Android PWA appearance

.changeset/add_maskable_icons_for_pwas.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add Android/iOS PWA-specific icon variants.

index.html

@@ -18,15 +18,15 @@
 
     <meta property="og:title" content="Sable" />
     <meta property="og:url" content="https://app.sable.moe" />
-    <meta property="og:image" content="./public/favicon.png" />
+    <meta property="og:image" content="/public/favicon.png" />
     <meta
       property="og:description"
       content="A Matrix client where you can enjoy the conversation using (not) simple, elegant and secure interface protected by e2ee with the power of open source. And colorful cosmetics. Because yes."
     />
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1a21" />
 
-    <link id="favicon" rel="shortcut icon" href="./public/favicon.png" />
+    <link id="favicon" rel="shortcut icon" href="/public/favicon.png" />
 
     <link rel="manifest" href="/manifest.json" />
     <meta name="mobile-web-app-capable" content="yes" />
@@ -35,55 +35,86 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 
+    <link rel="apple-touch-icon" href="/public/res/svg/cinny-logo-maskable.svg" />
+    <link
+      rel="apple-touch-icon"
+      sizes="36x36"
+      href="/public/res/logo-maskable/cinny-logo-maskable-36x36.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="48x48"
+      href="/public/res/logo-maskable/cinny-logo-maskable-48x48.png"
+    />
     <link
       rel="apple-touch-icon"
       sizes="57x57"
-      href="./public/res/apple/apple-touch-icon-57x57.png"
+      href="/public/res/logo-maskable/cinny-logo-maskable-57x57.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="60x60"
-      href="./public/res/apple/apple-touch-icon-60x60.png"
+      href="/public/res/logo-maskable/cinny-logo-maskable-60x60.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="72x72"
-      href="./public/res/apple/apple-touch-icon-72x72.png"
+      href="/public/res/logo-maskable/cinny-logo-maskable-72x72.png"
     />
     <link
       rel="apple-touch-icon"
-      sizes="76x76"
-      href="./public/res/apple/apple-touch-icon-76x76.png"
+      sizes="96x96"
+      href="/public/res/logo-maskable/cinny-logo-maskable-96x96.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="114x114"
-      href="./public/res/apple/apple-touch-icon-114x114.png"
+      href="/public/res/logo-maskable/cinny-logo-maskable-114x114.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="120x120"
-      href="./public/res/apple/apple-touch-icon-120x120.png"
+      href="/public/res/logo-maskable/cinny-logo-maskable-120x120.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="144x144"
-      href="./public/res/apple/apple-touch-icon-144x144.png"
+      href="/public/res/logo-maskable/cinny-logo-maskable-144x144.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="152x152"
-      href="./public/res/apple/apple-touch-icon-152x152.png"
+      href="/public/res/logo-maskable/cinny-logo-maskable-152x152.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="167x167"
-      href="./public/res/apple/apple-touch-icon-167x167.png"
+      href="/public/res/logo-maskable/cinny-logo-maskable-167x167.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="./public/res/apple/apple-touch-icon-180x180.png"
+      href="/public/res/logo-maskable/cinny-logo-maskable-180x180.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="192x192"
+      href="/public/res/logo-maskable/cinny-logo-maskable-192x192.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="256x256"
+      href="/public/res/logo-maskable/cinny-logo-maskable-256x256.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="384x384"
+      href="/public/res/logo-maskable/cinny-logo-maskable-384x384.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="512x512"
+      href="/public/res/logo-maskable/cinny-logo-maskable-512x512.png"
     />
   </head>
 

public/manifest.json

@@ -11,49 +11,166 @@
   "theme_color": "#1b1a21",
   "icons": [
     {
-      "src": "./public/android/android-chrome-36x36.png",
-      "sizes": "36x36",
-      "type": "image/png"
+      "src": "./public/res/svg/cinny-logo-maskable.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "maskable"
     },
     {
-      "src": "./public/android/android-chrome-48x48.png",
-      "sizes": "48x48",
-      "type": "image/png"
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "./public/android/android-chrome-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "./public/android/android-chrome-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png"
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "./public/android/android-chrome-144x144.png",
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-180x180.png",
+      "sizes": "180x180",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-167x167.png",
+      "sizes": "167x167",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-144x144.png",
       "sizes": "144x144",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "./public/android/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-120x120.png",
+      "sizes": "120x120",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "./public/android/android-chrome-256x256.png",
-      "sizes": "256x256",
-      "type": "image/png"
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-114x114.png",
+      "sizes": "114x114",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "./public/android/android-chrome-384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-76x76.png",
+      "sizes": "76x76",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-60x60.png",
+      "sizes": "60x60",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-57x57.png",
+      "sizes": "57x57",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "./public/android/android-chrome-512x512.png",
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./public/res/logo-maskable/cinny-logo-maskable-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./public/res/svg/cinny-logo.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "./public/res/logo/cinny-logo-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./public/res/logo/cinny-logo-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./public/res/logo/cinny-logo-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./public/res/logo/cinny-logo-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./public/res/logo/cinny-logo-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./public/res/logo/cinny-logo-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./public/res/logo/cinny-logo-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./public/res/logo/cinny-logo-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "any"
     }
   ]
 }

src/app/features/settings/about/About.tsx

@@ -3,7 +3,7 @@ import { Box, Text, IconButton, Icon, Icons, Scroll, Button, config, toRem, Spin
 import { Page, PageContent, PageHeader } from '$components/page';
 import { SequenceCard } from '$components/sequence-card';
 import { SettingTile } from '$components/setting-tile';
-import CinnySVG from '$public/res/svg/cinny.svg';
+import CinnySVG from '$public/res/svg/cinny-logo.svg';
 import { clearCacheAndReload } from '$client/initMatrix';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { SequenceCardStyle } from '$features/settings/styles.css';

src/app/pages/client/BackgroundNotifications.tsx

@@ -33,7 +33,7 @@ import {
 import { NotificationType, StateEvent } from '$types/matrix/room';
 import { createLogger } from '$utils/debug';
 import { createDebugLogger } from '$utils/debugLogger';
-import LogoSVG from '$public/res/svg/cinny.svg';
+import LogoSVG from '$public/res/svg/cinny-logo.svg';
 import { nicknamesAtom } from '$state/nicknames';
 import {
   buildRoomMessageNotification,