From 5ab07e55b6cf7c0af7b3fa144ffc6f95a6e6eb9a Mon Sep 17 00:00:00 2001
From: Plsr <christianpoplawski@gmail.com>
Date: Mon, 20 Feb 2023 00:06:30 +0100
Subject: [PATCH 1/6] Refactor AppWindow component

---
 src/components/AppWindow.tsx | 33 ++++++---------------------------
 1 file changed, 6 insertions(+), 27 deletions(-)

diff --git a/src/components/AppWindow.tsx b/src/components/AppWindow.tsx
index e36e844..d78a91a 100644
--- a/src/components/AppWindow.tsx
+++ b/src/components/AppWindow.tsx
@@ -46,10 +46,9 @@ const AppWindow: FC<AppWindowProps> = ({ app, className }) => {
       bounds="parent"
       defaultPosition={{ x: left, y: top }}
       handle=".handle">
-      <Window
-        width={dimensions.width}
-        height={dimensions.height}
-        className={className}
+      <div
+        className="absolute flex flex-col bg-white rounded-lg pointer-events-auto overflow-hidden shadow-md"
+        style={{ width: dimensions.width, height: dimensions.height }}
         ref={windowRef}>
         <TitleBar className="handle">
           <TitleBarTitle>{name}</TitleBarTitle>
@@ -62,13 +61,13 @@ const AppWindow: FC<AppWindowProps> = ({ app, className }) => {
             </TitleBarButton>
           </TitleBarControls>
         </TitleBar>
-        <Content draggable onDragStart={disableDrag}>
+        <div className="flex-grow" draggable onDragStart={disableDrag}>
           {React.createElement(component, {
             shouldClose: shouldClose,
             onCloseConfirm: handleCloseConfirm,
           })}
-        </Content>
-      </Window>
+        </div>
+      </div>
     </Draggable>
   )
 }
@@ -101,30 +100,10 @@ const TitleBarTitle = styled.p`
   cursor: default;
 `
 
-const Content = styled.div`
-  width: 100%;
-  height: 100%;
-`
-
 const TitleBarButton = styled.div`
   cursor: pointer;
 `
 
-const Window = styled.div<{ width: number; height: number }>`
-  width: ${(props) => props.width + 'px'};
-  height: ${(props) => props.height + 'px'};
-  background-color: white;
-  border-radius: 8px;
-  position: absolute;
-  pointer-events: auto;
-  box-shadow: 0.9px 1px 5.4px rgba(0, 0, 0, 0.02),
-    2.1px 2.3px 12.9px rgba(0, 0, 0, 0.028),
-    3.9px 4.4px 24.3px rgba(0, 0, 0, 0.035),
-    6.9px 7.8px 43.3px rgba(0, 0, 0, 0.042),
-    13px 14.6px 81px rgba(0, 0, 0, 0.05), 31px 35px 194px rgba(0, 0, 0, 0.07);
-  overflow: hidden;
-`
-
 interface AppWindowProps {
   app: App
   className?: string

From ad0270393fdaf56eb510d0fd716ccd37521aa979 Mon Sep 17 00:00:00 2001
From: Plsr <christianpoplawski@gmail.com>
Date: Mon, 20 Feb 2023 00:06:45 +0100
Subject: [PATCH 2/6] Add basic browser app

Almost no funcitonality yet, but it can browse the web a little.
---
 src/app-components/BrowserApp.tsx | 30 ++++++++++++++++++++++++++++++
 src/util/appDirectory.tsx         | 11 +++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/app-components/BrowserApp.tsx

diff --git a/src/app-components/BrowserApp.tsx b/src/app-components/BrowserApp.tsx
new file mode 100644
index 0000000..41ffd67
--- /dev/null
+++ b/src/app-components/BrowserApp.tsx
@@ -0,0 +1,30 @@
+import { useState } from 'react'
+
+export const BrowserApp = () => {
+  const [address, setAddress] = useState('https://www.google.com/search?igu=1')
+  const [addressInputVal, setAddressInputVal] = useState(
+    'https://www.google.com/search?igu=1',
+  )
+
+  const handleClick = () => {
+    if (!addressInputVal) {
+      return
+    }
+
+    setAddress(addressInputVal)
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex justify-around bg-slate-400 py-2">
+        <input
+          value={addressInputVal}
+          onChange={(event) => setAddressInputVal(event.target.value)}
+          className="w-3/4"
+        />
+        <button onClick={handleClick}>Go</button>
+      </div>
+      <iframe title="google" src={address} className="flex-grow" />
+    </div>
+  )
+}
diff --git a/src/util/appDirectory.tsx b/src/util/appDirectory.tsx
index ed402ac..0bafc3b 100644
--- a/src/util/appDirectory.tsx
+++ b/src/util/appDirectory.tsx
@@ -2,6 +2,7 @@ import { App } from '../context/AppsContext'
 
 import { CalculatorApp } from '../app-components/CalculatorApp'
 import { NotesApp } from '../app-components/NotesApp'
+import { BrowserApp } from '../app-components/BrowserApp'
 
 export const availableApps: App[] = [
   {
@@ -24,4 +25,14 @@ export const availableApps: App[] = [
     component: NotesApp,
     icon: 'notes-icon.svg',
   },
+  {
+    name: 'Browser',
+    dimensions: { width: 800, height: 500 },
+    minimized: false,
+    top: 0,
+    left: 0,
+    id: 'browser',
+    component: BrowserApp,
+    icon: 'notes-icon.svg',
+  },
 ]

From af15110f2b576d2491b4115e06f96f3a81247313 Mon Sep 17 00:00:00 2001
From: Plsr <christianpoplawski@gmail.com>
Date: Sun, 1 Oct 2023 23:59:47 +0200
Subject: [PATCH 3/6] Add browser close handling

---
 src/app-components/BrowserApp.tsx | 20 ++++++++++++++++----
 src/components/AppWindow.tsx      |  4 +++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/app-components/BrowserApp.tsx b/src/app-components/BrowserApp.tsx
index 41ffd67..233edb0 100644
--- a/src/app-components/BrowserApp.tsx
+++ b/src/app-components/BrowserApp.tsx
@@ -1,17 +1,29 @@
 import { useState } from 'react'
+import { GenericAppProps } from '../types/genericAppProps'
+import { useHandleClose } from '../hooks/useHandleClose'
 
-export const BrowserApp = () => {
+export const BrowserApp = ({
+  shouldClose,
+  onCloseConfirm,
+}: GenericAppProps) => {
   const [address, setAddress] = useState('https://www.google.com/search?igu=1')
   const [addressInputVal, setAddressInputVal] = useState(
     'https://www.google.com/search?igu=1',
   )
 
-  const handleClick = () => {
+  useHandleClose(shouldClose, () => {}, onCloseConfirm)
+
+  const handleClick = async () => {
     if (!addressInputVal) {
       return
     }
 
-    setAddress(addressInputVal)
+    let sanitizedAddress = addressInputVal
+    if (addressInputVal.slice(0, 5) !== 'https') {
+      sanitizedAddress = 'https://' + addressInputVal
+    }
+
+    setAddress(sanitizedAddress)
   }
 
   return (
@@ -24,7 +36,7 @@ export const BrowserApp = () => {
         />
         <button onClick={handleClick}>Go</button>
       </div>
-      <iframe title="google" src={address} className="flex-grow" />
+      <iframe title="google" src={address} className="h-full" />
     </div>
   )
 }
diff --git a/src/components/AppWindow.tsx b/src/components/AppWindow.tsx
index d9db203..5394111 100644
--- a/src/components/AppWindow.tsx
+++ b/src/components/AppWindow.tsx
@@ -127,7 +127,7 @@ const TitleBarControls = styled.div`
 
 const Content = styled.div`
   width: 100%;
-  height: 100%;
+  flex: 1;
 `
 
 const TitleBarTitle = styled.p`
@@ -148,6 +148,8 @@ const Window = styled.div<{ width: number; height: number; index: number }>`
   height: ${(props) => props.height + 'px'};
   z-index: ${(props) => props.index};
   background-color: white;
+  display: flex;
+  flex-direction: column;
   border-radius: 8px;
   position: absolute;
   pointer-events: auto;

From 0da1884d768d1ea561a5006984f073585884cd5f Mon Sep 17 00:00:00 2001
From: Plsr <christianpoplawski@gmail.com>
Date: Tue, 3 Oct 2023 12:20:00 +0200
Subject: [PATCH 4/6] Improve address bar handling

---
 src/app-components/BrowserApp.tsx | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/app-components/BrowserApp.tsx b/src/app-components/BrowserApp.tsx
index 233edb0..643449b 100644
--- a/src/app-components/BrowserApp.tsx
+++ b/src/app-components/BrowserApp.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { FormEvent, useRef, useState } from 'react'
 import { GenericAppProps } from '../types/genericAppProps'
 import { useHandleClose } from '../hooks/useHandleClose'
 
@@ -10,10 +10,15 @@ export const BrowserApp = ({
   const [addressInputVal, setAddressInputVal] = useState(
     'https://www.google.com/search?igu=1',
   )
+  const iframeRef = useRef<HTMLIFrameElement | null>(null)
 
   useHandleClose(shouldClose, () => {}, onCloseConfirm)
 
   const handleClick = async () => {
+    updateAddress()
+  }
+
+  const updateAddress = () => {
     if (!addressInputVal) {
       return
     }
@@ -26,17 +31,26 @@ export const BrowserApp = ({
     setAddress(sanitizedAddress)
   }
 
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault() // Prevent page reload
+
+    updateAddress()
+    iframeRef.current?.contentWindow?.focus()
+  }
+
   return (
     <div className="h-full flex flex-col">
       <div className="flex justify-around bg-slate-400 py-2">
-        <input
-          value={addressInputVal}
-          onChange={(event) => setAddressInputVal(event.target.value)}
-          className="w-3/4"
-        />
+        <form onSubmit={(e) => handleSubmit(e)} className="w-3/4">
+          <input
+            value={addressInputVal}
+            onChange={(event) => setAddressInputVal(event.target.value)}
+            className="w-full"
+          />
+        </form>
         <button onClick={handleClick}>Go</button>
       </div>
-      <iframe title="google" src={address} className="h-full" />
+      <iframe ref={iframeRef} title="google" src={address} className="h-full" />
     </div>
   )
 }

From 5f769723f4ac057e65ee8b6eefb79d98decc92fe Mon Sep 17 00:00:00 2001
From: Plsr <christian@gigs.com>
Date: Tue, 3 Oct 2023 14:27:39 +0200
Subject: [PATCH 5/6] Write browser history to localStorage

---
 src/app-components/BrowserApp.tsx | 32 ++++++++++++++++++++++++++++---
 src/hooks/useBrowserHistory.ts    | 31 ++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useBrowserHistory.ts

diff --git a/src/app-components/BrowserApp.tsx b/src/app-components/BrowserApp.tsx
index 643449b..5b7dcef 100644
--- a/src/app-components/BrowserApp.tsx
+++ b/src/app-components/BrowserApp.tsx
@@ -1,15 +1,23 @@
 import { FormEvent, useRef, useState } from 'react'
 import { GenericAppProps } from '../types/genericAppProps'
 import { useHandleClose } from '../hooks/useHandleClose'
+import { useBrowserHistory } from '../hooks/useBrowserHistory'
+import { QueueListIcon } from '@heroicons/react/24/outline'
+
+type ViewState = 'browser' | 'history'
 
 export const BrowserApp = ({
   shouldClose,
   onCloseConfirm,
 }: GenericAppProps) => {
   const [address, setAddress] = useState('https://www.google.com/search?igu=1')
+  // TODO: Should be handeled by tabs later on
+  const [viewState, setViewState] = useState<ViewState>('browser')
   const [addressInputVal, setAddressInputVal] = useState(
     'https://www.google.com/search?igu=1',
   )
+  const history = useBrowserHistory()
+
   const iframeRef = useRef<HTMLIFrameElement | null>(null)
 
   useHandleClose(shouldClose, () => {}, onCloseConfirm)
@@ -29,6 +37,13 @@ export const BrowserApp = ({
     }
 
     setAddress(sanitizedAddress)
+    history.addEntry(sanitizedAddress)
+  }
+
+  const handleHistoryButtonClick = () => {
+    if (viewState !== 'history') {
+      setViewState('history')
+    }
   }
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
@@ -40,17 +55,28 @@ export const BrowserApp = ({
 
   return (
     <div className="h-full flex flex-col">
-      <div className="flex justify-around bg-slate-400 py-2">
+      <div className="flex justify-around bg-slate-600 py-2">
         <form onSubmit={(e) => handleSubmit(e)} className="w-3/4">
           <input
             value={addressInputVal}
             onChange={(event) => setAddressInputVal(event.target.value)}
-            className="w-full"
+            className="w-full rounded-full p-2"
           />
         </form>
         <button onClick={handleClick}>Go</button>
+        <button onClick={handleHistoryButtonClick}>
+          <QueueListIcon className="w-6 h-6" />
+        </button>
       </div>
-      <iframe ref={iframeRef} title="google" src={address} className="h-full" />
+      {viewState === 'history' && <div>Here be history</div>}
+      {viewState === 'browser' && (
+        <iframe
+          ref={iframeRef}
+          title="google"
+          src={address}
+          className="h-full"
+        />
+      )}
     </div>
   )
 }
diff --git a/src/hooks/useBrowserHistory.ts b/src/hooks/useBrowserHistory.ts
new file mode 100644
index 0000000..5c9614d
--- /dev/null
+++ b/src/hooks/useBrowserHistory.ts
@@ -0,0 +1,31 @@
+type BrowserHistoryEntry = {
+  url: string
+  dateAdded: string
+}
+
+const STORAGE_KEY = 'ohes_browser_history'
+
+export const useBrowserHistory = () => {
+  const addEntry = (url: string) => {
+    const dateAdded = new Date().toISOString()
+    const historyEntry: BrowserHistoryEntry = { url, dateAdded }
+    addLocalStorageEntry<BrowserHistoryEntry>(STORAGE_KEY, historyEntry)
+  }
+
+  return { addEntry }
+}
+
+// TODO: Move to shared util
+function addLocalStorageEntry<T>(key: string, data: T) {
+  const existingData = window.localStorage.getItem(key)
+
+  let newDataSet
+  if (existingData) {
+    const existingDataSet = JSON.parse(existingData)
+    newDataSet = [data, ...existingDataSet]
+  } else {
+    newDataSet = [data]
+  }
+
+  localStorage.setItem(key, JSON.stringify(newDataSet))
+}

From 526ff6a413a9a9df08cf8848c811817375956b9d Mon Sep 17 00:00:00 2001
From: Plsr <christian@gigs.com>
Date: Wed, 4 Oct 2023 00:09:36 +0200
Subject: [PATCH 6/6] Allow viewing of browser history

---
 src/app-components/BrowserApp.tsx | 46 +++++++++++++++++++++++++++++--
 src/hooks/useBrowserHistory.ts    | 18 ++++++++++--
 2 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/app-components/BrowserApp.tsx b/src/app-components/BrowserApp.tsx
index 5b7dcef..1559eff 100644
--- a/src/app-components/BrowserApp.tsx
+++ b/src/app-components/BrowserApp.tsx
@@ -1,7 +1,10 @@
 import { FormEvent, useRef, useState } from 'react'
 import { GenericAppProps } from '../types/genericAppProps'
 import { useHandleClose } from '../hooks/useHandleClose'
-import { useBrowserHistory } from '../hooks/useBrowserHistory'
+import {
+  BrowserHistoryEntry,
+  useBrowserHistory,
+} from '../hooks/useBrowserHistory'
 import { QueueListIcon } from '@heroicons/react/24/outline'
 
 type ViewState = 'browser' | 'history'
@@ -36,8 +39,13 @@ export const BrowserApp = ({
       sanitizedAddress = 'https://' + addressInputVal
     }
 
+    // Only add new entry if address changed
+    if (sanitizedAddress !== address) {
+      history.addEntry(sanitizedAddress)
+    }
+
     setAddress(sanitizedAddress)
-    history.addEntry(sanitizedAddress)
+    setViewState('browser')
   }
 
   const handleHistoryButtonClick = () => {
@@ -53,6 +61,11 @@ export const BrowserApp = ({
     iframeRef.current?.contentWindow?.focus()
   }
 
+  const handleHistoryEntryClick = (url: string) => {
+    setAddress(url)
+    setViewState('browser')
+  }
+
   return (
     <div className="h-full flex flex-col">
       <div className="flex justify-around bg-slate-600 py-2">
@@ -68,7 +81,12 @@ export const BrowserApp = ({
           <QueueListIcon className="w-6 h-6" />
         </button>
       </div>
-      {viewState === 'history' && <div>Here be history</div>}
+      {viewState === 'history' && (
+        <HistoryView
+          historyEntries={history.getHistory()}
+          onEntryClick={handleHistoryEntryClick}
+        />
+      )}
       {viewState === 'browser' && (
         <iframe
           ref={iframeRef}
@@ -80,3 +98,25 @@ export const BrowserApp = ({
     </div>
   )
 }
+
+type HistoryViewProps = {
+  historyEntries: BrowserHistoryEntry[]
+  onEntryClick: (url: string) => void
+}
+
+const HistoryView = ({ historyEntries, onEntryClick }: HistoryViewProps) => {
+  return (
+    <div className="p-4">
+      <h2 className="text-lg mb-2">History</h2>
+      <ul>
+        {historyEntries.map((historyEntry) => (
+          <li
+            onClick={() => onEntryClick(historyEntry.url)}
+            className="mb-1 cursor-pointer">
+            {historyEntry.url}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/hooks/useBrowserHistory.ts b/src/hooks/useBrowserHistory.ts
index 5c9614d..6fb026c 100644
--- a/src/hooks/useBrowserHistory.ts
+++ b/src/hooks/useBrowserHistory.ts
@@ -1,4 +1,4 @@
-type BrowserHistoryEntry = {
+export type BrowserHistoryEntry = {
   url: string
   dateAdded: string
 }
@@ -12,7 +12,11 @@ export const useBrowserHistory = () => {
     addLocalStorageEntry<BrowserHistoryEntry>(STORAGE_KEY, historyEntry)
   }
 
-  return { addEntry }
+  const getHistory = () => {
+    return getLocalStorageEntry<BrowserHistoryEntry>(STORAGE_KEY)
+  }
+
+  return { addEntry, getHistory }
 }
 
 // TODO: Move to shared util
@@ -29,3 +33,13 @@ function addLocalStorageEntry<T>(key: string, data: T) {
 
   localStorage.setItem(key, JSON.stringify(newDataSet))
 }
+
+function getLocalStorageEntry<T>(key: string): T[] {
+  const data = window.localStorage.getItem(key)
+
+  if (data) {
+    return JSON.parse(data)
+  }
+
+  return []
+}