fix: sonar errors

.sonarlint/connectedMode.json

@@ -0,0 +1,5 @@
+{
+    "sonarCloudOrganization": "alialaa88",
+    "projectKey": "AliAlaa88_Yapper-frontend",
+    "region": "EU"
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "sonarlint.connectedMode.project": {
+    "connectionId": "yapper",
+    "projectKey": "AliAlaa88_Yapper-frontend"
+  }
+}

app/modules/Common/components/Logo/Logo.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="divClass">
-        <component :is="isDark ? LogoWhite : LogoBlack" :imgClass="imgClass" />
+        <component :is="isDark ? LogoWhite : LogoBlack" :img-class="imgClass" />
     </div>
 </template>
 

app/modules/Common/components/Logo/LogoBlack.vue

@@ -1,5 +1,5 @@
 <template>
-    <img :src="logoBlack" alt="Yapper logo black" :class="imgClass" />
+    <img :src="logoBlack" alt="Yapper logo black" :class="imgClass" >
 </template>
 
 <script setup lang="ts">

app/modules/Common/components/Logo/LogoWhite.vue

@@ -1,5 +1,5 @@
 <template>
-    <img :src="logoWhite" alt="Yapper logo white" :class="imgClass" />
+    <img :src="logoWhite" alt="Yapper logo white" :class="imgClass" >
 </template>
 
 <script setup lang="ts">

app/modules/Common/components/Popup/Popup.vue

@@ -20,24 +20,24 @@
                     <!-- The close button, with larger size -->
                     <button
                         v-if="hasCloseButton"
+                        id="close-popup-btn"
                         class="cursor-pointer hover:bg-hover mx-4 mt-2 flex items-center justify-center border-none w-7 h-7 rounded-full transition"
                         @click="handleClose"
-                        id="close-popup-btn"
                     >
                         <X class="w-5 h-5 text-primary hover:text-primary/80" />
                     </button>
                     <button
                         v-if="hasBackButton"
+                        id="back-popup-btn"
                         class="cursor-pointer hover:bg-hover mx-4 mt-2 flex items-center justify-center border-none w-7 h-7 rounded-full transition"
                         @click="$emit('back')"
-                        id="back-popup-btn"
                     >
                         <ArrowLeft class="w-5 h-5 text-primary hover:text-primary/80" />
                     </button>
                     <h1 v-if="title" class="text-xl font-bold text-primary flex-1 text-center mr-5">
                         {{ title }}
                     </h1>
-                    <div v-if="hasCloseButton" class="w-5"></div>
+                    <div v-if="hasCloseButton" class="w-5"/>
                 </div>
 
                 <div class="overflow-y-auto" :class="slotClass">

app/modules/Common/components/Tabs/Tabs.vue

@@ -6,11 +6,11 @@
     >
         <!-- Left Arrow -->
         <button
-            id="btn-scroll-tabs-left"
             v-if="canScrollLeft && isHovering"
-            @click="scrollLeft"
+            id="btn-scroll-tabs-left"
             class="absolute left-0 top-0 bottom-0 z-10 flex items-center justify-center w-10 bg-linear-to-r from-x-background via-x-background to-transparent cursor-pointer transition-opacity duration-200"
             aria-label="Scroll left"
+            @click="scrollLeft"
         >
             <ChevronLeft class="w-5 h-5 text-primary" />
         </button>
@@ -24,10 +24,10 @@
             <ul class="flex w-full">
                 <li
                     v-for="tab in tabs"
+                    :id="tab.test_id"
                     :key="tab.value"
                     class="flex-1 text-center cursor-pointer transition-all duration-200 hover:bg-hover"
                     @click="handleChange(tab.value)"
-                    :id="tab.test_id"
                 >
                     <button
                         class="relative cursor-pointer w-full px-4 py-4 text-base font-medium transition-colors duration-200 whitespace-nowrap"
@@ -45,11 +45,11 @@
 
         <!-- Right Arrow -->
         <button
-            id="btn-scroll-tabs-right"
             v-if="canScrollRight && isHovering"
-            @click="scrollRight"
+            id="btn-scroll-tabs-right"
             class="absolute right-0 top-0 bottom-0 z-10 flex items-center justify-center w-10 bg-linear-to-l from-x-background via-x-background to-transparent cursor-pointer transition-opacity duration-200"
             aria-label="Scroll right"
+            @click="scrollRight"
         >
             <ChevronRight class="w-5 h-5 text-primary" />
         </button>

app/modules/Common/components/UserCard/UserCard.vue

@@ -15,7 +15,7 @@
                             <span
                                 v-if="user.is_follower"
                                 class="ml-1 text-xs bg-gray-200 dark:bg-gray-700 text-muted px-1.5 py-0.5 rounded"
-                                >Follows you</span
+                            >Follows you</span
                             >
                         </p>
                     </div>

app/modules/Common/components/UserImage/UserImage.vue

@@ -6,14 +6,14 @@
         :class="compact ? `w-${size} h-${size}` : `w-${size} h-${size}`"
         class="object-cover rounded-full"
         :onerror="(event: any) => handleImageError(name ?? '', event)"
-    />
+    >
     <img
         v-else
         :src="`https://ui-avatars.com/api/?name=${name}&background=random&size=${size}`"
         :alt="name ?? ''"
         :class="compact ? `w-${size} h-${size}` : `w-${size} h-${size}`"
         class="object-cover rounded-full"
-    />
+    >
 </template>
 
 <script setup lang="ts">

app/modules/Common/test/unit/useGenericInfiniteQuery.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useGenericInfiniteQuery } from '../../composables/useGenericInfiniteQuery'
 
 // Mock useInfiniteScroll

app/modules/TimeLine/components/bookmarkList/bookmarkList.vue

@@ -15,7 +15,7 @@
             </div>
         </div>
     </div>
-    <TweetsList :fetchingSource="`tweets/bookmarks`" class="min-h-[650px] w-full" />
+    <TweetsList :fetching-source="`tweets/bookmarks`" class="min-h-[650px] w-full" />
 </template>
 
 <script setup lang="ts">

app/modules/TimeLine/components/postTweet/PostTweet.vue

@@ -53,10 +53,10 @@
                         mediaUrls.length === 1
                             ? 'grid-cols-1'
                             : mediaUrls.length === 2
-                              ? 'grid-cols-2'
-                              : mediaUrls.length === 3
                                 ? 'grid-cols-2'
-                                : 'grid-cols-2'
+                                : mediaUrls.length === 3
+                                    ? 'grid-cols-2'
+                                    : 'grid-cols-2'
                     "
                 >
                     <div
@@ -67,16 +67,16 @@
                             mediaUrls.length === 1
                                 ? 'aspect-video'
                                 : mediaUrls.length === 3 && index === 0
-                                  ? 'col-span-2 aspect-video'
-                                  : 'aspect-square'
+                                    ? 'col-span-2 aspect-video'
+                                    : 'aspect-square'
                         "
                     >
                         <img
                             v-if="media.type === 'image'"
                             :src="media.url"
                             :alt="t('timeline.postTweet.uploadedMedia', { index: index + 1 })"
                             class="w-full h-full object-cover"
-                        />
+                        >
                         <video
                             v-else-if="media.type === 'video'"
                             :src="media.url"
@@ -91,7 +91,7 @@
                                 :src="`${media.url}.vtt`"
                                 srclang="en"
                                 label="English"
-                            />
+                            >
                             <p>{{ t('timeline.postTweet.videoNotSupported') }}</p>
                         </video>
                         <button
@@ -215,7 +215,7 @@
 </template>
 
 <script setup lang="ts">
-import { Smile, ImagePlay, X, User } from 'lucide-vue-next'
+import { Smile, ImagePlay, X } from 'lucide-vue-next'
 import { CustomToolTip } from '~/modules/Common/components/Tooltip'
 import MediaUpload from './subComponents/MediaUpload'
 import GifPicker from './subComponents/GifPicker/GifPicker.vue'
@@ -270,8 +270,8 @@ const btnId = computed(() =>
     props.parentTweetId
         ? 'reply-tweet-btn'
         : props.quotedTweet
-          ? 'quote-tweet-btn'
-          : 'post-tweet-btn',
+            ? 'quote-tweet-btn'
+            : 'post-tweet-btn',
 )
 interface MediaItem {
     url: string

app/modules/TimeLine/components/postTweet/subComponents/EmojiPicker/EmojiPicker.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- Mobile: Bottom sheet overlay -->
-    <div v-if="isOpen" class="fixed inset-0 bg-black/50 z-50" @click="$emit('close')"></div>
+    <div v-if="isOpen" class="fixed inset-0 bg-black/50 z-50" @click="$emit('close')"/>
     <div
         v-if="isOpen"
         ref="emojiPickerRef"
@@ -11,14 +11,14 @@
         <div class="p-2 border-b border-primary flex justify-between items-center">
             <span class="text-primary font-semibold text-sm">Emoji</span>
             <button
-                @click="$emit('close')"
-                class="text-muted hover:text-primary"
                 id="close-emoji-picker-btn"
+                class="text-muted hover:text-primary"
+                @click="$emit('close')"
             >
                 <X class="w-4 h-4" />
             </button>
         </div>
-        <EmojiPicker @select="onSelect" :theme="emojiTheme" />
+        <EmojiPicker :theme="emojiTheme" @select="onSelect" />
     </div>
 </template>
 

app/modules/TimeLine/components/postTweet/subComponents/FormattedTextarea/FormattedTextarea.vue

@@ -10,7 +10,7 @@
             <span v-if="!modelValue" class="text-muted">{{ placeholder }}</span>
 
             <span v-else v-html="formattedContent" />
-            <br v-if="modelValue.endsWith('\n')" />
+            <br v-if="modelValue.endsWith('\n')" >
         </div>
 
         <textarea

app/modules/TimeLine/components/postTweet/subComponents/GifPicker/GifPicker.vue

@@ -1,26 +1,26 @@
 <template>
     <!-- Mobile: Bottom sheet overlay -->
-    <div v-if="isOpen" class="fixed inset-0 bg-black/50 z-50" @click="$emit('close')"></div>
+    <div v-if="isOpen" class="fixed inset-0 bg-black/50 z-50" @click="$emit('close')"/>
     <div
         v-if="isOpen"
         ref="gifPickerRef"
         class="fixed z-60 bg-primary border border-primary shadow-lg overflow-hidden md:rounded-lg rounded-t-2xl rounded-b-none inset-x-0 bottom-0 md:bottom-auto md:inset-x-auto w-full md:w-72 h-[60vh] md:h-80"
         :style="pickerStyle"
         @click.stop
     >
-        <div class="p-2 border-b border-primary flex gap-2" id="gif-picker-container">
+        <div id="gif-picker-container" class="p-2 border-b border-primary flex gap-2">
             <input
+                id="gif-picker-search-input"
                 v-model="query"
                 type="text"
                 placeholder="Search GIFs..."
-                id="gif-picker-search-input"
-                @input="searchGifs"
                 class="w-full px-2 py-1 rounded bg-primary outline-none text-sm text-primary placeholder:text-muted"
-            />
+                @input="searchGifs"
+            >
             <button
-                @click="$emit('close')"
-                class="text-muted hover:text-primary"
                 id="close-gif-picker-btn"
+                class="text-muted hover:text-primary"
+                @click="$emit('close')"
             >
                 <X class="w-4 h-4" />
             </button>
@@ -37,7 +37,7 @@
                     :src="gif.images.fixed_height_small.url"
                     :alt="gif.title"
                     class="rounded-md w-full h-full object-cover"
-                />
+                >
             </div>
         </div>
     </div>

app/modules/TimeLine/components/postTweet/subComponents/MediaUpload/MediaUpload.vue

@@ -2,11 +2,11 @@
     <CustomToolTip side="bottom">
         <template #trigger>
             <button
+                id="post-tweet-media-upload-btn"
                 type="button"
-                @click="openMediaDrawer"
                 :disabled="disabled"
-                id="post-tweet-media-upload-btn"
                 class="cursor-pointer hover:bg-hover rounded-full p-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                @click="openMediaDrawer"
             >
                 <Image class="w-5 h-5 text-accent" />
             </button>
@@ -17,14 +17,14 @@
     </CustomToolTip>
 
     <input
+        id="post-tweet-media-upload-input"
         ref="fileInput"
         type="file"
         accept="image/*,video/*"
-        id="post-tweet-media-upload-input"
         style="display: none"
-        @change="onFileChange"
         multiple="true"
-    />
+        @change="onFileChange"
+    >
 </template>
 
 <script setup lang="ts">

app/modules/TimeLine/components/postTweet/subComponents/MentionSuggestion/MentionSuggestion.vue

@@ -4,7 +4,7 @@
         v-if="visible && isMobile"
         class="fixed inset-0 bg-black/50 z-50"
         @click="$emit('close')"
-    ></div>
+    />
     <div
         v-if="visible"
         ref="mentionSuggestionRef"

app/modules/TimeLine/components/sidebar/MobileSidebar.vue

@@ -6,20 +6,20 @@
                 <!-- Avatar Trigger -->
                 <button
                     id="btn-open-mobile-sidebar"
-                    @click="isOpen = true"
                     class="rounded-full overflow-hidden size-10 cursor-pointer"
+                    @click="isOpen = true"
                 >
                     <UserImage :image-url="user?.avatar_url" :name="user?.name" :size="40" />
                 </button>
             </div>
 
             <!-- Logo -->
             <div class="absolute left-1/2 -translate-x-1/2">
-                <Logo imgClass="w-8 h-8 object-contain" />
+                <Logo img-class="w-8 h-8 object-contain" />
             </div>
 
             <!-- Settings/Placeholder (to balance layout) -->
-            <div class="w-8"></div>
+            <div class="w-8"/>
         </div>
     </div>
 
@@ -31,7 +31,7 @@
                 v-if="isOpen"
                 class="fixed inset-0 z-9998 bg-black/50"
                 @click="isOpen = false"
-            ></div>
+            />
         </Transition>
 
         <!-- Drawer -->
@@ -50,13 +50,13 @@
                     </div>
                     <div class="flex gap-4 mt-3 text-sm">
                         <span class="text-primary font-bold"
-                            >{{ user?.following_count || 0 }}
+                        >{{ user?.following_count || 0 }}
                             <span class="text-muted font-normal">{{
                                 t('profile.following')
                             }}</span></span
                         >
                         <span class="text-primary font-bold"
-                            >{{ user?.followers_count || 0 }}
+                        >{{ user?.followers_count || 0 }}
                             <span class="text-muted font-normal">{{
                                 t('profile.followers')
                             }}</span></span
@@ -68,11 +68,11 @@
                 <div class="flex flex-col py-2">
                     <NuxtLink
                         v-for="link in navLinks"
-                        :key="link.href"
                         :id="`mobile-sidebar-link-${link.href}`"
+                        :key="link.href"
                         :to="link.href"
-                        @click="isOpen = false"
                         class="flex items-center gap-4 px-4 py-3 hover:bg-muted transition-colors text-primary rounded-full relative"
+                        @click="isOpen = false"
                     >
                         <div class="relative">
                             <component :is="link.icon" class="w-6 h-6" />