ui(commons): Minor responsiveness changes

- Use UTabs over custom tabs component in model view pages
- Change layout of tabs to fit on mobile phones
- Swap positions of the actions/stats in the model view action
  bar to match conventional UX
- Hide the orientation selector for model lists on mobile,
  since it is basically a no-op.
- Copy changes to reduce text
- Hide like button text on mobile
- Other minor changes, mostly only visible on phones

Author: omargfh

apps/modeling-commons-frontend/app/app.config.ts

@@ -262,6 +262,8 @@ export default defineAppConfig({
     tabs: {
       slots: {
         content: "pt-4",
+        trigger: "grow flex-col lg:flex-row gap-1 py-2",
+        label: "text-[10px]/3 lg:text-sm",
       },
     },
 

apps/modeling-commons-frontend/app/components/auth/ReclaimAccount.vue

@@ -3,7 +3,7 @@
     variant="subtle"
     icon="i-lucide-alert-triangle"
     color="warning"
-    title="Do you have an old account?"
+    title="Got an old account?"
     class="text-left"
     :actions="[
       {

apps/modeling-commons-frontend/app/components/layout/ClientNavbar.vue

@@ -2,7 +2,7 @@
   <Navbar
     id="main-navbar"
     ref="navbar"
-    class="bg-background! py-4! lg:px-[2.5vw]! shadow-none! max-w-500 mx-auto flex-1 w-full"
+    class="bg-background! py-4! lg:px-[2.5vw]! shadow-none! mx-auto flex-1 w-full"
     :brand="brand"
     brand-href="/"
     :brand-attrs="brandAttrs"
@@ -205,7 +205,7 @@ const isMobileScreen = ref(false);
 const navbarRef = useTemplateRef<InstanceType<typeof _Navbar>>("navbar");
 
 const brand = computed(() => WebsiteLogo);
-const brandAttrs = computed(() => ({ class: "w-50! lg:w-60! lg:ml-0 lg:[&>svg]:w-full!" }));
+const brandAttrs = computed(() => ({ class: "w-40! lg:w-60! lg:ml-0 lg:[&>svg]:w-full!" }));
 
 const handleMediaQueryChange = (): void => {
   if (import.meta.client) {

apps/modeling-commons-frontend/app/components/model-shared/ModelLike.vue

@@ -1,23 +1,31 @@
 <template>
-  <UButton
-    :variant="active ? 'solid' : 'outline'"
-    :color="active ? 'primary' : 'neutral'"
-    size="sm"
-    icon="i-lucide-thumbs-up"
-    :disabled="busy"
-    @click="$emit('toggle')"
-  >
-    {{ active ? "Liked" : "Like" }}
-  </UButton>
+  <div class="contents">
+    <UButton v-bind="buttonProps" data-show-from="sm" @click="$emit('toggle')">
+      <span>{{ buttonText }}</span>
+    </UButton>
+    <UButton v-bind="buttonProps" data-hide-from="sm" @click="$emit('toggle')" />
+  </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import type { ButtonProps } from "#ui/types";
+
+const props = defineProps<{
   active: boolean;
   busy?: boolean;
 }>();
 
 defineEmits<{
   toggle: [];
 }>();
+
+const buttonText = computed(() => (props.active ? "Liked" : "Like"));
+const buttonProps = computed<ButtonProps>(() => ({
+  variant: props.active ? "solid" : "outline",
+  color: props.active ? "primary" : "neutral",
+  size: "sm",
+  icon: "i-lucide-thumbs-up",
+  disabled: props.busy,
+  title: buttonText.value,
+}));
 </script>

apps/modeling-commons-frontend/app/components/model/detail/ModelBottomBar.vue

@@ -1,11 +1,11 @@
 <template>
   <section class="flex items-center justify-between flex-wrap gap-4">
-    <ModelStats :likes="likes" :downloads="downloads" :views="views" :runs="runs" />
-
     <div class="flex items-center gap-3">
       <ModelLike :active="likedByMe" :busy="busy" @toggle="$emit('toggleLike')" />
       <UButton variant="outline" size="sm" icon="i-lucide-share-2" square @click="$emit('share')" />
     </div>
+
+    <ModelStats :likes="likes" :downloads="downloads" :views="views" :runs="runs" />
   </section>
 </template>
 

apps/modeling-commons-frontend/app/components/model/detail/ModelDetail.vue

@@ -71,45 +71,38 @@
       @share="handleShare"
     />
 
-    <section class="rounded-xl border border-default overflow-hidden">
-      <div class="flex border-b border-default">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          class="flex-1 py-3 text-sm font-medium text-center transition-colors border-b-2 -mb-px"
-          :class="
-            activeTab === tab.key
-              ? 'border-primary-600 text-highlighted'
-              : 'border-transparent text-muted hover:text-toned'
-          "
-          @click="onTabChange(tab.key)"
-        >
-          {{ tab.label }}
-        </button>
-      </div>
-      <ModelDiscussionTab v-if="activeTab === 'discussion'" />
-
-      <ModelFilesTab
-        v-else-if="activeTab === 'files'"
-        :files="attachedFiles"
-        :status="filesStatus"
-        :viewed-version-number="card.latestVersion?.versionNumber"
-        @download="handleFileDownload"
-      />
-
-      <ModelVersionsTab
-        v-else-if="activeTab === 'versions'"
-        :model-id="card.model.id"
-        :versions="versions ?? []"
-        :pending="versionsStatus === 'pending'"
-      />
-
-      <ModelFamilyTab
-        v-else-if="activeTab === 'family'"
-        :parent="family?.parent ?? null"
-        :children="family?.children ?? []"
-      />
-    </section>
+    <UTabs
+      v-model="activeTab"
+      :items="tabs"
+      color="primary"
+      :ui="{ root: 'w-full' }"
+      @update:model-value="idx => onTabChange(idx)"
+    >
+      <template #discussion>
+        <ModelDiscussionTab />
+      </template>
+      <template #files>
+        <ModelFilesTab
+          :files="attachedFiles"
+          :status="filesStatus"
+          :viewed-version-number="card.latestVersion?.versionNumber"
+          @download="handleFileDownload"
+        />
+      </template>
+      <template #versions>
+        <ModelVersionsTab
+          :model-id="card.model.id"
+          :versions="versions ?? []"
+          :pending="versionsStatus === 'pending'"
+        />
+      </template>
+      <template #family>
+        <ModelFamilyTab
+          :parent="family?.parent ?? null"
+          :children="family?.children ?? []"
+        />
+      </template>
+    </UTabs>
   </UCard>
 </template>
 
@@ -120,7 +113,7 @@ const props = defineProps<{ card: ModelCard; permissions: UserModelPermissions }
 
 type TabKey = "discussion" | "files" | "versions" | "family";
 
-const activeTab = ref<TabKey>("discussion");
+const activeTab = ref<string>('0');
 
 const user = useUser();
 const modelId = computed(() => props.card?.model.id ?? "");
@@ -165,11 +158,16 @@ const attachedFiles = computed<AttachedFile[]>(() => {
   });
 });
 
-const tabs = computed(() => [
-  { key: "discussion" as const, label: "Discussion" },
-  { key: "files" as const, label: "Files" },
-  { key: "versions" as const, label: `Versions (${props.card?.counts.versions ?? 0})` },
-  { key: "family" as const, label: "Family" },
+
+const versionTabLabel = computed(() => {
+  const count = props.card.model.latestVersionNumber ?? 0;
+  return count > 1 ? `Versions (${count})` : "Versions";
+});
+const tabs = computed<Array<({ label: string; icon: string; slot: TabKey })>>(() => [
+  { label: "Discussion", icon: "i-lucide-message-square", slot: "discussion" },
+  { label: "Files", icon: "i-lucide-file-text", slot: "files" },
+  { label: versionTabLabel.value, icon: "lucide:git-branch", slot: "versions" },
+  { label: "Family", icon: "i-lucide-users", slot: "family" },
 ]);
 
 const downloadUrl = computed(() => {
@@ -186,8 +184,8 @@ const previewImageUrl = computed(() => {
   return appendWindowProtocol(props.card.previewImageUrl);
 });
 
-function onTabChange(key: TabKey) {
-  activeTab.value = key;
+function onTabChange(idx: string | number) {
+  const key = tabs.value[Number(idx)]?.slot;
   if (key === "family" && familyStatus.value === "idle") {
     void loadFamily();
   }

apps/modeling-commons-frontend/app/components/model/detail/ModelDiscussionTab.test.ts

@@ -16,6 +16,6 @@ describe("ModelDiscussionTab", () => {
 
   it("renders a filter selector", async () => {
     const wrapper = await mountSuspended(ModelDiscussionTab);
-    expect(wrapper.text()).toContain("Filter Comments By");
+    expect(wrapper.text()).toContain("Filter by");
   });
 });

apps/modeling-commons-frontend/app/components/model/detail/ModelDiscussionTab.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="p-6">
+  <div class="p-2 lg:p-6">
     <div class="flex items-center justify-between mb-6">
       <h3 class="text-lg font-semibold text-highlighted">Discussion</h3>
       <div class="flex items-center gap-2 text-sm">
-        <span class="text-muted">Filter Comments By</span>
-        <USelectMenu :items="filterOptions" :model-value="filterOptions[0]" class="w-32" />
+        <span class="text-muted">Filter by</span>
+        <USelectMenu :items="filterOptions" :model-value="filterOptions[0]" class="lg:w-32" size="sm" />
       </div>
     </div>
 
     <div class="flex flex-col items-center justify-center py-12 text-dimmed">
       <UIcon name="i-lucide-message-circle" class="size-12 mb-3" />
       <p class="text-sm font-medium">Discussions are coming soon!</p>
-      <p class="text-xs mt-1">In the meantime, if you have any questions or feedback about this model, please reach out to the author.</p>
+      <p class="text-xs mt-1 text-center text-pretty">In the meantime, if you have any questions or feedback about this model, please reach out to the author.</p>
     </div>
   </div>
 </template>

apps/modeling-commons-frontend/app/components/model/detail/ModelFamilyTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-6">
+  <div class="p-2 lg:p-6">
     <div class="mb-4">
       <h3 class="text-lg font-semibold text-highlighted">Model Family</h3>
       <p class="text-xs text-dimmed mt-1">

apps/modeling-commons-frontend/app/components/model/detail/ModelFilesTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-6">
+  <div class="p-2 lg:p-6">
     <div class="flex items-center justify-between mb-2">
       <h3 class="text-lg font-semibold text-highlighted">Attached Files</h3>
       <UButton v-if="editable" variant="outline" icon="i-lucide-plus" size="sm">