Add global search

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Group/GroupCard.vue

@@ -1,29 +1,31 @@
 <template>
-  <router-link
-    :to="{
-      name: RouteName.GROUP,
-      params: { preferredUsername: usernameWithDomain(group) },
+  <LinkOrRouterLink
+    :to="to"
+    :isInternal="isInternal"
+    class="mbz-card shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg my-4 flex items-center flex-col"
+    :class="{
+      'sm:flex-row': mode === 'row',
+      'max-w-xs w-[18rem] shrink-0 flex flex-col': mode === 'column',
     }"
-    class="card flex flex-col shrink-0 w-[18rem] bg-white dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg"
   >
-    <figure class="rounded-t-lg flex justify-center h-40">
-      <lazy-image-wrapper :picture="group.banner" :rounded="true" />
-    </figure>
-    <div class="py-2 pl-2">
+    <div class="flex-none p-2 md:p-4">
+      <figure class="" v-if="group.avatar">
+        <img
+          class="rounded-full"
+          :src="group.avatar.url"
+          alt=""
+          height="128"
+          width="128"
+        />
+      </figure>
+      <AccountGroup v-else :size="128" />
+    </div>
+    <div
+      class="py-2 px-2 md:px-4 flex flex-col h-full justify-between w-full"
+      :class="{ 'sm:flex-1': mode === 'row' }"
+    >
       <div class="flex gap-1 mb-2">
-        <div class="">
-          <figure class="" v-if="group.avatar">
-            <img
-              class="rounded-xl"
-              :src="group.avatar.url"
-              alt=""
-              height="64"
-              width="64"
-            />
-          </figure>
-          <AccountGroup v-else :size="64" />
-        </div>
-        <div class="px-1 overflow-hidden">
+        <div class="px-1 overflow-hidden flex-auto">
           <h3
             class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white"
             dir="auto"
@@ -46,7 +48,10 @@
           v-if="group.physicalAddress && addressFullName(group.physicalAddress)"
           :physicalAddress="group.physicalAddress"
         />
-        <p class="flex gap-1">
+        <p
+          class="flex gap-1"
+          v-if="group?.members?.total && group?.followers?.total"
+        >
           <Account />
           {{
             t(
@@ -58,14 +63,28 @@
             )
           }}
         </p>
+        <p
+          class="flex gap-1"
+          v-else-if="group?.membersCount || group?.followersCount"
+        >
+          <Account />
+          {{
+            t(
+              "{count} members or followers",
+              {
+                count: (group.membersCount ?? 0) + (group.followersCount ?? 0),
+              },
+              (group.membersCount ?? 0) + (group.followersCount ?? 0)
+            )
+          }}
+        </p>
       </div>
     </div>
-  </router-link>
+  </LinkOrRouterLink>
 </template>
 
 <script lang="ts" setup>
 import { displayName, IGroup, usernameWithDomain } from "@/types/actor";
-import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import RouteName from "../../router/name";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
 import { addressFullName } from "@/types/address.model";
@@ -74,16 +93,40 @@ import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
 import Account from "vue-material-design-icons/Account.vue";
 import { htmlToText } from "@/utils/html";
 import { computed } from "vue";
+import LinkOrRouterLink from "../core/LinkOrRouterLink.vue";
 
 const props = withDefaults(
   defineProps<{
     group: IGroup;
-    showSummary: boolean;
+    showSummary?: boolean;
+    isRemoteGroup?: boolean;
+    isLoggedIn?: boolean;
+    mode?: "row" | "column";
   }>(),
-  { showSummary: true }
+  { showSummary: true, isRemoteGroup: false, isLoggedIn: true, mode: "column" }
 );
 
 const { t } = useI18n({ useScope: "global" });
 
-const saneSummary = computed(() => htmlToText(props.group.summary));
+const saneSummary = computed(() => htmlToText(props.group.summary ?? ""));
+
+const isInternal = computed(() => {
+  return props.isRemoteGroup && props.isLoggedIn === false;
+});
+
+const to = computed(() => {
+  if (props.isRemoteGroup) {
+    if (props.isLoggedIn === false) {
+      return props.group.url;
+    }
+    return {
+      name: RouteName.INTERACT,
+      query: { uri: encodeURI(props.group.url) },
+    };
+  }
+  return {
+    name: RouteName.GROUP,
+    params: { preferredUsername: usernameWithDomain(props.group) },
+  };
+});
 </script>