feature: player search mobile (#241)

Author: lukepolo

components/PlayerDisplay.vue

@@ -254,7 +254,7 @@ export default {
     },
     showAddFriend: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     showElo: {
       type: Boolean,

components/PlayerSearch.vue

@@ -42,30 +42,6 @@ const isMobile = useMediaQuery("(max-width: 768px)");
     <DrawerContent>
       <DrawerTitle class="sr-only">{{ label }}</DrawerTitle>
       <div class="flex flex-col h-[80dvh] p-4">
-        <div class="flex items-center justify-between pb-3 border-b">
-          <input
-            ref="mobileSearchInput"
-            v-model="query"
-            :placeholder="$t('player.search.placeholder')"
-            type="search"
-            inputmode="search"
-            enterkeyhint="search"
-            class="flex-1 bg-transparent outline-none text-base"
-            @input="
-              (e: Event) =>
-                debouncedSearch((e.target as HTMLInputElement).value)
-            "
-          />
-          <div class="flex items-center gap-2 ml-4">
-            <Switch
-              class="text-sm text-muted-foreground cursor-pointer flex items-center gap-2"
-              :model-value="onlineOnly"
-              @click="toggleOnlineOnly"
-            />
-            {{ $t("player.search.online_only") }}
-          </div>
-        </div>
-
         <div class="flex-1 overflow-y-auto min-h-0">
           <div
             v-if="!players?.length"
@@ -91,6 +67,30 @@ const isMobile = useMediaQuery("(max-width: 768px)");
             </div>
           </div>
         </div>
+
+        <div class="flex items-center justify-between pt-3 border-t">
+          <input
+            ref="mobileSearchInput"
+            v-model="query"
+            :placeholder="$t('player.search.placeholder')"
+            type="search"
+            inputmode="search"
+            enterkeyhint="search"
+            class="flex-1 bg-transparent outline-none text-base"
+            @input="
+              (e: Event) =>
+                debouncedSearch((e.target as HTMLInputElement).value)
+            "
+          />
+          <div class="flex items-center gap-2 ml-4">
+            <Switch
+              class="text-sm text-muted-foreground cursor-pointer flex items-center gap-2"
+              :model-value="onlineOnly"
+              @click="toggleOnlineOnly"
+            />
+            {{ $t("player.search.online_only") }}
+          </div>
+        </div>
       </div>
     </DrawerContent>
   </Drawer>

components/chat/ChatMessage.vue

@@ -19,7 +19,6 @@ import PlayerDisplay from "~/components/PlayerDisplay.vue";
         :show-online="false"
         :show-elo="false"
         :show-steam-id="false"
-        :show-add-friend="false"
         :tooltip="false"
         :linkable="false"
         :show-name="false"

components/matchmaking-lobby/PlayersList.vue

@@ -58,7 +58,6 @@ import FriendOptions from "~/components/matchmaking-lobby/FriendOptions.vue";
                     class="w-full cursor-pointer opacity-50 hover:opacity-80 hover:bg-muted/50 transition-all duration-200 p-2 rounded-md"
                     :player="player"
                     :showOnline="false"
-                    :showAddFriend="false"
                     :linkable="true"
                   />
                   <div class="flex flex-col gap-2">
@@ -77,7 +76,6 @@ import FriendOptions from "~/components/matchmaking-lobby/FriendOptions.vue";
               <PlayerDisplay
                 :player="player"
                 :showOnline="false"
-                :showAddFriend="false"
                 :linkable="true"
               />
 

components/teams/TeamSearch.vue

@@ -32,30 +32,6 @@ const isMobile = useMediaQuery("(max-width: 768px)");
     <DrawerContent>
       <DrawerTitle class="sr-only">{{ label }}</DrawerTitle>
       <div class="flex flex-col h-[80dvh] p-4">
-        <div class="flex items-center justify-between pb-3 border-b">
-          <input
-            ref="mobileSearchInput"
-            v-model="query"
-            :placeholder="$t('team.search.placeholder')"
-            type="search"
-            inputmode="search"
-            enterkeyhint="search"
-            class="flex-1 bg-transparent outline-none text-base"
-            @input="
-              (e: Event) =>
-                debouncedSearch((e.target as HTMLInputElement).value)
-            "
-          />
-          <div class="flex items-center gap-2 ml-4" v-if="!myTeams">
-            <Switch
-              class="text-sm text-muted-foreground cursor-pointer flex items-center gap-2"
-              :model-value="myTeamsOnly"
-              @click="toggleMyTeamsOnly"
-            />
-            {{ $t("team.search.my_teams_only") }}
-          </div>
-        </div>
-
         <div class="flex-1 overflow-y-auto min-h-0">
           <div
             v-if="!teams?.length"
@@ -86,6 +62,30 @@ const isMobile = useMediaQuery("(max-width: 768px)");
             </div>
           </div>
         </div>
+
+        <div class="flex items-center justify-between pt-3 border-t">
+          <input
+            ref="mobileSearchInput"
+            v-model="query"
+            :placeholder="$t('team.search.placeholder')"
+            type="search"
+            inputmode="search"
+            enterkeyhint="search"
+            class="flex-1 bg-transparent outline-none text-base"
+            @input="
+              (e: Event) =>
+                debouncedSearch((e.target as HTMLInputElement).value)
+            "
+          />
+          <div class="flex items-center gap-2 ml-4" v-if="!myTeams">
+            <Switch
+              class="text-sm text-muted-foreground cursor-pointer flex items-center gap-2"
+              :model-value="myTeamsOnly"
+              @click="toggleMyTeamsOnly"
+            />
+            {{ $t("team.search.my_teams_only") }}
+          </div>
+        </div>
       </div>
     </DrawerContent>
   </Drawer>

pages/players/[id].vue

@@ -63,6 +63,7 @@ const { isMobile } = useSidebar();
                   :player="player"
                   size="xl"
                   :show-steam-id="true"
+                  :show-add-friend="true"
                   v-if="player"
                 />
               </div>