From 8a8a69b08282a805d9c26b6dcf8abc094de771b8 Mon Sep 17 00:00:00 2001
From: Amy Dang <kirontoo@gmail.com>
Date: Thu, 5 Oct 2023 14:15:39 -0700
Subject: [PATCH 1/6] add a window title bar #23

---
 src/components/WindowTitleBar.tsx | 25 +++++++++++++
 src/pages/Homepage.tsx            | 62 ++++++++++++++++---------------
 2 files changed, 58 insertions(+), 29 deletions(-)
 create mode 100644 src/components/WindowTitleBar.tsx

diff --git a/src/components/WindowTitleBar.tsx b/src/components/WindowTitleBar.tsx
new file mode 100644
index 0000000..71fd905
--- /dev/null
+++ b/src/components/WindowTitleBar.tsx
@@ -0,0 +1,25 @@
+import { username, hostname, path } from "../../constants";
+
+const WindowTitleBar = (props: { customUserName: string }) => {
+  return (
+    <div className="flex flex-row bg-stone-600 w-screen px-2 text-stone-700 gap-4 py-1 items-center">
+      <span className="flex flex-row gap-2">
+        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-orange-700 h-5 w-5 ">
+          &#120;
+        </div>
+        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5 ">
+          &#45;
+        </div>
+        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5 ">
+          &#9633;
+        </div>
+      </span>
+      <span className="text-white">
+        {props.customUserName == "" ? username : props.customUserName}@
+        {hostname}:{path}
+      </span>
+    </div>
+  );
+};
+
+export default WindowTitleBar;
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index cd5d9a7..1852cbe 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -5,6 +5,7 @@ import info from "../../data.json";
 const options = info.options.map((option) => option.label);
 import { Queue } from "queue-typescript";
 import PromptBar from "../components/PromptBar";
+import WindowTitleBar from "../components/WindowTitleBar";
 
 const historyCommand = new Queue<string>();
 let count = 1;
@@ -185,36 +186,39 @@ function Homepage() {
   }, []);
 
   return (
-    <div className="font-bold text-xl p-2">
-      {
-        /* History */
-        history.map((history) => (
-          <div className=" mb-2">
-            <PromptBar customUserName={customUserName} />
-            <span>{history.command}</span> <br />
-            <span dangerouslySetInnerHTML={{ __html: history.output }} />
-          </div>
-        ))
-      }
-      {/* Prompt */}
-      <div className="flex flex-col sm:flex-row">
-        <PromptBar customUserName={customUserName} />
-        <span>
-          <form onSubmit={handleSubmit} className="mt-2 sm:mt-0">
-            <input
-              type="text"
-              className="w-[350px] bg-transparent outline-none"
-              autoFocus
-              value={userInput}
-              onChange={handleInputChange}
-              onKeyDown={handleArrowKeyPress}
-              ref={inputRef}
-              autoComplete="off"
-            />
-          </form>
-        </span>
+    <>
+      <WindowTitleBar customUserName={customUserName} />
+      <div className="font-bold text-xl p-2">
+        {
+          /* History */
+          history.map((history) => (
+            <div className=" mb-2">
+              <PromptBar customUserName={customUserName} />
+              <span>{history.command}</span> <br />
+              <span dangerouslySetInnerHTML={{ __html: history.output }} />
+            </div>
+          ))
+        }
+        {/* Prompt */}
+        <div className="flex flex-col sm:flex-row">
+          <PromptBar customUserName={customUserName} />
+          <span>
+            <form onSubmit={handleSubmit} className="mt-2 sm:mt-0">
+              <input
+                type="text"
+                className="w-[350px] bg-transparent outline-none"
+                autoFocus
+                value={userInput}
+                onChange={handleInputChange}
+                onKeyDown={handleArrowKeyPress}
+                ref={inputRef}
+                autoComplete="off"
+              />
+            </form>
+          </span>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 

From c6d86e9886c84a52274b9f3272108b88b6fc3c7d Mon Sep 17 00:00:00 2001
From: Amy Dang <kirontoo@gmail.com>
Date: Thu, 5 Oct 2023 14:16:53 -0700
Subject: [PATCH 2/6] remove whitespace

---
 src/components/WindowTitleBar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/WindowTitleBar.tsx b/src/components/WindowTitleBar.tsx
index 71fd905..0e14809 100644
--- a/src/components/WindowTitleBar.tsx
+++ b/src/components/WindowTitleBar.tsx
@@ -4,13 +4,13 @@ const WindowTitleBar = (props: { customUserName: string }) => {
   return (
     <div className="flex flex-row bg-stone-600 w-screen px-2 text-stone-700 gap-4 py-1 items-center">
       <span className="flex flex-row gap-2">
-        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-orange-700 h-5 w-5 ">
+        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-orange-700 h-5 w-5">
           &#120;
         </div>
-        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5 ">
+        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5">
           &#45;
         </div>
-        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5 ">
+        <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5">
           &#9633;
         </div>
       </span>

From 069efe57a13ca7ae33e190f027e7fb270144b842 Mon Sep 17 00:00:00 2001
From: Amy Dang <kirontoo@gmail.com>
Date: Fri, 6 Oct 2023 13:47:05 -0700
Subject: [PATCH 3/6] add window title bar to Profile page

---
 src/pages/Profile.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index a0c8618..db7ea59 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -3,6 +3,7 @@ import { getData, setUsername } from "../api";
 import { useEffect, useRef, useState } from "react";
 import PromptBar from "../components/PromptBar";
 import commands from "../commands.json";
+import WindowTitleBar from "../components/WindowTitleBar";
 
 interface State {
   history: {
@@ -260,6 +261,7 @@ function Profile() {
   }, []);
   return (
     <div>
+      <WindowTitleBar customeUsername={state.customUserName} />
       {state.showWelcomeMessage && (
         <p className="font-bold p-2">
           Type 'help' to view all available commands

From f13af5683b573f859c39323dfbcb1b885fe5aca6 Mon Sep 17 00:00:00 2001
From: Amy Dang <kirontoo@gmail.com>
Date: Fri, 6 Oct 2023 13:57:37 -0700
Subject: [PATCH 4/6] fix: prop name typo 'customUserName'

---
 src/pages/Profile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 8ebd429..8c9a882 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -390,7 +390,7 @@ function Profile() {
   }, []);
   return (
     <div className={`${currentTheme} min-h-[100vh] w-[100vw] bg-bgcol`}>
-      <WindowTitleBar customeUsername={state.customUserName} />
+      <WindowTitleBar customUserName={state.customUserName} />
       {state.showWelcomeMessage && (
         <p className="font-bold p-2">
           Type 'help' to view all available commands

From c5f7cacc6833f85a7ba665ed3a7600f6fbadd7ce Mon Sep 17 00:00:00 2001
From: Amy Dang <kirontoo@gmail.com>
Date: Fri, 6 Oct 2023 14:06:49 -0700
Subject: [PATCH 5/6] center x symbole #23

---
 src/components/WindowTitleBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WindowTitleBar.tsx b/src/components/WindowTitleBar.tsx
index 0e14809..1e0841a 100644
--- a/src/components/WindowTitleBar.tsx
+++ b/src/components/WindowTitleBar.tsx
@@ -5,7 +5,7 @@ const WindowTitleBar = (props: { customUserName: string }) => {
     <div className="flex flex-row bg-stone-600 w-screen px-2 text-stone-700 gap-4 py-1 items-center">
       <span className="flex flex-row gap-2">
         <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-orange-700 h-5 w-5">
-          &#120;
+          &times;
         </div>
         <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5">
           &#45;

From 389c653d057f70b0683190eeda0473fbfff296a1 Mon Sep 17 00:00:00 2001
From: Amy Dang <kirontoo@gmail.com>
Date: Tue, 24 Oct 2023 14:05:17 -0700
Subject: [PATCH 6/6] use icons instead of HTML unicode

---
 src/components/WindowTitleBar.tsx | 45 ++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/WindowTitleBar.tsx b/src/components/WindowTitleBar.tsx
index 1e0841a..fc21c7f 100644
--- a/src/components/WindowTitleBar.tsx
+++ b/src/components/WindowTitleBar.tsx
@@ -5,13 +5,52 @@ const WindowTitleBar = (props: { customUserName: string }) => {
     <div className="flex flex-row bg-stone-600 w-screen px-2 text-stone-700 gap-4 py-1 items-center">
       <span className="flex flex-row gap-2">
         <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-orange-700 h-5 w-5">
-          &times;
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-4 h-4"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
         </div>
         <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5">
-          &#45;
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-4 h-4"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M19.5 12h-15"
+            />
+          </svg>
         </div>
         <div className="outline outline-1 outline-stone-700 rounded-full flex justify-center items-center bg-neutral-500 h-5 w-5">
-          &#9633;
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-4 h-4"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
+            />
+          </svg>
         </div>
       </span>
       <span className="text-white">