chore(deps-dev): bump vite in the npm_and_yarn group across 1 directory

Bumps the npm_and_yarn group with 1 update in the / directory: [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite).


Updates `vite` from 5.4.20 to 5.4.21
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.4.21/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.4.21/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-version: 5.4.21
  dependency-type: direct:development
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <support@github.com>

package.json

@@ -144,7 +144,7 @@
         "unocss": "^0.63.6",
         "unocss-preset-primitives": "0.0.2-beta.1",
         "unplugin-icons": "^0.19.3",
-        "vite": "^5.4.20",
+        "vite": "^5.4.21",
         "vite-plugin-inspect": "^0.8.9",
         "vitest": "^2.1.9"
     },

src/pages/report/index.tsx

@@ -1,4 +1,3 @@
-import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import ReportIssueMain from '@views/components/ReportIssueMain';
 import SentryProvider from '@views/contexts/SentryContext';
 import React from 'react';
@@ -6,8 +5,6 @@ import { createRoot } from 'react-dom/client';
 
 createRoot(document.getElementById('root')!).render(
     <SentryProvider fullInit>
-        <ExtensionRoot>
-            <ReportIssueMain />
-        </ExtensionRoot>
+        <ReportIssueMain />
     </SentryProvider>
 );

src/shared/storage/OptionsStore.ts

@@ -24,12 +24,6 @@ export interface IOptionsStore {
 
     /** whether the promo should be shown */
     showUTDiningPromo: boolean;
-
-    /** whether the user's email address should be remembered by the extension  */
-    rememberMyEmail: boolean;
-
-    /** the user's email address, if set and chosen to be remembered  */
-    emailAddress: string;
 }
 
 export const OptionsStore = createSyncStore<IOptionsStore>({
@@ -40,8 +34,6 @@ export const OptionsStore = createSyncStore<IOptionsStore>({
     alwaysOpenCalendarInNewTab: false,
     showCalendarSidebar: true,
     showUTDiningPromo: true,
-    rememberMyEmail: false,
-    emailAddress: '',
 });
 
 /**
@@ -58,8 +50,6 @@ export const initSettings = async () =>
         alwaysOpenCalendarInNewTab: await OptionsStore.get('alwaysOpenCalendarInNewTab'),
         showCalendarSidebar: await OptionsStore.get('showCalendarSidebar'),
         showUTDiningPromo: await OptionsStore.get('showUTDiningPromo'),
-        rememberMyEmail: await OptionsStore.get('rememberMyEmail'),
-        emailAddress: await OptionsStore.get('emailAddress'),
     }) satisfies IOptionsStore;
 
 // Clothing retailer right

src/views/components/ReportIssueMain.tsx

@@ -1,8 +1,6 @@
 import 'uno.css';
 
 import { captureFeedback } from '@sentry/react';
-import { OptionsStore } from '@shared/storage/OptionsStore';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { useState } from 'react';
 
 import { Button } from './common/Button';
@@ -14,57 +12,19 @@ import Text from './common/Text/Text';
  * @returns The rendered component.
  */
 export default function ReportIssueMain(): JSX.Element {
-    const queryClient = useQueryClient();
-
-    const { data: emailAddress } = useQuery({
-        queryKey: ['settings', 'emailAddress'],
-        queryFn: () => OptionsStore.get('emailAddress'),
-        staleTime: Infinity, // Prevent loading state on refocus
-    });
-
-    const { mutate: setEmailAddress } = useMutation({
-        mutationKey: ['settings', 'emailAddress'],
-        mutationFn: async ({ rememberMyEmail, emailAddress }: { rememberMyEmail: boolean; emailAddress: string }) => {
-            queryClient.setQueryData(['settings', 'emailAddress'], emailAddress);
-            if (rememberMyEmail) {
-                OptionsStore.set('emailAddress', emailAddress);
-            }
-        },
-    });
-
-    const { data: rememberMyEmail } = useQuery({
-        queryKey: ['settings', 'rememberMyEmail'],
-        queryFn: () => OptionsStore.get('rememberMyEmail'),
-        staleTime: Infinity, // Prevent loading state on refocus
-    });
-
-    const { mutate: setRememberMyEmail } = useMutation({
-        mutationKey: ['settings', 'rememberMyEmail'],
-        mutationFn: async ({ rememberMyEmail, emailAddress }: { rememberMyEmail: boolean; emailAddress: string }) => {
-            queryClient.setQueryData(['settings', 'rememberMyEmail'], rememberMyEmail);
-            OptionsStore.set('rememberMyEmail', rememberMyEmail);
-
-            if (rememberMyEmail) {
-                OptionsStore.set('emailAddress', emailAddress);
-            } else {
-                OptionsStore.set('emailAddress', '');
-            }
-        },
-    });
-
+    const [email, setEmail] = useState('');
     const [feedback, setFeedback] = useState('');
     const [isSubmitted, setIsSubmitted] = useState(false);
 
     const submitFeedback = async () => {
-        if (!emailAddress || !feedback) {
+        if (!email || !feedback) {
             throw new Error('Email and feedback are required');
         }
-
-        // Send the feedback to Sentry
-        captureFeedback(
+        // Here you would typically send the feedback to a server
+        await captureFeedback(
             {
                 message: feedback || 'No feedback provided',
-                email: emailAddress,
+                email,
                 tags: {
                     version: chrome.runtime.getManifest().version,
                 },
@@ -74,14 +34,16 @@ export default function ReportIssueMain(): JSX.Element {
             }
         );
 
-        // Close the dialog
+        // Reset form fields and close the dialog
+        setEmail('');
+        setFeedback('');
         setIsSubmitted(true);
     };
 
     if (isSubmitted) {
         return (
-            <div className='w-92 flex flex-col rounded-lg bg-white p-6 shadow-lg'>
-                <Text variant='h2' className='my-4'>
+            <div className='w-80 flex flex-col rounded-lg bg-white p-6 shadow-lg'>
+                <Text variant='h2' className='mb-4'>
                     Thank you
                 </Text>
                 <Text variant='p' className='mb-6'>
@@ -94,13 +56,28 @@ export default function ReportIssueMain(): JSX.Element {
         );
     }
 
+    if (isSubmitted) {
+        return (
+            <div className='w-80 bg-white p-6'>
+                <h2 className='mb-4 text-2xl text-orange font-bold'>{`Hook'em Horns!`}</h2>
+                <p className='mb-6 text-gray-600'>Your feedback is music to our ears. Thanks for helping us improve!</p>
+                <button
+                    className='w-full rounded bg-orange-600 px-4 py-2 text-white font-bold transition duration-300 hover:bg-orange-700'
+                    onClick={() => window.close()}
+                >
+                    Close
+                </button>
+            </div>
+        );
+    }
+
     return (
-        <div className='w-92 bg-white p-6'>
-            <h2 className='my-4 text-2xl text-ut-burntorange font-bold'>Longhorn Feedback</h2>
+        <div className='w-80 bg-white p-6'>
+            <h2 className='mb-4 text-2xl text-ut-burntorange font-bold'>Longhorn Feedback</h2>
             <p className='mb-4 text-sm text-ut-black'>Help us make UT Registration Plus even better!</p>
 
             <form onSubmit={submitFeedback}>
-                <div className='mb-1'>
+                <div className='mb-4'>
                     <label htmlFor='email' className='mb-1 block text-sm text-ut-black font-medium'>
                         Your @utexas.edu email
                     </label>
@@ -108,13 +85,8 @@ export default function ReportIssueMain(): JSX.Element {
                         <input
                             type='email'
                             id='email'
-                            value={emailAddress}
-                            onChange={e =>
-                                setEmailAddress({
-                                    emailAddress: e.target.value,
-                                    rememberMyEmail: rememberMyEmail ?? false,
-                                })
-                            }
+                            value={email}
+                            onChange={e => setEmail(e.target.value)}
                             className='w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500'
                             placeholder='bevo@utexas.edu'
                             required
@@ -122,23 +94,6 @@ export default function ReportIssueMain(): JSX.Element {
                     </div>
                 </div>
 
-                <div className='mb-4'>
-                    <label className='mb-1 flex cursor-pointer content-center gap-1.25 text-sm text-ut-black font-medium'>
-                        <input
-                            type='checkbox'
-                            className='cursor-pointer'
-                            checked={rememberMyEmail}
-                            onChange={e =>
-                                setRememberMyEmail({
-                                    rememberMyEmail: e.target.checked,
-                                    emailAddress: emailAddress ?? '',
-                                })
-                            }
-                        />{' '}
-                        Remember my email
-                    </label>
-                </div>
-
                 <div className='mb-4'>
                     <label htmlFor='feedback' className='mb-1 block text-sm text-ut-black font-medium'>
                         Your feedback