95412dd0ad
This commit addresses several issues related to the migration from TipTap to CodeMirror:
- **CodeMirror Initialization Fixes:**
- Resolved 'Unrecognized extension value' errors by refactoring to explicitly import individual CodeMirror extensions instead of relying on . This ensures proper singleton usage and prevents module duplication issues.
- Updated and to utilize these individual extensions.
- **Text Wrapping Enabled:**
- Added to the extensions in and to enable text wrapping in the CodeMirror editors.
- **Content Saving Fixes:**
- Corrected content binding for CodeMirror editor instances in various IDAA components:
- (description, location_text, attend_text)
- (content, notes)
- (content)
- (description, notes)
- (description, notes)
- Ensured that the prop of is correctly bound to the respective state variables in the parent components, and these state variables are initialized with existing content.
- **Save Button Enablement:**
- Fixed an issue in where the Save button was not enabling on content changes. The logic now directly compares the and with the original object's content, ensuring reactivity.
366 lines
18 KiB
Markdown
366 lines
18 KiB
Markdown
# One Sky IT's Aether UI/UX Project TODO
|
|
|
|
This is a list of tasks to be completed before the next event/show/conference.
|
|
|
|
---
|
|
|
|
## Recent Accomplishments
|
|
|
|
- [x] **Refactoring:** Standardized data processing in `events`, `archives`, `posts`, and `sponsorships` modules using a new generic pattern.
|
|
- [x] **Bug Fix:** Corrected data fetching logic for session-related presentations and files that were not displaying correctly due to `id` vs `id_random` issues.
|
|
- [x] **Core:** Defined `Account`, `Site`, and `Site_Domain` interfaces in new files under `src/lib/ae_core/`.
|
|
- [x] **Journals:** Improve the empty state message in `src/routes/journals/+page.svelte`.
|
|
- [x] **Journals:** Add a loading indicator to the main journals page.
|
|
- [x] **IDAA:** Add a loading indicator to the archives page (`src/routes/idaa/(idaa)/archives/+page.svelte`).
|
|
- [x] **Events:** Add pagination to the main event list in `src/routes/events/+page.svelte`.
|
|
|
|
---
|
|
|
|
## Big Picture Goals
|
|
|
|
- Able to cache data and mostly work offline.
|
|
- The new Events Launcher must be able to work offline and query the API for changes to data.
|
|
- The new Events Launcher must be able to run inside an Electron app and have access to local files and OS shell commands and applications. This includes loading a special library that only works in Electron.
|
|
|
|
---
|
|
|
|
## Codebase Standardization
|
|
|
|
### 1. Naming Conventions
|
|
|
|
- [ ] **Goal:** Enforce a single, consistent naming standard across the entire codebase.
|
|
- [ ] **Files:**
|
|
- Logic: `ae_<module>__<concept>.ts`
|
|
- DB Definitions: `db_<module>.ts`
|
|
- Svelte Stores: `ae_<module>_stores.ts`
|
|
- Consolidate helper files (e.g., `ae_core_functions.ts`) into the above files.
|
|
- [ ] **Functions & Variables:**
|
|
- [x] Enforce `snake_case` for all function and variable names.
|
|
- [x] Deprecate and remove `camelCase`.
|
|
- [x] Deprecate and refactor ambiguous `handle_` prefixes.
|
|
- [ ] **Object & Property Naming:**
|
|
- Use singular nouns for objects and properties (e.g., `example.id`, not `examples.id`).
|
|
- [ ] **List Suffixes:**
|
|
- Use `_li` for simple, unordered arrays.
|
|
- Use `_kv` for key-value objects/maps.
|
|
- [ ] **Process:**
|
|
- Refactor one module at a time to ensure internal consistency before moving to the next. Start with `ae_core`.
|
|
- **Update 2025-11-13:** `ae_core_functions.ts` has been temporarily restored to resolve a critical issue. The refactoring of `process_ae_obj__*_props()` functions will now proceed module by module, ensuring stability at each step.
|
|
|
|
### 2. Component Standardization
|
|
|
|
- [ ] **CodeMirror Migration:** Plan and execute the replacement of the `shad-editor` and potentially other text editors (like Tiptap) with `CodeMirror` to standardize rich text editing.
|
|
- [ ] **Component Review:** Audit third-party components to understand their conventions and isolate them from internal standards.
|
|
|
|
---
|
|
|
|
## Priority Tasks (Easy & Quick)
|
|
|
|
- [ ] **Formatting:** Run `npm run format` to fix code style issues across the project.
|
|
|
|
---
|
|
|
|
## Critical Functions for Review
|
|
|
|
These functions are frequently used and critical to the application's data flow. Reviewing and cleaning them up will significantly improve the codebase.
|
|
|
|
1. **`get_ae_obj_li_for_obj_id_crud_v2()`** (from `src/lib/ae_api/api_get__crud_obj_li_v2.ts`)
|
|
- **Why:** This is the main function for fetching lists of data from the backend, used extensively across all modules.
|
|
- **Cleanup:** Review parameters and return types for consistency, improve error handling, and add more detailed logging for debugging.
|
|
|
|
2. **`db_save_ae_obj_li__ae_obj()`** (from `src/lib/ae_core/core__idb_dexie.ts`)
|
|
- **Why:** This function is the single point of entry for saving data to the local Dexie database, critical for performance and reliability.
|
|
- **Cleanup:** Optimize for bulk operations, add robust error handling and logging, and ensure correct handling of updates to existing objects.
|
|
|
|
3. **The `process_ae_obj__*_props()` family of functions** (e.g., `process_ae_obj__journal_props()` from `src/lib/ae_journals/ae_journals__journal.ts`)
|
|
- **Why:** These functions transform API data for the frontend and are a common source of bugs and inconsistencies.
|
|
- **Cleanup:** Standardize their structure across all modules, ensure they are pure functions, and add unit tests for correctness.
|
|
- **Update 2025-11-13 (Temporary Rollback):** The previous refactoring of these functions has been temporarily rolled back due to an `InternalError`. `ae_core_functions.ts` has been restored. The new plan is to refactor these functions module by module, ensuring stability at each step. The generic CRUD functions in `core__crud_generic.ts` were simplified to remove data processing and caching, delegating those responsibilities to the module-specific functions. The deprecated `process_ae_obj__props` function in that file was left in place but is no longer used by the generic CRUD functions.
|
|
|
|
4. **Usage of `liveQuery` from Dexie**
|
|
- **Why:** `liveQuery` is powerful for reactive UIs, but current usage suggests complexity and potential issues.
|
|
- **Cleanup:** Review `liveQuery` usage throughout the application, simplify queries, and investigate reactivity issues. Consider wrapping `liveQuery` in a custom Svelte store for a more predictable interface.
|
|
|
|
---
|
|
|
|
- [ ] Improve the `e_app_codemirror_v5.svelte` component and plan the migration from Tiptap to CodeMirror for rich text editing.
|
|
|
|
---
|
|
|
|
## Core Module Improvements
|
|
|
|
### 1. Core Module Dashboard
|
|
|
|
- [ ] Create a central dashboard at `/core` to provide an overview and links to all core data management pages.
|
|
|
|
### 2. Account Management
|
|
|
|
- [ ] **Route:** Create a new route at `/core/accounts`.
|
|
- [ ] **Data:** Define the `Account` interface in a new file `src/lib/ae_core/core__account.ts`.
|
|
- [ ] **API:** Implement functions in `core__account.ts` for CRUD operations on accounts.
|
|
- [ ] **UI:**
|
|
- [ ] Create a `+page.svelte` to list all accounts.
|
|
- [ ] Create a `[account_id]` dynamic route to view and edit account details.
|
|
|
|
### 3. Site & Domain Management
|
|
|
|
- [ ] **Route:** Create a new route at `/core/sites`.
|
|
- [ ] **Data:** Define `Site` and `Site_Domain` interfaces in a new file `src/lib/ae_core/core__site.ts`.
|
|
- [ ] **API:** Implement functions in `core__site.ts` for CRUD operations on sites and domains.
|
|
- [ ] **UI:**
|
|
- [ ] Create a `+page.svelte` to list all sites.
|
|
- [ ] Create a `[site_id]` dynamic route to view and edit site details and manage associated domains.
|
|
|
|
### 4. Person Management
|
|
|
|
- [ ] **Enhance:** Improve the existing person management components under `/core/person`.
|
|
- [ ] **UI:**
|
|
- [ ] Create a dedicated page for creating new person records.
|
|
- [ ] Add search and filtering capabilities to the person list.
|
|
|
|
### 5. User Management
|
|
|
|
- [ ] **Route:** Create a new route at `/core/users`.
|
|
- [ ] **UI:**
|
|
- [ ] Create a `+page.svelte` to list all users.
|
|
- [ ] Create a `[user_id]` dynamic route to view and edit user details, including permissions.
|
|
- [ ] Implement a component to link users to person records.
|
|
|
|
### 6. Hosted File Management
|
|
|
|
- [ ] **Route:** Create a new route at `/core/hosted_files`.
|
|
- [ ] **UI:**
|
|
- [ ] Create a `+page.svelte` to list all hosted files with filters (e.g., by file type, uploader).
|
|
- [ ] Implement a file viewer for common file types.
|
|
- [ ] Add functionality to upload new files and associate them with other objects (e.g., a person, a journal entry).
|
|
|
|
### 7. Shared Lookup Lists
|
|
|
|
- [ ] **Route:** Create a new route at `/core/lookups`.
|
|
- [ ] **UI:**
|
|
- [ ] Create a simple UI to view and manage the shared lookup lists (e.g., `countries`, `time_zones`).
|
|
|
|
---
|
|
|
|
## Journals Module Improvements
|
|
|
|
### Code Cleanup & Refactoring
|
|
|
|
- [ ] **Consolidate Data Functions:** Refactor `ae_journals__journal.ts` and `ae_journals__journal_entry.ts` to reduce code duplication, especially in data loading and processing functions.
|
|
- [ ] **Remove Dead Code:** Clean up commented-out code blocks and unused variables across the module.
|
|
- [ ] **Logging:** Implement a more structured logging solution to replace the widespread use of `console.log`.
|
|
- [ ] **Promise Handling:** Standardize promise handling to use `async/await` consistently and remove mixed `.then()` and `async/await` syntax.
|
|
- [ ] **Type Safety:** Replace `any` types with more specific interfaces, particularly in function parameters and API responses.
|
|
|
|
### Features & Enhancements
|
|
|
|
- [ ] **Offline Support:** Improve offline capabilities by pre-fetching and caching more data. Review the current Dexie implementation for optimizations.
|
|
- [ ] **Search & Filtering:** Enhance the UI with more advanced search and filtering options for journals and entries (e.g., by date range, content, tags).
|
|
- [ ] **User Experience (UX):**
|
|
- Implement better loading indicators and skeleton loaders.
|
|
- Provide clearer empty state messages (e.g., "No journals found, create one!").
|
|
- Improve error handling and provide more informative error messages to the user.
|
|
- [ ] **Encryption:** Review and enhance the encryption implementation for journal entries to ensure it is secure and user-friendly.
|
|
- [ ] **Templates:** Fully implement and document the "templates" feature for creating new journals and entries.
|
|
|
|
### Bug Fixes & Potential Issues
|
|
|
|
- [ ] **Reactivity:** Investigate potential reactivity issues between Svelte stores and Dexie's `liveQuery`.
|
|
- [ ] **Data Sync:** Add logic to handle data synchronization conflicts between the local database and the server.
|
|
- [ ] **Performance:** Profile the application with a large number of journals and entries to identify and address any performance bottlenecks.
|
|
|
|
---
|
|
|
|
## IDAA Modules Improvements
|
|
|
|
### General
|
|
|
|
- [ ] **Component Refactoring:** Audit the `ae_idaa_comp__` components and refactor them to be more generic and reusable where possible.
|
|
- [ ] **State Management:** Simplify state management by reducing the number of stores and triggers, and relying more on derived state and component props.
|
|
|
|
### Archives Module (`/idaa/archives`)
|
|
|
|
- [ ] **UI/UX:**
|
|
- [ ] Add a loading indicator while archives are being fetched.
|
|
- [ ] Implement a more engaging "empty state" when no archives are available.
|
|
- [ ] **Performance:**
|
|
- [ ] Implement pagination or infinite scrolling for the archive list.
|
|
|
|
### Bulletin Board Module (`/idaa/bb`)
|
|
|
|
- [ ] **UI/UX:**
|
|
- [ ] Improve the UI for creating and editing posts and comments.
|
|
- [ ] Add a rich text editor for a better writing experience.
|
|
- [ ] **Features:**
|
|
- [ ] Implement user-specific features, such as editing their own posts and comments.
|
|
|
|
### Recovery Meetings Module (`/idaa/recovery_meetings`)
|
|
|
|
- [ ] **Refactoring:**
|
|
- [ ] Simplify the search and filtering logic. The current implementation with `setInterval` is complex and could be replaced with a more modern approach using debouncing or reactive statements.
|
|
- [ ] **UI/UX:**
|
|
- [ ] Make the search and filtering interface more intuitive and responsive.
|
|
- [ ] Provide instant feedback to the user as they type in the search box.
|
|
- [ ] **Performance:**
|
|
- [ ] Optimize the search query to be faster and more efficient.
|
|
|
|
---
|
|
|
|
## Aether Events Module Improvements
|
|
|
|
### General
|
|
|
|
- [ ] **Dashboard:** Create a central dashboard for each event at `/events/[event_id]` that provides an overview of the event and links to all the management pages.
|
|
- [ ] **Component Refactoring:** The module has a large number of `ae_comp__` components. Audit and refactor them to be more modular and reusable.
|
|
- [ ] **UI/UX Consistency:** Ensure a consistent look and feel across all the different event management pages.
|
|
|
|
### Core Event Management
|
|
|
|
- [ ] **Event List (`/events`):**
|
|
- [ ] Add search and filtering capabilities to the main event list.
|
|
- [ ] Implement pagination for the event list.
|
|
- [ ] **Event Creation/Editing:**
|
|
- [ ] Create a dedicated page or modal for creating and editing events.
|
|
|
|
### Sub-modules (`/events/[event_id]/...`)
|
|
|
|
- [ ] **Sessions, Presentations, Presenters, etc.:**
|
|
- [ ] For each sub-module (sessions, presentations, etc.), implement a consistent set of features:
|
|
- [ ] List view with search and filtering.
|
|
- [ ] Detail view.
|
|
- [ ] Create and edit forms.
|
|
- [ ] Delete functionality with confirmation.
|
|
- [ ] **File Management:**
|
|
- [ ] Improve the file upload component (`ae_comp__event_files_upload.svelte`) with features like drag-and-drop and progress bars.
|
|
- [ ] Enhance the file list view with more details and actions.
|
|
- [ ] \*\*Launcher (`/events/[event_id]/launcher`):
|
|
- [ ] Add documentation to explain the purpose and usage of the launcher.
|
|
- [ ] Improve the UI to make it more intuitive for users.
|
|
- [ ] \*\*Badges (`/events/[event_id]/badges`):
|
|
- [ ] Enhance the badge printing interface with more customization options.
|
|
- [ ] Add a preview of the badge before printing.
|
|
|
|
### Performance
|
|
|
|
- [ ] **Live Queries:** Review the use of `liveQuery` throughout the module and optimize for performance, especially on pages with a large amount of data.
|
|
- [ ] **Data Loading:** Implement more efficient data loading strategies to avoid fetching unnecessary data.
|
|
|
|
---
|
|
|
|
## UI/UX Consistency
|
|
|
|
- [ ] **Broad UI/UX Review:** Conduct a comprehensive review of UI elements across the application to ensure consistency. This includes, but is not limited to:
|
|
- Buttons (style, placement, wording)
|
|
- Lists (style, actions)
|
|
- Links vs. Buttons (correct semantic usage)
|
|
- Menus (style, options)
|
|
- Debug components and other developer-facing UI.
|
|
- **Wording:** Standardize the text used in common UI elements (e.g., "Save", "Cancel", "Delete", "Add New").
|
|
- **Scope:** This should be done on a per-module basis to ensure local consistency, with a goal of achieving global consistency where possible.
|
|
- **Note on IDAA:** The `idaa` modules are semi-custom for a client and may have their own specific UI/UX requirements. Their consistency should be evaluated separately, keeping the client's needs in mind.
|
|
|
|
---
|
|
|
|
## Scott's Quick Notes
|
|
|
|
These are just quick notes, thoughts, ideas, and reminders for myself.
|
|
|
|
- I need to explain the purpose and thought behind the data_store element or component and how it works. The short version: It is a hierarchy of database results, but only the last result is returned. The results are filtered by data store key/code, then by account_id, and then by for_type and for_id. This allows for shared data among accounts, but also account specific overrides. Finally, it allows for object specific overrides.
|
|
- Use old Events Leads module as reference for new one
|
|
- Use old Events Badges module as reference for new one
|
|
- Use old Events Launcher module as reference for new one
|
|
- The Launcher will need some work to make it work offline and in Electron
|
|
- Events Leads: mobile first, but still works on desktop
|
|
- Need to be able to enable and disable modules per event (e.g., some events may not need Leads or Badges)
|
|
- In theory session codes should be unique per event. This depends somewhat on the client's data and needs.
|
|
- The codes for locations/rooms should also be unique per event.
|
|
- The codes for devices should also be unique per event.
|
|
- Reports are manually created and shared among events and clients. We need to be able to enable/disable reports per event. Each report will have its own Svelte page.
|
|
|
|
### Events modules and main landing pages
|
|
|
|
- **Presentation Management**
|
|
- Manage
|
|
- Session Search
|
|
- View Session
|
|
- View Presenter
|
|
- Locations List
|
|
- View Location
|
|
- Devices List
|
|
- View Device
|
|
- Reports
|
|
- **Launcher** (desktop first; tablet second; mobile last)
|
|
- Manage - Various admin and configuration options
|
|
- Menu Section - Event; Location; Sessions; Show/Hide
|
|
- Content Section - Shows session specific files; Shows session specific presentations; presentation specific presenters are shown per presentation; presenter specific files are shown per presenter
|
|
- Header Section - Event Name; Location Name; Current Time; Offline/Online Status; Sync Status
|
|
- Footer Section - Other status indicators; sync button
|
|
- **Badge Printing**
|
|
- Manage
|
|
- Print Badges
|
|
- View Badge (show full preview before printing)
|
|
- Review Badge (attendee confirms key info before printing; agree/disagree to terms; agree/disagree to lead retrieval and tracking)
|
|
- Manually add Badge
|
|
- Reports
|
|
- **Lead Retrieval**
|
|
- Manage
|
|
- View Leads
|
|
- Add Lead (Scan or Manual Entry)
|
|
- License Management and Payment (Stripe)
|
|
- **Admin or Manage or Configure Event**
|
|
|
|
### New Directory Structure?
|
|
|
|
- src/lib/ - Shared libraries and components
|
|
- src/routes/core/ - Core Aether management module
|
|
- sub-directories for:
|
|
- accounts
|
|
- account (by ID)
|
|
- sites
|
|
- site (by ID)
|
|
- site_domains
|
|
- site_domain (by ID)
|
|
- people
|
|
- person (by ID)
|
|
- users
|
|
- user (by ID)
|
|
- hosted_files
|
|
- hosted_file (by ID or partial hash match???)
|
|
- lookups
|
|
- (countries)
|
|
- (state_provinces)
|
|
- (time_zones)
|
|
- src/routes/events/ - Events main landing page and event management
|
|
- src/routes/events/[event_id]/(presentations)/ - Event presentation management module
|
|
- sub-directories for:
|
|
- sessions
|
|
- session (by ID or code)
|
|
- presentations
|
|
- presenters
|
|
- presenter (by ID or code???)
|
|
- event_files
|
|
- locations
|
|
- location (by ID or code)
|
|
- devices
|
|
- device (by ID or code)
|
|
- reports
|
|
- report (by name of report)
|
|
- src/routes/events/[event_id]/(launcher)/ - Event launcher module
|
|
- src/routes/events/[event_id]/(badges)/ - Event badge printing module
|
|
- src/routes/events/[event_id]/(leads)/ - Event lead retrieval module
|
|
- src/routes/events/[event_id]/+page.svelte - Event main dashboard
|
|
- [event_id]/exhibit/[exhibit_id]/ - Exhibitor specific lead retrieval pages
|
|
- src/routes/journals/ - Journals module
|
|
- src/routes/idaa/ - IDAA custom modules
|
|
- (archives)/ - Archives module
|
|
- (bb)/ - Bulletin Board module
|
|
- (recovery_meetings)/ - Recovery Meetings module
|
|
- src/lib/ae_core/ - Core Aether logic and data models
|
|
- src/lib/ae_events/ - Events module logic and data models
|
|
- src/lib/ae_journals/ - Journals module logic and data models
|
|
- src/lib/ae_idaa/ - IDAA custom modules logic and data models
|
|
- src/lib/components/ - Shared Svelte components
|
|
- src/lib/stores/ - Shared Svelte stores
|
|
- src/assets/ - Assets like CSS, Tailwind config, etc.???
|
|
- static/ - Static assets like images, fonts, etc.
|