Browse Source
- Consolidate AccountViewView integration strategy into unified plan - Add comprehensive AccountViewView Integration Strategy section - Include UI component design, data flow, and implementation decisions - Remove separate strategy document to follow meta_feature_planning structure - Update Phase 2 to include AccountViewView integration taskspull/214/head
Matthew Raymer
1 week ago
2 changed files with 388 additions and 485 deletions
@ -1,472 +0,0 @@ |
|||||
# Daily Notification Plugin - AccountViewView Integration Strategy |
|
||||
|
|
||||
**Author**: Matthew Raymer |
|
||||
**Date**: 2025-11-03 |
|
||||
**Status**: 🎯 **PLANNING** - UI integration strategy |
|
||||
**Feature**: Daily Notification Scheduling in Account Settings |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Overview |
|
||||
|
|
||||
This document outlines the strategy for integrating daily notification scheduling into `AccountViewView.vue`, allowing users to configure notification times directly from their account settings. |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Current State Analysis |
|
||||
|
|
||||
### Account Settings Context |
|
||||
|
|
||||
**Location**: `AccountViewView.vue` - Settings view for user account configuration |
|
||||
|
|
||||
**Integration Approach**: Add new "Daily Notifications" section for scheduling native daily notifications using PlatformService. |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Integration Strategy |
|
||||
|
|
||||
**Approach**: Create a separate "Daily Notifications" section |
|
||||
|
|
||||
This approach adds a dedicated "Daily Notifications" section that checks PlatformService capabilities. On Capacitor platforms, it provides full functionality. On other platforms, the UI is hidden when PlatformService returns `null` for notification methods. |
|
||||
|
|
||||
**Key Benefits**: |
|
||||
- Uses PlatformService interface pattern (consistent with camera, filesystem) |
|
||||
- Platform-specific features properly isolated |
|
||||
- Can use native time picker (better UX on mobile) |
|
||||
- Future-proof: Easy to extend with additional notification features |
|
||||
- Graceful degradation on unsupported platforms |
|
||||
|
|
||||
**Implementation**: |
|
||||
```vue |
|
||||
<!-- New Daily Notifications section --> |
|
||||
<section |
|
||||
v-if="notificationsSupported" |
|
||||
id="sectionDailyNotifications" |
|
||||
class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8" |
|
||||
aria-labelledby="dailyNotificationsHeading" |
|
||||
> |
|
||||
<h2 id="dailyNotificationsHeading" class="mb-2 font-bold"> |
|
||||
Daily Notifications |
|
||||
<button |
|
||||
class="text-slate-400 fa-fw cursor-pointer" |
|
||||
aria-label="Learn more about native notifications" |
|
||||
@click.stop="showNativeNotificationInfo" |
|
||||
> |
|
||||
<font-awesome icon="question-circle" aria-hidden="true" /> |
|
||||
</button> |
|
||||
</h2> |
|
||||
|
|
||||
<div class="flex items-center justify-between"> |
|
||||
<div>Daily Notification</div> |
|
||||
<!-- Toggle switch --> |
|
||||
<div |
|
||||
class="relative ml-2 cursor-pointer" |
|
||||
role="switch" |
|
||||
:aria-checked="nativeNotificationEnabled" |
|
||||
@click="toggleNativeNotification()" |
|
||||
> |
|
||||
<!-- Custom toggle UI --> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Show current time when enabled --> |
|
||||
<div v-if="nativeNotificationEnabled" class="mt-2"> |
|
||||
<div class="flex items-center justify-between"> |
|
||||
<span>Scheduled for: {{ nativeNotificationTime }}</span> |
|
||||
<button |
|
||||
class="text-blue-500 text-sm" |
|
||||
@click="editNativeNotificationTime()" |
|
||||
> |
|
||||
Edit Time |
|
||||
</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</section> |
|
||||
``` |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Approach Rationale |
|
||||
|
|
||||
**Decision Date**: 2025-11-03 |
|
||||
**Status**: ✅ **ACCEPTED** - Will proceed with separate native notification section |
|
||||
|
|
||||
1. **Clear Platform Distinction**: Users understand this is for mobile apps |
|
||||
2. **No Conflicts**: Doesn't interfere with disabled web notifications |
|
||||
3. **Better UX**: Can use native time picker on mobile |
|
||||
4. **Future-Proof**: Easy to extend with additional native notification features |
|
||||
|
|
||||
### Implementation Status |
|
||||
|
|
||||
- [x] Approach decision finalized |
|
||||
- [ ] Implementation begins (Phase 1) |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## UI Component Design |
|
||||
|
|
||||
### 1. Platform Capability Detection |
|
||||
|
|
||||
```typescript |
|
||||
// In AccountViewView component |
|
||||
async checkNotificationSupport(): Promise<boolean> { |
|
||||
const platformService = PlatformServiceFactory.getInstance(); |
|
||||
const status = await platformService.getDailyNotificationStatus(); |
|
||||
return status !== null; // null means not supported |
|
||||
} |
|
||||
``` |
|
||||
|
|
||||
### 2. State Management |
|
||||
|
|
||||
```typescript |
|
||||
// Component properties |
|
||||
nativeNotificationEnabled: boolean = false; |
|
||||
nativeNotificationTime: string = ""; // Display format: "9:00 AM" |
|
||||
nativeNotificationTimeStorage: string = ""; // Plugin format: "09:00" |
|
||||
nativeNotificationTitle: string = "Daily Update"; |
|
||||
nativeNotificationMessage: string = "Your daily notification is ready!"; |
|
||||
``` |
|
||||
|
|
||||
### 3. Time Input ✅ **SELECTED: HTML5 Time Input** |
|
||||
|
|
||||
**Decision**: Use HTML5 `<input type="time">` for native mobile experience |
|
||||
|
|
||||
```vue |
|
||||
<input |
|
||||
type="time" |
|
||||
v-model="nativeNotificationTimeStorage" |
|
||||
class="rounded border border-slate-400 px-2 py-2" |
|
||||
/> |
|
||||
``` |
|
||||
|
|
||||
**Benefits**: |
|
||||
- Native mobile time picker UI on Capacitor platforms |
|
||||
- Simpler implementation (no custom time parsing needed) |
|
||||
- Automatic 24-hour format output (compatible with plugin) |
|
||||
- System handles locale-specific time formatting |
|
||||
- Better UX on mobile devices |
|
||||
|
|
||||
**Note**: HTML5 time input provides time in "HH:mm" format (24-hour) which matches the plugin's expected format perfectly. |
|
||||
|
|
||||
### 4. Time Format Conversion (Using System Time) |
|
||||
|
|
||||
**Key Principle**: Use device's local system time - no timezone conversions needed. The plugin handles system time natively. |
|
||||
|
|
||||
```typescript |
|
||||
// Convert "09:00" (plugin storage format) to "9:00 AM" (display) |
|
||||
function formatTimeForDisplay(time24: string): string { |
|
||||
const [hours, minutes] = time24.split(':'); |
|
||||
const hourNum = parseInt(hours); |
|
||||
const isPM = hourNum >= 12; |
|
||||
const displayHour = hourNum === 0 ? 12 : hourNum > 12 ? hourNum - 12 : hourNum; |
|
||||
return `${displayHour}:${minutes} ${isPM ? 'PM' : 'AM'}`; |
|
||||
} |
|
||||
|
|
||||
// HTML5 time input provides "HH:mm" in local time - use directly |
|
||||
// No UTC conversion needed - plugin handles local timezone |
|
||||
function getTimeFromInput(timeInput: string): string { |
|
||||
// timeInput is already in "HH:mm" format from <input type="time"> |
|
||||
// This is in the user's local timezone - pass directly to plugin |
|
||||
return timeInput; // e.g., "09:00" in user's local time |
|
||||
} |
|
||||
``` |
|
||||
|
|
||||
**Time Handling**: |
|
||||
|
|
||||
- **PlatformService Integration**: Uses device's local system time directly - NO UTC conversion needed. The plugin schedules notifications on the device itself, using the device's timezone. |
|
||||
|
|
||||
**Implementation Principles**: |
|
||||
- HTML5 `<input type="time">` provides time in device's local timezone |
|
||||
- Plugin receives time in "HH:mm" format and schedules relative to device's local time |
|
||||
- No manual timezone conversion or UTC calculations needed |
|
||||
- System automatically handles: |
|
||||
- Timezone changes |
|
||||
- Daylight saving time transitions |
|
||||
- Device timezone updates |
|
||||
- User sets "9:00 AM" in their local time → plugin schedules for 9:00 AM local time every day |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Data Flow |
|
||||
|
|
||||
### 1. Initialization |
|
||||
|
|
||||
```typescript |
|
||||
async initializeState() { |
|
||||
// ... existing initialization ... |
|
||||
|
|
||||
const platformService = PlatformServiceFactory.getInstance(); |
|
||||
|
|
||||
// Check if notifications are supported on this platform |
|
||||
const status = await platformService.getDailyNotificationStatus(); |
|
||||
if (status === null) { |
|
||||
// Notifications not supported - don't initialize |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
// Load from settings |
|
||||
const nativeNotificationTime = settings.nativeNotificationTime || ""; |
|
||||
this.nativeNotificationEnabled = !!nativeNotificationTime; |
|
||||
this.nativeNotificationTimeStorage = nativeNotificationTime; |
|
||||
|
|
||||
if (nativeNotificationTime) { |
|
||||
this.nativeNotificationTime = formatTimeForDisplay(nativeNotificationTime); |
|
||||
} |
|
||||
|
|
||||
// Update UI with current status |
|
||||
this.notificationStatus = status; |
|
||||
} |
|
||||
``` |
|
||||
|
|
||||
### 2. Enable Notification |
|
||||
|
|
||||
```typescript |
|
||||
async enableNativeNotification() { |
|
||||
try { |
|
||||
const platformService = PlatformServiceFactory.getInstance(); |
|
||||
|
|
||||
// 1. Request permissions if needed |
|
||||
const permissions = await platformService.checkNotificationPermissions(); |
|
||||
if (permissions === null || permissions.notifications !== 'granted') { |
|
||||
const result = await platformService.requestNotificationPermissions(); |
|
||||
if (result === null || !result.notifications) { |
|
||||
throw new Error("Notification permissions denied"); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 2. Schedule notification via PlatformService |
|
||||
// Time is in device's local system time (from HTML5 time input) |
|
||||
// PlatformService handles timezone and scheduling internally |
|
||||
await platformService.scheduleDailyNotification({ |
|
||||
time: this.nativeNotificationTimeStorage, // "09:00" in local time |
|
||||
title: this.nativeNotificationTitle, |
|
||||
body: this.nativeNotificationMessage, |
|
||||
sound: true, |
|
||||
priority: 'high' |
|
||||
}); |
|
||||
|
|
||||
// 3. Save to settings |
|
||||
await this.$saveSettings({ |
|
||||
nativeNotificationTime: this.nativeNotificationTimeStorage, |
|
||||
nativeNotificationTitle: this.nativeNotificationTitle, |
|
||||
nativeNotificationMessage: this.nativeNotificationMessage, |
|
||||
}); |
|
||||
|
|
||||
// 4. Update UI state |
|
||||
this.nativeNotificationEnabled = true; |
|
||||
|
|
||||
this.notify.success("Daily notification scheduled successfully", TIMEOUTS.SHORT); |
|
||||
} catch (error) { |
|
||||
logger.error("Failed to enable notification:", error); |
|
||||
this.notify.error("Failed to schedule notification. Please try again.", TIMEOUTS.LONG); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
### 3. Disable Notification |
|
||||
|
|
||||
```typescript |
|
||||
async disableNativeNotification() { |
|
||||
try { |
|
||||
const platformService = PlatformServiceFactory.getInstance(); |
|
||||
|
|
||||
// 1. Cancel notification via PlatformService |
|
||||
await platformService.cancelDailyNotification(); |
|
||||
|
|
||||
// 2. Clear settings |
|
||||
await this.$saveSettings({ |
|
||||
nativeNotificationTime: "", |
|
||||
nativeNotificationTitle: "", |
|
||||
nativeNotificationMessage: "", |
|
||||
}); |
|
||||
|
|
||||
// 3. Update UI state |
|
||||
this.nativeNotificationEnabled = false; |
|
||||
this.nativeNotificationTime = ""; |
|
||||
this.nativeNotificationTimeStorage = ""; |
|
||||
|
|
||||
this.notify.success("Daily notification disabled", TIMEOUTS.SHORT); |
|
||||
} catch (error) { |
|
||||
logger.error("Failed to disable native notification:", error); |
|
||||
this.notify.error("Failed to disable notification. Please try again.", TIMEOUTS.LONG); |
|
||||
} |
|
||||
} |
|
||||
``` |
|
||||
|
|
||||
### 4. Edit Time |
|
||||
|
|
||||
**Approach**: Use inline HTML5 time input for quick edits |
|
||||
|
|
||||
```typescript |
|
||||
async editNativeNotificationTime() { |
|
||||
// Show inline HTML5 time input for quick changes |
|
||||
// For complex editing (title, message), navigate to ScheduleView |
|
||||
this.showTimeEdit = true; |
|
||||
} |
|
||||
``` |
|
||||
|
|
||||
**Implementation Note**: HTML5 time input provides native mobile picker experience when shown inline, making it ideal for quick time adjustments in AccountViewView. |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Settings Schema |
|
||||
|
|
||||
### New Settings Fields |
|
||||
|
|
||||
```typescript |
|
||||
// Add to Settings interface in src/db/tables/settings.ts |
|
||||
interface Settings { |
|
||||
// ... existing fields ... |
|
||||
|
|
||||
// Native notification settings (Capacitor only) |
|
||||
nativeNotificationTime?: string; // "09:00" format (24-hour) |
|
||||
nativeNotificationTitle?: string; // Default: "Daily Update" |
|
||||
nativeNotificationMessage?: string; // Default message |
|
||||
} |
|
||||
``` |
|
||||
|
|
||||
### Settings Persistence |
|
||||
|
|
||||
- Store in `settings` table via `$saveSettings()` |
|
||||
- Use same pattern as `notifyingNewActivityTime` |
|
||||
- Persist across app restarts |
|
||||
- Sync with plugin state on component mount |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Plugin Integration |
|
||||
|
|
||||
### PlatformService Usage |
|
||||
|
|
||||
```typescript |
|
||||
import { PlatformServiceFactory } from '@/services/PlatformServiceFactory'; |
|
||||
|
|
||||
const platformService = PlatformServiceFactory.getInstance(); |
|
||||
|
|
||||
// Check if notifications are supported |
|
||||
const status = await platformService.getDailyNotificationStatus(); |
|
||||
if (status === null) { |
|
||||
// Notifications not supported on this platform |
|
||||
} |
|
||||
``` |
|
||||
|
|
||||
### Key Operations (via PlatformService) |
|
||||
|
|
||||
1. **Check Status**: `getDailyNotificationStatus()` - Returns status or `null` if unsupported |
|
||||
2. **Check Permissions**: `checkNotificationPermissions()` - Returns permissions or `null` if unsupported |
|
||||
3. **Request Permissions**: `requestNotificationPermissions()` - Requests permissions or returns `null` if unsupported |
|
||||
4. **Schedule**: `scheduleDailyNotification(options)` - Schedules notification or throws error if unsupported |
|
||||
5. **Cancel**: `cancelDailyNotification()` - Cancels notification or throws error if unsupported |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## UI/UX Considerations |
|
||||
|
|
||||
### Visual Design |
|
||||
- **Section Style**: Match existing notification section (`bg-slate-100 rounded-md`) |
|
||||
- **Toggle Switch**: Reuse existing custom toggle pattern |
|
||||
- **Time Display**: Show in user-friendly format ("9:00 AM") |
|
||||
- **Edit Button**: Small, subtle link/button to edit time |
|
||||
|
|
||||
### User Feedback |
|
||||
- **Success**: Toast notification when scheduled successfully |
|
||||
- **Error**: Clear error message with troubleshooting guidance |
|
||||
- **Loading**: Show loading state during plugin operations |
|
||||
- **Permission Request**: Handle gracefully if denied |
|
||||
|
|
||||
### Accessibility |
|
||||
- **ARIA Labels**: Proper labels for all interactive elements |
|
||||
- **Keyboard Navigation**: Full keyboard support |
|
||||
- **Screen Reader**: Clear announcements for state changes |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Implementation Phases |
|
||||
|
|
||||
### Phase 1: Basic Integration |
|
||||
- [ ] Add platform detection property |
|
||||
- [ ] Create native notification section in template |
|
||||
- [ ] Add component state properties |
|
||||
- [ ] Implement toggle functionality |
|
||||
- [ ] Basic enable/disable operations |
|
||||
|
|
||||
### Phase 2: Time Management |
|
||||
- [ ] Add time input (HTML5 time picker) |
|
||||
- [ ] Implement time format conversion |
|
||||
- [ ] Add edit time functionality |
|
||||
- [ ] Save/load time from settings |
|
||||
|
|
||||
### Phase 3: Plugin Integration |
|
||||
- [ ] Integrate with DailyNotificationFactory |
|
||||
- [ ] Schedule notification on enable |
|
||||
- [ ] Cancel notification on disable |
|
||||
- [ ] Update notification on time change |
|
||||
- [ ] Sync plugin state with settings |
|
||||
|
|
||||
### Phase 4: Polish & Error Handling |
|
||||
- [ ] Permission request flow |
|
||||
- [ ] Error handling and user feedback |
|
||||
- [ ] Status verification |
|
||||
- [ ] Help/info dialogs |
|
||||
- [ ] Accessibility improvements |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Implementation Decisions |
|
||||
|
|
||||
### Time Input Format ✅ |
|
||||
- **Selected**: HTML5 `<input type="time">` for Capacitor platforms |
|
||||
- **Rationale**: Native mobile experience, simpler code, automatic 24-hour format |
|
||||
|
|
||||
### Edit Approach ✅ |
|
||||
- **Selected**: Inline HTML5 time input for quick edits in AccountViewView |
|
||||
- **Note**: For complex editing (title, message changes), users can navigate to dedicated ScheduleView |
|
||||
|
|
||||
### Settings Field Names ✅ |
|
||||
- **Selected**: `nativeNotificationTime`, `nativeNotificationTitle`, `nativeNotificationMessage` |
|
||||
- **Rationale**: Clear distinction from web push notification fields |
|
||||
|
|
||||
### Notification Title/Message ✅ |
|
||||
- **Selected**: Allow customization, default to "Daily Update" / "Your daily notification is ready!" |
|
||||
- **Rationale**: Flexibility for users, sensible defaults |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Success Criteria |
|
||||
|
|
||||
- [ ] Native notification section appears only on Capacitor platforms |
|
||||
- [ ] Toggle enables/disables notifications via plugin |
|
||||
- [ ] Time can be set and edited |
|
||||
- [ ] Settings persist across app restarts |
|
||||
- [ ] Plugin state syncs with settings |
|
||||
- [ ] Error handling provides clear user feedback |
|
||||
- [ ] UI matches existing design patterns |
|
||||
- [ ] Accessibility requirements met |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Related Components |
|
||||
|
|
||||
- **PlatformService**: Interface for platform capabilities (notification methods) |
|
||||
- **PlatformServiceFactory**: Factory for getting platform service instance |
|
||||
- **ScheduleView**: Dedicated scheduling interface (for complex editing) |
|
||||
- **AccountViewView**: Main settings view (integration target) |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Next Steps |
|
||||
|
|
||||
1. ~~**Decide on Approach**: Separate native notification section~~ ✅ **DECIDED** |
|
||||
2. **Define Settings Schema**: Add native notification fields to Settings interface |
|
||||
3. **Create UI Components**: Build notification section in AccountViewView |
|
||||
4. **Integrate Plugin**: Connect UI to DailyNotificationFactory service |
|
||||
5. **Test Flow**: Verify enable/disable/edit workflows |
|
||||
6. **Add Help Content**: Create help documentation for native notifications |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
**See also**: |
|
||||
- `doc/daily-notification-plugin-integration-plan.md` - Overall integration plan |
|
||||
- `src/views/AccountViewView.vue` - Target component for integration |
|
||||
- `src/services/PlatformService.ts` - PlatformService interface definition |
|
||||
- `src/services/PlatformServiceFactory.ts` - Factory for platform service instances |
|
||||
|
|
||||
Loading…
Reference in new issue