fix(web): close overlay after successful sync (#1482)

* refactor(issue-templates): simplify feature request and bug report templates

- Removed unnecessary emoji from template names for a cleaner presentation.
- Eliminated the priority dropdown from the feature request template to streamline the submission process.
- Updated the bug report template to remove the emoji, enhancing consistency across issue templates.
- Adjusted the configuration file to reflect these changes, ensuring clarity in the issue submission process.

* test(socket): enhance SocketProvider tests with async act calls

- Updated SocketProvider tests to utilize `act` for asynchronous callback invocations, ensuring proper handling of state updates during testing.
- Improved test reliability by wrapping callback executions in `act`, aligning with React's testing best practices.

* test(socket): add race condition handling test for useGcalSync

- Introduced a new test case to verify the correct handling of import end events when the awaitingImportResults state changes mid-render.
- Utilized a ref to prevent stale closures, ensuring that the correct state is referenced during socket event processing.
- Enhanced the reliability of the useGcalSync hook by ensuring it properly processes events even when state changes occur asynchronously.

* delete(svg): remove unused circle.svg file

- Deleted the circle.svg file from the public SVG assets as it is no longer needed in the project.
- This cleanup helps streamline the asset management and reduces unnecessary file clutter.

* fix(socket): address PR review comments for useGcalSync

- Update ref synchronously during render instead of in useEffect
  to fully eliminate race condition window
- Rename misleading test name (timeout -> successfully)
- Fix test assertions to validate action creator calls directly
  instead of using unused variable and dispatch-based assertions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor(sync): rename awaitingImportResults to isImportPending

- Updated state management and selectors to reflect the new naming convention for clarity.
- Adjusted related components and tests to ensure consistency with the updated state name.
- This change enhances code readability and aligns with the overall naming strategy in the project.

* refactor(socket): simplify reconnect logic and update test case

- Removed the 1-second delay in the reconnect function, allowing for immediate reconnection after disconnection.
- Updated the corresponding test case to reflect the change in behavior, ensuring it accurately tests the immediate reconnection functionality.
- This change enhances the responsiveness of the socket client and improves the clarity of the test case.

* refactor(tests): update useGcalSync tests to remove fake timers

- Removed the use of fake timers in the tests for useGcalSync, simplifying the test setup.
- Updated type definitions for event handler variables to allow for undefined values, enhancing type safety.
- This change improves test clarity and aligns with best practices for handling asynchronous events in React testing.

* test(socket): add integration tests for Google Calendar re-authentication flow

- Introduced a new test suite for the Google Calendar re-authentication process, validating user experience during import operations.
- Implemented tests to ensure the spinner visibility during import initiation, handling of socket events, and correct state updates upon import completion.
- Enhanced test reliability by utilizing `act` for asynchronous operations and capturing socket event callbacks.
- This addition improves coverage for the re-authentication flow and ensures a seamless user experience during Google Calendar synchronization.

* refactor(sync): rename setAwaitingImportResults to setIsImportPending

- Updated the Redux action and corresponding function names to improve clarity and consistency in the import state management.
- Adjusted all related components and tests to reflect the new naming convention, ensuring seamless integration across the codebase.
- This change enhances code readability and aligns with the overall naming strategy in the project.

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: tyler-dane

.github/ISSUE_TEMPLATE/1-feature-request.yml

@@ -1,4 +1,4 @@
-name: Feature Request ✨
+name: Feature Request
 description: You want something added to the app
 labels: [enhancement]
 projects: [SwitchbackTech/4]
@@ -9,17 +9,6 @@ body:
       value: |
         Thanks for taking the time to fill out this feature request!
 
-  - type: dropdown
-    attributes:
-      label: Priority
-      description: How important is this feature to you?
-      multiple: false
-      options:
-        - Critical (blocking my workflow)
-        - High (would significantly improve my experience)
-        - Medium (nice to have)
-        - Low (minor improvement)
-
   - type: textarea
     attributes:
       label: Feature Description

.github/ISSUE_TEMPLATE/2-bug-report.yml

@@ -1,4 +1,4 @@
-name: Bug Report 🐞
+name: Bug Report
 description: You found something wrong
 labels: [bug]
 projects: [SwitchbackTech/4]

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: true
 contact_links:
-  - name: 💬 GitHub Discussions
+  - name: GitHub Discussions
     url: https://github.com/SwitchbackTech/compass/discussions
     about: Start a GitHub Discussion for general questions and feedback
-  - name: 📚 Documentation
+  - name: Documentation
     url: https://docs.compasscalendar.com
     about: Check our documentation for setup guides, API reference, and contributing guidelines

e2e/utils/oauth-test-utils.ts

@@ -74,13 +74,13 @@ export const setIsSyncing = async (page: Page, value: boolean) => {
 /**
  * Set the awaitingImportResults state in Redux (triggers import phase when true).
  */
-export const setAwaitingImportResults = async (page: Page, value: boolean) => {
-  await page.evaluate((awaitingValue) => {
+export const setIsImportPending = async (page: Page, value: boolean) => {
+  await page.evaluate((isImportPendingValue) => {
     const store = (window as any).__COMPASS_STORE__;
     if (store) {
       store.dispatch({
-        type: "async/importGCal/setAwaitingImportResults",
-        payload: awaitingValue,
+        type: "async/importGCal/setIsImportPending",
+        payload: isImportPendingValue,
       });
     }
   }, value);

packages/web/src/__tests__/utils/state/store.test.util.ts

@@ -122,7 +122,7 @@ export const createInitialState = (
         importing: false,
         importResults: null,
         pendingLocalEventsSynced: null,
-        awaitingImportResults: false,
+        isImportPending: false,
         importError: null,
       },
       importLatest: {

packages/web/src/auth/hooks/oauth/useGoogleAuth.test.ts

@@ -161,7 +161,7 @@ describe("useGoogleAuth", () => {
       );
       expect(mockDispatchFn).toHaveBeenCalledWith(
         expect.objectContaining({
-          type: "async/importGCal/setAwaitingImportResults",
+          type: "async/importGCal/setIsImportPending",
           payload: true,
         }),
       );
@@ -193,7 +193,7 @@ describe("useGoogleAuth", () => {
 
       expect(mockDispatchFn).toHaveBeenCalledWith(
         expect.objectContaining({
-          type: "async/importGCal/setAwaitingImportResults",
+          type: "async/importGCal/setIsImportPending",
           payload: false,
         }),
       );
@@ -252,7 +252,7 @@ describe("useGoogleAuth", () => {
       expect(mockSetAuthenticated).not.toHaveBeenCalled();
       expect(mockDispatchFn).toHaveBeenCalledWith(
         expect.objectContaining({
-          type: "async/importGCal/setAwaitingImportResults",
+          type: "async/importGCal/setIsImportPending",
           payload: false,
         }),
       );
@@ -298,7 +298,7 @@ describe("useGoogleAuth", () => {
 
       expect(mockDispatchFn).toHaveBeenCalledWith(
         expect.objectContaining({
-          type: "async/importGCal/setAwaitingImportResults",
+          type: "async/importGCal/setIsImportPending",
           payload: false,
         }),
       );

packages/web/src/auth/hooks/oauth/useGoogleAuth.ts

@@ -31,7 +31,7 @@ export function useGoogleAuth() {
     onStart: () => {
       dismissErrorToast(SESSION_EXPIRED_TOAST_ID);
       dispatch(startAuthenticating());
-      dispatch(importGCalSlice.actions.setAwaitingImportResults(true));
+      dispatch(importGCalSlice.actions.setIsImportPending(true));
       dispatch(importGCalSlice.actions.clearImportResults(undefined));
     },
     onSuccess: async (data) => {
@@ -42,7 +42,7 @@ export function useGoogleAuth() {
           dispatch(
             authError(authResult.error?.message || "Authentication failed"),
           );
-          dispatch(importGCalSlice.actions.setAwaitingImportResults(false));
+          dispatch(importGCalSlice.actions.setIsImportPending(false));
           dispatch(importGCalSlice.actions.importing(false));
           return;
         }
@@ -59,7 +59,7 @@ export function useGoogleAuth() {
           dispatch(authSuccess());
           // Now that OAuth is complete, indicate that calendar import is starting
           dispatch(importGCalSlice.actions.importing(true));
-          dispatch(importGCalSlice.actions.setAwaitingImportResults(true));
+          dispatch(importGCalSlice.actions.setIsImportPending(true));
         });
 
         const syncResult = await syncLocalEvents();
@@ -90,7 +90,7 @@ export function useGoogleAuth() {
             error instanceof Error ? error.message : "Authentication failed",
           ),
         );
-        dispatch(importGCalSlice.actions.setAwaitingImportResults(false));
+        dispatch(importGCalSlice.actions.setIsImportPending(false));
         dispatch(importGCalSlice.actions.importing(false));
         throw error; // Re-throw so useGoogleLoginWithSyncOverlay can handle it via onError
       }
@@ -102,7 +102,7 @@ export function useGoogleAuth() {
           error instanceof Error ? error.message : "Authentication failed",
         ),
       );
-      dispatch(importGCalSlice.actions.setAwaitingImportResults(false));
+      dispatch(importGCalSlice.actions.setIsImportPending(false));
       dispatch(importGCalSlice.actions.importing(false));
     },
   });

packages/web/src/components/SyncEventsOverlay/SyncEventsOverlay.test.tsx

@@ -3,8 +3,8 @@ import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import { selectIsAuthenticating } from "@web/ducks/auth/selectors/auth.selectors";
 import {
-  selectAwaitingImportResults,
   selectImporting,
+  selectIsImportPending,
 } from "@web/ducks/events/selectors/sync.selector";
 import { useAppSelector } from "@web/store/store.hooks";
 import { SyncEventsOverlay } from "./SyncEventsOverlay";
@@ -33,7 +33,7 @@ describe("SyncEventsOverlay", () => {
       if (selector === selectImporting) {
         return importingValue;
       }
-      if (selector === selectAwaitingImportResults) {
+      if (selector === selectIsImportPending) {
         return awaitingValue;
       }
       if (selector === selectIsAuthenticating) {

packages/web/src/components/SyncEventsOverlay/SyncEventsOverlay.tsx

@@ -3,14 +3,14 @@ import { useBufferedVisibility } from "@web/common/hooks/useBufferedVisibility";
 import { OverlayPanel } from "@web/components/OverlayPanel/OverlayPanel";
 import { selectIsAuthenticating } from "@web/ducks/auth/selectors/auth.selectors";
 import {
-  selectAwaitingImportResults,
   selectImporting,
+  selectIsImportPending,
 } from "@web/ducks/events/selectors/sync.selector";
 import { useAppSelector } from "@web/store/store.hooks";
 
 export const SyncEventsOverlay = () => {
   const importing = useAppSelector(selectImporting);
-  const awaitingImportResults = useAppSelector(selectAwaitingImportResults);
+  const awaitingImportResults = useAppSelector(selectIsImportPending);
   const isAuthenticating = useAppSelector(selectIsAuthenticating);
 
   // Show overlay when:

packages/web/src/ducks/events/selectors/sync.selector.ts

@@ -8,8 +8,8 @@ export const selectImportGCalState = ({ sync }: RootState) => sync.importGCal;
 export const selectImporting = ({ sync }: RootState) =>
   sync.importGCal.importing;
 
-export const selectAwaitingImportResults = ({ sync }: RootState) =>
-  sync.importGCal.awaitingImportResults;
+export const selectIsImportPending = ({ sync }: RootState) =>
+  sync.importGCal.isImportPending;
 
 export const selectImportResults = ({ sync }: RootState) =>
   sync.importGCal.importResults;