Feat/new component by algorythmice · Pull Request #685 · PapillonApp/Papillon

algorythmice · 2026-01-31T00:01:09Z

Règles de contribution

Caution

Afin de garantir une application stable et pérenne dans le temps, nous t'invitons à vérifier que tu as bien respecté les règles de contribution. Sans cela, ta Pull Request ne pourra pas être examinée.

Cette Pull Request porte sur une seule fonctionnalité ou un seul correctif.
Cette Pull Request n'est pas faite essentiellement avec de l'IA.
Pour tout changement majeur, j’ai créé une issue afin d’échanger avec les mainteneurs de Papillon sur la meilleure façon de l’intégrer.
Ma Pull Request respecte les conventions Conventional Commits et Conventional Branch ainsi que les conventions de codage de l'application.
J’ai testé mes modifications sur iOS et Android, et l’application fonctionne correctement.
J’emploie un langage informel, clair et concis dans mes messages.
J’ai documenté mes changements de manière appropriée, soit dans la description de la Pull Request, soit dans le GitBook.
J’ai ajouté les traductions nécessaires dans au moins un fichier de langue.

Résumé des changements

Cette PR remplace les anciennes listes natives d'Android par des listes dans le style de Papillon.

Ajout du composant ActionMenu
Remplacement des MenuView par des ActionMenu
Le composant a été conçu pour être un remplacement direct des balises sans changer la structure de l'élément:

<MenuView>
</MenuView>

Capture(s) d'écran

…d “MenuView”

… Averages.tsx

… index.tsx

Copilot

Pull request overview

This PR introduces a new ActionMenu component intended to replace Android’s native menu lists with Papillon-styled menus, and updates the Grades screens to use it instead of MenuView.

Changes:

Added ui/components/ActionMenu.tsx with an iOS MenuView passthrough and a custom Android modal menu implementation.
Replaced MenuView usage with ActionMenu in Grades header period selector and the Averages method selector.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.

File	Description
ui/components/ActionMenu.tsx	New cross-platform menu component; custom Android rendering and iOS passthrough.
app/(tabs)/grades/index.tsx	Swaps period selector from `MenuView` to `ActionMenu`.
app/(tabs)/grades/atoms/Averages.tsx	Swaps averages method selector from `MenuView` to `ActionMenu` and adds a missing action `id`.

Copilot · 2026-01-31T00:05:41Z

ui/components/ActionMenu.tsx

+  const primaryColor = colors.primary;
+  const cardColor = colors.card;
+
+  const triggerRef = useRef<View>(null);


TypeScript strict mode is enabled (tsconfig.json sets strict: true), so useRef<View>(null) will be a type error because null isn’t assignable to View. Use a nullable ref type (e.g., useRef<View | null>(null)), and update the optional chaining accordingly if needed.

Suggested change

const triggerRef = useRef<View>(null);

const triggerRef = useRef<View | null>(null);

Copilot · 2026-01-31T00:05:41Z

ui/components/ActionMenu.tsx

+    return {
+      position: "absolute" as const,
+      top: position.y + position.height + 8,
+      left: Math.min(position.x, 100),
+    };


left: Math.min(position.x, 100) clamps the menu’s left position to at most 100px, so triggers placed to the right will always render the menu at x=100. This looks unintended and will misplace the menu on many layouts. Clamp left within the screen bounds instead (e.g., using Dimensions.get('window').width and the menu width/padding), or align based on the trigger center.

Copilot · 2026-01-31T00:05:41Z

ui/components/ActionMenu.tsx

+  function open() {
+    setVisible(true);
+    setTimeout(() => {
+      triggerRef.current?.measureInWindow((x, y, width, height) => {
+        setPosition({ x, y, width, height });


measureInWindow can be unreliable on Android if the referenced wrapper <View> is flattened out of the native hierarchy (RN collapsable optimization). Since the ref is attached to a wrapper with no styles, consider adding collapsable={false} (or a non-empty style) so measuring consistently returns correct coordinates.

Copilot · 2026-01-31T00:05:41Z

ui/components/ActionMenu.tsx

+} catch {}
+
+interface MenuAction {
+  id: string;


id is required here, but existing MenuView usage in this repo sometimes omits id for grouping actions (e.g. actions that only contain subactions). If this component is meant to be a drop-in replacement, consider making id optional for non-selectable/group items and generating a stable key for rendering on Android.

Suggested change

id: string;

id?: string;

Copilot · 2026-01-31T00:05:42Z

ui/components/ActionMenu.tsx

+              <TouchableOpacity
+                onPress={() => setSubmenu(null)}
+                style={styles.header}
+              >


Submenu navigation only supports a single level: the “back” handler always does setSubmenu(null), so nested submenus can’t return to their parent submenu. If multi-level subactions are possible, track a stack of menus (or parent references) so back returns to the previous submenu.

Copilot · 2026-01-31T00:05:42Z

ui/components/ActionMenu.tsx

+    return {
+      position: "absolute" as const,
+      top: position.y + position.height + 8,
+      left: Math.min(position.x, 100),
+    };


Menu positioning only places the menu below the trigger (top: y + height + 8) without any screen-bound clamping. If the trigger is near the bottom of the screen, the menu will render off-screen. Consider clamping top (and potentially flipping above the trigger when there isn’t enough space) based on window height and measured menu height.

Copilot · 2026-01-31T00:05:42Z

ui/components/ActionMenu.tsx

+  image?: string;
+  imageColor?: string;
+  destructive?: boolean;
+  disabled?: boolean;
+  subactions?: MenuAction[];


Other MenuView call sites in this repo use attributes: { destructive, disabled }. The Android renderer here only reads action.destructive / action.disabled, so those existing actions won’t behave the same if migrated. Consider supporting the library’s attributes field and mapping it to these flags.

Dev-LeChacal

Magnifique !
LGTM

guguss-31 · 2026-01-31T08:04:47Z

#581
Merci beaucoup ❤️ !

Dev-LeChacal

Utilise l'ActionMenu dans le component ChipButton qui utilise aussi le MenuView

…d was not present before

…nteractions.

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

Copilot · 2026-01-31T10:37:42Z

ui/components/ActionMenu.tsx

+  function open() {
+    setVisible(true);
+    setTimeout(() => {
+      triggerRef.current?.measureInWindow((x, y, width, height) => {
+        setPosition({ x, y, width, height });
+      });
+    }, 0);
+  }
+
+  function close() {
+    setVisible(false);
+    setSubmenuStack([]);
+  }


open() schedules a setTimeout that calls setPosition but it’s never cleared on unmount, and position is not reset on close(). This can cause setState-after-unmount warnings and stale positioning on the next open. Consider using requestAnimationFrame (or storing/clearing the timeout id in an effect cleanup) and resetting position to null when closing/opening.

Copilot · 2026-01-31T10:37:43Z

ui/components/ActionMenu.tsx

+interface MenuAction {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  state?: "on" | "off" | "mixed";
+  image?: string;
+  imageColor?: number | ColorValue;
+  destructive?: boolean;
+  disabled?: boolean;
+  subactions?: MenuAction[];
+  displayInline?: boolean;
+  attributes?: {
+    destructive?: boolean;
+    disabled?: boolean;
+    state?: "on" | "off" | "mixed";
+  };
+}
+
+interface ActionMenuProps {
+  actions: MenuAction[];
+  children: ReactNode;
+  onPressAction?: (event: { nativeEvent: { event: string } }) => void;
+  title?: string;
+}


MenuAction is redefined locally but other call sites (e.g. ChipButton) still use MenuAction from @react-native-menu/menu. This duplication can drift and causes avoidable type incompatibilities. Consider exporting a single MenuAction type from ActionMenu (or re-exporting the library type) and using it consistently for actions across the app.

Copilot · 2026-01-31T10:37:43Z

ui/components/ChipButton.tsx

@@ -1,5 +1,5 @@
 import { Papicons } from "@getpapillon/papicons";
-import { MenuAction, MenuView } from '@react-native-menu/menu';
+import { MenuAction } from '@react-native-menu/menu';


MenuAction is only used as a TypeScript type here. Use a type-only import (import type) to ensure it’s erased at runtime and to match existing project patterns (e.g. ui/components/AlertProvider.tsx).

Suggested change

import { MenuAction } from '@react-native-menu/menu';

import type { MenuAction } from '@react-native-menu/menu';

Copilot · 2026-01-31T10:37:43Z

app/(tabs)/grades/index.tsx

+          <ActionMenu
            onPressAction={({ nativeEvent }) => {
              const actionId = nativeEvent.event;


PR description says MenuView usages are replaced by ActionMenu, but there are still multiple MenuView imports/usages in the repo (e.g. app/(features)/(news)/specific.tsx, app/(features)/attendance.tsx, app/(modals)/profile.tsx, app/(modals)/wallpaper.tsx, app/(tabs)/calendar/event/[id].tsx). Either update the description/scope, or complete the replacement in this PR/follow-up.

Copilot · 2026-01-31T10:37:44Z

ui/components/ActionMenu.tsx

+    <View
+      ref={triggerRef}
+      collapsable={false}
+      onTouchEnd={(e) => {
+        if (!visible) {
+          e.stopPropagation();
+          open();
+        }
+      }}


On Android, the menu is opened via the wrapper View’s onTouchEnd. This is likely to never fire when the child is a Touchable*/Pressable (e.g. TabHeaderTitle is a TouchableOpacity with a default onPress), which would prevent the menu from opening. Consider using responder capture (onStartShouldSetResponderCapture/onResponderRelease) or an explicit Pressable trigger wrapper so the ActionMenu reliably receives the gesture, and gate it behind actions.length > 0 to avoid intercepting taps when there’s no menu.

ui/components/ActionMenu.tsx

raphckrman

Hello, merci pour ta Pull Request qui vise à résoudre un problème important sur Android, j'ai fait quelques petits commentaires pour améliorer tout ça, il faudrait aussi faire attention aux safe-areas, par exemple sur un appareil de développement, le menu passe dans l'encoche de la caméra.

raphckrman · 2026-01-31T12:51:23Z

ui/components/ActionMenu.tsx

+let NativeMenuView: any = null;
+try {
+  NativeMenuView = require("@react-native-menu/menu").MenuView;
+} catch {}


Il faudrait peut-être ajouter une gestion des erreurs ici, et peut-être de charger MenuView uniquement si l'appareil est sous iOS puisqu'il est utilisé seulement dans ce cas?

raphckrman · 2026-01-31T12:52:09Z

ui/components/ActionMenu.tsx

+} from "react-native";
+import { useTheme } from "@react-navigation/native";
+
+let NativeMenuView: any = null;


Il faudrait retirer le any pour le remplacer par un typage plus strict

raphckrman · 2026-01-31T12:53:41Z

ui/components/ActionMenu.tsx

+interface MenuAction {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  state?: "on" | "off" | "mixed";
+  image?: string;
+  imageColor?: number | ColorValue;
+  destructive?: boolean;
+  disabled?: boolean;
+  subactions?: MenuAction[];
+  displayInline?: boolean;
+  attributes?: {
+    destructive?: boolean;
+    disabled?: boolean;
+    state?: "on" | "off" | "mixed";
+  };
+}


C'est super le fait que ce soit les mêmes props entre la version native et ta version, mais pourquoi ne pas réutiliser les types de MenuView? Ça pourrait éviter de dupliquer du code et ça assure une cohérence à 100% avec la librairie native dans le cas où l'utilisateur est sous iOS

Oui c'est vrai que c'est plus malin merci!

raphckrman · 2026-01-31T12:54:19Z

ui/components/ActionMenu.tsx

+interface ActionMenuProps {
+  actions: MenuAction[];
+  children: ReactNode;
+  onPressAction?: (event: { nativeEvent: { event: string } }) => void;


Suggested change

onPressAction?: (event: { nativeEvent: { event: string } }) => void;

onPressAction?: ({ nativeEvent }: NativeActionEvent) => void;

raphckrman · 2026-01-31T12:54:41Z

ui/components/ActionMenu.tsx

+interface ActionMenuProps {
+  actions: MenuAction[];
+  children: ReactNode;
+  onPressAction?: (event: { nativeEvent: { event: string } }) => void;
+  title?: string;
+}


Ce serait aussi cool ici d'utiliser les types de la librairie native

raphckrman · 2026-01-31T13:04:56Z

ui/components/ActionMenu.tsx

+                style={styles.header}
+              >
+                <Text style={[styles.back, { color: textColor }]}>
+                  ‹ {currentSubmenu.title}


On retrouve le même problème avec ce symbole Unicode, une Papicons ne ferait pas mieux l'affaire?

raphckrman · 2026-01-31T13:06:04Z

ui/components/ActionMenu.tsx

+    minWidth: 260,
+    maxWidth: 320,


Tu es sûr de ces valeurs ? Papillon est utilisé sur beaucoup d'appareils différents, ça me semble un peu risqué codé ça en dur

oui j'y ai pensé mais je ne sais pas trop comment remplacer ça si tu a une idée

@raphckrman

raphckrman · 2026-01-31T13:07:17Z

ui/components/ActionMenu.tsx

+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "rgba(128,128,128,0.2)",


Il me semble que Papillon a une couleur précise pour les bordures, il faudrait peut-être voir pour l'utiliser, ça permet de modifier partout et rester dans le theme de Papillon

oui j'ai trouvé dans un autre composant: borderBottomColor: (Platform.OS === 'ios' && !runsIOS26) ? colors.border : undefined,

raphckrman · 2026-01-31T13:07:50Z

ui/components/ActionMenu.tsx

+    flexDirection: "row",
+    alignItems: "center",


c'est typiquement ce que peut faire Stack, tu gagnerais en lisibilité etc en utilisant ce composant

raphckrman · 2026-01-31T13:08:27Z

ui/components/ActionMenu.tsx

+    borderRadius: 10,
+  },
+  itemSelected: {
+    backgroundColor: "rgba(0,102,204,0.12)",


Je suis pas méga fan de la couleur, et du fait qu'elle soit en dur dans le code, un avis sur ça @ecnivtwelve ou @tom-things ?

…enuView only on iOS

…w in ActionMenu

… checks

… and fixes the errors in this first commit.

… items

…u in wallpaper.tsx

…Menu in attendance.tsx

…ctionMenu in [id].tsx

…in profile.tsx

…ctionMenu in specific.tsx

raphckrman

Hello, y'a eu pas mal de changements, c'est possible d'avoir un screen de comment ça rend avec les Papicons? Tu as géré aussi pour pas les safe-areas ?

raphckrman · 2026-02-05T19:55:01Z

ui/components/ActionMenu.tsx

+    NativeMenuView = mod?.MenuView ?? null;
+  } catch (err: unknown) {
+    console.warn("ActionMenu: impossible de charger @react-native-menu/menu MenuView:", err);
+    NativeMenuView = null;


Tu l'as déjà mis en null juste avant

raphckrman · 2026-02-05T19:55:17Z

ui/components/ActionMenu.tsx

+    const mod = require("@react-native-menu/menu");
+    NativeMenuView = mod?.MenuView ?? null;
+  } catch (err: unknown) {
+    console.warn("ActionMenu: impossible de charger @react-native-menu/menu MenuView:", err);


On a une méthode dans le logger pour ça

raphckrman · 2026-02-05T19:56:09Z

ui/components/ActionMenu.tsx

+  }
+}
+
+type MenuAction = NativeMenuAction;


Pourquoi ne pas utiliser directement le type NativeMenuAction ?

raphckrman · 2026-02-05T19:56:39Z

ui/components/ActionMenu.tsx

+interface ActionMenuProps {
+  actions: MenuAction[];
+  children: ReactNode;
+  onPressAction?: ({ nativeEvent }: NativeActionEvent) => void;
+  title?: string;
+}


Ce serait possible, dans la continuité de ce qui est déjà fait juste avant, de reprendre les props de la librairie native? Pour être sur que c'est le même fonctionnement

raphckrman · 2026-02-05T19:58:58Z

ui/components/ActionMenu.tsx

+  const colorText = action.imageColor
+    ? action.imageColor
+    : destructive
+      ? destructiveColor
+      : textColor;


l'opération ternaire est un peu chaotique, y'en a deux imbriqué

…lias

…rops

algorythmice · 2026-02-05T21:38:27Z

Hello, y'a eu pas mal de changements, c'est possible d'avoir un screen de comment ça rend avec les Papicons? Tu as géré aussi pour pas les safe-areas ?

J'ai pris en compte les safe-areas et sinon voila ce que ça rend avec les Papicons

algorythmice added 3 commits January 31, 2026 00:39

feat: implements a new custom menu style instead of the native Androi…

ee35556

…d “MenuView”

feat: Modification of “MenuView” by the new component “ActionMenu” in…

7f984a0

… Averages.tsx

feat: Modification of “MenuView” by the new component “ActionMenu” in…

4f34adf

… index.tsx

Copilot AI review requested due to automatic review settings January 31, 2026 00:01

Copilot started reviewing on behalf of algorythmice January 31, 2026 00:01 View session

Copilot AI reviewed Jan 31, 2026

View reviewed changes

Dev-LeChacal approved these changes Jan 31, 2026

View reviewed changes

Dev-LeChacal suggested changes Jan 31, 2026

View reviewed changes

algorythmice added 3 commits January 31, 2026 10:50

fix: Add the changes suggested by copilot in PR

160c7da

fix: Remove id from Averages.tsx because it is no longer necessary an…

e697683

…d was not present before

fix(ui): Replace MenuView with ActionMenu in ChipButton and correct i…

fab33fb

…nteractions.

algorythmice requested review from Dev-LeChacal and Copilot January 31, 2026 10:32

Copilot started reviewing on behalf of algorythmice January 31, 2026 10:32 View session

Copilot AI reviewed Jan 31, 2026

View reviewed changes

raphckrman requested changes Jan 31, 2026

View reviewed changes

This comment was marked as spam.

Sign in to view

algorythmice added 12 commits January 31, 2026 14:40

fix(ui/action-menu): add error handling in ActionMenu.tsx and loads M…

c8a2f8f

…enuView only on iOS

fix(ui/action-menu): Replace any with strict typing for NativeMenuVie…

6fec72f

…w in ActionMenu

fix(ui/action-menu): reusing native types from @react-native-menu

66e2bd2

refactor(ui/action-menu): simplify legacy flag extraction and boolean…

c29394e

… checks

refactor(ui/action-menu): simplify state and legacy flag handling

435bf56

refactor(ui/action-menu): use Stack for item layout

58cde3c

refactor(ui/action-menu): change borderBottomColor

5e31489

refactor(ui/action-menu): simplify menu positioning

6f26487

refactor(ui/action-menu): use textColor for subtitle color

c1a75cf

refactor(ui/action-menu): replace Unicode chevron/check with Papicons

bed2b32

refactor(ui/action-menu): replace Unicode chevron/check with Papicons…

3bbe1d3

… and fixes the errors in this first commit.

refactor(ui/action-menu): use theme destructive color for destructive…

9de87a8

… items

algorythmice requested a review from raphckrman January 31, 2026 15:36

algorythmice added 10 commits January 31, 2026 20:52

refactor(ui/action-menu): remove const textColor

790cc2a

refactor(ui/actionmenu): remove hardcoded values and improve readability

563fe6a

feat(ui/action-menu): support for the “imageColor” parameter

b248f30

feat(app/(modals)/wallpaper): replace MenuView by component ActionMen…

70eceac

…u in wallpaper.tsx

refactor(app/(modals)/wallpaper): remove unused import in wallpaper.tsx

1d802f1

refactor(app/(modals)/wallpaper): remove unused import in wallpaper.tsx

48cf8d3

feat(app/(features)/attendance): replace MenuView by component Action…

482bbf9

…Menu in attendance.tsx

feat(app/(tabs)/calendar/event/[id]): replace MenuView by component A…

26daa16

…ctionMenu in [id].tsx

feat(app/(modals)/profile): replace MenuView by component ActionMenu …

b75d0cb

…in profile.tsx

feat(app/(features)/(news)/specific): replace MenuView by component A…

3745e25

…ctionMenu in specific.tsx

raphckrman requested changes Feb 5, 2026

View reviewed changes

algorythmice added 6 commits February 5, 2026 22:18

chore(ui/action-menu): remove redundant NativeMenuView null assignment

9ff542c

rfactor(ui/action-menu): use NativeMenuAction instead of MenuAction a…

79746ea

…lias

rfactor(ui/action-menu): use NativeMenuComponentProps for component p…

32bd437

…rops

rfactor(ui/action-menu): simplify colorText logic Corps

7f82b0f

chore(ui/action-menu): use internal logger.warn instead of console.warn

d383a63

feat(ui/action-menu): handle safe-areas in menu positioning

417d7a5

algorythmice requested a review from raphckrman February 5, 2026 21:40

	const triggerRef = useRef<View>(null);
	const triggerRef = useRef<View \| null>(null);

	import { MenuAction } from '@react-native-menu/menu';
	import type { MenuAction } from '@react-native-menu/menu';

	onPressAction?: (event: { nativeEvent: { event: string } }) => void;
	onPressAction?: ({ nativeEvent }: NativeActionEvent) => void;

Uh oh!

Conversation

algorythmice commented Jan 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Règles de contribution

Résumé des changements

Capture(s) d'écran

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Dev-LeChacal left a comment

Choose a reason for hiding this comment

Uh oh!

guguss-31 commented Jan 31, 2026

Uh oh!

Dev-LeChacal left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

raphckrman left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

algorythmice commented Jan 31, 2026 •

edited

Loading