458bf4a5-e7d4-4514-b95c-86678cd78b55

Committed 08 Apr 2026 12:12PM UTC coverage: 10.61% (+3.1%) from 7.472%

Build # 458bf4a5-e7d4-4514-b95c-86678cd78b55

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #471 from inclusion-numerique/feat/quick-access

feat: quick access items

Coverage Stats

698 of 10544 branches covered (6.62%)

Branch coverage included in aggregate %.

0 of 5 new or added lines in 1 file covered. (0.0%)

955 existing lines in 97 files now uncovered.

2166 of 16449 relevant lines covered (13.17%)

1.99 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/apps/web/src/components/HeaderQuickAccess.tsx

'use client'

import { Pictogram } from '@app/web/features/pictograms/pictogram'
import { AbcDiagLogo } from '@app/web/features/pictograms/services/AbcDiagLogo'
import { AidantsConnectLogo } from '@app/web/features/pictograms/services/AidantsConnectLogo'
import { CartographieLogo } from '@app/web/features/pictograms/services/CartographieLogo'
import { LesBasesLogo } from '@app/web/features/pictograms/services/LesBasesLogo'
import { PixOrgaLogo } from '@app/web/features/pictograms/services/PixOrgaLogo'
import { RDVServicePublicLogo } from '@app/web/features/pictograms/services/RDVServicePublicLogo'
import * as Popover from '@radix-ui/react-popover'
import { useState } from 'react'
import styles from './HeaderQuickAccess.module.css'

const tools: { label: string; href: string; icon: Pictogram }[] = [
  {
    label: 'RDV Service Public',
    href: 'https://rdv.anct.gouv.fr',
    icon: RDVServicePublicLogo,
  },
  {
    label: 'Les Bases',
    href: 'https://lesbases.anct.gouv.fr/connexion',
    icon: LesBasesLogo,
  },
  {
    label: 'Cartographie',
    href: 'https://cartographie.societenumerique.gouv.fr',
    icon: CartographieLogo,
  },
  {
    label: 'Aidants Connect',
    href: 'https://aidantsconnect.beta.gouv.fr/accounts/login/',
    icon: AidantsConnectLogo,
  },
  {
    label: 'Pix Orga',
    href: 'https://orga.pix.fr/connexion',
    icon: PixOrgaLogo,
  },
  {
    label: 'ABC Diag',
    href: 'https://pix.fr/abc-diag',
    icon: AbcDiagLogo,
  },
]

export const HeaderQuickAccess = () => {
  const [open, setOpen] = useState(false)

  return (
    <Popover.Root open={open} onOpenChange={setOpen}>
      <Popover.Trigger asChild>
        <button
          className="fr-btn icon-only fr-btn--no-after"
          type="button"
          title="Accès rapide à mes outils"
        >
          <span className="ri-apps-2-line ri-lg" aria-hidden />
        </button>
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Content
          align="end"
          sideOffset={8}
          className={styles.popoverContent}
        >
          <p className="fr-text--bold fr-text--sm fr-text--uppercase fr-mb-3w fr-text-label--blue-france fr-text--center">
            Accès rapide à mes outils
          </p>
          <div className={styles.grid}>
            {tools.map((tool) => (
              <a
                key={tool.label}
                href={tool.href}
                target="_blank"
                rel="noreferrer"
                className={styles.toolItem}
              >
                <div className={styles.iconContainer}>
                  <tool.icon width={40} height={40} />
                </div>
                <span className={styles.toolLabel}>{tool.label}</span>
              </a>
            ))}
          </div>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  )
}

1	'use client'
2
3	import { Pictogram } from '@app/web/features/pictograms/pictogram'
4	import { AbcDiagLogo } from '@app/web/features/pictograms/services/AbcDiagLogo'
5	import { AidantsConnectLogo } from '@app/web/features/pictograms/services/AidantsConnectLogo'
6	import { CartographieLogo } from '@app/web/features/pictograms/services/CartographieLogo'
7	import { LesBasesLogo } from '@app/web/features/pictograms/services/LesBasesLogo'
8	import { PixOrgaLogo } from '@app/web/features/pictograms/services/PixOrgaLogo'
9	import { RDVServicePublicLogo } from '@app/web/features/pictograms/services/RDVServicePublicLogo'
10	import * as Popover from '@radix-ui/react-popover'
11	import { useState } from 'react'
12	import styles from './HeaderQuickAccess.module.css'
13
NEW 14	const tools: { label: string; href: string; icon: Pictogram }[] = [	×
15	{
16	label: 'RDV Service Public',
17	href: 'https://rdv.anct.gouv.fr',
18	icon: RDVServicePublicLogo,
19	},
20	{
21	label: 'Les Bases',
22	href: 'https://lesbases.anct.gouv.fr/connexion',
23	icon: LesBasesLogo,
24	},
25	{
26	label: 'Cartographie',
27	href: 'https://cartographie.societenumerique.gouv.fr',
28	icon: CartographieLogo,
29	},
30	{
31	label: 'Aidants Connect',
32	href: 'https://aidantsconnect.beta.gouv.fr/accounts/login/',
33	icon: AidantsConnectLogo,
34	},
35	{
36	label: 'Pix Orga',
37	href: 'https://orga.pix.fr/connexion',
38	icon: PixOrgaLogo,
39	},
40	{
41	label: 'ABC Diag',
42	href: 'https://pix.fr/abc-diag',
43	icon: AbcDiagLogo,
44	},
45	]
46
NEW 47	export const HeaderQuickAccess = () => {	×
NEW 48	const [open, setOpen] = useState(false)	×
49
NEW 50	return (	×
51	<Popover.Root open={open} onOpenChange={setOpen}>
52	<Popover.Trigger asChild>
53	<button
54	className="fr-btn icon-only fr-btn--no-after"
55	type="button"
56	title="Accès rapide à mes outils"
57	>
58	<span className="ri-apps-2-line ri-lg" aria-hidden />
59	</button>
60	</Popover.Trigger>
61	<Popover.Portal>
62	<Popover.Content
63	align="end"
64	sideOffset={8}
65	className={styles.popoverContent}
66	>
67	<p className="fr-text--bold fr-text--sm fr-text--uppercase fr-mb-3w fr-text-label--blue-france fr-text--center">
68	Accès rapide à mes outils
69	</p>
70	<div className={styles.grid}>
71	{tools.map((tool) => (
NEW 72	<a	×
73	key={tool.label}
74	href={tool.href}
75	target="_blank"
76	rel="noreferrer"
77	className={styles.toolItem}
78	>
79	<div className={styles.iconContainer}>
80	<tool.icon width={40} height={40} />
81	</div>
82	<span className={styles.toolLabel}>{tool.label}</span>
83	</a>
84	))}
85	</div>
86	</Popover.Content>
87	</Popover.Portal>
88	</Popover.Root>
89	)
90	}

inclusion-numerique / coop-mediation-numerique / 458bf4a5-e7d4-4514-b95c-86678cd78b55

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous