Migrate MembersList.vue to PlatformServiceMixin logging patterns

- Remove legacy logConsoleAndDb import from db/index
- Replace 3 logging calls with this.$logAndConsole() mixin method
- Add CSS linting suppressions for Tailwind @apply directives
- Create migration checklist documentation

Note: Untested due to meeting component accessibility limitations
Passes lint checks and TypeScript compilation

docs/migration-checklist-MembersList.md

@@ -0,0 +1,110 @@
+# Migration Checklist: MembersList.vue
+
+**File**: `src/components/MembersList.vue`  
+**Date**: January 6, 2025  
+**Migrator**: Matthew Raymer  
+**Type**: Legacy Logging Migration
+
+## Pre-Migration Assessment
+
+### ✅ Current Good Practices
+- [x] Uses PlatformServiceMixin
+- [x] Uses `$getAllContacts()` method (line 358)
+- [x] Uses `$accountSettings()` method (line 205)
+- [x] Uses `$updateContact()` method (line 458)
+- [x] Uses `$insertContact()` method (line 495)
+
+### ❌ Legacy Patterns to Migrate
+- [ ] **Import**: Line 163 - `import { logConsoleAndDb } from "../db/index";`
+- [ ] **Log Call 1**: Line 234 - Error fetching members
+- [ ] **Log Call 2**: Line 476 - Error toggling admission
+- [ ] **Log Call 3**: Line 508 - Error adding contact
+
+## Migration Steps
+
+### Step 1: Pre-Migration Testing
+- [ ] Test member list loading functionality
+- [ ] Test member admission/removal functionality
+- [ ] Test contact adding functionality
+- [ ] Test error scenarios and verify error logging works
+- [ ] Document current behavior for regression testing
+
+### Step 2: Code Migration
+- [ ] Remove legacy import: `import { logConsoleAndDb } from "../db/index";`
+- [ ] Replace line 234: `logConsoleAndDb("Error fetching members: " + errorStringForLog(error), true);`
+  - Replace with: `this.$logError("Error fetching members", error, "MembersList.fetchMembers");`
+- [ ] Replace line 476: `logConsoleAndDb("Error toggling admission: " + errorStringForLog(error), true);`
+  - Replace with: `this.$logError("Error toggling admission", error, "MembersList.toggleAdmission");`
+- [ ] Replace line 508: `logConsoleAndDb("Error adding contact: " + errorStringForLog(err), true);`
+  - Replace with: `this.$logError("Error adding contact", err, "MembersList.addAsContact");`
+
+### Step 3: Compile & Lint Validation
+- [ ] Run `npm run lint-fix` to check for warnings
+- [ ] Verify TypeScript compilation passes
+- [ ] Confirm no ESLint errors
+- [ ] Validate import cleanup (no unused imports)
+
+### Step 4: Human Testing Protocol
+- [ ] **Test 1**: Load members list successfully
+- [ ] **Test 2**: Test password-protected member decryption
+- [ ] **Test 3**: Test organizer tools (if applicable)
+- [ ] **Test 4**: Test member admission toggle
+- [ ] **Test 5**: Test contact addition from member
+- [ ] **Test 6**: Test error scenarios:
+  - [ ] Network failure during member fetch
+  - [ ] Invalid password for decryption
+  - [ ] Server error during admission toggle
+  - [ ] Duplicate contact addition
+- [ ] **Test 7**: Verify error logging in browser console
+- [ ] **Test 8**: Verify error logging in database (if applicable)
+
+### Step 5: Cross-Platform Validation
+- [ ] **Web**: Test in Chrome/Firefox
+- [ ] **Mobile**: Test in Capacitor app (if available)
+- [ ] **Desktop**: Test in Electron app (if available)
+
+### Step 6: Performance & Security Check
+- [ ] Verify no performance regression
+- [ ] Check for memory leaks (dev tools)
+- [ ] Validate error messages don't expose sensitive data
+- [ ] Confirm proper error context is maintained
+
+### Step 7: Documentation & Commit
+- [ ] Update any relevant documentation
+- [ ] Create descriptive commit message
+- [ ] Tag commit with migration milestone
+
+## Test Cases
+
+### Functional Tests
+1. **Member List Loading**: Verify members load correctly with valid credentials
+2. **Password Validation**: Test behavior with invalid password
+3. **Organizer Functions**: Test admission control (if organizer)
+4. **Contact Integration**: Test adding members as contacts
+5. **Error Handling**: Verify graceful error handling with appropriate user feedback
+
+### Error Scenarios
+1. **Network Failure**: Disconnect network and test member fetch
+2. **Invalid Credentials**: Test with wrong password
+3. **Server Error**: Test with invalid API endpoint
+4. **Duplicate Contact**: Try adding same contact twice
+
+## Success Criteria
+- [ ] All functionality works identically to pre-migration
+- [ ] No console errors or warnings
+- [ ] Error logging works properly with new methods
+- [ ] Performance remains unchanged
+- [ ] Cross-platform compatibility maintained
+
+## Rollback Plan
+If migration fails:
+1. Restore original import: `import { logConsoleAndDb } from "../db/index";`
+2. Restore original logging calls (documented above)
+3. Commit rollback with clear message
+4. Analyze failure and update migration approach
+
+## Notes
+- Component is already well-structured with PlatformServiceMixin
+- Migration risk is LOW - only changing logging calls
+- File has good error handling patterns already established
+- Testing should focus on error scenarios to verify logging works 

src/components/MembersList.vue

@@ -161,7 +161,6 @@
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-facing-decorator";
 
-import { logConsoleAndDb } from "../db/index";
 import {
   errorStringForLog,
   getHeaders,
@@ -232,7 +231,7 @@ export default class MembersList extends Vue {
         await this.decryptMemberContents();
       }
     } catch (error) {
-      logConsoleAndDb(
+      this.$logAndConsole(
         "Error fetching members: " + errorStringForLog(error),
         true,
       );
@@ -474,7 +473,7 @@ export default class MembersList extends Vue {
         }
       }
     } catch (error) {
-      logConsoleAndDb(
+      this.$logAndConsole(
         "Error toggling admission: " + errorStringForLog(error),
         true,
       );
@@ -506,7 +505,10 @@ export default class MembersList extends Vue {
         3000,
       );
     } catch (err) {
-      logConsoleAndDb("Error adding contact: " + errorStringForLog(err), true);
+      this.$logAndConsole(
+        "Error adding contact: " + errorStringForLog(err),
+        true,
+      );
       let message = "An error prevented adding this contact.";
       if (err instanceof Error && err.message?.indexOf("already exists") > -1) {
         message = "This person is already in your contact list.";
@@ -528,30 +530,35 @@ export default class MembersList extends Vue {
 <style scoped>
 /* Button Classes */
 .btn-action-refresh {
+  /* stylelint-disable-next-line at-rule-no-unknown */
   @apply w-8 h-8 flex items-center justify-center rounded-full 
     bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
     transition-colors;
 }
 
 .btn-add-contact {
+  /* stylelint-disable-next-line at-rule-no-unknown */
   @apply ml-2 w-8 h-8 flex items-center justify-center rounded-full 
     bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
     transition-colors;
 }
 
 .btn-info-contact {
+  /* stylelint-disable-next-line at-rule-no-unknown */
   @apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
     bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
     transition-colors;
 }
 
 .btn-admission {
+  /* stylelint-disable-next-line at-rule-no-unknown */
   @apply mr-2 w-6 h-6 flex items-center justify-center rounded-full 
     bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
     transition-colors;
 }
 
 .btn-info-admission {
+  /* stylelint-disable-next-line at-rule-no-unknown */
   @apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
     bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
     transition-colors;