fix org<>user confusion in frontend

src/kohaku-hub-ui/src/pages/[type]s/[namespace]/[name]/edit/[branch]/[...file].vue

@@ -109,7 +109,7 @@
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
+import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
 import { ElMessage } from "element-plus";
 import CodeEditor from "@/components/common/CodeEditor.vue";
 import { repoAPI } from "@/utils/api";

src/kohaku-hub-ui/src/pages/[type]s/[namespace]/[name]/settings.vue

@@ -155,6 +155,7 @@
 </template>
 
 <script setup>
+import { useRoute, useRouter } from "vue-router";
 import { repoAPI, settingsAPI } from "@/utils/api";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useAuthStore } from "@/stores/auth";

src/kohaku-hub-ui/src/pages/[type]s/[namespace]/[name]/upload/[branch].vue

@@ -187,6 +187,7 @@
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import { repoAPI } from "@/utils/api";
 import { useAuthStore } from "@/stores/auth";

src/kohaku-hub-ui/src/pages/[username]/[type].vue

@@ -400,7 +400,7 @@
 </template>
 
 <script setup>
-import { repoAPI } from "@/utils/api";
+import { repoAPI, orgAPI } from "@/utils/api";
 import dayjs from "dayjs";
 
 const route = useRoute();
@@ -448,6 +448,19 @@ function goToRepo(type, repo) {
   router.push(`/${type}s/${namespace}/${name}`);
 }
 
+async function checkIfOrganization() {
+  try {
+    // Check if this name is an organization
+    await orgAPI.get(username.value);
+    // If successful, it's an organization - redirect
+    router.replace(`/organizations/${username.value}/${currentType.value}`);
+    return true;
+  } catch (err) {
+    // Not an organization, continue as user
+    return false;
+  }
+}
+
 async function loadRepos() {
   try {
     const [models, datasets, spaces] = await Promise.all([
@@ -471,7 +484,12 @@ watch(currentType, () => {
   searchQuery.value = "";
 });
 
-onMounted(() => {
+onMounted(async () => {
+  // Check if this is actually an organization
+  const isOrg = await checkIfOrganization();
+  if (isOrg) return; // Already redirected
+
+  // Continue loading as user
   loadRepos();
 });
 </script>

src/kohaku-hub-ui/src/pages/[username]/index.vue

@@ -99,6 +99,13 @@
 
       <!-- Main Content -->
       <main class="space-y-8">
+        <!-- User Card (from Username/Username space repo if exists) -->
+        <section v-if="userCard" class="card">
+          <div class="markdown-body">
+            <MarkdownViewer :content="userCard" />
+          </div>
+        </section>
+
         <!-- Models Section -->
         <section class="mb-8">
           <div
@@ -359,7 +366,9 @@
 </template>
 
 <script setup>
-import { repoAPI } from "@/utils/api";
+import { repoAPI, orgAPI } from "@/utils/api";
+import MarkdownViewer from "@/components/common/MarkdownViewer.vue";
+import axios from "axios";
 import dayjs from "dayjs";
 
 const route = useRoute();
@@ -368,6 +377,7 @@ const username = computed(() => route.params.username);
 
 const userInfo = ref(null);
 const repos = ref({ model: [], dataset: [], space: [] });
+const userCard = ref("");
 
 const MAX_DISPLAYED = 6; // 2 per row × 3 rows
 
@@ -392,6 +402,19 @@ function goToRepo(type, repo) {
   router.push(`/${type}s/${namespace}/${name}`);
 }
 
+async function checkIfOrganization() {
+  try {
+    // Check if this name is an organization
+    await orgAPI.get(username.value);
+    // If successful, it's an organization - redirect
+    router.replace(`/organizations/${username.value}`);
+    return true;
+  } catch (err) {
+    // Not an organization, continue as user
+    return false;
+  }
+}
+
 async function loadRepos() {
   try {
     const [models, datasets, spaces] = await Promise.all([
@@ -410,7 +433,25 @@ async function loadRepos() {
   }
 }
 
-onMounted(() => {
+async function loadUserCard() {
+  try {
+    // Try to fetch README from Username/Username space repo
+    const url = `/spaces/${username.value}/${username.value}/resolve/main/README.md`;
+    const response = await axios.get(url);
+    userCard.value = response.data;
+  } catch (err) {
+    // No user card available - this is fine
+    userCard.value = "";
+  }
+}
+
+onMounted(async () => {
+  // Check if this is actually an organization
+  const isOrg = await checkIfOrganization();
+  if (isOrg) return; // Already redirected
+
+  // Continue loading as user
   loadRepos();
+  loadUserCard();
 });
 </script>

src/kohaku-hub-ui/src/pages/organizations/[orgname]/index.vue

@@ -139,7 +139,7 @@
 
       <!-- Main Content -->
       <main class="space-y-8">
-        <!-- Organization Card (from OrgName/OrgName dataset repo card if exists) -->
+        <!-- Organization Card (from OrgName/OrgName space repo card if exists) -->
         <section v-if="orgCard" class="card">
           <div class="markdown-body">
             <MarkdownViewer :content="orgCard" />

src/kohaku-hub-ui/src/pages/organizations/[orgname]/settings.vue

@@ -117,6 +117,7 @@
 </template>
 
 <script setup>
+import { useRoute, useRouter } from "vue-router";
 import { orgAPI } from "@/utils/api";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useAuthStore } from "@/stores/auth";

src/kohaku-hub-ui/src/pages/organizations/index.vue

@@ -102,6 +102,7 @@
 </template>
 
 <script setup>
+import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import { orgAPI, repoAPI, settingsAPI } from "@/utils/api";
 import { ElMessage } from "element-plus";

src/kohaku-hub-ui/src/pages/organizations/new.vue

@@ -97,6 +97,7 @@
 </template>
 
 <script setup>
+import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import { orgAPI } from "@/utils/api";
 import { ElMessage } from "element-plus";

src/kohaku-hub-ui/src/pages/settings.vue

@@ -139,6 +139,7 @@
 
 <script setup>
 import { useAuthStore } from "@/stores/auth";
+import { useRouter } from "vue-router";
 import { authAPI, settingsAPI } from "@/utils/api";
 import { ElMessage, ElMessageBox } from "element-plus";
 import dayjs from "dayjs";