From a4e939fe0bae7a0ec67cef69aa6c170da0b65d7c Mon Sep 17 00:00:00 2001
From: am9zZWY <46693545+am9zZWY@users.noreply.github.com>
Date: Wed, 10 Jul 2024 16:42:55 +0200
Subject: [PATCH] Rewrite search engine interface

---
 client/src/App.vue                  | 33 +++++++++++-----
 client/src/components/SearchBox.vue | 26 -------------
 client/src/router/index.ts          | 10 ++---
 client/src/stores/search.ts         |  9 +++--
 client/src/views/HomeView.vue       | 21 ----------
 client/src/views/Search.vue         | 59 +++++++++++++++++++++++++++++
 client/src/views/index.vue          | 17 ---------
 client/src/views/results.vue        | 34 -----------------
 8 files changed, 94 insertions(+), 115 deletions(-)
 delete mode 100644 client/src/components/SearchBox.vue
 delete mode 100644 client/src/views/HomeView.vue
 create mode 100644 client/src/views/Search.vue
 delete mode 100644 client/src/views/index.vue
 delete mode 100644 client/src/views/results.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index b5722db..f5300d3 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,15 +1,30 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-
-
 </script>
 
 <template>
-
-
-  <RouterView />
+  <header class="bg-white shadow-sm p-4">
+    <div class="flex justify-between items-center">
+      <ul class="flex justify-center space-x-4">
+        <li>
+          <router-link to="/" class="text-gray-600 hover:text-gray-800">Home</router-link>
+        </li>
+      </ul>
+      <ul class="flex justify-center space-x-4">
+        <li>
+          <button class="py-2 px-4 rounded-lg transition duration-300">
+            Bionic Reading
+          </button>
+        </li>
+        <li>
+          <button class="py-2 px-4 rounded-lg transition duration-300">
+            Speed Reading
+          </button>
+        </li>
+      </ul>
+    </div>
+  </header>
+  <main class="min-h-screen bg-gray-50 flex items-center justify-center">
+    <RouterView />
+  </main>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/client/src/components/SearchBox.vue b/client/src/components/SearchBox.vue
deleted file mode 100644
index cf0d73a..0000000
--- a/client/src/components/SearchBox.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <input v-model="message" @keydown.enter="searchEnter" />
-    <div v-if="suggestionResults.length > 0">
-      <div v-for="result in suggestionResults" :key="result">
-        <div>{{ result }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useSearchStore } from '@/stores/search'
-
-const message = ref('')
-const suggestionResults = ref<string[]>([
-  'Apple',
-  'Banana',
-  'Cherry'
-])
-const searchStore = useSearchStore()
-const searchEnter = () => {
-  searchStore.search(message.value)
-}
-</script>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index e58491f..751ae1b 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,13 +1,13 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Search from '../views/Search.vue'
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView
+      name: 'search',
+      component: Search
     }
   ]
 })
diff --git a/client/src/stores/search.ts b/client/src/stores/search.ts
index d8424ee..7f26a4e 100644
--- a/client/src/stores/search.ts
+++ b/client/src/stores/search.ts
@@ -6,18 +6,21 @@ export interface SearchResult {
   title: string
   url: string
   description: string
+  summary: string
 }
 
 const dummyResults: SearchResult[] = [
   {
     title: 'Dummy result',
     url: 'https://example.com',
-    description: 'This is a dummy result'
+    description: 'This is a dummy result',
+    summary: 'This is a dummy summary'
   },
   {
     title: 'Another dummy result',
-    url: 'https://example.com',
-    description: 'This is another dummy result'
+    url: 'https://uni-tuebingen.de/en',
+    description: 'This is another dummy result',
+    summary: 'This is another dummy summary'
   }
 ]
 
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
deleted file mode 100644
index a8d5173..0000000
--- a/client/src/views/HomeView.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import SearchBox from '@/components/SearchBox.vue'
-import { storeToRefs } from 'pinia'
-import { useSearchStore } from '@/stores/search'
-
-const searchStore = useSearchStore()
-const { results } = storeToRefs(searchStore)
-</script>
-
-<template>
-  <main>
-    <SearchBox />
-
-    <div>
-      <div v-for="(result, resultIndex) in results" :key="resultIndex">
-        <a>{{ result.title }}</a>
-        <div>{{ result.description }}</div>
-      </div>
-    </div>
-  </main>
-</template>
diff --git a/client/src/views/Search.vue b/client/src/views/Search.vue
new file mode 100644
index 0000000..d655e10
--- /dev/null
+++ b/client/src/views/Search.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-6xl">
+      <div class="flex items-center border-b border-pastel-green py-2 mb-6">
+        <input
+          class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none focus:ring-0 placeholder-gray-400"
+          type="text"
+          placeholder="Search..."
+          aria-label="Search"
+          v-model="query"
+          @keyup.enter="search"
+        />
+        <button
+          class="flex-shrink-0 bg-red-200 hover:bg-red-400 text-sm border-none text-white py-2 px-4 rounded-2xl transition duration-300"
+          type="button"
+          @click="search"
+        >
+          Search
+        </button>
+      </div>
+      <div v-if="loading" class="text-center text-gray-600">
+        Loading...
+      </div>
+      <div v-else>
+        <ul>
+          <li v-for="result in results" :key="result.id"
+              class="mb-4 p-4 border rounded-lg shadow-sm bg-white hover:shadow-md transition-shadow duration-300">
+            <a :href="result.url" class="text-blue-400 hover:text-blue-500 font-medium text-lg">{{ result.title }}</a>
+            <p class="text-gray-600 mt-2">{{ result.description }}</p>
+            <p>
+              {{ result.summary }}
+            </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import { useSearchStore } from '@/stores/search'
+
+const searchStore = useSearchStore()
+const { results } = storeToRefs(searchStore)
+
+const loading = false
+
+const query = ref('')
+const suggestionResults = ref<string[]>([
+  'Apple',
+  'Banana',
+  'Cherry'
+])
+const search = () => {
+  searchStore.search(query.value)
+}
+</script>
diff --git a/client/src/views/index.vue b/client/src/views/index.vue
deleted file mode 100644
index 4885919..0000000
--- a/client/src/views/index.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-    <div class="w-max m-auto">
-        <div class="min-h-80" />
-
-        <h1 class="text-4xl font-bold text-center">
-            <Logo>
-                <span> Search</span>
-            </Logo>
-        </h1>
-        <SearchBox/>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import SearchBox from "~/components/SearchBox.vue";
-import Logo from "~/components/Logo.vue";
-</script>
diff --git a/client/src/views/results.vue b/client/src/views/results.vue
deleted file mode 100644
index a06cb9b..0000000
--- a/client/src/views/results.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-    <div class="flex flex-col items-start space-y-4 p-4">
-        <template v-for="result in results">
-            <div class="w-full max-w-2xl p-4 bg-white shadow-sm rounded-lg transition duration-200 ease-in-out">
-                <!-- Title -->
-                <h2 class="text-xl font-bold hover:underline cursor-pointer">{{ result.title }}</h2>
-                <!-- URL -->
-                <a :href="result.url" class="text-sm text-gray-500 hover:text-gray-700">{{ result.url }}</a>
-
-                <!-- Categories -->
-                <div class="mt-2 flex flex-wrap space-x-2">
-                    <span v-for="category in result.categories"
-                          class="bg-blue-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded-full">{{
-                            category
-                        }}</span>
-                </div>
-
-                <!-- Meta Description -->
-                <p class="mt-2 text-gray-700">{{ result.description }}</p>
-            </div>
-        </template>
-    </div>
-</template>
-
-<script setup lang="ts">
-const result = {
-    id: 1,
-    title: 'Result 1',
-    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus. Donec ut nunc. Nulla facilisi. Nullam auctor, felis nec tempus.',
-    url: 'https://example.com',
-    categories: ['Category 1', 'Category 2']
-}
-const results = ref([result, result, result])
-</script>