get inline suggestions to display

app/Shell.tsx

@@ -1,27 +1,59 @@
 import React from "react";
-import { AppShell, Container } from "@mantine/core";
+import { AppShell, Container, Text } from "@mantine/core";
 import Comind from "@/lib/comind";
 import Link from "next/link";
+import ComindShort from "@/lib/ComindShort";
+import { comindContainerWidth } from "@/lib/Configuration";
 
 const Shell = ({ children }: { children: React.ReactNode }) => {
   return (
-    <AppShell padding="md" header={{ height: 30 }}>
+    <AppShell padding="md" header={{ height: 100 }}>
       <AppShell.Header>
-        <Container size="sm">
+        <Container size={comindContainerWidth}>
           <div
             style={{
               display: "flex",
               alignContent: "center",
               alignItems: "center",
               height: "100%",
+              width: "100%",
+              justifyContent: "space-between",
             }}
           >
-            <Comind /> - <Link href="/thoughts">thoughts</Link> -{" "}
-            <Link href="/melds">melds</Link>
+            {/* Left box */}
+            <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+              <Text size="xl">
+                <Link href="/">home</Link>
+              </Text>
+              <Text size="xl">
+                <Link href="/thoughts">thoughts</Link>
+              </Text>
+            </div>
+
+            {/* Logo */}
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                fontSize: "4rem",
+              }}
+            >
+              <ComindShort />
+              {/* <Comind /> */}
+            </div>
+
+            {/* Right box */}
+            <div>
+              <Text size="xl">
+                <Link href="/melds">melds</Link>
+              </Text>
+            </div>
           </div>
         </Container>
       </AppShell.Header>
-      <AppShell.Main>{children}</AppShell.Main>
+      <AppShell.Main>
+        <Container size={comindContainerWidth}>{children}</Container>
+      </AppShell.Main>
     </AppShell>
   );
 };

app/globals.css

@@ -21,8 +21,7 @@ body {
 a {
   color: rgb(var(--comind-foreground-rgb));
   text-decoration: underline;
-  /* text-decoration-thickness: 1px; */
-  text-underline-offset: 2px;
+  text-underline-offset: 0.1em;
 }
 
 a:hover {
@@ -54,3 +53,26 @@ p, h1, h2, h3, h4, h5, h6 {
 .comind-tertiary {
   color: rgb(var(--comind-tertiary-rgb));
 }
+
+.comind-logo-co {
+  /* font-family: "Bungee"; */
+  /* color: rgb(var(--comind-primary-rgb)); */
+  /* position: relative; */
+  /* text-decoration: underline; */
+  /* text-decoration-color: rgb(var(--comind-primary-rgb)); */
+}
+
+.comind-logo-mi {
+  /* font-family: "Bungee"; */
+  /* color: rgb(var(--comind-secondary-rgb)); */
+  /* text-decoration: underline; */
+  /* text-decoration-color: rgb(var(--comind-secondary-rgb)); */
+}
+
+.comind-logo-nd {
+  /* font-family: "Bungee"; */
+  /* color: rgb(var(--comind-tertiary-rgb)); */
+  /* text-decoration: underline; */
+  /* text-decoration-color: rgb(var(--comind-tertiary-rgb)); */
+}
+

app/login/page.tsx

@@ -10,18 +10,20 @@ import Shell from "../Shell";
 const LoginPage: React.FC = () => {
   const { token, login } = useContext(AuthContext);
 
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
+  const [username, setUsername] = useState("test");
+  const [password, setPassword] = useState("test");
 
   // If we're already logged in, then
   // redirect to the home page.
   if (token) {
+    console.log("Already logged in. Redirecting to home page.");
     redirect("/");
   }
 
   // Check if we're in debug mode. If so, fill in the username and
   // password fields with some default values and log in automatically.
   if (process.env.COMIND_DEBUG === "true") {
+    console.log("In debug mode. Logging in directly.");
     login(username, password);
   }
 
@@ -47,36 +49,36 @@ const LoginPage: React.FC = () => {
   return (
     <Shell>
       <Container size="sm">
-        <main className="">
-          <div suppressHydrationWarning>
-            <div className="instruction">
-              wanna log in to <Comind />?
-            </div>
-            <Space h="md" />
-            <Input
-              size="lg"
-              onChange={handleUsernameChange}
-              placeholder="username"
-            />
-            <Space h="md" />
-            <Input
-              size="lg"
-              type="password"
-              placeholder="password"
-              value={password}
-              onChange={handlePasswordChange}
-            />
-            <Space h="md" />
-            <ButtonGroup>
-              <Button onClick={handleLoginClick} variant="default">
-                Login
-              </Button>
-              {/* <Button onClick={handleLoginClick} variant="ghost">
-                Sign up
-              </Button> */}
-            </ButtonGroup>
+        <form onSubmit={handleLoginClick}>
+          <div className="instruction">
+            wanna log in to <Comind />?
           </div>
-        </main>
+          <Space h="md" />
+          <Input
+            size="lg"
+            onChange={handleUsernameChange}
+            placeholder="username"
+            autoComplete="username"
+          />
+          <Space h="md" />
+          <Input
+            size="lg"
+            type="password"
+            placeholder="password"
+            value={password}
+            onChange={handlePasswordChange}
+            autoComplete="current-password"
+          />
+          <Space h="md" />
+          <ButtonGroup>
+            <Button type="submit" variant="default">
+              Login
+            </Button>
+            {/* <Button onClick={handleLoginClick} variant="ghost">
+                  Sign up
+                </Button> */}
+          </ButtonGroup>
+        </form>
       </Container>
     </Shell>
   );

app/page.tsx

@@ -6,6 +6,8 @@ import { redirect } from "next/navigation";
 import Comind from "@/lib/comind";
 import { Center, Container, Space, Text, Title } from "@mantine/core";
 import { ThoughtProvider } from "@/lib/thoughtprovider";
+import ComindShort from "@/lib/ComindShort";
+import Link from "next/link";
 
 // Main entry point for the application
 export default function App() {
@@ -24,20 +26,31 @@ export default function App() {
           alignItems: "center",
         }}
       >
-        <div style={{ fontSize: "10vmin" }}>
-          <Comind /> is thinking
+        <div style={{ fontSize: "20vmin" }}>
+          {/* <ComindShort /> */}
+          <Comind />
+        </div>
+
+        <div style={{ fontSize: "5vmin" }}>
+          is thinking
           {/* <Comind /> */}
         </div>
 
-        <div style={{ fontSize: "5vmin" }}>we promise</div>
+        {!token && (
+          <div style={{ fontSize: "5vmin" }}>
+            do you want to <Link href="/login">login</Link>?
+          </div>
+        )}
+
+        {/* <div style={{ fontSize: "5vmin" }}>we promise</div> */}
       </div>
     );
   }
 
   // If we aren't logged in, redirect to the login page
-  if (!token) {
-    return redirect("/login");
-  }
+  // if (!token) {
+  //   return redirect("/login");
+  // }
 
   // If we are logged in, show the main page
 

lib/ComindShort.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+import React from "react";
+
+const ComindShort: React.FC = () => {
+  return (
+    <span>
+      {/* <Link href="/" className="comind-logo"> */}
+      {/* comind */}
+      {/* <span className="comind-logo-nd">{"{"}</span> */}
+      <span className="comind-logo-co">c</span>
+      <span className="comind-logo-mi">o</span>
+      {/* <span className="comind-logo-nd">nd</span> */}
+      {/* <span className="comind-logo-nd">{"}"}</span> */}
+      {/* </Link> */}
+    </span>
+  );
+};
+
+export default ComindShort;

lib/Configuration.tsx

@@ -0,0 +1,3 @@
+const comindContainerWidth = "lg";
+
+export { comindContainerWidth };

lib/MeldView.tsx

@@ -5,7 +5,7 @@ import { AuthContext } from "@/lib/authprovider";
 import { Thought } from "@/lib/types/thoughts";
 import { ThoughtContext } from "@/lib/thoughtprovider";
 import Nav from "../app/nav";
-import ThoughtList, { SuggestionList } from "@/lib/display/thought_display";
+import ThoughtList from "@/lib/display/thought_display";
 
 import { EditorContent } from "@tiptap/react";
 import Comind from "@/lib/comind";
@@ -30,6 +30,7 @@ import Link from "next/link";
 import { useTheme } from "next-themes";
 import ThoughtBoxEditor from "@/lib/ThoughtBoxEditor";
 import Shell from "../app/Shell";
+import { comindContainerWidth } from "./Configuration";
 
 const ThemeChanger = () => {
   const { theme, setTheme } = useTheme();
@@ -45,7 +46,7 @@ const ThemeChanger = () => {
 
 const MeldView = () => {
   const auth = useContext(AuthContext);
-  const { addThoughtToProvider, thoughts, suggestions } =
+  const { addThoughtToProvider, getCurrentThoughts, getCurrentSuggestions } =
     useContext(ThoughtContext);
   const [editorValue, setEditorValue] = useState("");
   const editor = ThoughtBoxEditor({ onUpdate: setEditorValue });
@@ -61,6 +62,7 @@ const MeldView = () => {
       // the editor value is not empty.
       let trimmedEditorValue = editorValue.trim();
       if (trimmedEditorValue.length == 0) {
+        console.log("Editor value is empty, not sending thought");
         return;
       }
 
@@ -101,7 +103,7 @@ const MeldView = () => {
           paddingBottom: "32px",
         }}
       >
-        <Container size={"sm"}>
+        <Container size={comindContainerWidth}>
           <ThoughtBox editor={editor} />
         </Container>
       </div>
@@ -117,13 +119,16 @@ const MeldView = () => {
             >
               submit
             </Button> */}
-      <Container size="sm">
-        <ThoughtList thoughts={thoughts} />
+      <Container size={comindContainerWidth}>
+        <ThoughtList
+          thoughts={getCurrentThoughts()}
+          suggestions={getCurrentSuggestions()}
+        />
       </Container>
 
-      <Container size="sm">
-        <SuggestionList thoughts={suggestions} />
-      </Container>
+      {/* <Container size="sm">
+        <SuggestionList thoughts={getCurrentSuggestions()} />
+      </Container> */}
 
       <Space h="xl" />
     </Shell>