created Homeview

Author: LeonFrasch

frontend/src/components/templates/MainLayout.vue

@@ -52,18 +52,18 @@ const projectLinks = computed<Project[]>(() =>
     })),
 )
 
-const showNewQuery = computed(() => route.name !== 'search')
+const showNewQuery = computed(() => route.name !== 'search' && route.name !== 'home')
 
 // ----- handlers -----
 
 const toggleSidebar = () => {
   sidebarOpen.value = !sidebarOpen.value
 }
 
-const goToSearch = () => router.push({ name: 'search' })
+const goToHome = () => router.push({ name: 'home' })
 
 const handleNewQuery = () => {
-  goToSearch()
+  goToHome()
   sidebarOpen.value = false
 }
 
@@ -88,7 +88,7 @@ const handleDeleteProject = async (projectId: number) => {
   await projectsStore.deleteExistingProject(projectId)
 
   if (route.name === 'project' && Number(route.params.projectId) === projectId) {
-    await goToSearch()
+    await goToHome()
     sidebarOpen.value = true
   }
 }

frontend/src/pages/HomePage.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import SearchInputSection from '@/components/organisms/search/SearchInputSection.vue';
+
+const router = useRouter();
+
+const handleSearch = (payload: { query: string; file: File | null } | string) => {
+  const query = typeof payload === 'string' ? payload : payload.query;
+  const file = typeof payload !== 'string' && payload.file ? payload.file : null;
+
+  // Navigate to the search route.
+  // We pass strings via query params, and Files via history state
+  router.push({
+    name: 'search',
+    query: { q: query },
+    state: { file: file } // Pass the file object invisibly via History API
+  });
+};
+</script>
+
+<template>
+  <div class="home-page">
+    <SearchInputSection @submit="handleSearch" />
+  </div>
+</template>
+
+<style scoped>
+.home-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 8px;
+  /* Center vertically like the original start screen often does */
+  min-height: 60vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

frontend/src/pages/SearchPage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import {
   VAlert,
   VBtn,
@@ -13,9 +14,7 @@ import {
   VSpacer,
 } from 'vuetify/components';
 
-import SearchInputSection from '@/components/organisms/search/SearchInputSection.vue';
 import SearchResultsSection from '@/components/organisms/search/SearchResultsSection.vue';
-
 import PdfViewerDialog from '@/components/organisms/pdf/PdfViewerDialog.vue';
 import type { Paper } from '@/types/content';
 
@@ -24,67 +23,75 @@ import { useAuthStore } from '@/stores/auth';
 import { useProjectsStore } from '@/stores/projects';
 import { mapSearchResponseToPapers } from '@/mappers/paper-mapper';
 
+const route = useRoute();
+const router = useRouter();
 const authStore = useAuthStore();
 const projectsStore = useProjectsStore();
 
-// State to track the active search context
-const hasActiveSearch = ref(false);
+// ----- state -----
 const currentQueryText = ref('');
 const currentFile = ref<File | null>(null);
 
 const outputs = ref<Paper[]>([]);
 const isLoading = ref(false);
 const errorMessage = ref<string | null>(null);
 
-// add-to-project dialog state
+// Dialog states
 const addToProjectDialogOpen = ref(false);
 const paperToAdd = ref<Paper | null>(null);
 const selectedProjectIdForAdd = ref<number | null>(null);
-
 const pdfViewerOpen = ref(false);
 const pdfPaperId = ref<number | null>(null);
 const pdfPaperTitle = ref('');
 
-// derived state
+// ----- derived state -----
 const isAuthenticated = computed(() => authStore.isAuthenticated);
 const projects = computed(() => projectsStore.projects);
 const projectOptions = computed(() => projectsStore.projects);
 
-onMounted(() => {
+// ----- lifecycle -----
+
+onMounted(async () => {
   if (isAuthenticated.value) {
     projectsStore.loadProjects();
   }
+  // Trigger search immediately based on URL or State
+  await initializeSearch();
 });
 
-// ----- search flow -----
-type SearchPayload = { query: string; file: File | null };
-
-function isSearchPayload(payload: unknown): payload is SearchPayload {
-  return (
-    !!payload && typeof payload === 'object' &&
-      'query' in payload &&
-      typeof (payload as any).query === 'string' &&
-      'file' in payload &&
-    (((payload as any).file === null) || (payload as any).file instanceof File)
-  );
-}
+// Watch for URL changes (e.g., user searches for something new inside the results page)
+watch(() => route.query.q, async (newQuery) => {
+  if (newQuery !== currentQueryText.value) {
+    await initializeSearch();
+  }
+});
 
-const handleSubmitQuery = async (payload: { query: string; file: File | null } | string) => {
-  const query = typeof payload === 'string' ? payload : payload.query;
-  const file = isSearchPayload(payload) ? payload.file : null;
+// ----- search logic -----
+
+const initializeSearch = async () => {
+  // 1. Check history state for a File (passed from Home)
+  const stateFile = history.state?.file as File | undefined;
+  // 2. Check URL query for text
+  const queryParam = route.query.q?.toString() || '';
+
+  // If we have neither, usually we redirect to home, but let's just stay empty or load default
+  if (!queryParam && !stateFile) {
+    return;
+  }
+
+  await performSearch(queryParam, stateFile || null);
+};
 
-  // Update state
-  currentQueryText.value = query || '';
-  currentFile.value = file || null;
-  hasActiveSearch.value = true;
+const performSearch = async (query: string, file: File | null) => {
+  currentQueryText.value = query;
+  currentFile.value = file;
 
   outputs.value = [];
   errorMessage.value = null;
   isLoading.value = true;
 
   try {
     let response;
-
     if (file) {
       response = await searchPapersByPdf(file, query || undefined);
     } else {
@@ -99,13 +106,24 @@ const handleSubmitQuery = async (payload: { query: string; file: File | null } |
   }
 };
 
-// ----- add-from-search flow -----
+// Handle new search from within the Results Page
+const handleUpdateQuery = (payload: { query: string; file: File | null } | string) => {
+  const query = typeof payload === 'string' ? payload : payload.query;
+  const file = typeof payload !== 'string' && payload.file ? payload.file : null;
 
-const handleAddFromSearch = (paper: Paper) => {
-  if (!isAuthenticated.value || !projects.value.length) {
-    return;
+  // Update URL. This will trigger the `watch` above if only text changes.
+  // If file changes, we might need to manually trigger because URL might not change.
+  router.push({ query: { q: query }, state: { file: file } });
+
+  // If there is a file, the URL watch might not catch it (if query string is same),
+  // so we force execution if a file is present.
+  if (file) {
+    performSearch(query, file);
   }
+};
 
+const handleAddFromSearch = (paper: Paper) => {
+  if (!isAuthenticated.value || !projects.value.length) return;
   paperToAdd.value = paper;
   selectedProjectIdForAdd.value = projects.value[0]?.project_id ?? null;
   addToProjectDialogOpen.value = true;
@@ -116,12 +134,7 @@ const confirmAddToProject = async () => {
     addToProjectDialogOpen.value = false;
     return;
   }
-
-  await projectsStore.addPaper(
-      selectedProjectIdForAdd.value,
-      paperToAdd.value.paper_id
-  );
-
+  await projectsStore.addPaper(selectedProjectIdForAdd.value, paperToAdd.value.paper_id);
   addToProjectDialogOpen.value = false;
   paperToAdd.value = null;
 };
@@ -143,21 +156,16 @@ const handleViewPaper = (paper: Paper) => {
       {{ errorMessage }}
     </v-alert>
 
-    <div v-if="!hasActiveSearch">
-      <SearchInputSection @submit="handleSubmitQuery" />
-    </div>
-    <div v-else>
-      <SearchResultsSection
-          :query="currentQueryText"
-          :file="currentFile"
-          :outputs="outputs"
-          :show-abstract="true"
-          :show-add="isAuthenticated"
-          @add="handleAddFromSearch"
-          @view="handleViewPaper"
-          @update-query="handleSubmitQuery"
-      />
-    </div>
+    <SearchResultsSection
+        :query="currentQueryText"
+        :file="currentFile"
+        :outputs="outputs"
+        :show-abstract="true"
+        :show-add="isAuthenticated"
+        @add="handleAddFromSearch"
+        @view="handleViewPaper"
+        @update-query="handleUpdateQuery"
+    />
 
     <v-dialog v-model="addToProjectDialogOpen" max-width="500">
       <v-card>

frontend/src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
+import HomePage from '@/pages/HomePage.vue';
 import SearchPage from '@/pages/SearchPage.vue';
 import ProjectPage from '@/pages/ProjectPage.vue';
 
@@ -7,7 +8,12 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      redirect: '/search',
+      redirect: '/home',
+    },
+    {
+      path: '/home',
+      name: 'home',
+      component: HomePage,
     },
     {
       path: '/search',
@@ -23,4 +29,4 @@ const router = createRouter({
   ],
 });
 
-export default router;
+export default router;