Extract notification section into reusable component
#150
Open
anomalist
wants to merge 9 commits from notification-section
into master
pull from: notification-section
merge into: trent_larson:master
trent_larson:activedid_migration
trent_larson:ai-context
trent_larson:android-15-check
trent_larson:android-file-save
trent_larson:app_id_fix
trent_larson:ask-for-contacts-export
trent_larson:build-dev-to-dist
trent_larson:build-improvement
trent_larson:build-ios
trent_larson:build-web-serve-test
trent_larson:build-with-env
trent_larson:capacitor-local-save
trent_larson:claim-view-error-handling
trent_larson:claimview-fullfills-offer
trent_larson:contact-gifting-current-user
trent_larson:contacts-view-fixes
trent_larson:cross-platform-factory
trent_larson:cross-platform-factory-redux
trent_larson:d9085ced6df7dc7bdcd899959cea6489cab7f8b8
trent_larson:db-backup-cross-platform
trent_larson:deep-link
trent_larson:deep-links-android-update
trent_larson:deep_linking
trent_larson:design-tweaks-2023-12
trent_larson:dialog-styles-unified
trent_larson:didview-invalid-did-handling
trent_larson:electron_fix_20250317
trent_larson:experimental_plugin
trent_larson:eye-slash
trent_larson:fix-contact-import-export
trent_larson:fix-deep-link
trent_larson:fix-service-worker
trent_larson:friend-tech-inspired-pwa-dialog
trent_larson:get-get-hash
trent_larson:gifting-periphery-improvements
trent_larson:gifting-ui-2025-05
trent_larson:home-icon-enhancements
trent_larson:home-view-notification-improvements
trent_larson:homeview-cleanup-2025-03
trent_larson:homeview-refresh-2025-02
trent_larson:imagemagick-anrdoid
trent_larson:ios-contact-copy
trent_larson:logger-level
trent_larson:logging-upgrade
trent_larson:main
trent_larson:master
trent_larson:master-patch
trent_larson:master-settings-upgrade
trent_larson:matthew-scratch-2025-06-28
trent_larson:migrate-dexie-to-sqlite
trent_larson:nearby-filter
trent_larson:new-storage
trent_larson:nostr
trent_larson:notification-line-wrapping
trent_larson:notification-request-permission-dialog
trent_larson:notify-time
trent_larson:offer-edit
trent_larson:offer-validation-logic
trent_larson:onboard-alert-component
trent_larson:onboarding-dialog-fix
trent_larson:passkey
trent_larson:passkey-cache
trent_larson:performance-optimizations-testing
trent_larson:photo-reverse
trent_larson:plan-loc
trent_larson:platformservicemixin-interface-consolidation
trent_larson:playwright-pwa-install-test
trent_larson:playwright-test-60-fix
trent_larson:playwright-test-updates
trent_larson:profile-pic
trent_larson:profile_include_location
trent_larson:project-gives
trent_larson:projectview-hide-offer-link-unregistered
trent_larson:qrcode-capacitor
trent_larson:registration-gate
trent_larson:remove-image-cache
trent_larson:replace-iconrenderer
trent_larson:script-build-mode
trent_larson:search-map-fix
trent_larson:side_step
trent_larson:simple-signer
trent_larson:split_build_process
trent_larson:sql-absurd-sql
trent_larson:sql-absurd-sql-further
trent_larson:sql-wa-sqlite
trent_larson:star-projects
trent_larson:starred-projects
trent_larson:streamline-attempt
trent_larson:sw-cleanup
trent_larson:tmp
trent_larson:trent-tweaks
trent_larson:tweaks
trent_larson:ui-fixes-2024-03
trent_larson:ui-fixes-2025-03
trent_larson:ui-fixes-2025-06-w2
trent_larson:units-mocking
trent_larson:v-onboarding-2024-04
trent_larson:vite-version
trent_larson:web-serve-fix
trent_larson:web-tests
Reviewers
Request review
No reviewers
Labels
Apply labels
Clear labels
No items
No Label
Milestone
Set milestone
Clear milestone
No items
No Milestone
Assignees
Assign users
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.
No due date set.
Dependencies
This pull request currently doesn't have any dependencies.
Reference in new issue
There is no content yet.
Delete Branch 'notification-section'
Deleting a branch is permanent. It CANNOT be undone. Continue?
No
Yes
One challenge I have with these components is that they are coupled to the parent view; for example, all the "notifying-" properties are passed in, so there is potential for overlapping logic in both files.
A new component adds a bit of complexity because you cannot see all the behavior in one file; it is worth that separation if the elements are encapsulated well, so that there are very few interdependencies. In this case, it looks like it's taking all the properties while sharing them with the parent page.
Take a look and see if those "notifying-" properties are now unused in the parent page, and if so then let's clean those up and keep as much as possible internal to the component. If that's not possible then feel free to say so (and consider if a separate component is worthwhile).
Fair point. Complexity has more than one dimension to it. Maybe we can have the best here. I find the length of files to make things hard to grasp what's going on in the page. From a UI/UX standpoint I think its better to keep pages brief as possible. Your point about coupling is valid. I'll think about this.
---
alwaysApply: true
This one does make some sense to always include.
This just reminds me that we have others that probably shouldn't be included on every convo:
.cursor/rules/legacy_dexie.mdc:alwaysApply: true
.cursor/rules/documentation.mdc:alwaysApply: true
.cursor/rules/absurd-sql.mdc:alwaysApply: true
.cursor/rules/version_control.mdc:alwaysApply: true
BTW, these ones might be consolidated. (... or if the decision record is just historical then maybe it's not important every time.)
.cursor/rules/timesafari.mdc:alwaysApply: true
.cursor/rules/architectural_decision_record.mdc:alwaysApply: true
I'd support that refactor here because we see it now or logged as a future issue.
Note that I modified this to merge to master.
notifyingNewActivityTime: string = "";
notifyingReminder: boolean = false;
notifyingReminderMessage: string = "";
notifyingReminderTime: string = "";
Great to see that these can be self-contained inside that component!
this.notifyingReminderMessage = "";
this.notifyingReminderTime = "";
}
// turnOffNotifyingFlags method removed - notification state is now managed by NotificationSection component
Some historical comments make sense for future guidance, but I'm not sure this does. 🤷 Up to you.
<!-- Currently disabled because it doesn't work, even on Chrome.
If restored, make sure it works or doesn't show on mobile/electron. -->
<section
v-if="false"
Note the 'v-if="false"': this should be turned off until we have trustworthy notifications in place. (I suppose we could keep them on for the PWA/web, but I believe much of that is gutted. If it still works, great, but we need to address the comment above it about Chrome and mobile/electron. In fact, I vote we put these comments at the top of the component, as hints for when we actually use it again.)
// Check if there are any notification settings that need to be cleared
// This will be handled by the NotificationSection component now
// No need to call turnOffNotifyingFlags() as it's no longer needed
}
So it seems that there is more work to do here.
If the registration & subscription calls are important, they probably need to exist in the component. (... and be removed from here.)
The comment "Check if there are any notification settings that need to be cleared" seems to imply that there is more work to be done on this PR. If so, then I can wait. If this is a TODO that should remain in the code, I vote we make it prominent at the top of the component for whenever we do the work.