fix: clean up unused imports and improve TOTP QR code rendering

components/settings/account-security-settings.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useTranslations } from 'next-intl';
 import QRCode from 'qrcode';
 import * as OTPAuth from 'otpauth';
@@ -294,7 +294,6 @@ function TotpSection() {
           <p className="text-xs text-muted-foreground">{t('totp.setup_instructions')}</p>
           {qrDataUrl && (
             <div className="flex justify-center">
-              { /* eslint-disable-next-line @next/next/no-img-element */ }
               <img src={qrDataUrl} alt="TOTP QR code" className="rounded bg-white p-2" />
             </div>
           )}

stores/account-security-store.ts

@@ -190,8 +190,7 @@ export const useAccountSecurityStore = create<AccountSecurityState>()((set, get)
       const acc = result.list?.[0];
       const aliasAddresses = acc?.aliases
         ? Object.values(acc.aliases)
-            .filter((a) => a?.enabled !== false && a?.name)
-            .map((a) => a?.name!)
+            .flatMap((a) => (a && a.enabled !== false && a.name ? [a.name] : []))
         : [];
       const primaryEmail = acc?.name ? [acc.name] : [];
       set({