From 74c73a9e8f3b10be1fbdb6dbabf44d0edf95c034 Mon Sep 17 00:00:00 2001
From: mohamad <mohamad>
Date: Sun, 1 Jun 2025 14:10:59 +0200
Subject: [PATCH] refactor: Update GroupsPage to use standard HTML for now

---
 fe/src/pages/GroupsPage.vue | 148 ++++++++++++++++++------------------
 1 file changed, 74 insertions(+), 74 deletions(-)

diff --git a/fe/src/pages/GroupsPage.vue b/fe/src/pages/GroupsPage.vue
index ea0b40b..b0fb71b 100644
--- a/fe/src/pages/GroupsPage.vue
+++ b/fe/src/pages/GroupsPage.vue
@@ -2,33 +2,41 @@
   <main class="container page-padding">
     <!-- <h1 class="mb-3">Your Groups</h1> -->
 
-    <VAlert v-if="fetchError" type="error" :message="fetchError" class="mb-3" :closable="false">
-      <template #actions>
-        <VButton variant="danger" size="sm" @click="fetchGroups">Retry</VButton>
-      </template>
-    </VAlert>
+    <div v-if="fetchError" class="alert alert-error mb-3" role="alert">
+      <div class="alert-content">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-alert-triangle" />
+        </svg>
+        {{ fetchError }}
+      </div>
+      <button type="button" class="btn btn-sm btn-danger" @click="fetchGroups">Retry</button>
+    </div>
 
-    <VCard v-else-if="groups.length === 0"
-           variant="empty-state"
-           empty-icon="clipboard"
-           empty-title="No Groups Yet!"
-           empty-message="You are not a member of any groups yet. Create one or join using an invite code."
-    >
-      <template #empty-actions>
-        <VButton variant="primary" class="mt-2" @click="openCreateGroupDialog" icon-left="plus">
-          Create New Group
-        </VButton>
-      </template>
-    </VCard>
+    <div v-else-if="groups.length === 0" class="card empty-state-card">
+      <svg class="icon icon-lg" aria-hidden="true">
+        <use xlink:href="#icon-clipboard" />
+      </svg>
+      <h3>No Groups Yet!</h3>
+      <p>You are not a member of any groups yet. Create one or join using an invite code.</p>
+      <button class="btn btn-primary mt-2" @click="openCreateGroupDialog">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-plus" />
+        </svg>
+        Create New Group
+      </button>
+    </div>
 
     <div v-else class="mb-3">
       <div class="neo-groups-grid">
         <div v-for="group in groups" :key="group.id" class="neo-group-card" @click="selectGroup(group)">
           <h1 class="neo-group-header">{{ group.name }}</h1>
           <div class="neo-group-actions">
-            <VButton size="sm" variant="secondary" @click.stop="openCreateListDialog(group)" icon-left="plus">
+            <button class="btn btn-sm btn-secondary" @click.stop="openCreateListDialog(group)">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-plus" />
+              </svg>
               List
-            </VButton>
+            </button>
           </div>
         </div>
         <div class="neo-create-group-card" @click="openCreateGroupDialog">
@@ -48,48 +56,52 @@
         </summary>
         <div class="card-body">
           <form @submit.prevent="handleJoinGroup" class="flex items-center" style="gap: 0.5rem;">
-            <VFormField class="flex-grow" :error-message="joinGroupFormError" label="Enter Invite Code" :label-sr-only="true">
-              <VInput
-                type="text"
-                id="joinInviteCodeInput"
-                v-model="inviteCodeToJoin"
-                placeholder="Enter Invite Code"
-                required
-                ref="joinInviteCodeInputRef"
-              />
-            </VFormField>
-            <VButton type="submit" variant="secondary" :disabled="joiningGroup">
-              <VSpinner v-if="joiningGroup" size="sm" />
+            <div class="form-group flex-grow" style="margin-bottom: 0;">
+              <label for="joinInviteCodeInput" class="sr-only">Enter Invite Code</label>
+              <input type="text" id="joinInviteCodeInput" v-model="inviteCodeToJoin" class="form-input"
+                placeholder="Enter Invite Code" required ref="joinInviteCodeInputRef" />
+            </div>
+            <button type="submit" class="btn btn-secondary" :disabled="joiningGroup">
+              <span v-if="joiningGroup" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
               Join
-            </VButton>
+            </button>
           </form>
-          <!-- The error message is now handled by VFormField -->
+          <p v-if="joinGroupFormError" class="form-error-text mt-1">{{ joinGroupFormError }}</p>
         </div>
       </details>
     </div>
 
     <!-- Create Group Dialog -->
-    <VModal v-model="showCreateGroupDialog" title="Create New Group" @update:modelValue="val => !val && closeCreateGroupDialog()">
-      <form @submit.prevent="handleCreateGroup">
-        <VFormField label="Group Name" :error-message="createGroupFormError">
-          <VInput
-            type="text"
-            v-model="newGroupName"
-            placeholder="Enter group name"
-            required
-            id="newGroupNameInput"
-            ref="newGroupNameInputRef"
-          />
-        </VFormField>
-        <template #footer>
-          <VButton variant="neutral" @click="closeCreateGroupDialog" type="button">Cancel</VButton>
-          <VButton type="submit" variant="primary" :disabled="creatingGroup">
-            <VSpinner v-if="creatingGroup" size="sm" />
-            Create
-          </VButton>
-        </template>
-      </form>
-    </VModal>
+    <div v-if="showCreateGroupDialog" class="modal-backdrop open" @click.self="closeCreateGroupDialog">
+      <div class="modal-container" ref="createGroupModalRef" role="dialog" aria-modal="true"
+        aria-labelledby="createGroupTitle">
+        <div class="modal-header">
+          <h3 id="createGroupTitle">Create New Group</h3>
+          <button class="close-button" @click="closeCreateGroupDialog" aria-label="Close">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-close" />
+            </svg>
+          </button>
+        </div>
+        <form @submit.prevent="handleCreateGroup">
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="newGroupNameInput" class="form-label">Group Name</label>
+              <input type="text" id="newGroupNameInput" v-model="newGroupName" class="form-input" required
+                ref="newGroupNameInputRef" />
+              <p v-if="createGroupFormError" class="form-error-text">{{ createGroupFormError }}</p>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-neutral" @click="closeCreateGroupDialog">Cancel</button>
+            <button type="submit" class="btn btn-primary ml-2" :disabled="creatingGroup">
+              <span v-if="creatingGroup" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
+              Create
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
 
     <!-- Create List Modal -->
     <CreateListModal v-model="showCreateListModal" :groups="availableGroupsForModal" @created="onListCreated" />
@@ -101,16 +113,9 @@ import { ref, onMounted, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { apiClient, API_ENDPOINTS } from '@/config/api';
 import { useStorage } from '@vueuse/core';
-// import { onClickOutside } from '@vueuse/core'; // No longer needed for VModal
+import { onClickOutside } from '@vueuse/core';
 import { useNotificationStore } from '@/stores/notifications';
 import CreateListModal from '@/components/CreateListModal.vue';
-import VModal from '@/components/valerie/VModal.vue';
-import VFormField from '@/components/valerie/VFormField.vue';
-import VInput from '@/components/valerie/VInput.vue';
-import VButton from '@/components/valerie/VButton.vue';
-import VSpinner from '@/components/valerie/VSpinner.vue';
-import VAlert from '@/components/valerie/VAlert.vue';
-import VCard from '@/components/valerie/VCard.vue';
 
 interface Group {
   id: number;
@@ -130,13 +135,13 @@ const fetchError = ref<string | null>(null);
 const showCreateGroupDialog = ref(false);
 const newGroupName = ref('');
 const creatingGroup = ref(false);
-const newGroupNameInputRef = ref<InstanceType<typeof VInput> | null>(null); // Changed type to VInput instance
-// const createGroupModalRef = ref<HTMLElement | null>(null); // No longer needed
+const newGroupNameInputRef = ref<HTMLInputElement | null>(null);
+const createGroupModalRef = ref<HTMLElement | null>(null);
 const createGroupFormError = ref<string | null>(null);
 
 const inviteCodeToJoin = ref('');
 const joiningGroup = ref(false);
-const joinInviteCodeInputRef = ref<InstanceType<typeof VInput> | null>(null); // Changed type to VInput instance
+const joinInviteCodeInputRef = ref<HTMLInputElement | null>(null);
 const joinGroupFormError = ref<string | null>(null);
 
 const showCreateListModal = ref(false);
@@ -178,12 +183,7 @@ const openCreateGroupDialog = () => {
   createGroupFormError.value = null;
   showCreateGroupDialog.value = true;
   nextTick(() => {
-    // Attempt to focus VInput. This assumes VInput exposes a focus method
-    // or internally focuses its input element on a `focus()` call.
-    // If VInput's input element needs to be accessed directly, it might be:
-    // newGroupNameInputRef.value?.$el.querySelector('input')?.focus(); or similar,
-    // but ideally VInput itself handles this.
-    newGroupNameInputRef.value?.focus?.();
+    newGroupNameInputRef.value?.focus();
   });
 };
 
@@ -191,12 +191,12 @@ const closeCreateGroupDialog = () => {
   showCreateGroupDialog.value = false;
 };
 
-// onClickOutside(createGroupModalRef, closeCreateGroupDialog); // Replaced by VModal's own handling
+onClickOutside(createGroupModalRef, closeCreateGroupDialog);
 
 const handleCreateGroup = async () => {
   if (!newGroupName.value.trim()) {
     createGroupFormError.value = 'Group name is required';
-    newGroupNameInputRef.value?.focus?.(); // Use VInput's focus method if available
+    newGroupNameInputRef.value?.focus();
     return;
   }
   createGroupFormError.value = null;
@@ -229,7 +229,7 @@ const handleCreateGroup = async () => {
 const handleJoinGroup = async () => {
   if (!inviteCodeToJoin.value.trim()) {
     joinGroupFormError.value = 'Invite code is required';
-    joinInviteCodeInputRef.value?.focus?.(); // Use VInput's focus method if available
+    joinInviteCodeInputRef.value?.focus();
     return;
   }
   joinGroupFormError.value = null;