Add UI test page and enhance styles for responsiveness and usability by skywinder · Pull Request #16 · F0RTHSP4CE/refinance

skywinder · 2025-08-16T14:14:34Z

BEFOREL

AFTER

…s in exchange, split, and transaction forms; update templates to toggle custom currency fields based on selection.

- Added ValidationError import from wtforms - Created a custom validate() method in CurrencyExchangeForm that: - Ensures exactly one amount field is filled (not both, not neither) - Provides clear error messages when validation fails 2. Frontend UX Improvements (ui/app/templates/exchange/index.jinja2): - Added JavaScript to automatically disable one amount field when the other is filled - When source amount is entered: target amount becomes read-only with gray background - When target amount is entered: source amount becomes read-only with gray background - Clearing one field re-enables the other - Visual feedback with placeholder text indicating why the field is disabled

skywinder · 2025-08-16T14:45:24Z

also added siabling in eexchange of second field (to make it clear)

skywinder · 2025-08-16T14:46:05Z

and made dropboxes for currencies:

Copilot

Pull Request Overview

This PR adds a comprehensive UI test page and enhances the application's responsive design and usability across multiple components.

Adds a new standalone UI test page (test_ui.html) for visual testing of components
Updates currency handling to use dropdown selects with predefined options instead of text fields
Enhances CSS styles for mobile responsiveness, improved navigation, and better form layouts

Reviewed Changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
ui/app/templates/widgets/pagination.jinja2	Updates pagination from `<p>` to `<div>` with proper styling classes and disabled state handling
ui/app/templates/widgets/entity_selector.jinja2	Restructures entity selector with improved layout and proper labels
ui/app/templates/transaction/edit.jinja2	Adds JavaScript for custom currency field toggle functionality
ui/app/templates/transaction/add.jinja2	Adds JavaScript for custom currency field toggle functionality
ui/app/templates/split/edit.jinja2	Adds JavaScript for custom currency field toggle functionality
ui/app/templates/split/add.jinja2	Adds JavaScript for custom currency field toggle functionality
ui/app/templates/exchange/index.jinja2	Adds complex JavaScript for currency selection and mutual exclusivity of amount fields
ui/app/static/style.css	Major CSS overhaul with responsive design, improved typography, and enhanced component styling
ui/app/controllers/transaction.py	Updates currency handling from text fields to dropdowns with custom currency support
ui/app/controllers/split.py	Updates currency handling from text fields to dropdowns with custom currency support
ui/app/controllers/exchange.py	Updates currency handling and adds form validation for mutually exclusive amount fields
ui/app/constants.py	New file defining currency constants and configuration
test_ui.html	New standalone HTML file for UI component testing

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-16T14:49:53Z

ui/app/templates/transaction/edit.jinja2

+            } else {
+                customCurrencyRow.style.display = 'none';
+                customCurrencyField.required = false;
+                // Don't clear the value on edit page if it's already set


This comment indicates missing functionality. The code should handle preserving existing custom currency values when toggling fields on the edit page, but no implementation is present.

Suggested change

// Don't clear the value on edit page if it's already set

let preservedCustomCurrencyValue = customCurrencyField ? customCurrencyField.value : '';

function toggleCustomCurrency() {

if (currencySelect && customCurrencyRow) {

if (currencySelect.value === 'other') {

customCurrencyRow.style.display = '';

customCurrencyField.required = true;

// Restore preserved value if available

if (preservedCustomCurrencyValue !== undefined && preservedCustomCurrencyValue !== null) {

customCurrencyField.value = preservedCustomCurrencyValue;

}

} else {

customCurrencyRow.style.display = 'none';

customCurrencyField.required = false;

// Preserve the value when hiding

preservedCustomCurrencyValue = customCurrencyField.value;

Copilot · 2025-08-16T14:49:53Z

ui/app/templates/split/add.jinja2

+        toggleCustomCurrency(); // Initial state
+    }
+});
+</script>


The same JavaScript code for currency field toggling is duplicated across multiple template files (transaction/add.jinja2, transaction/edit.jinja2, split/add.jinja2, split/edit.jinja2). This should be extracted to a shared JavaScript file to reduce duplication.

Suggested change

</script>

<script src="/static/js/currencyToggle.js"></script>

@copilot fix this

Copilot · 2025-08-16T14:49:54Z

ui/app/templates/exchange/index.jinja2

 </form>

 <script src="/static/js/entitySelector.js"></script>
+<script>


The JavaScript code in this template is significantly more complex than the currency toggle scripts in other templates. Consider extracting this to a separate JavaScript file for better maintainability and potential reuse.

Copilot · 2025-08-16T14:49:54Z

ui/app/static/style.css

+}
+
+/* Additional mobile improvements */
+@media (max-width: 768px) {


The mobile breakpoint value '768px' is duplicated multiple times throughout the CSS file. Consider defining this as a CSS custom property at the root level to ensure consistency and easier maintenance.

Suggested change

@media (max-width: 768px) {

@media (max-width: var(--mobile-breakpoint)) {

Copilot · 2025-08-16T14:49:54Z

ui/app/controllers/exchange.py

+            return False
+
+        # Check if both amount fields are filled
+        if self.source_amount.data and self.target_amount.data:


The validation logic checks for both amount fields being filled, but it should also handle the case where both fields have a value of 0, as 0 is falsy in Python but might be a valid input that should trigger the validation error.

Suggested change

if self.source_amount.data and self.target_amount.data:

if self.source_amount.data is not None and self.target_amount.data is not None:

…essary display:none style for better visibility; updated JavaScript to ensure proper toggling of custom currency fields based on selection.

…when search input is empty, implement keyboard navigation for dropdown results, and improve UI to display entity IDs alongside names. Additionally, close dropdowns on outside clicks and escape key press.

skywinder · 2025-08-16T14:57:34Z

added dropdown on selection with full list and id's

MikeWent · 2025-09-01T11:39:51Z

✨ i've merged:

header menu new look (branch better-menu → main)

however, changes are required to merge:

entity dropdown
- either choosing a css framework for the whole ui
- or simplifying current implementation so it looks like the rest of the project
currency exchange dropdown and field auto-disabling
- the idea is nice, but amount of javascript makes me scream, we should somehow minimize it.
overall design and layout
- i would not call new paddings and margins an improvement, because the site now fills exploded on the screen and is not compact enough for fast information reading.

skywinder added 3 commits August 16, 2025 18:13

Add UI test page and enhance styles for responsiveness and usability

1a0c589

Enhance currency selection in forms: add support for custom currencie…

01b49dc

…s in exchange, split, and transaction forms; update templates to toggle custom currency fields based on selection.

skywinder requested a review from Copilot August 16, 2025 14:48

Copilot AI reviewed Aug 16, 2025

View reviewed changes

skywinder added 2 commits August 16, 2025 18:52

Refactor custom currency fields in forms and templates: removed unnec…

4096503

…essary display:none style for better visibility; updated JavaScript to ensure proper toggling of custom currency fields based on selection.

Enhance entity search functionality: allow retrieval of all entities …

8187617

…when search input is empty, implement keyboard navigation for dropdown results, and improve UI to display entity IDs alongside names. Additionally, close dropdowns on outside clicks and escape key press.

Merge branch 'main' into ui-improvments

c5f9591

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add UI test page and enhance styles for responsiveness and usability#16

Add UI test page and enhance styles for responsiveness and usability#16
skywinder wants to merge 6 commits intomainfrom
ui-improvments

skywinder commented Aug 16, 2025 •

edited

Loading

Uh oh!

skywinder commented Aug 16, 2025

Uh oh!

skywinder commented Aug 16, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 16, 2025

Uh oh!

Copilot AI Aug 16, 2025

Uh oh!

MikeWent Aug 17, 2025

Uh oh!

Copilot AI Aug 16, 2025

Uh oh!

Copilot AI Aug 16, 2025

Uh oh!

Copilot AI Aug 16, 2025

Uh oh!

skywinder commented Aug 16, 2025

Uh oh!

MikeWent commented Sep 1, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-                // Don't clear the value on edit page if it's already set
+    let preservedCustomCurrencyValue = customCurrencyField ? customCurrencyField.value : '';
+    function toggleCustomCurrency() {
+        if (currencySelect && customCurrencyRow) {
+            if (currencySelect.value === 'other') {
+                customCurrencyRow.style.display = '';
+                customCurrencyField.required = true;
+                // Restore preserved value if available
+                if (preservedCustomCurrencyValue !== undefined && preservedCustomCurrencyValue !== null) {
+                    customCurrencyField.value = preservedCustomCurrencyValue;
+                }
+            } else {
+                customCurrencyRow.style.display = 'none';
+                customCurrencyField.required = false;
+                // Preserve the value when hiding
+                preservedCustomCurrencyValue = customCurrencyField.value;

	</script>
	<script src="/static/js/currencyToggle.js"></script>

	@media (max-width: 768px) {
	@media (max-width: var(--mobile-breakpoint)) {

	if self.source_amount.data and self.target_amount.data:
	if self.source_amount.data is not None and self.target_amount.data is not None:

Conversation

skywinder commented Aug 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skywinder commented Aug 16, 2025

Uh oh!

skywinder commented Aug 16, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 16, 2025

Choose a reason for hiding this comment

Uh oh!

MikeWent Aug 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 16, 2025

Choose a reason for hiding this comment

Uh oh!

skywinder commented Aug 16, 2025

Uh oh!

MikeWent commented Sep 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

skywinder commented Aug 16, 2025 •

edited

Loading

MikeWent commented Sep 1, 2025 •

edited

Loading