feat: big UI improvements

Author: lmiller1990

app.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { createWebSocket } from "~/composables/createWebSocket";
+import { useMagicKeys, whenever } from "@vueuse/core";
 import { emitter } from "~/src/emitter";
 
 const { data: threads, refresh } = useFetch("/api/threads");
@@ -68,11 +69,27 @@ async function handleNewExam() {
 }
 
 const { signIn, getSession, data } = useAuth();
+
+const { ctrl, n } = useMagicKeys();
+
+watchEffect(() => {
+  if (ctrl.value && n.value) {
+    handleNewThread();
+  }
+});
 </script>
 
 <template>
   <UContainer class="pt-4">
-    <div class="flex justify-end w-full font-mono mb-4">StudyMATE.ai</div>
+    <div class="flex justify-end items-center w-full mb-4">
+      <NuxtLink
+        class="font-mono mr-4"
+        to="/"
+      >
+        StudyHQ.ai
+      </NuxtLink>
+      <SettingsMenu />
+    </div>
 
     <div class="flex h-full">
       <div class="w-72">
@@ -87,7 +104,16 @@ const { signIn, getSession, data } = useAuth();
             New Chat</UButton
           >
         </div>
-        <UVerticalNavigation :links="links" />
+        <UVerticalNavigation
+          class="max-h-[400px] overflow-scroll"
+          :links="links"
+        />
+        <div
+          v-if="!links.length"
+          class="flex justify-center"
+        >
+          <p class="text-sm text-gray-500">No chats.</p>
+        </div>
 
         <UDivider class="my-4" />
 
@@ -99,11 +125,22 @@ const { signIn, getSession, data } = useAuth();
             >New Exam</UButton
           >
         </div>
-        <UVerticalNavigation :links="examLinks" />
+        <UVerticalNavigation
+          class="max-h-[338px] overflow-scroll"
+          :links="examLinks"
+        />
+        <div
+          v-if="!examLinks.length"
+          class="flex justify-center"
+        >
+          <p class="text-sm text-gray-500">No exams.</p>
+        </div>
       </div>
 
       <div class="w-full h-full mb-4">
-        <NuxtPage />
+        <UContainer>
+          <NuxtPage />
+        </UContainer>
       </div>
     </div>
   </UContainer>

blah.js

@@ -0,0 +1,30 @@
+const text = `
+Question 1 (2 marks)
+
+blah
+
+Question 2 (marks)
+
+asdf
+
+Question 3
+
+heheheh
+`;
+
+// Regular expression to match each question block
+const pattern = /Question \d+.*?(?=(Question \d+|$))/gs;
+
+// Use match to find all relevant parts
+const chunks = text.match(pattern);
+
+// Check the output
+if (chunks) {
+  chunks.forEach((chunk, index) => {
+    // console.log(`----\nChunk ${index + 1}:\n${chunk}`);
+    console.log(chunk);
+    console.log("=============");
+  });
+} else {
+  console.log("No matches found.");
+}

components/SettingsMenu.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const { signOut, data, signIn } = useAuth();
+
+const { loading: signingOut, run: handleSignOut } = useLoading(signOut);
+
+const items = computed(() => {
+  if (data.value) {
+    return [
+      [
+        {
+          label: "Sign Out",
+          click: handleSignOut,
+          disabled: signingOut.value,
+        },
+      ],
+    ];
+  }
+
+  return [
+    [
+      {
+        label: "Sign up to start studying!",
+        click: () => signIn("google"),
+      },
+    ],
+  ];
+});
+</script>
+
+<template>
+  <UDropdown
+    :items="items"
+    :popper="{ placement: 'bottom-start' }"
+  >
+    <UButton
+      color="white"
+      trailing-icon="i-heroicons-bars-3"
+    />
+  </UDropdown>
+</template>

logic/__tests__/exams.spec.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { splitExamIntoQuestions } from "../exams";
+
+describe("splitExamIntoQuestions", () => {
+  it("splits into separate questions", () => {
+    const questions =
+      splitExamIntoQuestions(`Question 1 (3 marks) Write a Python function.
+      
+      Question 2 (4 marks) Explain how a for loop works in Python.
+
+      Question 3 (2 marks) What is the difference between a list and a tuple in Python?`);
+
+    expect(questions).toMatchInlineSnapshot(`
+      [
+        "Question 1 (3 marks) Write a Python function.",
+        "Question 2 (4 marks) Explain how a for loop works in Python.",
+        "Question 3 (2 marks) What is the difference between a list and a tuple in Python?",
+      ]
+    `);
+  });
+});

logic/exams.ts

@@ -0,0 +1,23 @@
+/**
+ * Exam has n questions, formatted like:
+ *
+ * Question 1 (X marks) ...
+ *
+ * Question 2 (X marks) ...
+ *
+ * Split into questions.
+ */
+export function splitExamIntoQuestions(exam: string) {
+  // Regular expression to match each question block
+  const pattern = /Question \d+.*?(?=(Question \d+|$))/gs;
+
+  // Use match to find all relevant parts
+  const split = exam.match(pattern);
+  console.log("Splitting", split);
+
+  if (!split) {
+    throw new Error("No questions were found or unexpected format!");
+  }
+
+  return Array.from(split).map((x) => x.trim());
+}