refactor(files): the provider marks and the map that keys them live apart

The marks module exports components only, so fast refresh keeps it whole and react-refresh no longer counts it; the map by provider id moves to documentProviderIconMap.ts, which every caller now imports.

client/scripts/eslint-baseline.json

@@ -20,7 +20,7 @@
     "no-useless-assignment": 7,
     "no-empty": 19,
     "trek/no-window-globals": 41,
-    "react-refresh/only-export-components": 45,
+    "react-refresh/only-export-components": 44,
     "unused-disable-directive": 6,
     "max-depth": 21,
     "react-hooks/void-use-memo": 1,

client/src/components/Admin/AddonManager.tsx

@@ -5,7 +5,7 @@ import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, I
 import EmptyState from '../shared/EmptyState'
 import DawarichIcon from '../shared/DawarichIcon'
 import AirTrailIcon from '../shared/AirTrailIcon'
-import { DOCUMENT_PROVIDER_ICONS } from '../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../shared/documentProviderIconMap'
 import AddonTile from './AddonTile'
 import AddonSubRow from './AddonSubRow'
 import { Tooltip } from '../shared/Tooltip'

client/src/components/Files/docsync/DocSyncBinding.tsx

@@ -7,7 +7,7 @@ import CustomSelect from '../../shared/CustomSelect'
 import ToggleSwitch from '../../Settings/ToggleSwitch'
 import Tooltip from '../../shared/Tooltip'
 import { useTranslation } from '../../../i18n/TranslationContext'
-import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../shared/documentProviderIconMap'
 import DocSyncFlow, { type SyncDirection } from './DocSyncFlow'
 import { Badge, CONFLICT_POLICIES, conflictPolicyKey, LastRun, StateBadge } from './DocSyncBits'
 import { bindingNotice, needsReauth, type DocSyncLink, type useDocSync } from './useDocSync'

client/src/components/Files/docsync/DocSyncConnectModal.tsx

@@ -6,7 +6,7 @@ import ToggleSwitch from '../../Settings/ToggleSwitch'
 import { useTranslation } from '../../../i18n/TranslationContext'
 import { useConnectForm } from './useConnectForm'
 import { Badge } from './DocSyncBits'
-import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../shared/documentProviderIconMap'
 import type { DocSyncProvider, DocSyncVerdict, useDocSync } from './useDocSync'
 
 /**

client/src/components/Files/docsync/DocSyncFlow.tsx

@@ -1,6 +1,6 @@
 import { ArrowLeft, ArrowRight } from 'lucide-react'
 import { useTranslation } from '../../../i18n/TranslationContext'
-import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../shared/documentProviderIconMap'
 import TrekIcon from '../../shared/TrekIcon'
 import { Badge } from './DocSyncBits'
 import { toggledDirection, type SyncDirection } from './docSyncModel'

client/src/components/Files/docsync/DocSyncPanel.tsx

@@ -2,7 +2,7 @@ import { useEffect, useId, useMemo, useState } from 'react'
 import { AlertCircle, ArrowRight, Check, FolderSync, Loader2, Plus } from 'lucide-react'
 import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT } from '../../shared/DialogShell'
 import { useTranslation } from '../../../i18n/TranslationContext'
-import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../shared/documentProviderIconMap'
 import { StateBadge } from './DocSyncBits'
 import { slugFor } from './docSyncModel'
 import { useConflicts } from './useConflicts'

client/src/components/shared/DocumentProviderIcons.test.tsx

@@ -13,7 +13,7 @@
 import { describe, it, expect } from 'vitest'
 import { DOCUMENT_PROVIDER_IDS } from '@trek/shared'
 import { render } from '../../../tests/helpers/render'
-import { DOCUMENT_PROVIDER_ICONS } from './DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from './documentProviderIconMap'
 import TrekIcon from './TrekIcon'
 
 const marks = Object.entries(DOCUMENT_PROVIDER_ICONS)

client/src/components/shared/DocumentProviderIcons.tsx

@@ -15,7 +15,7 @@ import React from 'react'
  * for legibility in a monochrome row.
  */
 
-interface GlyphProps {
+export interface GlyphProps {
   size?: number
   className?: string
 }
@@ -34,7 +34,7 @@ function frame(size: number, className: string | undefined) {
 }
 
 /** Paperless-ngx: the leaf, with the shoot curling out of its stem. */
-function PaperlessIcon({ size = 20, className }: GlyphProps): React.ReactElement {
+export function PaperlessIcon({ size = 20, className }: GlyphProps): React.ReactElement {
   return (
     <svg {...frame(size, className)}>
       <path
@@ -64,7 +64,7 @@ function PaperlessIcon({ size = 20, className }: GlyphProps): React.ReactElement
 }
 
 /** Papra: a sheet with a folded corner and its lines of text. */
-function PapraIcon({ size = 20, className }: GlyphProps): React.ReactElement {
+export function PapraIcon({ size = 20, className }: GlyphProps): React.ReactElement {
   return (
     <svg {...frame(size, className)}>
       <path
@@ -87,7 +87,7 @@ function PapraIcon({ size = 20, className }: GlyphProps): React.ReactElement {
 }
 
 /** Nextcloud: the three rings. */
-function NextcloudIcon({ size = 20, className }: GlyphProps): React.ReactElement {
+export function NextcloudIcon({ size = 20, className }: GlyphProps): React.ReactElement {
   return (
     <svg {...frame(size, className)}>
       <circle cx="256" cy="256" r="97" stroke="currentColor" strokeWidth="42" />
@@ -98,7 +98,7 @@ function NextcloudIcon({ size = 20, className }: GlyphProps): React.ReactElement
 }
 
 /** OpenCloud: the open hexagon with the junction inside it. */
-function OpenCloudIcon({ size = 20, className }: GlyphProps): React.ReactElement {
+export function OpenCloudIcon({ size = 20, className }: GlyphProps): React.ReactElement {
   return (
     <svg {...frame(size, className)}>
       <path d="M26 128 256 8l230 120v72L256 80 26 200z" fill="currentColor" />
@@ -112,7 +112,7 @@ function OpenCloudIcon({ size = 20, className }: GlyphProps): React.ReactElement
 }
 
 /** Synology Drive: the wordmark's own glyph, as the addon list already draws it. */
-function SynologyDriveIcon({ size = 20, className }: GlyphProps): React.ReactElement {
+export function SynologyDriveIcon({ size = 20, className }: GlyphProps): React.ReactElement {
   return (
     <svg
       width={className ? undefined : size}
@@ -126,12 +126,3 @@ function SynologyDriveIcon({ size = 20, className }: GlyphProps): React.ReactEle
     </svg>
   )
 }
-
-/** Keyed by the provider ids in `document_providers`. */
-export const DOCUMENT_PROVIDER_ICONS: Record<string, React.ComponentType<GlyphProps>> = {
-  paperless: PaperlessIcon,
-  papra: PapraIcon,
-  nextcloud: NextcloudIcon,
-  opencloud: OpenCloudIcon,
-  synologydrive: SynologyDriveIcon,
-}

client/src/components/shared/documentProviderIconMap.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+import {
+  type GlyphProps,
+  NextcloudIcon,
+  OpenCloudIcon,
+  PaperlessIcon,
+  PapraIcon,
+  SynologyDriveIcon,
+} from './DocumentProviderIcons';
+
+/**
+ * The document providers' marks keyed by the provider ids in `document_providers`.
+ * Kept apart from the drawings so that module exports components only.
+ */
+export const DOCUMENT_PROVIDER_ICONS: Record<string, React.ComponentType<GlyphProps>> = {
+  paperless: PaperlessIcon,
+  papra: PapraIcon,
+  nextcloud: NextcloudIcon,
+  opencloud: OpenCloudIcon,
+  synologydrive: SynologyDriveIcon,
+};

client/src/mobile/screens/admin/MAdminAddonManager.tsx

@@ -7,7 +7,7 @@ import {
 } from 'lucide-react'
 import DawarichIcon from '../../../components/shared/DawarichIcon'
 import AirTrailIcon from '../../../components/shared/AirTrailIcon'
-import { DOCUMENT_PROVIDER_ICONS } from '../../../components/shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../../components/shared/documentProviderIconMap'
 import MToggle from '../../components/MToggle'
 import {
   type Addon,

client/src/mobile/screens/trip/tabs/MDocSyncSheet.tsx

@@ -9,7 +9,7 @@ import MToggle from '../../../components/MToggle'
 import MConfirmSheet from '../../settings/MConfirmSheet'
 import { TileHeader } from '../sheets/MTripSheetUi'
 import { useTranslation } from '../../../../i18n'
-import { DOCUMENT_PROVIDER_ICONS } from '../../../../components/shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../../../../components/shared/documentProviderIconMap'
 import TrekIcon from '../../../../components/shared/TrekIcon'
 import {
   bindingNotice, needsReauth, storeName, useDocSync, type DocSyncLink, type DocSyncProvider, type DocSyncVerdict,