Always Show Ingredient Notes

[hydradestroyer10]

Hello! I've recently setup Tandoor on my Unraid server and am working on importing recipes and settings everything up. I get the impression that food entries are meant to be universal, so for recipes that you might use an onion in, the food should be named "Onion" and notes should include additional information such as "sliced," "diced," or "chopped."

Assuming that I'm thinking about this the right way, is there a way to always show ingredient notes without having to hover over the little comment bubble in the recipe? Here's an example of what I'm looking at:

[wave864]

I completely agree that this just seems to be bad UI design? It makes it impossible to quickly judge the effort for a recipe, for example, since you cannot see all the required prep work, not to mention the fact that doing the actual prep work would also be a tedious (and possibly unsanitary) nightmare because you would have to move the cursor/touch your device everytime.

This was the exact same issue that kept me from further engaging with tandoor in my first testing. Having since decided to give it another go (and still finding this issue grating), I may have a workaround for you: I found that if you use a mobile device the (unofficial and free) app Untare (iOS/Android) does not have this UI problem.

That being said I wholeheartedly endorse changing this part of the UI in the web version.

[FuzzyWereBeast]

I would like to see this as well.

[Oettinger77]

Agreed. This was also a point on my first tests list, so i would welcome a change.

[mrguitar]

So I went through a bunch of effort importing all our recipes and my wife immediately said this isn't going to work because of this. We can fix this several ways and claude can do it in seconds. Here's the recommendation:

@vabene1111 WDYT?

Technical Proposal: User Preference for Ingredient Note Display

Overview

I'd like to implement a solution for #3129 by adding a user preference that controls how ingredient notes are displayed (inline vs.
tooltip).

Problem Statement

As noted in the discussion, the current tooltip-based note display makes it difficult to quickly assess recipe preparation effort. Multiple users (wave864, FuzzyWereBeast, Oettinger77) have
confirmed this UX issue. Interestingly, print mode already solves this by displaying notes inline (line 61 in IngredientsTable.vue), proving the UI pattern works well.

Proposed Solution

Add a user preference toggle that allows each user to choose their preferred ingredient note display:

• Inline mode (like print mode): Notes shown directly as gray italic text
• Tooltip mode (current default): Notes hidden behind clickable comment icon

Implementation Approach

1. Backend Changes

File: cookbook/models.py

• Add new field to UserPreference model:
  show_ingredient_notes_inline = models.BooleanField(default=True)

Migration:

• Create migration for new field
• Default to True (inline) for new users to address UX concern
• Existing users default to False to preserve current behavior

2. API Changes

File: cookbook/serializer.py

• Update UserPreferenceSerializer to include new field

3. Frontend Changes

File: vue3/src/components/display/IngredientsTable.vue

• Replace isPrintMode check (lines 60-69) with new preference:

{{ i.note }}

File: vue3/src/pages/SettingsPage.vue (or appropriate settings component)

• Add toggle switch in user preferences section
• Suggested label: "Show ingredient notes inline"
• Helper text: "Display preparation notes directly instead of in a tooltip"

4. User Store

File: vue3/src/stores/UserPreferenceStore.ts

• Ensure new preference is included in TypeScript types

Design Decisions Needing Feedback

1. Default behavior:
   - New users: True (inline) - addresses the UX issue by default
   - Existing users: False (tooltip) - preserves current behavior
   - Question: Is this the right balance between improvement and backward compatibility?
2. Settings location:
   - Where should this toggle live in the settings UI?
   - Suggested: Under "Recipe Display" or "Interface Preferences"
3. Scope:
   - Should this apply to ALL ingredient tables globally?
   - Or allow per-context control (recipe view vs. shopping list)?
4. Migration strategy:
   - Should existing users be notified of the new option?
   - Consider adding to release notes/changelog

Testing Plan

• Pytest tests for UserPreference model changes
• API serializer tests
• Manual testing:
  • Toggle preference and verify display changes
  • Test print mode still works (should always show inline)
  • Verify on different screen sizes
  • Check accessibility with screen readers

Benefits

• ✅ Solves UX issue raised by multiple users
• ✅ Preserves existing behavior for users who prefer it
• ✅ Leverages existing proven UI pattern (print mode)
• ✅ Minimal code complexity
• ✅ Backward compatible

Questions for Maintainers

1. Does this approach align with the project's vision?
2. Any concerns about adding another user preference?
3. Preferred default for existing users?
4. Should this setting sync across devices/spaces?

I'm ready to implement this once we align on the design decisions. Happy to adjust the approach based on feedback!

[vabene1111]

if i understand @smilerz correctly this is already implemented on one of his branches. I am currently busy with some IRL stuff but this is definitely going to be implemented.

[smilerz]

that is correct - part of the ingredient context menu enhancements (device specific display settings allow you to make it an icon, always show everything or a combo )

[mrguitar]

Ah that's great to hear. Thank you for responding and letting me know.. I have to say we are new to Tandoor., and loving it. I'll get my wife past this paper cut in the meantime ;) Thanks for the work on this project!