New translations ja-jp.yml (Korean (Gyeongsang))

* refactor(frontend): intl-stringの処理のパフォーマンス向上

* ✌️

.github/workflows/api-misskey-js.yml

@@ -22,7 +22,7 @@ jobs:
         uses: pnpm/action-setup@v4.1.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version-file: '.node-version'
           cache: 'pnpm'

.github/workflows/changelog-check.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Checkout head
         uses: actions/checkout@v4.2.2
       - name: Setup Node.js
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version-file: '.node-version'
 

.github/workflows/check-misskey-js-autogen.yml

@@ -29,7 +29,7 @@ jobs:
 
       - name: setup node
         id: setup-node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version-file: '.node-version'
           cache: pnpm

.github/workflows/get-api-diff.yml

@@ -33,7 +33,7 @@ jobs:
     - name: Setup pnpm
       uses: pnpm/action-setup@v4.1.0
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4.2.0
+      uses: actions/setup-node@v4.3.0
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'

.github/workflows/lint.yml

@@ -38,7 +38,7 @@ jobs:
         submodules: true
     - name: Setup pnpm
       uses: pnpm/action-setup@v4.1.0
-    - uses: actions/setup-node@v4.2.0
+    - uses: actions/setup-node@v4.3.0
       with:
         node-version-file: '.node-version'
         cache: 'pnpm'
@@ -69,13 +69,13 @@ jobs:
         submodules: true
     - name: Setup pnpm
       uses: pnpm/action-setup@v4.1.0
-    - uses: actions/setup-node@v4.2.0
+    - uses: actions/setup-node@v4.3.0
       with:
         node-version-file: '.node-version'
         cache: 'pnpm'
     - run: pnpm i --frozen-lockfile
     - name: Restore eslint cache
-      uses: actions/cache@v4.2.2
+      uses: actions/cache@v4.2.3
       with:
         path: ${{ env.eslint-cache-path }}
         key: eslint-${{ env.eslint-cache-version }}-${{ matrix.workspace }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ github.ref_name }}-${{ github.sha }}
@@ -99,7 +99,7 @@ jobs:
         submodules: true
     - name: Setup pnpm
       uses: pnpm/action-setup@v4.1.0
-    - uses: actions/setup-node@v4.2.0
+    - uses: actions/setup-node@v4.3.0
       with:
         node-version-file: '.node-version'
         cache: 'pnpm'

.github/workflows/locale.yml

@@ -20,7 +20,7 @@ jobs:
         submodules: true
     - name: Setup pnpm
       uses: pnpm/action-setup@v4.1.0
-    - uses: actions/setup-node@v4.2.0
+    - uses: actions/setup-node@v4.3.0
       with:
         node-version-file: '.node-version'
         cache: 'pnpm'

.github/workflows/on-release-created.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4.1.0
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'

.github/workflows/storybook.yml

@@ -45,7 +45,7 @@ jobs:
     - name: Setup pnpm
       uses: pnpm/action-setup@v4.1.0
     - name: Use Node.js 20.x
-      uses: actions/setup-node@v4.2.0
+      uses: actions/setup-node@v4.3.0
       with:
         node-version-file: '.node-version'
         cache: 'pnpm'

.github/workflows/test-backend.yml

@@ -62,7 +62,7 @@ jobs:
           fi
         done
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4.2.0
+      uses: actions/setup-node@v4.3.0
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'
@@ -109,7 +109,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4.1.0
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'

.github/workflows/test-federation.yml

@@ -44,7 +44,7 @@ jobs:
             fi
           done
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'

.github/workflows/test-frontend.yml

@@ -38,7 +38,7 @@ jobs:
     - name: Setup pnpm
       uses: pnpm/action-setup@v4.1.0
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4.2.0
+      uses: actions/setup-node@v4.3.0
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'
@@ -93,7 +93,7 @@ jobs:
     - name: Setup pnpm
       uses: pnpm/action-setup@v4.1.0
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4.2.0
+      uses: actions/setup-node@v4.3.0
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'

.github/workflows/test-misskey-js.yml

@@ -33,7 +33,7 @@ jobs:
         uses: pnpm/action-setup@v4.1.0
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'

.github/workflows/test-production.yml

@@ -26,7 +26,7 @@ jobs:
     - name: Setup pnpm
       uses: pnpm/action-setup@v4.1.0
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4.2.0
+      uses: actions/setup-node@v4.3.0
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'

.github/workflows/validate-api-json.yml

@@ -27,7 +27,7 @@ jobs:
     - name: Setup pnpm
       uses: pnpm/action-setup@v4.1.0
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4.2.0
+      uses: actions/setup-node@v4.3.0
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'

CHANGELOG.md

@@ -1,4 +1,4 @@
-## 2025.3.2
+## 2025.4.0
 
 ### General
 - Feat: チャットがリニューアルして復活しました(beta)
@@ -39,6 +39,9 @@
 - Enhance: プラグインの管理が強化されました
   - インストール/アンインストール/設定の変更時にリロード不要になりました
 - Enhance: ログアウト時、ブラウザに保存されたWebクライアントのデータを全て消去するように
+- Enhance: デッキUIでカラム間のマージンを設定できるように
+- Enhance: デッキUIでデッキメニューの位置を設定できるように
+- Enhance: デッキUIでナビゲーションバーの位置を設定できるように
 - Enhance: アイコンのスクロール追従を無効化してパフォーマンス向上できるように
 - Enhance: CWの注釈テキストが入力されていない場合, Postボタンを非アクティブに
 - Enhance: CWを無効にした場合, 注釈テキストが最大入力文字数を超えていても投稿できるように
@@ -52,8 +55,7 @@
 - Fix: 読み込み直後にスクロールしようとすると途中で止まる場合があるのを修正
 - Fix: テーマ切り替え時に一部の色が変わらない問題を修正
 - NOTE: 構造上クラシックUIを新しいデザインシステムに移行することが困難なため、クラシックUIが削除されました
-  - デッキUIでカラムを中央寄せにし、メインカラムの左右にウィジェットカラムを配置することである程度クラシックUIを再現できます
-	  - また、デッキでナビゲーションバーを上部に表示するオプションを実装予定です
+  - デッキUIでカラムを中央寄せにし、メインカラムの左右にウィジェットカラムを配置し、ナビゲーションバーを上部に表示することである程度クラシックUIを再現できます
 
 ### Server
 - Enhance 全体的なパフォーマンス向上

locales/ar-SA.yml

@@ -1240,7 +1240,6 @@ _theme:
     shadow: "الظل"
     navBg: "خلفية الشريط الجانبي"
     navFg: "نص الشريط الجانبي"
-    navHoverFg: "نص الشريط الجانبي (عند التمرير فوقه)"
     link: "رابط"
     hashtag: "وسم"
     mention: "أشر الى"

locales/bn-BD.yml

@@ -998,7 +998,6 @@ _theme:
     header: "হেডার"
     navBg: "সাইডবারের পটভূমি"
     navFg: "সাইডবারের পাঠ্য"
-    navHoverFg: "সাইডবারের পাঠ্য (হভার)"
     navActive: "সাইডবারের পাঠ্য (অ্যাকটিভ)"
     navIndicator: "সাইডবারের ইনডিকেটর"
     link: "লিংক"
@@ -1021,11 +1020,8 @@ _theme:
     buttonHoverBg: "বাটনের পটভূমি (হভার)"
     inputBorder: "ইনপুট ফিল্ডের বর্ডার"
     driveFolderBg: "ড্রাইভ ফোল্ডারের পটভূমি"
-    wallpaperOverlay: "ওয়ালপেপার ওভারলে"
     badge: "ব্যাজ"
     messageBg: "চ্যাটের পটভূমি"
-    accentDarken: "অ্যাকসেন্ট (গাঢ়)"
-    accentLighten: "অ্যাকসেন্ট (হাল্কা)"
     fgHighlighted: "হাইলাইট করা পাঠ্য"
 _sfx:
   note: "নোটগুলি"

locales/ca-ES.yml

@@ -1128,7 +1128,7 @@ pleaseAgreeAllToContinue: "Has d'acceptar tots els camps de dalt per poder conti
 continue: "Continuar"
 preservedUsernames: "Noms d'usuaris reservats"
 preservedUsernamesDescription: "Llistat de noms d'usuaris que no es poden fer servir separats per salts de linia. Aquests noms d'usuaris no estaran disponibles quan es creï un compte d'usuari normal, però els administradors els poden fer servir per crear comptes manualment. Per altre banda els comptes ja creats amb aquests noms d'usuari no es veure'n afectats."
-createNoteFromTheFile: "Compon una nota des d'aquest fitxer"
+createNoteFromTheFile: "Escriu una nota incloent aquest fitxer"
 archive: "Arxiu"
 archived: "Arxivat"
 unarchive: "Desarxivar"
@@ -1336,6 +1336,9 @@ chat: "Xat"
 migrateOldSettings: "Migració de la configuració antiga "
 migrateOldSettings_description: "Normalment això es fa automàticament, però si la transició no es fa, el procés es pot iniciar manualment. S'esborrarà la configuració actual."
 compress: "Comprimir "
+right: "Dreta"
+bottom: "A baix "
+top: "A dalt "
 _chat:
   noMessagesYet: "Encara no tens missatges "
   newMessage: "Missatge nou"
@@ -2119,7 +2122,6 @@ _theme:
     header: "Capçalera"
     navBg: "Fons de la barra lateral"
     navFg: "Text de la barra lateral"
-    navHoverFg: "Text barra lateral (en passar per sobre)"
     navActive: "Text barra lateral (actiu)"
     navIndicator: "Indicador barra lateral"
     link: "Enllaç"
@@ -2142,11 +2144,8 @@ _theme:
     buttonHoverBg: "Fons botó (en passar-hi per sobre)"
     inputBorder: "Contorn del cap d'introducció "
     driveFolderBg: "Fons de la carpeta Disc"
-    wallpaperOverlay: "Superposició del fons de pantalla "
     badge: "Insígnia "
     messageBg: "Fons del xat"
-    accentDarken: "Accent (fosc)"
-    accentLighten: "Accent (clar)"
     fgHighlighted: "Text ressaltat"
 _sfx:
   note: "Notes"
@@ -2593,6 +2592,9 @@ _notification:
 _deck:
   alwaysShowMainColumn: "Mostrar sempre la columna principal"
   columnAlign: "Alinea les columnes"
+  columnGap: "Espai entre columnes"
+  deckMenuPosition: "Posició del menú del tauler"
+  navbarPosition: "Posició de la barra de navegació "
   addColumn: "Afig una columna"
   newNoteNotificationSettings: "Configuració de notificacions per a notes noves"
   configureColumn: "Configuració de columnes"

locales/cs-CZ.yml

@@ -1626,7 +1626,6 @@ _theme:
     header: "Nadpis"
     navBg: "Pozadí postranního panelu"
     navFg: "Text na postranním panelu"
-    navHoverFg: "Text na postranním panelu (Hover)"
     navActive: "Text na postranním panelu (Aktivní)"
     navIndicator: "Indikátor na postranním panelu"
     link: "Odkaz"
@@ -1649,11 +1648,8 @@ _theme:
     buttonHoverBg: "Pozadí tlačítka (Hover)"
     inputBorder: "Ohraničení vstupního pole"
     driveFolderBg: "Pozadí složky disku"
-    wallpaperOverlay: "Překrytí tapety"
     badge: "Odznak"
     messageBg: "Pozadí chatu"
-    accentDarken: "Akcent (Ztmavený)"
-    accentLighten: "Akcent (Zesvětlený)"
     fgHighlighted: "Zvýrazněný text"
 _sfx:
   note: "Poznámky"

locales/de-DE.yml

@@ -962,8 +962,8 @@ cropImageAsk: "Möchtest du das Bild zuschneiden?"
 cropYes: "Zuschneiden"
 cropNo: "Unbearbeitet verwenden"
 file: "Datei"
-recentNHours: "Letzten {n} Stunden"
-recentNDays: "Letzten {n} Tage"
+recentNHours: "Letzte {n} Stunden"
+recentNDays: "Letzte {n} Tage"
 noEmailServerWarning: "Es ist kein Email-Server konfiguriert."
 thereIsUnresolvedAbuseReportWarning: "Es liegen ungelöste Meldungen vor."
 recommended: "Empfehlung"
@@ -971,7 +971,7 @@ check: "Check"
 driveCapOverrideLabel: "Die Drive-Kapazität dieses Nutzers verändern"
 driveCapOverrideCaption: "Gib einen Wert von 0 oder weniger ein, um die Kapazität auf den Standard zurückzusetzen."
 requireAdminForView: "Melde dich mit einem Administratorkonto an, um dies einzusehen."
-isSystemAccount: "Ein Benutzerkonto, dass durch das System erstellt und automatisch kontrolliert wird."
+isSystemAccount: "Ein Benutzerkonto, das durch das System erstellt und automatisch verwaltet wird."
 typeToConfirm: "Bitte gib zur Bestätigung {x} ein"
 deleteAccount: "Benutzerkonto löschen"
 document: "Dokumentation"
@@ -2105,7 +2105,6 @@ _theme:
     header: "Kopfzeile"
     navBg: "Hintergrund der Seitenleiste"
     navFg: "Text der Seitenleiste"
-    navHoverFg: "Text der Seitenleiste (Mouseover)"
     navActive: "Text der Seitenleiste (Aktiv)"
     navIndicator: "Indikator der Seitenleiste"
     link: "Link"
@@ -2128,11 +2127,8 @@ _theme:
     buttonHoverBg: "Hintergrund von Schaltflächen (Mouseover)"
     inputBorder: "Rahmen von Eingabefeldern"
     driveFolderBg: "Hintergrund von Drive-Ordnern"
-    wallpaperOverlay: "Hintergrundbild-Overlay"
     badge: "Wappen"
     messageBg: "Hintergrund von Chats"
-    accentDarken: "Akzent (Verdunkelt)"
-    accentLighten: "Akzent (Erhellt)"
     fgHighlighted: "Hervorgehobener Text"
 _sfx:
   note: "Notizen"

locales/en-US.yml

@@ -345,7 +345,7 @@ emptyDrive: "Your Drive is empty"
 emptyFolder: "This folder is empty"
 unableToDelete: "Unable to delete"
 inputNewFileName: "Enter a new filename"
-inputNewDescription: "Enter new caption"
+inputNewDescription: "Enter new alt text"
 inputNewFolderName: "Enter a new folder name"
 circularReferenceFolder: "The destination folder is a subfolder of the folder you wish to move."
 hasChildFilesOrFolders: "Since this folder is not empty, it can not be deleted."
@@ -643,8 +643,8 @@ disablePlayer: "Close video player"
 expandTweet: "Expand post"
 themeEditor: "Theme editor"
 description: "Description"
-describeFile: "Add caption"
-enterFileDescription: "Enter caption"
+describeFile: "Add alt text"
+enterFileDescription: "Enter alt text"
 author: "Author"
 leaveConfirm: "There are unsaved changes. Do you want to discard them?"
 manage: "Management"
@@ -1014,7 +1014,7 @@ sendPushNotificationReadMessageCaption: "This may increase the power consumption
 windowMaximize: "Maximize"
 windowMinimize: "Minimize"
 windowRestore: "Restore"
-caption: "Caption"
+caption: "Alt text"
 loggedInAsBot: "Currently logged in as bot"
 tools: "Tools"
 cannotLoad: "Unable to load"
@@ -1336,6 +1336,9 @@ chat: "Chat"
 migrateOldSettings: "Migrate old client settings"
 migrateOldSettings_description: "This should be done automatically but if for some reason the migration was not successful, you can trigger the migration process yourself manually. The current configuration information will be overwritten."
 compress: "Compress"
+right: "Right"
+bottom: "Bottom"
+top: "Top"
 _chat:
   noMessagesYet: "No messages yet"
   newMessage: "New message"
@@ -2119,7 +2122,6 @@ _theme:
     header: "Header"
     navBg: "Sidebar background"
     navFg: "Sidebar text"
-    navHoverFg: "Sidebar text (Hover)"
     navActive: "Sidebar text (Active)"
     navIndicator: "Sidebar indicator"
     link: "Link"
@@ -2142,11 +2144,8 @@ _theme:
     buttonHoverBg: "Button background (Hover)"
     inputBorder: "Input field border"
     driveFolderBg: "Drive folder background"
-    wallpaperOverlay: "Wallpaper overlay"
     badge: "Badge"
     messageBg: "Chat background"
-    accentDarken: "Accent (Darkened)"
-    accentLighten: "Accent (Lightened)"
     fgHighlighted: "Highlighted Text"
 _sfx:
   note: "New note"
@@ -2593,6 +2592,9 @@ _notification:
 _deck:
   alwaysShowMainColumn: "Always show main column"
   columnAlign: "Align columns"
+  columnGap: "Margin between columns"
+  deckMenuPosition: "Deck menu position"
+  navbarPosition: "Navigation bar position"
   addColumn: "Add column"
   newNoteNotificationSettings: "Notification setting for new notes"
   configureColumn: "Column settings"
@@ -2606,7 +2608,7 @@ _deck:
   newProfile: "New profile"
   deleteProfile: "Delete profile"
   introduction: "Create the perfect interface for you by arranging columns freely!"
-  introduction2: "Click on the + on the right of the screen to add new colums whenever you want."
+  introduction2: "Click on the + on the right of the screen to add new columns whenever you want."
   widgetsIntroduction: "Please select \"Edit widgets\" in the column menu and add a widget."
   useSimpleUiForNonRootPages: "Use simple UI for navigated pages"
   usedAsMinWidthWhenFlexible: "Minimum width will be used for this when the \"Auto-adjust width\" option is enabled"

locales/es-ES.yml

@@ -1295,6 +1295,7 @@ messageToFollower: "Mensaje a seguidores"
 target: "Para"
 federationSpecified: "Este servidor opera en una federación de listas blancas. No puede interactuar con otros servidores que no sean los especificados por el administrador."
 federationDisabled: "La federación está desactivada en este servidor. No puede interactuar con usuarios de otros servidores"
+preferences: "Preferencias"
 postForm: "Formulario"
 information: "Información"
 _chat:
@@ -1964,7 +1965,6 @@ _theme:
     header: "Cabezal"
     navBg: "Fondo de la barra lateral"
     navFg: "Texto de la barra lateral"
-    navHoverFg: "Texto de la barra lateral (hover)"
     navActive: "Texto de la barra lateral (activo)"
     navIndicator: "Indicador de la barra lateral"
     link: "Vínculo"
@@ -1987,11 +1987,8 @@ _theme:
     buttonHoverBg: "Fondo de botón (hover)"
     inputBorder: "Borde de los campos de entrada"
     driveFolderBg: "Fondo de capeta del drive"
-    wallpaperOverlay: "Transparencia del fondo de pantalla"
     badge: "Medalla"
     messageBg: "Fondo de chat"
-    accentDarken: "Acento (oscuro)"
-    accentLighten: "Acento (claro)"
     fgHighlighted: "Texto resaltado"
 _sfx:
   note: "Notas"

locales/fr-FR.yml

@@ -1816,7 +1816,6 @@ _theme:
     header: "Entête"
     navBg: "Fond de la barre latérale"
     navFg: "Texte de la barre latérale"
-    navHoverFg: "Texte de la barre latérale (survolé)"
     navActive: "Texte de la barre latérale (actif)"
     navIndicator: "Indicateur de barre latérale"
     link: "Lien"
@@ -1839,11 +1838,8 @@ _theme:
     buttonHoverBg: "Arrière-plan du bouton (survolé)"
     inputBorder: "Cadre de la zone de texte"
     driveFolderBg: "Arrière-plan du dossier de disque"
-    wallpaperOverlay: "Superposition de fond d'écran"
     badge: "Badge"
     messageBg: "Arrière plan de la discussion"
-    accentDarken: "Plus sombre"
-    accentLighten: "Plus clair"
     fgHighlighted: "Texte mis en évidence"
 _sfx:
   note: "Nouvelle note"

locales/id-ID.yml

@@ -1931,7 +1931,6 @@ _theme:
     header: "Header"
     navBg: "Latar belakang bilah samping"
     navFg: "Teks bilah samping"
-    navHoverFg: "Teks bilah samping (Mengambang)"
     navActive: "Teks bilah samping (Aktif)"
     navIndicator: "Indikator bilah samping"
     link: "Tautan"
@@ -1954,11 +1953,8 @@ _theme:
     buttonHoverBg: "Latar belakang tombol (Mengambang)"
     inputBorder: "Batas bidang masukan"
     driveFolderBg: "Latar belakang folder drive"
-    wallpaperOverlay: "Lapisan wallpaper"
     badge: "Lencana"
     messageBg: "Latar belakang obrolan"
-    accentDarken: "Aksen (Gelap)"
-    accentLighten: "Aksen (Terang)"
     fgHighlighted: "Teks yang disorot"
 _sfx:
   note: "Catatan"

locales/index.d.ts

@@ -5362,6 +5362,18 @@ export interface Locale extends ILocale {
      * 圧縮
      */
     "compress": string;
+    /**
+     * 右
+     */
+    "right": string;
+    /**
+     * 下
+     */
+    "bottom": string;
+    /**
+     * 上
+     */
+    "top": string;
     "_chat": {
         /**
          * まだメッセージはありません
@@ -5497,7 +5509,7 @@ export interface Locale extends ILocale {
          */
         "thisUserAllowsChatOnlyFromFollowers": string;
         /**
-         * このユーザーはフォローしているユーザーからのみチャットを受け付けています。
+         * このユーザーは、このユーザーがフォローしているユーザーからのみチャットを受け付けています。
          */
         "thisUserAllowsChatOnlyFromFollowing": string;
         /**
@@ -8223,23 +8235,19 @@ export interface Locale extends ILocale {
              */
             "header": string;
             /**
-             * サイドバーの背景
+             * ナビゲーションバーの背景
              */
             "navBg": string;
             /**
-             * サイドバーの文字
+             * ナビゲーションバーの文字
              */
             "navFg": string;
             /**
-             * サイドバー文字(ホバー)
-             */
-            "navHoverFg": string;
-            /**
-             * サイドバー文字(アクティブ)
+             * ナビゲーションバー文字(アクティブ)
              */
             "navActive": string;
             /**
-             * サイドバーのインジケーター
+             * ナビゲーションバーのインジケーター
              */
             "navIndicator": string;
             /**
@@ -8259,7 +8267,7 @@ export interface Locale extends ILocale {
              */
             "mentionMe": string;
             /**
-             * Renote
+             * リノート
              */
             "renote": string;
             /**
@@ -8322,10 +8330,6 @@ export interface Locale extends ILocale {
              * ドライブフォルダーの背景
              */
             "driveFolderBg": string;
-            /**
-             * 壁紙のオーバーレイ
-             */
-            "wallpaperOverlay": string;
             /**
              * バッジ
              */
@@ -8334,14 +8338,6 @@ export interface Locale extends ILocale {
              * チャットの背景
              */
             "messageBg": string;
-            /**
-             * アクセント (暗め)
-             */
-            "accentDarken": string;
-            /**
-             * アクセント (明るめ)
-             */
-            "accentLighten": string;
             /**
              * 強調された文字
              */
@@ -10065,6 +10061,18 @@ export interface Locale extends ILocale {
          * カラムの寄せ
          */
         "columnAlign": string;
+        /**
+         * カラム間のマージン
+         */
+        "columnGap": string;
+        /**
+         * デッキメニューの位置
+         */
+        "deckMenuPosition": string;
+        /**
+         * ナビゲーションバーの位置
+         */
+        "navbarPosition": string;
         /**
          * カラムを追加
          */
@@ -10118,7 +10126,7 @@ export interface Locale extends ILocale {
          */
         "introduction": string;
         /**
-         * 画面の右にある + を押して、いつでもカラムを追加できます。
+         * カラムを追加するには、画面の + をクリックします。
          */
         "introduction2": string;
         /**

locales/it-IT.yml

@@ -2118,14 +2118,13 @@ _theme:
     header: "Intestazione"
     navBg: "Sfondo della barra laterale"
     navFg: "Testo della barra laterale"
-    navHoverFg: "Testo della barra laterale (al passaggio del mouse)"
     navActive: "Testo della barra laterale (attivo)"
     navIndicator: "Indicatore di barra laterale"
     link: "Link"
     hashtag: "Hashtag"
     mention: "Menzioni"
     mentionMe: "Menzioni (di me)"
-    renote: "Rinota"
+    renote: "Renota"
     modalBg: "Sfondo modale."
     divider: "Interruzione di linea"
     scrollbarHandle: "Maniglie della barra di scorrimento"
@@ -2141,11 +2140,8 @@ _theme:
     buttonHoverBg: "Sfondo del pulsante (sorvolato)"
     inputBorder: "Inquadra casella di testo"
     driveFolderBg: "Sfondo della cartella di disco"
-    wallpaperOverlay: "Sovrapposizione dello sfondo"
     badge: "Distintivo"
     messageBg: "Sfondo della chat"
-    accentDarken: "Temi (scuri)"
-    accentLighten: "Temi (luminosi)"
     fgHighlighted: "Testo in evidenza."
 _sfx:
   note: "Nota"

locales/ja-JP.yml

@@ -1336,6 +1336,9 @@ chat: "チャット"
 migrateOldSettings: "旧設定情報を移行"
 migrateOldSettings_description: "通常これは自動で行われていますが、何らかの理由により上手く移行されなかった場合は手動で移行処理をトリガーできます。現在の設定情報は上書きされます。"
 compress: "圧縮"
+right: "右"
+bottom: "下"
+top: "上"
 
 _chat:
   noMessagesYet: "まだメッセージはありません"
@@ -1371,7 +1374,7 @@ _chat:
   cannotChatWithTheUser_description: "チャットが使えない状態になっているか、相手がチャットを開放していません。"
   chatWithThisUser: "チャットする"
   thisUserAllowsChatOnlyFromFollowers: "このユーザーはフォロワーからのみチャットを受け付けています。"
-  thisUserAllowsChatOnlyFromFollowing: "このユーザーはフォローしているユーザーからのみチャットを受け付けています。"
+  thisUserAllowsChatOnlyFromFollowing: "このユーザーは、このユーザーがフォローしているユーザーからのみチャットを受け付けています。"
   thisUserAllowsChatOnlyFromMutualFollowing: "このユーザーは相互フォローのユーザーからのみチャットを受け付けています。"
   thisUserNotAllowedChatAnyone: "このユーザーは誰からもチャットを受け付けていません。"
   chatAllowedUsers: "チャットを許可する相手"
@@ -2158,16 +2161,15 @@ _theme:
     panel: "パネル"
     shadow: "影"
     header: "ヘッダー"
-    navBg: "サイドバーの背景"
-    navFg: "サイドバーの文字"
-    navHoverFg: "サイドバー文字(ホバー)"
-    navActive: "サイドバー文字(アクティブ)"
-    navIndicator: "サイドバーのインジケーター"
+    navBg: "ナビゲーションバーの背景"
+    navFg: "ナビゲーションバーの文字"
+    navActive: "ナビゲーションバー文字(アクティブ)"
+    navIndicator: "ナビゲーションバーのインジケーター"
     link: "リンク"
     hashtag: "ハッシュタグ"
     mention: "メンション"
     mentionMe: "あなた宛てメンション"
-    renote: "Renote"
+    renote: "リノート"
     modalBg: "モーダルの背景"
     divider: "分割線"
     scrollbarHandle: "スクロールバーの取っ手"
@@ -2183,11 +2185,8 @@ _theme:
     buttonHoverBg: "ボタンの背景 (ホバー)"
     inputBorder: "入力ボックスの縁取り"
     driveFolderBg: "ドライブフォルダーの背景"
-    wallpaperOverlay: "壁紙のオーバーレイ"
     badge: "バッジ"
     messageBg: "チャットの背景"
-    accentDarken: "アクセント (暗め)"
-    accentLighten: "アクセント (明るめ)"
     fgHighlighted: "強調された文字"
 
 _sfx:
@@ -2662,6 +2661,9 @@ _notification:
 _deck:
   alwaysShowMainColumn: "常にメインカラムを表示"
   columnAlign: "カラムの寄せ"
+  columnGap: "カラム間のマージン"
+  deckMenuPosition: "デッキメニューの位置"
+  navbarPosition: "ナビゲーションバーの位置"
   addColumn: "カラムを追加"
   newNoteNotificationSettings: "新着ノート通知の設定"
   configureColumn: "カラムの設定"
@@ -2675,7 +2677,7 @@ _deck:
   newProfile: "新規プロファイル"
   deleteProfile: "プロファイルを削除"
   introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう！"
-  introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。"
+  introduction2: "カラムを追加するには、画面の + をクリックします。"
   widgetsIntroduction: "カラムのメニューから、「ウィジェットの編集」を選択してウィジェットを追加してください"
   useSimpleUiForNonRootPages: "非ルートページは簡易UIで表示"
   usedAsMinWidthWhenFlexible: "「幅を自動調整」が有効の場合、これが幅の最小値となります"

locales/ja-KS.yml

@@ -2007,7 +2007,6 @@ _theme:
     header: "ヘッダー"
     navBg: "サイドバーの背景"
     navFg: "サイドバーの文字"
-    navHoverFg: "サイドバー文字(ホバー)"
     navActive: "サイドバー文字(アクティブ)"
     navIndicator: "サイドバーのインジケーター"
     link: "リンク"
@@ -2030,11 +2029,8 @@ _theme:
     buttonHoverBg: "ボタンの背景 (ホバー)"
     inputBorder: "入力ボックスの縁取り"
     driveFolderBg: "ドライブフォルダーの背景"
-    wallpaperOverlay: "壁紙のオーバーレイ"
     badge: "バッジ"
     messageBg: "チャットの背景"
-    accentDarken: "アクセント (暗め)"
-    accentLighten: "アクセント (明るめ)"
     fgHighlighted: "強調されとる文字"
 _sfx:
   note: "ノート"

locales/ko-GS.yml

@@ -747,6 +747,7 @@ _theme:
   description: "설멩"
   keys:
     mention: "멘션"
+    renote: "리노트"
 _sfx:
   note: "새 노트"
   notification: "알림"

locales/ko-KR.yml

@@ -2067,7 +2067,6 @@ _theme:
     header: "헤더"
     navBg: "사이드바 배경"
     navFg: "사이드바 텍스트"
-    navHoverFg: "사이드바 텍스트 (호버)"
     navActive: "사이드바 텍스트 (활성)"
     navIndicator: "사이드바 인디케이터"
     link: "링크"
@@ -2090,11 +2089,8 @@ _theme:
     buttonHoverBg: "버튼 배경 (호버)"
     inputBorder: "입력 필드 테두리"
     driveFolderBg: "드라이브 폴더 배경"
-    wallpaperOverlay: "배경화면 오버레이"
     badge: "배지"
     messageBg: "대화 배경"
-    accentDarken: "강조 색상 (어두움)"
-    accentLighten: "강조 색상 (밝음)"
     fgHighlighted: "강조된 텍스트"
 _sfx:
   note: "새 노트"

locales/pl-PL.yml

@@ -1212,7 +1212,6 @@ _theme:
     header: "Nagłówek"
     navBg: "Tło paska bocznego"
     navFg: "Tekst paska bocznego"
-    navHoverFg: "Tekst paska bocznego (zbliżenie)"
     navActive: "Tekst paska bocznego (aktywny)"
     navIndicator: "Wskaźnik paska bocznego"
     link: "Odnośnik"
@@ -1235,11 +1234,8 @@ _theme:
     buttonHoverBg: "Tło przycisku (po najechaniu)"
     inputBorder: "Obramowanie pola wejścia"
     driveFolderBg: "Tło folderu na dysku"
-    wallpaperOverlay: "Nakładka tapety"
     badge: "Odznaka"
     messageBg: "Tło czatu"
-    accentDarken: "Akcent (ciemniejszy)"
-    accentLighten: "Akcent (jaśniejszy)"
     fgHighlighted: "Wyróżniony tekst"
 _sfx:
   note: "Wpisy"

locales/pt-PT.yml

@@ -1997,7 +1997,6 @@ _theme:
     header: "Cabeçalho"
     navBg: "Plano de fundo da barra lateral"
     navFg: "Texto da barra lateral"
-    navHoverFg: "Texto da coluna lateral (Selecionado)"
     navActive: "Texto da coluna lateral (Ativa)"
     navIndicator: "Indicador da coluna lateral"
     link: "Link"
@@ -2020,11 +2019,8 @@ _theme:
     buttonHoverBg: "Plano de fundo de botão (Selecionado)"
     inputBorder: "Borda de campo digitável"
     driveFolderBg: "Plano de fundo da pasta no Drive"
-    wallpaperOverlay: "Sobreposição do papel de parede."
     badge: "Emblema"
     messageBg: "Plano de fundo do chat"
-    accentDarken: "Cor de destaque (Escurecida)"
-    accentLighten: "Cor de destaque (Esclarecida)"
     fgHighlighted: "Texto Destacado"
 _sfx:
   note: "Posts"

locales/ru-RU.yml

@@ -1689,7 +1689,6 @@ _theme:
     header: "Заголовок"
     navBg: "Фон боковой панели"
     navFg: "Текст на боковой панели"
-    navHoverFg: "Текст на боковой панели (под указателем)"
     navActive: "Текст на боковой панели (активирован)"
     navIndicator: "Индикатор на боковой панели"
     link: "Ссылка"
@@ -1712,11 +1711,8 @@ _theme:
     buttonHoverBg: "Текст кнопки"
     inputBorder: "Рамка поля ввода"
     driveFolderBg: "Фон папки «Диска»"
-    wallpaperOverlay: "Слой обоев"
     badge: "Значок"
     messageBg: "Фон беседы"
-    accentDarken: "Фон (затемнённый)"
-    accentLighten: "Фон (осветлённый)"
     fgHighlighted: "Подсвеченный текст"
 _sfx:
   note: "Заметки"

locales/sk-SK.yml

@@ -1089,7 +1089,6 @@ _theme:
     header: "Hlavička"
     navBg: "Pozadie bočného panela"
     navFg: "Text bočného panela"
-    navHoverFg: "Text bočného panela (pod kurzorom)"
     navActive: "Text bočného panela (aktívny)"
     navIndicator: "Indikátor bočného panela"
     link: "Odkaz"
@@ -1112,11 +1111,8 @@ _theme:
     buttonHoverBg: "Pozadie tlačidla (pod kurzorom)"
     inputBorder: "Okraj vstupného poľa"
     driveFolderBg: "Pozadie priečinu disku"
-    wallpaperOverlay: "Vrstvenie pozadia"
     badge: "Odznak"
     messageBg: "Pozadie chatu"
-    accentDarken: "Akcent (stmavené)"
-    accentLighten: "Akcent (zosvetlené)"
     fgHighlighted: "Zvýraznený text"
 _sfx:
   note: "Poznámky"

locales/th-TH.yml

@@ -1974,7 +1974,6 @@ _theme:
     header: "ส่วนหัว"
     navBg: "พื้นหลังแถบด้านข้าง"
     navFg: "ข้อความแถบด้านข้าง"
-    navHoverFg: "ข้อความแถบด้านข้าง (โฮเวอร์)"
     navActive: "ข้อความแถบด้านข้าง (ใช้งานอยู่)"
     navIndicator: "ตัวระบุแถบด้านข้าง"
     link: "ลิงก์"
@@ -1997,11 +1996,8 @@ _theme:
     buttonHoverBg: "ปุ่มพื้นหลัง (โฮเวอร์)"
     inputBorder: "เส้นขอบของช่องป้อนข้อมูล"
     driveFolderBg: "พื้นหลังโฟลเดอร์ไดรฟ์"
-    wallpaperOverlay: "วอลล์เปเปอร์ซ้อนทับ"
     badge: "ตรา"
     messageBg: "พื้นหลังแชท"
-    accentDarken: "สีหลัก (มืด)"
-    accentLighten: "สีหลัก (สว่าง)"
     fgHighlighted: "ข้อความที่ไฮไลต์"
 _sfx:
   note: "โน้ต"

locales/uk-UA.yml

@@ -1283,7 +1283,6 @@ _theme:
     header: "Заголовок"
     navBg: "Фон бокової панелі"
     navFg: "Текст бокової панелі"
-    navHoverFg: "Текст бокової панелі (під курсором)"
     navActive: "Текст бокової панелі (активне)"
     navIndicator: "Індикатор бокової панелі"
     link: "Посилання"
@@ -1306,11 +1305,8 @@ _theme:
     buttonHoverBg: "Фон кнопки (при наведенні)"
     inputBorder: "Край поля вводу"
     driveFolderBg: "Фон папки на диску"
-    wallpaperOverlay: "Накладання шпалер"
     badge: "Значок"
     messageBg: "Фон переписки"
-    accentDarken: "Акцент (Затемлений)"
-    accentLighten: "Акцент (Освітлений)"
     fgHighlighted: "Виділений текст"
 _sfx:
   note: "Нотатки"

locales/uz-UZ.yml

@@ -907,8 +907,6 @@ _theme:
     mention: "Murojat"
     renote: "Qayta qayd etish"
     divider: "Ajratrmoq"
-    accentDarken: "Urg'u (Qoraytirilgan)"
-    accentLighten: "Urg'u (Yoritilgan)"
     fgHighlighted: "Belgilangan matn"
 _sfx:
   note: "Qaydlar"

locales/vi-VN.yml

@@ -1530,7 +1530,6 @@ _theme:
     header: "Ảnh bìa"
     navBg: "Nền thanh bên"
     navFg: "Chữ thanh bên"
-    navHoverFg: "Chữ thanh bên (Khi chạm)"
     navActive: "Chữ thanh bên (Khi chọn)"
     navIndicator: "Chỉ báo thanh bên"
     link: "Đường dẫn"
@@ -1553,11 +1552,8 @@ _theme:
     buttonHoverBg: "Nền nút (Chạm)"
     inputBorder: "Đường viền khung soạn thảo"
     driveFolderBg: "Nền thư mục Ổ đĩa"
-    wallpaperOverlay: "Lớp phủ hình nền"
     badge: "Huy hiệu"
     messageBg: "Nền chat"
-    accentDarken: "Màu phụ (Tối)"
-    accentLighten: "Màu phụ (Sáng)"
     fgHighlighted: "Chữ nổi bật"
 _sfx:
   note: "Tút"

locales/zh-CN.yml

@@ -1336,6 +1336,9 @@ chat: "聊天"
 migrateOldSettings: "迁移旧设置信息"
 migrateOldSettings_description: "通常设置信息将自动迁移。但如果由于某种原因迁移不成功，则可以手动触发迁移过程。当前的配置信息将被覆盖。"
 compress: "压缩"
+right: "右"
+bottom: "下"
+top: "上"
 _chat:
   noMessagesYet: "还没有消息"
   newMessage: "新消息"
@@ -2119,7 +2122,6 @@ _theme:
     header: "顶栏"
     navBg: "侧边栏背景"
     navFg: "侧栏文本"
-    navHoverFg: "侧栏文本（悬停）"
     navActive: "侧栏文本（活动）"
     navIndicator: "侧栏标记"
     link: "链接"
@@ -2142,11 +2144,8 @@ _theme:
     buttonHoverBg: "按钮背景（悬停）"
     inputBorder: "输入框边框"
     driveFolderBg: "网盘的文件夹背景"
-    wallpaperOverlay: "壁纸叠加层"
     badge: "徽章"
     messageBg: "聊天背景"
-    accentDarken: "强调色(深)"
-    accentLighten: "强调色(浅)"
     fgHighlighted: "高亮显示文本"
 _sfx:
   note: "帖子"
@@ -2593,6 +2592,9 @@ _notification:
 _deck:
   alwaysShowMainColumn: "总是显示主列"
   columnAlign: "列对齐"
+  columnGap: "列间距"
+  deckMenuPosition: "Deck 菜单位置"
+  navbarPosition: "导航栏位置"
   addColumn: "添加列"
   newNoteNotificationSettings: "新帖子通知设定"
   configureColumn: "列设置"
@@ -2606,7 +2608,7 @@ _deck:
   newProfile: "新建配置文件"
   deleteProfile: "删除配置文件"
   introduction: "将各列进行组合以创建您自己的界面！"
-  introduction2: "您可以随时通过屏幕右侧的 + 来添加列"
+  introduction2: "可以随时通过屏幕右侧的 + 来添加列"
   widgetsIntroduction: "从列菜单中，选择“小工具编辑”来添加小工具"
   useSimpleUiForNonRootPages: "用简易UI表示非根页面"
   usedAsMinWidthWhenFlexible: "「自适应宽度」被启用的时候，这就是最小的宽度"

locales/zh-TW.yml

@@ -1336,6 +1336,9 @@ chat: "聊天"
 migrateOldSettings: "遷移舊設定資訊"
 migrateOldSettings_description: "通常情況下，這會自動進行，但若因某些原因未能順利遷移，您可以手動觸發遷移處理。請注意，當前的設定資訊將會被覆寫。"
 compress: "壓縮"
+right: "右"
+bottom: "下"
+top: "上"
 _chat:
   noMessagesYet: "尚無訊息"
   newMessage: "新訊息"
@@ -2119,7 +2122,6 @@ _theme:
     header: "標題"
     navBg: "側邊欄的背景 "
     navFg: "側邊欄的文字"
-    navHoverFg: "側邊欄文字（懸浮） "
     navActive: "側邊欄文字（活動）"
     navIndicator: "側邊欄指示符"
     link: "連結"
@@ -2142,11 +2144,8 @@ _theme:
     buttonHoverBg: "按鈕背景 (漂浮)"
     inputBorder: "輸入框邊框"
     driveFolderBg: "雲端硬碟文件夾背景"
-    wallpaperOverlay: "壁紙覆蓋層"
     badge: "徽章"
     messageBg: "私訊背景"
-    accentDarken: "強調色（黑暗）"
-    accentLighten: "強調色（明亮）"
     fgHighlighted: "突顯文字"
 _sfx:
   note: "貼文"
@@ -2593,6 +2592,9 @@ _notification:
 _deck:
   alwaysShowMainColumn: "總是顯示主欄"
   columnAlign: "對齊欄位"
+  columnGap: "欄與欄之間的邊距"
+  deckMenuPosition: "多欄模式的選單位置"
+  navbarPosition: "導覽列位置"
   addColumn: "新增欄位"
   newNoteNotificationSettings: "新貼文通知的設定"
   configureColumn: "欄位的設定"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2025.3.2-beta.18",
+	"version": "2025.4.0-beta.0",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",

packages/backend/src/server/web/boot.js

@@ -127,11 +127,6 @@
 		document.documentElement.classList.add('useSystemFont');
 	}
 
-	const wallpaper = localStorage.getItem('wallpaper');
-	if (wallpaper) {
-		document.documentElement.style.backgroundImage = `url(${wallpaper})`;
-	}
-
 	const customCss = localStorage.getItem('customCss');
 	if (customCss && customCss.length > 0) {
 		const style = document.createElement('style');

packages/frontend-embed/package.json

@@ -34,7 +34,7 @@
 		"typescript": "5.8.2",
 		"uuid": "11.1.0",
 		"json5": "2.2.3",
-		"vite": "6.2.3",
+		"vite": "6.2.4",
 		"vue": "3.5.13"
 	},
 	"devDependencies": {

packages/frontend-embed/src/components/EmMediaImage.vue

@@ -95,7 +95,7 @@ async function onclick(ev: MouseEvent) {
 	position: absolute;
 	border-radius: 6px;
 	background-color: var(--MI_THEME-fg);
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	font-size: 12px;
 	opacity: .5;
 	padding: 5px 8px;
@@ -153,7 +153,7 @@ html[data-color-scheme=light] .visible {
 	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
 	background-color: black;
 	border-radius: 6px;
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	display: inline-block;
 	font-weight: bold;
 	font-size: 0.8em;

packages/frontend-embed/src/style.scss

@@ -278,7 +278,7 @@ rt {
 }
 
 ._acrylic {
-	background: var(--MI_THEME-acrylicPanel);
+	background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend-shared/themes/_dark.json5

@@ -10,13 +10,10 @@
 
 	props: {
 		accent: '#86b300',
-		accentDarken: ':darken<10<@accent',
-		accentLighten: ':lighten<10<@accent',
 		accentedBg: ':alpha<0.15<@accent',
 		love: '#dd2e44',
 		focus: ':alpha<0.3<@accent',
 		bg: '#000',
-		acrylicBg: ':alpha<0.5<@bg',
 		fg: '#dadada',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
@@ -31,14 +28,12 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		acrylicPanel: ':alpha<0.5<@panel',
 		windowHeader: ':alpha<0.85<@panel',
 		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.3)',
 		header: ':alpha<0.7<@panel',
 		navBg: '@panel',
 		navFg: '@fg',
-		navHoverFg: ':lighten<17<@fg',
 		navActive: '@accent',
 		navIndicator: '@indicator',
 		link: '#44a4c1',
@@ -68,7 +63,6 @@
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		driveFolderBg: ':alpha<0.3<@accent',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		badge: '#31b1ce',
 		messageBg: '@bg',
 		success: '#86b300',

packages/frontend-shared/themes/_light.json5

@@ -10,13 +10,10 @@
 
 	props: {
 		accent: '#86b300',
-		accentDarken: ':darken<10<@accent',
-		accentLighten: ':lighten<10<@accent',
 		accentedBg: ':alpha<0.15<@accent',
 		love: '#dd2e44',
 		focus: ':alpha<0.3<@accent',
 		bg: '#fff',
-		acrylicBg: ':alpha<0.5<@bg',
 		fg: '#5f5f5f',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
@@ -31,14 +28,12 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		acrylicPanel: ':alpha<0.5<@panel',
 		windowHeader: ':alpha<0.85<@panel',
 		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: ':alpha<0.7<@panel',
 		navBg: '@panel',
 		navFg: '@fg',
-		navHoverFg: ':darken<17<@fg',
 		navActive: '@accent',
 		navIndicator: '@indicator',
 		link: '#44a4c1',
@@ -68,7 +63,6 @@
 		inputBorder: 'rgba(0, 0, 0, 0.1)',
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		driveFolderBg: ':alpha<0.3<@accent',
-		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
 		badge: '#31b1ce',
 		messageBg: '@bg',
 		success: '#86b300',

packages/frontend-shared/themes/d-astro.json5

@@ -25,22 +25,17 @@
 		mention: '#ffd152',
 		modalBg: 'rgba(0, 0, 0, 0.5)',
 		success: '#86b300',
-		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
 		mentionMe: '#fb5d38',
 		messageBg: '@bg',
 		navActive: '@accent',
 		infoWarnBg: '#42321c',
 		infoWarnFg: '#ffbd3e',
-		navHoverFg: ':lighten<17<@fg',
 		dateLabelFg: '@fg',
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',
-		accentLighten: ':lighten<10<@accent',
 		buttonGradateA: '@accent',
 		buttonGradateB: ':hue<-20<@accent',
 		driveFolderBg: ':alpha<0.3<@accent',
@@ -51,7 +46,6 @@
 		fgOnWhite: '@accent',
 		panelHighlight: ':lighten<3<@panel',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
 	},

packages/frontend-shared/themes/d-u0.json5

@@ -31,7 +31,6 @@
 		modalBg: 'rgba(0, 0, 0, 0.5)',
 		success: '#86b300',
 		switchBg: 'rgba(255, 255, 255, 0.15)',
-		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
 		mentionMe: '@mention',
 		messageBg: '@bg',
@@ -43,15 +42,11 @@
 		fgOnWhite: '@accent',
 		infoWarnBg: '#42321c',
 		infoWarnFg: '#ffbd3e',
-		navHoverFg: ':lighten<17<@fg',
 		codeBoolean: '#c59eff',
 		dateLabelFg: '@fg',
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@indicator',
-		accentLighten: ':lighten<10<@accent',
 		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':lighten<3<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
@@ -63,7 +58,6 @@
 		panelHighlight: ':lighten<3<@panel',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',

packages/frontend-shared/themes/l-u0.json5

@@ -32,7 +32,6 @@
 		success: '#86b300',
 		buttonBg: '#0000000d',
 		switchBg: 'rgba(255, 255, 255, 0.15)',
-		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
 		mentionMe: '@mention',
 		messageBg: '@bg',
@@ -44,15 +43,11 @@
 		fgOnWhite: '@accent',
 		infoWarnBg: '#42321c',
 		infoWarnFg: '#ffbd3e',
-		navHoverFg: ':lighten<17<@fg',
 		codeBoolean: '#c59eff',
 		dateLabelFg: '@fg',
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@indicator',
-		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: '#0000001a',
 		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':lighten<3<@fg',
@@ -65,7 +60,6 @@
 		panelHighlight: ':lighten<3<@panel',
 		scrollbarHandle: '#74747433',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',

packages/frontend-shared/themes/l-vivid.json5

@@ -28,22 +28,17 @@
 		mention: '@accent',
 		modalBg: 'rgba(0, 0, 0, 0.3)',
 		success: '#86b300',
-		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
 		mentionMe: '@mention',
 		messageBg: '@bg',
 		navActive: '@accent',
 		infoWarnBg: '#fff0db',
 		infoWarnFg: '#8f6e31',
-		navHoverFg: ':darken<17<@fg',
 		dateLabelFg: '@fg',
 		inputBorder: 'rgba(0, 0, 0, 0.1)',
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',
-		accentLighten: ':lighten<10<@accent',
 		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':darken<3<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
@@ -53,7 +48,6 @@
 		htmlThemeColor: '@bg',
 		panelHighlight: ':darken<3<@panel',
 		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
-		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		panelHeaderDivider: '@divider',
 		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',

packages/frontend/package.json

@@ -74,7 +74,7 @@
 		"typescript": "5.8.2",
 		"uuid": "11.1.0",
 		"v-code-diff": "1.13.1",
-		"vite": "6.2.3",
+		"vite": "6.2.4",
 		"vue": "3.5.13",
 		"vuedraggable": "next",
 		"wanakana": "5.3.1"

packages/frontend/src/components/MkAutocomplete.vue

@@ -420,7 +420,7 @@ onBeforeUnmount(() => {
 	}
 
 	&:active {
-		background: var(--MI_THEME-accentDarken);
+		background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
 		color: #fff !important;
 	}
 }

packages/frontend/src/components/MkChannelFollowButton.vue

@@ -103,13 +103,13 @@ async function onClick() {
 		background: var(--MI_THEME-accent);
 
 		&:hover {
-			background: var(--MI_THEME-accentLighten);
-			border-color: var(--MI_THEME-accentLighten);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
+			border-color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 		}
 
 		&:active {
-			background: var(--MI_THEME-accentDarken);
-			border-color: var(--MI_THEME-accentDarken);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
+			border-color: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
 		}
 	}
 

packages/frontend/src/components/MkDrive.file.vue

@@ -151,11 +151,11 @@ function onDragend() {
 		background: var(--MI_THEME-accent);
 
 		&:hover {
-			background: var(--MI_THEME-accentLighten);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 		}
 
 		&:active {
-			background: var(--MI_THEME-accentDarken);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
 		}
 
 		> .label {

packages/frontend/src/components/MkFolder.vue

@@ -239,7 +239,7 @@ onMounted(() => {
 	bottom: var(--MI-stickyBottom, 0px);
 	left: 0;
 	padding: 12px;
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 	background-size: auto auto;

packages/frontend/src/components/MkFollowButton.vue

@@ -211,13 +211,13 @@ onBeforeUnmount(() => {
 		background: var(--MI_THEME-accent);
 
 		&:hover {
-			background: var(--MI_THEME-accentLighten);
-			border-color: var(--MI_THEME-accentLighten);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
+			border-color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 		}
 
 		&:active {
-			background: var(--MI_THEME-accentDarken);
-			border-color: var(--MI_THEME-accentDarken);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
+			border-color: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
 		}
 	}
 

packages/frontend/src/components/MkFukidashi.vue

@@ -51,7 +51,7 @@ withDefaults(defineProps<{
 	padding-top: calc(var(--fukidashi-radius) * .13);
 
 	&.accented {
-		--fukidashi-bg: var(--MI_THEME-accent);
+		--fukidashi-bg: color-mix(in srgb, var(--MI_THEME-accent), var(--MI_THEME-panel) 85%);
 	}
 
 	&.shadow {
@@ -87,6 +87,12 @@ withDefaults(defineProps<{
 	padding: 10px 14px;
 }
 
+@container (max-width: 450px) {
+	.content {
+		padding: 8px 12px;
+	}
+}
+
 .tail {
 	position: absolute;
 	top: 0;

packages/frontend/src/components/MkMediaImage.vue

@@ -220,7 +220,7 @@ function showMenu(ev: MouseEvent) {
 	position: absolute;
 	border-radius: 6px;
 	background-color: var(--MI_THEME-fg);
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	font-size: 12px;
 	opacity: .5;
 	padding: 5px 8px;
@@ -294,7 +294,7 @@ html[data-color-scheme=light] .visible {
 	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
 	background-color: black;
 	border-radius: 6px;
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	display: inline-block;
 	font-weight: bold;
 	font-size: 0.8em;

packages/frontend/src/components/MkMediaVideo.vue

@@ -553,7 +553,7 @@ onDeactivated(() => {
 	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
 	background-color: black;
 	border-radius: 6px;
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	display: inline-block;
 	font-weight: bold;
 	font-size: 0.8em;
@@ -565,7 +565,7 @@ onDeactivated(() => {
 	position: absolute;
 	border-radius: 6px;
 	background-color: var(--MI_THEME-fg);
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	font-size: 12px;
 	opacity: .5;
 	padding: 5px 8px;

packages/frontend/src/components/MkNotes.vue

@@ -23,10 +23,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			tag="div"
 		>
 			<template v-for="(note, i) in notes" :key="note.id">
-				<MkNote :class="$style.note" :note="note" :withHardMute="true"/>
-				<div v-if="note._shouldInsertAd_" :class="$style.ad">
-					<MkAd :preferForms="['horizontal', 'horizontal-big']"/>
+				<div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]">
+					<MkNote :class="$style.note" :note="note" :withHardMute="true"/>
+					<div :class="$style.ad">
+						<MkAd :preferForms="['horizontal', 'horizontal-big']"/>
+					</div>
 				</div>
+				<MkNote v-else :class="$style.note" :note="note" :withHardMute="true"/>
 			</template>
 		</component>
 	</template>

packages/frontend/src/components/MkRange.vue

@@ -287,7 +287,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 				border-radius: 999px;
 
 				&:hover {
-					background: var(--MI_THEME-accentLighten);
+					background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 				}
 			}
 		}

packages/frontend/src/components/MkRemoteEmojiEditDialog.vue

@@ -125,7 +125,7 @@ async function done() {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/components/MkRoleSelectDialog.vue

@@ -144,7 +144,7 @@ fetchRoles();
 }
 
 .roleItemArea {
-	background-color: var(--MI_THEME-acrylicBg);
+	background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	border-radius: var(--MI-radius);
 	padding: 12px;
 	overflow-y: auto;

packages/frontend/src/components/MkSigninDialog.vue

@@ -84,7 +84,7 @@ function onLogin(res: Misskey.entities.SigninFlowResponse & { finished: true })
 	align-items: center;
 	font-weight: bold;
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	z-index: 1;
 }
 

packages/frontend/src/components/MkSystemWebhookEditor.vue

@@ -280,7 +280,7 @@ onMounted(async () => {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/components/MkThemePreview.vue

@@ -4,50 +4,48 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<svg
-	version="1.1"
-	viewBox="0 0 203.2 152.4"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
->
+<svg viewBox="0 0 200 150">
 	<g fill-rule="evenodd">
-		<rect width="203.2" height="152.4" :fill="themeVariables.bg" stroke-width=".26458" />
-		<rect width="65.498" height="152.4" :fill="themeVariables.panel" stroke-width=".26458" />
-		<rect x="65.498" width="137.7" height="40.892" :fill="themeVariables.acrylicBg" stroke-width=".265" />
-		<path transform="scale(.26458)" d="m439.77 247.19c-43.673 0-78.832 35.157-78.832 78.83v249.98h407.06v-328.81z" :fill="themeVariables.panel" />
+		<rect width="200" height="150" :fill="themeVariables.bg"/>
+		<rect width="64" height="150" :fill="themeVariables.navBg"/>
+		<rect x="64" width="136" height="41" :fill="themeVariables.bg"/>
+		<path transform="scale(.26458)" d="m439.77 247.19c-43.673 0-78.832 35.157-78.832 78.83v249.98h407.06v-328.81z" :fill="themeVariables.panel"/>
 	</g>
-	<circle cx="32.749" cy="83.054" r="21.132" :fill="themeVariables.accentedBg" stroke-dasharray="0.319256, 0.319256" stroke-width=".15963" style="paint-order:stroke fill markers" />
-	<circle cx="136.67" cy="106.76" r="23.876" :fill="themeVariables.fg" fill-opacity="0.5" stroke-dasharray="0.352425, 0.352425" stroke-width=".17621" style="paint-order:stroke fill markers" />
-	<g :fill="themeVariables.fg" fill-rule="evenodd" stroke-width=".26458">
-		<rect x="171.27" y="87.815" width="48.576" height="6.8747" ry="3.4373"/>
-		<rect x="171.27" y="105.09" width="48.576" height="6.875" ry="3.4375"/>
-		<rect x="171.27" y="121.28" width="48.576" height="6.875" ry="3.4375"/>
-		<rect x="171.27" y="137.47" width="48.576" height="6.875" ry="3.4375"/>
+	<circle cx="32" cy="83" r="21" :fill="themeVariables.accentedBg"/>
+	<g>
+		<rect x="120" y="88" width="40" height="6" ry="3" :fill="themeVariables.fg"/>
+		<rect x="170" y="88" width="20" height="6" ry="3" :fill="themeVariables.mention"/>
+		<rect x="120" y="108" width="20" height="6" ry="3" :fill="themeVariables.hashtag"/>
+		<rect x="150" y="108" width="40" height="6" ry="3" :fill="themeVariables.fg"/>
+		<rect x="120" y="128" width="40" height="6" ry="3" :fill="themeVariables.fg"/>
+		<rect x="170" y="128" width="20" height="6" ry="3" :fill="themeVariables.link"/>
 	</g>
-	<path d="m65.498 40.892h137.7" :stroke="themeVariables.divider" stroke-width="0.75" />
+	<path d="m65.498 40.892h137.7" :stroke="themeVariables.divider" stroke-width="0.75"/>
 	<g transform="matrix(.60823 0 0 .60823 25.45 75.755)" fill="none" :stroke="themeVariables.accent" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-		<path d="m0 0h24v24h-24z" fill="none" stroke="none" />
-		<path d="m5 12h-2l9-9 9 9h-2" />
-		<path d="m5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7" />
-		<path d="m9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6" />
+		<path d="m0 0h24v24h-24z" fill="none" stroke="none"/>
+		<path d="m5 12h-2l9-9 9 9h-2"/>
+		<path d="m5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"/>
+		<path d="m9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6"/>
 	</g>
 	<g transform="matrix(.61621 0 0 .61621 25.354 117.92)" fill="none" :stroke="themeVariables.fg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-		<path d="m0 0h24v24h-24z" fill="none" stroke="none" />
-		<path d="m10 5a2 2 0 1 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6" />
-		<path d="m9 17v1a3 3 0 0 0 6 0v-1" />
+		<path d="m0 0h24v24h-24z" fill="none" stroke="none"/>
+		<path d="m10 5a2 2 0 1 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"/>
+		<path d="m9 17v1a3 3 0 0 0 6 0v-1"/>
 	</g>
-	<image x="20.948" y="18.388" width="23.602" height="23.602" image-rendering="optimizeSpeed" preserveAspectRatio="xMidYMid meet" v-bind="{ 'xlink:href': instance.iconUrl || '/favicon.ico' }" />
+	<circle cx="32" cy="32" r="16" :fill="themeVariables.accent"/>
+	<circle cx="140" cy="20" r="6" :fill="themeVariables.success"/>
+	<circle cx="160" cy="20" r="6" :fill="themeVariables.warn"/>
+	<circle cx="180" cy="20" r="6" :fill="themeVariables.error"/>
 </svg>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { instance } from '@/instance.js';
-import { compile } from '@/theme.js';
-import type { Theme } from '@/theme.js';
-import { deepClone } from '@/utility/clone.js';
 import lightTheme from '@@/themes/_light.json5';
 import darkTheme from '@@/themes/_dark.json5';
+import type { Theme } from '@/theme.js';
+import { compile } from '@/theme.js';
+import { deepClone } from '@/utility/clone.js';
 
 const props = defineProps<{
 	theme: Theme;
@@ -55,20 +53,32 @@ const props = defineProps<{
 
 const themeVariables = ref<{
 	bg: string;
-	acrylicBg: string;
 	panel: string;
 	fg: string;
+	mention: string;
+	hashtag: string;
+	link: string;
 	divider: string;
 	accent: string;
 	accentedBg: string;
+	navBg: string;
+	success: string;
+	warn: string;
+	error: string;
 }>({
 	bg: 'var(--MI_THEME-bg)',
-	acrylicBg: 'var(--MI_THEME-acrylicBg)',
 	panel: 'var(--MI_THEME-panel)',
 	fg: 'var(--MI_THEME-fg)',
+	mention: 'var(--MI_THEME-mention)',
+	hashtag: 'var(--MI_THEME-hashtag)',
+	link: 'var(--MI_THEME-link)',
 	divider: 'var(--MI_THEME-divider)',
 	accent: 'var(--MI_THEME-accent)',
 	accentedBg: 'var(--MI_THEME-accentedBg)',
+	navBg: 'var(--MI_THEME-navBg)',
+	success: 'var(--MI_THEME-success)',
+	warn: 'var(--MI_THEME-warn)',
+	error: 'var(--MI_THEME-error)',
 });
 
 watch(() => props.theme, (theme) => {
@@ -76,7 +86,7 @@ watch(() => props.theme, (theme) => {
 
 	const _theme = deepClone(theme);
 
-	if (_theme?.base != null) {
+	if (_theme.base != null) {
 		const base = [lightTheme, darkTheme].find(x => x.id === _theme.base);
 		if (base) _theme.props = Object.assign({}, base.props, _theme.props);
 	}
@@ -85,12 +95,18 @@ watch(() => props.theme, (theme) => {
 
 	themeVariables.value = {
 		bg: compiled.bg ?? 'var(--MI_THEME-bg)',
-		acrylicBg: compiled.acrylicBg ?? 'var(--MI_THEME-acrylicBg)',
 		panel: compiled.panel ?? 'var(--MI_THEME-panel)',
 		fg: compiled.fg ?? 'var(--MI_THEME-fg)',
+		mention: compiled.mention ?? 'var(--MI_THEME-mention)',
+		hashtag: compiled.hashtag ?? 'var(--MI_THEME-hashtag)',
+		link: compiled.link ?? 'var(--MI_THEME-link)',
 		divider: compiled.divider ?? 'var(--MI_THEME-divider)',
 		accent: compiled.accent ?? 'var(--MI_THEME-accent)',
 		accentedBg: compiled.accentedBg ?? 'var(--MI_THEME-accentedBg)',
+		navBg: compiled.navBg ?? 'var(--MI_THEME-navBg)',
+		success: compiled.success ?? 'var(--MI_THEME-success)',
+		warn: compiled.warn ?? 'var(--MI_THEME-warn)',
+		error: compiled.error ?? 'var(--MI_THEME-error)',
 	};
 }, { immediate: true });
 </script>

packages/frontend/src/components/global/PageWithAnimBg.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div>
 	<MkAnimBg style="position: absolute;"/>
-	<div class="_pageScrollable" style="position: absolute; top: 0; width: 100%; height: 100%;">
+	<div class="_pageScrollable" :class="$style.body">
 		<slot></slot>
 	</div>
 </div>
@@ -17,5 +17,13 @@ import MkAnimBg from '@/components/MkAnimBg.vue';
 </script>
 
 <style lang="scss" module>
+.body {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%;
 
+	// _pageScrollable はパフォーマンス上の理由で背景色が設定されているため
+	background: transparent !important;
+}
 </style>

packages/frontend/src/components/grid/MkDataCell.vue

@@ -345,7 +345,7 @@ $cellHeight: 28px;
 	border: solid 0.5px transparent;
 
 	&.selected {
-		border: solid 0.5px var(--MI_THEME-accentLighten);
+		border: solid 0.5px hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	}
 
 	&.ranged {

packages/frontend/src/local-storage.ts

@@ -17,7 +17,6 @@ export type Keys = (
 	'lang' |
 	'drafts' |
 	'hashtags' |
-	'wallpaper' |
 	'colorScheme' |
 	'useSystemFont' |
 	'fontSize' |

packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue

@@ -296,7 +296,7 @@ onMounted(async () => {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/pages/avatar-decoration-edit-dialog.vue

@@ -213,7 +213,7 @@ async function del() {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/pages/channel.vue

@@ -273,7 +273,7 @@ definePage(() => ({
 .footer {
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	border-top: solid 0.5px var(--MI_THEME-divider);
 }
 

packages/frontend/src/pages/chat/XMessage.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="[$style.root, { [$style.isMe]: isMe }]">
 	<MkAvatar :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/>
 	<div :class="$style.body" @contextmenu.stop="onContextmenu">
-		<div v-if="!isMe && prefer.s['chat.showSenderName']" :class="$style.header"><MkUserName :user="message.fromUser"/></div>
+		<div :class="$style.header"><MkUserName v-if="!isMe && prefer.s['chat.showSenderName']" :user="message.fromUser"/></div>
 		<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :accented="isMe">
 			<div v-if="!message.isDeleted" :class="$style.content">
 				<Mfm
@@ -216,10 +216,6 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 		flex-direction: row-reverse;
 		text-align: right;
 
-		.content {
-			color: var(--MI_THEME-fgOnAccent);
-		}
-
 		.footer {
 			flex-direction: row-reverse;
 		}
@@ -230,8 +226,27 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 	position: sticky;
 	top: calc(16px + var(--MI-stickyTop, 0px));
 	display: block;
-	width: 52px;
-	height: 52px;
+	width: 50px;
+	height: 50px;
+}
+
+@container (max-width: 450px) {
+	.root {
+		&.isMe {
+			.avatar {
+				display: none;
+			}
+		}
+	}
+
+	.avatar {
+		width: 42px;
+		height: 42px;
+	}
+
+	.fukidashi {
+		font-size: 90%;
+	}
 }
 
 .body {
@@ -239,6 +254,7 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 }
 
 .header {
+	min-height: 4px; // fukidashiの位置調整も兼ねるため
 	font-size: 80%;
 }
 
@@ -252,9 +268,6 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 	word-break: break-word;
 }
 
-.file {
-}
-
 .footer {
 	display: flex;
 	flex-direction: row;

packages/frontend/src/pages/chat/home.home.vue

@@ -119,7 +119,8 @@ function start(ev: MouseEvent) {
 }
 
 async function startUser() {
-	os.selectUser().then(user => {
+	// TODO: localOnly は連合に対応したら消す
+	os.selectUser({ localOnly: true }).then(user => {
 		router.push(`/chat/user/${user.id}`);
 	});
 }

packages/frontend/src/pages/chat/room.info.vue

@@ -63,11 +63,11 @@ function save() {
 async function del() {
 	const { canceled } = await os.confirm({
 		type: 'warning',
-		text: i18n.ts.areYouSure,
+		text: i18n.tsx.deleteAreYouSure({ x: name_.value }),
 	});
 	if (canceled) return;
 
-	misskeyApi('chat/rooms/delete', {
+	await os.apiWithDialog('chat/rooms/delete', {
 		roomId: props.room.id,
 	});
 	router.push('/chat');
@@ -81,10 +81,6 @@ watch(isMuted, async () => {
 		mute: isMuted.value,
 	});
 });
-
-onMounted(async () => {
-
-});
 </script>
 
 <style lang="scss" module>

packages/frontend/src/pages/chat/room.members.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkUserCardMini :user="room.owner"/>
 	</MkA>
 
-	<hr>
+	<hr v-if="memberships.length > 0">
 
 	<div v-for="membership in memberships" :key="membership.id" :class="$style.membership">
 		<MkA :class="$style.membershipBody" :to="`${userPage(membership.user)}`">

packages/frontend/src/pages/chat/room.search.vue

@@ -9,20 +9,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 		v-model="searchQuery"
 		:placeholder="i18n.ts._chat.searchMessages"
 		type="search"
+		@enter="search()"
 	>
 		<template #prefix><i class="ti ti-search"></i></template>
 	</MkInput>
 
-	<MkButton v-if="searchQuery.length > 0" primary rounded @click="search">{{ i18n.ts.search }}</MkButton>
+	<MkButton primary rounded @click="search">{{ i18n.ts.search }}</MkButton>
 
 	<MkFoldableSection v-if="searched">
 		<template #header>{{ i18n.ts.searchResult }}</template>
 
-		<div class="_gaps_s">
+		<div v-if="searchResults.length > 0" class="_gaps_s">
 			<div v-for="message in searchResults" :key="message.id" :class="$style.searchResultItem">
 				<XMessage :message="message" :user="message.fromUser" :isSearchResult="true"/>
 			</div>
 		</div>
+		<div v-else class="_fullinfo">
+			<img :src="infoImageUrl" draggable="false"/>
+			<div>{{ i18n.ts.notFound }}</div>
+		</div>
 	</MkFoldableSection>
 </div>
 </template>
@@ -33,6 +38,7 @@ import * as Misskey from 'misskey-js';
 import XMessage from './XMessage.vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
+import { infoImageUrl } from '@/instance.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import * as os from '@/os.js';
 import MkInput from '@/components/MkInput.vue';

packages/frontend/src/pages/chat/room.vue

@@ -67,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<Transition name="fade">
 					<div v-show="showIndicator" :class="$style.new">
 						<button class="_buttonPrimary" :class="$style.newButton" @click="onIndicatorClick">
-							<i class="fas ti-fw fa-arrow-circle-down" :class="$style.newIcon"></i>{{ i18n.ts.newMessageExists }}
+							<i class="fas ti-fw fa-arrow-circle-down" :class="$style.newIcon"></i>{{ i18n.ts._chat.newMessage }}
 						</button>
 					</div>
 				</Transition>
@@ -391,6 +391,7 @@ const headerActions = computed(() => [{
 
 definePage(computed(() => !initializing.value ? user.value ? {
 	userName: user,
+	title: user.value.name ?? user.value.username,
 	avatar: user,
 } : {
 	title: room.value?.name,

packages/frontend/src/pages/emoji-edit-dialog.vue

@@ -245,7 +245,7 @@ async function del() {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/pages/flash/flash-edit.vue

@@ -467,7 +467,7 @@ definePage(() => ({
 <style lang="scss" module>
 .footer {
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	border-top: solid .5px var(--MI_THEME-divider);
 }
 </style>

packages/frontend/src/pages/reversi/game.setting.vue

@@ -292,7 +292,7 @@ onUnmounted(() => {
 .footer {
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	border-top: solid 0.5px var(--MI_THEME-divider);
 }
 </style>

packages/frontend/src/pages/settings/deck.vue

@@ -12,6 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkSwitch>
 		</SearchMarker>
 
+		<hr>
+
 		<SearchMarker :keywords="['ui', 'root', 'page']">
 			<MkPreferenceContainer k="deck.useSimpleUiForNonRootPages">
 				<MkSwitch v-model="useSimpleUiForNonRootPages">
@@ -45,23 +47,77 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkRadios>
 			</MkPreferenceContainer>
 		</SearchMarker>
+
+		<SearchMarker :keywords="['menu', 'position']">
+			<MkPreferenceContainer k="deck.menuPosition">
+				<MkRadios v-model="menuPosition">
+					<template #label><SearchLabel>{{ i18n.ts._deck.deckMenuPosition }}</SearchLabel></template>
+					<option value="right">{{ i18n.ts.right }}</option>
+					<option value="bottom">{{ i18n.ts.bottom }}</option>
+				</MkRadios>
+			</MkPreferenceContainer>
+		</SearchMarker>
+
+		<SearchMarker :keywords="['navbar', 'position']">
+			<MkPreferenceContainer k="deck.navbarPosition">
+				<MkRadios v-model="navbarPosition">
+					<template #label><SearchLabel>{{ i18n.ts._deck.navbarPosition }}</SearchLabel></template>
+					<option value="left">{{ i18n.ts.left }}</option>
+					<option value="top">{{ i18n.ts.top }}</option>
+					<option value="bottom">{{ i18n.ts.bottom }}</option>
+				</MkRadios>
+			</MkPreferenceContainer>
+		</SearchMarker>
+
+		<SearchMarker :keywords="['column', 'gap', 'margin']">
+			<MkPreferenceContainer k="deck.columnGap">
+				<MkRange v-model="columnGap" :min="3" :max="100" :step="1" :continuousUpdate="true">
+					<template #label><SearchLabel>{{ i18n.ts._deck.columnGap }}</SearchLabel></template>
+				</MkRange>
+			</MkPreferenceContainer>
+		</SearchMarker>
+
+		<SearchMarker :keywords="['wallpaper']">
+			<MkPreferenceContainer k="deck.wallpaper">
+				<MkButton v-if="wallpaper == null" @click="setWallpaper"><SearchLabel>{{ i18n.ts.setWallpaper }}</SearchLabel></MkButton>
+				<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
+			</MkPreferenceContainer>
+		</SearchMarker>
 	</div>
 </SearchMarker>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkRadios from '@/components/MkRadios.vue';
+import MkRange from '@/components/MkRange.vue';
+import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import { prefer } from '@/preferences.js';
 import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
+import { reloadAsk } from '@/utility/reload-ask.js';
+import { selectFile } from '@/utility/select-file.js';
 
 const navWindow = prefer.model('deck.navWindow');
 const useSimpleUiForNonRootPages = prefer.model('deck.useSimpleUiForNonRootPages');
 const alwaysShowMainColumn = prefer.model('deck.alwaysShowMainColumn');
 const columnAlign = prefer.model('deck.columnAlign');
+const columnGap = prefer.model('deck.columnGap');
+const menuPosition = prefer.model('deck.menuPosition');
+const navbarPosition = prefer.model('deck.navbarPosition');
+const wallpaper = prefer.model('deck.wallpaper');
+
+watch(wallpaper, async () => {
+	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
+});
+
+function setWallpaper(ev: MouseEvent) {
+	selectFile(ev.currentTarget ?? ev.target, null).then(file => {
+		wallpaper.value = file.url;
+	});
+}
 
 const profilesSyncEnabled = ref(prefer.isSyncEnabled('deck.profiles'));
 

packages/frontend/src/pages/settings/theme.manage.vue

@@ -38,14 +38,13 @@ import MkTextarea from '@/components/MkTextarea.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkButton from '@/components/MkButton.vue';
-import { getBuiltinThemesRef } from '@/theme.js';
+import { getBuiltinThemesRef, getThemesRef, removeTheme } from '@/theme.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import * as os from '@/os.js';
-import { getThemes, removeTheme } from '@/theme-store.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 
-const installedThemes = ref(getThemes());
+const installedThemes = getThemesRef();
 const builtinThemes = getBuiltinThemesRef();
 const selectedThemeId = ref<string | null>(null);
 

packages/frontend/src/pages/settings/theme.vue

@@ -189,17 +189,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<FormLink to="/theme-editor"><template #icon><i class="ti ti-paint"></i></template>{{ i18n.ts._theme.make }}</FormLink>
 			</div>
 		</FormSection>
-
-		<SearchMarker :keywords="['wallpaper']">
-			<MkButton v-if="wallpaper == null" @click="setWallpaper"><SearchLabel>{{ i18n.ts.setWallpaper }}</SearchLabel></MkButton>
-			<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
-		</SearchMarker>
 	</div>
 </SearchMarker>
 </template>
 
 <script lang="ts" setup>
-import { computed, onActivated, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import JSON5 from 'json5';
 import defaultLightTheme from '@@/themes/l-light.json5';
 import defaultDarkTheme from '@@/themes/d-green-lime.json5';
@@ -207,23 +202,21 @@ import type { Theme } from '@/theme.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
-import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkThemePreview from '@/components/MkThemePreview.vue';
-import { getBuiltinThemesRef } from '@/theme.js';
+import { getBuiltinThemesRef, getThemesRef } from '@/theme.js';
 import { selectFile } from '@/utility/select-file.js';
 import { isDeviceDarkmode } from '@/utility/is-device-darkmode.js';
 import { store } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { uniqueBy } from '@/utility/array.js';
-import { getThemes } from '@/theme-store.js';
 import { definePage } from '@/page.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { reloadAsk } from '@/utility/reload-ask.js';
 import { prefer } from '@/preferences.js';
 
-const installedThemes = ref(getThemes());
+const installedThemes = getThemesRef();
 const builtinThemes = getBuiltinThemesRef();
 
 const instanceDarkTheme = computed<Theme | null>(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
@@ -263,7 +256,6 @@ const lightThemeId = computed({
 
 const darkMode = computed(store.makeGetterSetter('darkMode'));
 const syncDeviceDarkMode = prefer.model('syncDeviceDarkMode');
-const wallpaper = ref(miLocalStorage.getItem('wallpaper'));
 const themesCount = installedThemes.value.length;
 
 watch(syncDeviceDarkMode, () => {
@@ -272,25 +264,6 @@ watch(syncDeviceDarkMode, () => {
 	}
 });
 
-watch(wallpaper, async () => {
-	if (wallpaper.value == null) {
-		miLocalStorage.removeItem('wallpaper');
-	} else {
-		miLocalStorage.setItem('wallpaper', wallpaper.value);
-	}
-	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
-});
-
-onActivated(() => {
-	installedThemes.value = getThemes();
-});
-
-function setWallpaper(event) {
-	selectFile(event.currentTarget ?? event.target, null).then(file => {
-		wallpaper.value = file.url;
-	});
-}
-
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);

packages/frontend/src/pages/tag.vue

@@ -77,7 +77,7 @@ definePage(() => ({
 .footer {
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	border-top: solid 0.5px var(--MI_THEME-divider);
 	display: flex;
 }

packages/frontend/src/pages/theme-editor.vue

@@ -86,10 +86,9 @@ import MkCodeEditor from '@/components/MkCodeEditor.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import { $i } from '@/i.js';
-import { applyTheme } from '@/theme.js';
+import { addTheme, applyTheme } from '@/theme.js';
 import * as os from '@/os.js';
 import { store } from '@/store.js';
-import { addTheme } from '@/theme-store.js';
 import { i18n } from '@/i18n.js';
 import { useLeaveGuard } from '@/use/use-leave-guard.js';
 import { definePage } from '@/page.js';

packages/frontend/src/pages/welcome.entrance.a.vue

@@ -151,7 +151,7 @@ misskeyApiGet('federation/instances', {
 	left: 0;
 	right: 0;
 	margin: auto;
-	background: var(--MI_THEME-acrylicPanel);
+	background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 	border-radius: 999px;

packages/frontend/src/preferences/def.ts

@@ -371,7 +371,19 @@ export const PREF_DEF = {
 		default: true,
 	},
 	'deck.columnAlign': {
-		default: 'left' as 'left' | 'right' | 'center',
+		default: 'center' as 'left' | 'right' | 'center',
+	},
+	'deck.columnGap': {
+		default: 6,
+	},
+	'deck.menuPosition': {
+		default: 'bottom' as 'right' | 'bottom',
+	},
+	'deck.navbarPosition': {
+		default: 'left' as 'left' | 'top' | 'bottom',
+	},
+	'deck.wallpaper': {
+		default: null as string | null,
 	},
 
 	'chat.showSenderName': {

packages/frontend/src/style.scss

@@ -398,7 +398,7 @@ rt {
 }
 
 ._acrylic {
-	background: var(--MI_THEME-acrylicPanel);
+	background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/theme-store.ts

@@ -1,33 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import type { Theme } from '@/theme.js';
-import { getBuiltinThemes } from '@/theme.js';
-import { $i } from '@/i.js';
-import { prefer } from '@/preferences.js';
-
-export function getThemes(): Theme[] {
-	if ($i == null) return [];
-	return prefer.s.themes;
-}
-
-export async function addTheme(theme: Theme): Promise<void> {
-	if ($i == null) return;
-	const builtinThemes = await getBuiltinThemes();
-	if (builtinThemes.some(t => t.id === theme.id)) {
-		throw new Error('builtin theme');
-	}
-	const themes = getThemes();
-	if (themes.some(t => t.id === theme.id)) {
-		throw new Error('already exists');
-	}
-	prefer.commit('themes', [...themes, theme]);
-}
-
-export async function removeTheme(theme: Theme): Promise<void> {
-	if ($i == null) return;
-	const themes = getThemes().filter(t => t.id !== theme.id);
-	prefer.commit('themes', themes);
-}

packages/frontend/src/theme.ts

@@ -8,11 +8,13 @@ import tinycolor from 'tinycolor2';
 import lightTheme from '@@/themes/_light.json5';
 import darkTheme from '@@/themes/_dark.json5';
 import JSON5 from 'json5';
+import type { Ref } from 'vue';
 import type { BundledTheme } from 'shiki/themes';
 import { deepClone } from '@/utility/clone.js';
 import { globalEvents } from '@/events.js';
 import { miLocalStorage } from '@/local-storage.js';
-import { addTheme, getThemes } from '@/theme-store.js';
+import { $i } from '@/i.js';
+import { prefer } from '@/preferences.js';
 
 export type Theme = {
 	id: string;
@@ -57,11 +59,34 @@ export const getBuiltinThemes = () => Promise.all(
 	].map(name => import(`@@/themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
 );
 
-export const getBuiltinThemesRef = () => {
+export function getBuiltinThemesRef() {
 	const builtinThemes = ref<Theme[]>([]);
 	getBuiltinThemes().then(themes => builtinThemes.value = themes);
 	return builtinThemes;
-};
+}
+
+export function getThemesRef(): Ref<Theme[]> {
+	return prefer.r.themes;
+}
+
+export async function addTheme(theme: Theme): Promise<void> {
+	if ($i == null) return;
+	const builtinThemes = await getBuiltinThemes();
+	if (builtinThemes.some(t => t.id === theme.id)) {
+		throw new Error('builtin theme');
+	}
+	const themes = prefer.s.themes;
+	if (themes.some(t => t.id === theme.id)) {
+		throw new Error('already exists');
+	}
+	prefer.commit('themes', [...themes, theme]);
+}
+
+export async function removeTheme(theme: Theme): Promise<void> {
+	if ($i == null) return;
+	const themes = prefer.s.themes.filter(t => t.id !== theme.id);
+	prefer.commit('themes', themes);
+}
 
 let timeout: number | null = null;
 
@@ -173,7 +198,7 @@ export function parseThemeCode(code: string): Theme {
 	if (!validateTheme(theme)) {
 		throw new Error('This theme is invaild');
 	}
-	if (getThemes().some(t => t.id === theme.id)) {
+	if (prefer.s.themes.some(t => t.id === theme.id)) {
 		throw new Error('This theme is already installed');
 	}
 

packages/frontend/src/ui/_common_/navbar-for-mobile.vue

@@ -159,7 +159,7 @@ function more() {
 
 	&:hover, &.active {
 		&::before {
-			background: var(--MI_THEME-accentLighten);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 		}
 	}
 }
@@ -221,7 +221,7 @@ function more() {
 
 	&:hover {
 		text-decoration: none;
-		color: var(--MI_THEME-navHoverFg);
+		color: light-dark(hsl(from var(--MI_THEME-navFg) h s calc(l - 17)), hsl(from var(--MI_THEME-navFg) h s calc(l + 17)));
 	}
 
 	&.active {

packages/frontend/src/ui/_common_/navbar-h.vue

@@ -0,0 +1,214 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="azykntjl">
+	<div class="body">
+		<div class="left">
+			<button v-click-anime class="item _button instance" @click="openInstanceMenu">
+				<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" draggable="false"/>
+			</button>
+			<MkA v-click-anime v-tooltip="i18n.ts.timeline" class="item index" activeClass="active" to="/" exact>
+				<i class="ti ti-home ti-fw"></i>
+			</MkA>
+			<template v-for="item in menu">
+				<div v-if="item === '-'" class="divider"></div>
+				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="navbarItemDef[item].title" class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+					<i class="ti-fw" :class="navbarItemDef[item].icon"></i>
+					<span v-if="navbarItemDef[item].indicated" class="indicator _blink"><i class="_indicatorCircle"></i></span>
+				</component>
+			</template>
+			<div class="divider"></div>
+			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" activeClass="active" to="/admin" :behavior="settingsWindowed ? 'window' : null">
+				<i class="ti ti-dashboard ti-fw"></i>
+			</MkA>
+			<button v-click-anime class="item _button" @click="more">
+				<i class="ti ti-dots ti-fw"></i>
+				<span v-if="otherNavItemIndicated" class="indicator _blink"><i class="_indicatorCircle"></i></span>
+			</button>
+		</div>
+		<div class="right">
+			<MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'window' : null">
+				<i class="ti ti-settings ti-fw"></i>
+			</MkA>
+			<button v-click-anime class="item _button account" @click="openAccountMenu">
+				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
+			</button>
+			<div class="post" @click="os.post()">
+				<MkButton class="button" gradate full rounded>
+					<i class="ti ti-pencil ti-fw"></i>
+				</MkButton>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
+import { openInstanceMenu } from './common.js';
+import * as os from '@/os.js';
+import { navbarItemDef } from '@/navbar.js';
+import MkButton from '@/components/MkButton.vue';
+import { instance } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import { prefer } from '@/preferences.js';
+import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
+import { $i } from '@/i.js';
+
+const WINDOW_THRESHOLD = 1400;
+
+const settingsWindowed = ref(window.innerWidth > WINDOW_THRESHOLD);
+const menu = ref(prefer.s.menu);
+// const menuDisplay = computed(store.makeGetterSetter('menuDisplay'));
+const otherNavItemIndicated = computed<boolean>(() => {
+	for (const def in navbarItemDef) {
+		if (menu.value.includes(def)) continue;
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+function more(ev: MouseEvent) {
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
+		src: ev.currentTarget ?? ev.target,
+		anchor: { x: 'center', y: 'bottom' },
+	}, {
+		closed: () => dispose(),
+	});
+}
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+onMounted(() => {
+	window.addEventListener('resize', () => {
+		settingsWindowed.value = (window.innerWidth >= WINDOW_THRESHOLD);
+	}, { passive: true });
+});
+
+</script>
+
+<style lang="scss" scoped>
+.azykntjl {
+	$height: 60px;
+	$avatar-size: 32px;
+	$avatar-margin: 8px;
+
+	position: sticky;
+	top: 0;
+	z-index: 1000;
+	width: 100%;
+	height: $height;
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.75);
+	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
+	backdrop-filter: var(--MI-blur, blur(15px));
+
+	> .body {
+		max-width: 1380px;
+		margin: 0 auto;
+		display: flex;
+
+		> .right,
+		> .left {
+
+			> .item {
+				position: relative;
+				font-size: 0.9em;
+				display: inline-block;
+				padding: 0 12px;
+				line-height: $height;
+
+				> i,
+				> .avatar {
+					margin-right: 0;
+				}
+
+				> i {
+					left: 10px;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .indicator {
+					position: absolute;
+					top: 0;
+					left: 0;
+					color: var(--MI_THEME-navIndicator);
+					font-size: 8px;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: light-dark(hsl(from var(--MI_THEME-navFg) h s calc(l - 17)), hsl(from var(--MI_THEME-navFg) h s calc(l + 17)));
+				}
+
+				&.active {
+					color: var(--MI_THEME-navActive);
+				}
+			}
+
+			> .divider {
+				display: inline-block;
+				height: 16px;
+				margin: 0 10px;
+				border-right: solid 0.5px var(--MI_THEME-divider);
+			}
+
+			> .instance {
+				display: inline-block;
+				position: relative;
+				width: 56px;
+				height: 100%;
+				vertical-align: bottom;
+
+				> img {
+					display: inline-block;
+					width: 24px;
+					position: absolute;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+					margin: auto;
+				}
+			}
+
+			> .post {
+				display: inline-block;
+
+				> .button {
+					width: 40px;
+					height: 40px;
+					padding: 0;
+					min-width: 0;
+				}
+			}
+
+			> .account {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: top;
+				margin-right: 8px;
+
+				> .acct {
+					margin-left: 8px;
+				}
+			}
+		}
+
+		> .right {
+			margin-left: auto;
+		}
+	}
+}
+</style>

packages/frontend/src/ui/_common_/navbar.vue

@@ -382,7 +382,7 @@ function menuEdit() {
 
 		&:hover, &.active {
 			&::before {
-				background: var(--MI_THEME-accentLighten);
+				background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 			}
 		}
 	}
@@ -456,7 +456,7 @@ function menuEdit() {
 
 		&:hover {
 			text-decoration: none;
-			color: var(--MI_THEME-navHoverFg);
+			color: light-dark(hsl(from var(--MI_THEME-navFg) h s calc(l - 17)), hsl(from var(--MI_THEME-navFg) h s calc(l + 17)));
 		}
 
 		&.active {
@@ -612,7 +612,7 @@ function menuEdit() {
 
 		&:hover, &.active {
 			&::before {
-				background: var(--MI_THEME-accentLighten);
+				background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 			}
 		}
 	}

packages/frontend/src/ui/deck.vue

@@ -4,37 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { [$style.rootIsMobile]: isMobile }]">
-	<XSidebar v-if="!isMobile"/>
+<div :class="[$style.root, { [$style.withWallpaper]: withWallpaper }]">
+	<XSidebar v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'left'"/>
 
 	<div :class="$style.main">
+		<XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'top'"/>
+
 		<XAnnouncements v-if="$i"/>
 		<XStatusBars/>
-		<div ref="columnsEl" :class="[$style.sections, { [$style.center]: prefer.r['deck.columnAlign'].value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.self="onWheel">
-			<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-			<section
-				v-for="ids in layout"
-				:class="$style.section"
-				:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
-				@wheel.self="onWheel"
-			>
-				<component
-					:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
-					v-for="id in ids"
-					:ref="id"
-					:key="id"
-					:class="$style.column"
-					:column="columns.find(c => c.id === id)!"
-					:isStacked="ids.length > 1"
-					@headerWheel="onWheel"
-				/>
-			</section>
-			<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
-				<div>{{ i18n.ts._deck.introduction }}</div>
-				<MkButton primary style="margin: 1em auto;" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
-				<div>{{ i18n.ts._deck.introduction2 }}</div>
+
+		<div :class="$style.columnsWrapper">
+			<div ref="columnsEl" :class="[$style.columns, { [$style.center]: prefer.r['deck.columnAlign'].value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.self="onWheel">
+				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+				<section
+					v-for="ids in layout"
+					:class="$style.section"
+					:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
+					@wheel.self="onWheel"
+				>
+					<component
+						:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
+						v-for="id in ids"
+						:ref="id"
+						:key="id"
+						:class="[$style.column, { '_shadow': withWallpaper }]"
+						:column="columns.find(c => c.id === id)!"
+						:isStacked="ids.length > 1"
+						@headerWheel="onWheel"
+					/>
+				</section>
+				<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
+					<div>{{ i18n.ts._deck.introduction }}</div>
+					<div>{{ i18n.ts._deck.introduction2 }}</div>
+				</div>
 			</div>
-			<div :class="$style.sideMenu">
+
+			<div v-if="prefer.r['deck.menuPosition'].value === 'right'" :class="$style.sideMenu">
 				<div :class="$style.sideMenuTop">
 					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${prefer.s['deck.profile']}`" :class="$style.sideMenuButton" class="_button" @click="switchProfileMenu"><i class="ti ti-caret-down"></i></button>
 					<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" :class="$style.sideMenuButton" class="_button" @click="deleteProfile"><i class="ti ti-trash"></i></button>
@@ -43,22 +48,37 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" :class="$style.sideMenuButton" class="_button" @click="addColumn"><i class="ti ti-plus"></i></button>
 				</div>
 				<div :class="$style.sideMenuBottom">
-					<button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.sideMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.sideMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings-2"></i></button>
 				</div>
 			</div>
 		</div>
-	</div>
 
-	<div v-if="isMobile" :class="$style.nav">
-		<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
-		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
-		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
-			<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
-			<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
-				<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
-			</span>
-		</button>
-		<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
+		<div v-if="prefer.r['deck.menuPosition'].value === 'bottom'" :class="$style.bottomMenu">
+			<div :class="$style.bottomMenuLeft">
+				<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${prefer.s['deck.profile']}`" :class="$style.bottomMenuButton" class="_button" @click="switchProfileMenu"><i class="ti ti-caret-down"></i></button>
+				<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" :class="$style.bottomMenuButton" class="_button" @click="deleteProfile"><i class="ti ti-trash"></i></button>
+			</div>
+			<div :class="$style.bottomMenuMiddle">
+				<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" :class="$style.bottomMenuButton" class="_button" @click="addColumn"><i class="ti ti-plus"></i></button>
+			</div>
+			<div :class="$style.bottomMenuRight">
+				<button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.bottomMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings-2"></i></button>
+			</div>
+		</div>
+
+		<XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'bottom'"/>
+
+		<div v-if="isMobile" :class="$style.nav">
+			<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
+			<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
+			<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
+				<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
+				<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
+					<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
+				</span>
+			</button>
+			<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
+		</div>
 	</div>
 
 	<Transition
@@ -96,8 +116,8 @@ import { computed, defineAsyncComponent, ref, useTemplateRef } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XCommon from './_common_/common.vue';
 import XSidebar from '@/ui/_common_/navbar.vue';
+import XNavbarH from '@/ui/_common_/navbar-h.vue';
 import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
-import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { navbarItemDef } from '@/navbar.js';
 import { $i } from '@/i.js';
@@ -116,6 +136,7 @@ import XDirectColumn from '@/ui/deck/direct-column.vue';
 import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
 import { mainRouter } from '@/router.js';
 import { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumnToStore, deleteProfile as deleteProfile_ } from '@/deck.js';
+
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
 
@@ -148,7 +169,9 @@ window.addEventListener('resize', () => {
 });
 
 const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';
+const withWallpaper = prefer.s['deck.wallpaper'] != null;
 const drawerMenuShowing = ref(false);
+const gap = prefer.r['deck.columnGap'];
 
 /*
 const route = 'TODO';
@@ -202,9 +225,6 @@ function onWheel(ev: WheelEvent) {
 	}
 }
 
-window.document.documentElement.style.overflowY = 'hidden';
-window.document.documentElement.style.scrollBehavior = 'auto';
-
 async function deleteProfile() {
 	if (prefer.s['deck.profile'] == null) return;
 
@@ -219,6 +239,12 @@ async function deleteProfile() {
 	os.success();
 }
 
+window.document.documentElement.style.overflowY = 'hidden';
+window.document.documentElement.style.scrollBehavior = 'auto';
+
+if (prefer.s['deck.wallpaper'] != null) {
+	window.document.documentElement.style.backgroundImage = `url(${prefer.s['deck.wallpaper']})`;
+}
 </script>
 
 <style lang="scss" module>
@@ -249,16 +275,18 @@ async function deleteProfile() {
 
 	--MI-margin: var(--MI-marginHalf);
 
-	--columnGap: 6px;
+	--columnGap: v-bind("gap + 'px'");
 
 	display: flex;
 	height: 100dvh;
 	box-sizing: border-box;
 	flex: 1;
-}
 
-.rootIsMobile {
-	padding-bottom: 100px;
+	&.withWallpaper {
+		.main {
+			background: transparent;
+		}
+	}
 }
 
 .main {
@@ -266,15 +294,23 @@ async function deleteProfile() {
 	min-width: 0;
 	display: flex;
 	flex-direction: column;
+	background: var(--MI_THEME-deckBg);
 }
 
-.sections {
+.columnsWrapper {
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+}
+
+.columns {
 	flex: 1;
 	display: flex;
 	overflow-x: auto;
 	overflow-y: clip;
 	overscroll-behavior: contain;
-	background: var(--MI_THEME-deckBg);
+	padding: var(--columnGap);
+	gap: var(--columnGap);
 
 	&.center {
 		> .section:first-of-type {
@@ -294,15 +330,10 @@ async function deleteProfile() {
 .section {
 	display: flex;
 	flex-direction: column;
-	scroll-snap-align: start;
 	flex-shrink: 0;
-	padding-top: var(--columnGap);
-	padding-bottom: var(--columnGap);
-	padding-left: var(--columnGap);
-
-	> .column:not(:last-of-type) {
-		margin-bottom: var(--columnGap);
-	}
+	gap: var(--columnGap);
+	scroll-snap-align: start;
+	scroll-margin-left: var(--columnGap);
 }
 
 .onboarding {
@@ -341,6 +372,33 @@ async function deleteProfile() {
 	margin-top: auto;
 }
 
+.bottomMenu {
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	height: 32px;
+}
+
+.bottomMenuButton {
+	display: block;
+	height: 100%;
+	aspect-ratio: 1;
+}
+
+.bottomMenuLeft {
+	margin-right: auto;
+}
+
+.bottomMenuMiddle {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.bottomMenuRight {
+	margin-left: auto;
+}
+
 .menuBg {
 	z-index: 1001;
 }
@@ -360,10 +418,6 @@ async function deleteProfile() {
 }
 
 .nav {
-	position: fixed;
-	z-index: 1000;
-	bottom: 0;
-	left: 0;
 	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr;

packages/frontend/src/ui/deck/column.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div
-	:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready }]"
+	:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready, [$style.withWallpaper]: withWallpaper }]"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
@@ -48,11 +48,14 @@ import type { MenuItem } from '@/types/menu.js';
 import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from '@/deck.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
+import { prefer } from '@/preferences.js';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
 provide('forceSpacerMin', true);
 
+const withWallpaper = prefer.s['deck.wallpaper'] != null;
+
 const props = withDefaults(defineProps<{
 	column: Column;
 	isStacked?: boolean;
@@ -108,9 +111,7 @@ function getMenu() {
 	const menuItems: MenuItem[] = [];
 
 	if (props.menu) {
-		menuItems.push(...props.menu, {
-			type: 'divider',
-		});
+		menuItems.push(...props.menu);
 	}
 
 	if (props.refresher) {
@@ -125,6 +126,12 @@ function getMenu() {
 		});
 	}
 
+	if (menuItems.length > 0) {
+		menuItems.push({
+			type: 'divider',
+		});
+	}
+
 	menuItems.push({
 		icon: 'ti ti-settings',
 		text: i18n.ts._deck.configureColumn,
@@ -153,6 +160,21 @@ function getMenu() {
 		},
 	});
 
+	const flexibleRef = ref(props.column.flexible ?? false);
+
+	watch(flexibleRef, flexible => {
+		updateColumn(props.column.id, {
+			flexible,
+		});
+	});
+
+	menuItems.push({
+		type: 'switch',
+		icon: 'ti ti-arrows-horizontal',
+		text: i18n.ts._deck.flexible,
+		ref: flexibleRef,
+	});
+
 	const moveToMenuItems: MenuItem[] = [];
 
 	moveToMenuItems.push({
@@ -333,9 +355,7 @@ function onDrop(ev) {
 	}
 
 	&.naked {
-		background: var(--MI_THEME-acrylicBg) !important;
-		-webkit-backdrop-filter: var(--MI-blur, blur(10px));
-		backdrop-filter: var(--MI-blur, blur(10px));
+		background: color(from var(--MI_THEME-bg) srgb r g b / 0.5) !important;
 
 		> .header {
 			background: transparent;
@@ -353,6 +373,22 @@ function onDrop(ev) {
 		}
 	}
 
+	&.withWallpaper {
+		&.naked {
+			background: color(from var(--MI_THEME-bg) srgb r g b / 0.75) !important;
+			-webkit-backdrop-filter: var(--MI-blur, blur(10px));
+			backdrop-filter: var(--MI-blur, blur(10px));
+
+			> .header {
+				color: light-dark(#000000bf, #ffffffbf);
+			}
+		}
+
+		.tabShape {
+			display: none;
+		}
+	}
+
 	&.paged {
 		background: var(--MI_THEME-bg) !important;
 

packages/frontend/src/utility/autogen/settings-search-index.ts

@@ -37,11 +37,6 @@ export const searchIndexes: SearchIndexItem[] = [
 				label: i18n.ts.themeForDarkMode,
 				keywords: ['dark', 'theme'],
 			},
-			{
-				id: '8wcoRp76b',
-				label: i18n.ts.setWallpaper,
-				keywords: ['wallpaper'],
-			},
 		],
 		label: i18n.ts.theme,
 		keywords: ['theme'],
@@ -682,7 +677,7 @@ export const searchIndexes: SearchIndexItem[] = [
 		id: '9bNikHWzQ',
 		children: [
 			{
-				id: 'appYJbpkK',
+				id: 't6XtfnRm9',
 				label: i18n.ts._settings.showNavbarSubButtons,
 				keywords: ['navbar', 'sidebar', 'toggle', 'button', 'sub'],
 			},
@@ -861,25 +856,45 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['sync', 'profiles', 'devices'],
 			},
 			{
-				id: 'iEF0gqNAo',
+				id: 'wWH4pxMQN',
 				label: i18n.ts._deck.useSimpleUiForNonRootPages,
 				keywords: ['ui', 'root', 'page'],
 			},
 			{
-				id: 'BNdSeWxZn',
+				id: '3LR509BvD',
 				label: i18n.ts.defaultNavigationBehaviour,
 				keywords: ['default', 'navigation', 'behaviour', 'window'],
 			},
 			{
-				id: 'zT9pGm8DF',
+				id: 'ybU8RLXgm',
 				label: i18n.ts._deck.alwaysShowMainColumn,
 				keywords: ['always', 'show', 'main', 'column'],
 			},
 			{
-				id: '5dk2xv1vc',
+				id: 'xRasZyAVl',
 				label: i18n.ts._deck.columnAlign,
 				keywords: ['column', 'align'],
 			},
+			{
+				id: '6qcyPd0oJ',
+				label: i18n.ts._deck.deckMenuPosition,
+				keywords: ['menu', 'position'],
+			},
+			{
+				id: '4zk2Now4S',
+				label: i18n.ts._deck.navbarPosition,
+				keywords: ['navbar', 'position'],
+			},
+			{
+				id: 'CGNtJ2I3n',
+				label: i18n.ts._deck.columnGap,
+				keywords: ['column', 'gap', 'margin'],
+			},
+			{
+				id: 'rxPDMo7bE',
+				label: i18n.ts.setWallpaper,
+				keywords: ['wallpaper'],
+			},
 		],
 		label: i18n.ts.deck,
 		keywords: ['deck', 'ui'],

packages/frontend/src/utility/intl-string.ts

@@ -82,16 +82,17 @@ export function normalizeStringWithHiragana(str: string) {
 
 /** aとbが同じかどうか */
 export function compareStringEquals(a: string, b: string) {
-	return (
-		normalizeString(a) === normalizeString(b) ||
-		normalizeStringWithHiragana(a) === normalizeStringWithHiragana(b)
-	);
+	if (a === b) return true; // まったく同じ場合はtrue。なお、ノーマライズ前後で文字数が変化することがあるため、文字数が違うからといってfalseにはできない
+	if (normalizeString(a) === normalizeString(b)) return true;
+	if (normalizeStringWithHiragana(a) === normalizeStringWithHiragana(b)) return true;
+	return false;
 }
 
 /** baseにqueryが含まれているかどうか */
 export function compareStringIncludes(base: string, query: string) {
-	return (
-		normalizeString(base).includes(normalizeString(query)) ||
-		normalizeStringWithHiragana(base).includes(normalizeStringWithHiragana(query))
-	);
+	if (base === query) return true; // まったく同じ場合は含まれていると考えてよいのでtrue
+	if (base.includes(query)) return true;
+	if (normalizeString(base).includes(normalizeString(query))) return true;
+	if (normalizeStringWithHiragana(base).includes(normalizeStringWithHiragana(query))) return true;
+	return false;
 }

packages/misskey-js/generator/package.json

@@ -8,9 +8,9 @@
 	},
 	"devDependencies": {
 		"@readme/openapi-parser": "2.7.0",
-		"@types/node": "22.13.9",
-		"@typescript-eslint/eslint-plugin": "8.26.0",
-		"@typescript-eslint/parser": "8.26.0",
+		"@types/node": "22.13.15",
+		"@typescript-eslint/eslint-plugin": "8.29.0",
+		"@typescript-eslint/parser": "8.29.0",
 		"openapi-types": "12.1.3",
 		"openapi-typescript": "6.7.6",
 		"ts-case-convert": "2.1.0",