Add Browser App

src/app-components/BrowserApp.tsx

@@ -0,0 +1,122 @@
+import { FormEvent, useRef, useState } from 'react'
+import { GenericAppProps } from '../types/genericAppProps'
+import { useHandleClose } from '../hooks/useHandleClose'
+import {
+  BrowserHistoryEntry,
+  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)
+
+  const handleClick = async () => {
+    updateAddress()
+  }
+
+  const updateAddress = () => {
+    if (!addressInputVal) {
+      return
+    }
+
+    let sanitizedAddress = addressInputVal
+    if (addressInputVal.slice(0, 5) !== 'https') {
+      sanitizedAddress = 'https://' + addressInputVal
+    }
+
+    // Only add new entry if address changed
+    if (sanitizedAddress !== address) {
+      history.addEntry(sanitizedAddress)
+    }
+
+    setAddress(sanitizedAddress)
+    setViewState('browser')
+  }
+
+  const handleHistoryButtonClick = () => {
+    if (viewState !== 'history') {
+      setViewState('history')
+    }
+  }
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault() // Prevent page reload
+
+    updateAddress()
+    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">
+        <form onSubmit={(e) => handleSubmit(e)} className="w-3/4">
+          <input
+            value={addressInputVal}
+            onChange={(event) => setAddressInputVal(event.target.value)}
+            className="w-full rounded-full p-2"
+          />
+        </form>
+        <button onClick={handleClick}>Go</button>
+        <button onClick={handleHistoryButtonClick}>
+          <QueueListIcon className="w-6 h-6" />
+        </button>
+      </div>
+      {viewState === 'history' && (
+        <HistoryView
+          historyEntries={history.getHistory()}
+          onEntryClick={handleHistoryEntryClick}
+        />
+      )}
+      {viewState === 'browser' && (
+        <iframe
+          ref={iframeRef}
+          title="google"
+          src={address}
+          className="h-full"
+        />
+      )}
+    </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>
+  )
+}

src/components/AppWindow.tsx

@@ -125,6 +125,11 @@ const TitleBarControls = styled.div`
   justify-content: space-between;
 `
 
+const Content = styled.div`
+  width: 100%;
+  flex: 1;
+`
+
 const TitleBarTitle = styled.p`
   flex-grow: 1;
   text-align: center;
@@ -134,11 +139,6 @@ const TitleBarTitle = styled.p`
   cursor: default;
 `
 
-const Content = styled.div`
-  width: 100%;
-  height: 100%;
-`
-
 const TitleBarButton = styled.div`
   cursor: pointer;
 `
@@ -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;

src/hooks/useBrowserHistory.ts

@@ -0,0 +1,45 @@
+export 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)
+  }
+
+  const getHistory = () => {
+    return getLocalStorageEntry<BrowserHistoryEntry>(STORAGE_KEY)
+  }
+
+  return { addEntry, getHistory }
+}
+
+// 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))
+}
+
+function getLocalStorageEntry<T>(key: string): T[] {
+  const data = window.localStorage.getItem(key)
+
+  if (data) {
+    return JSON.parse(data)
+  }
+
+  return []
+}

src/util/appDirectory.tsx

@@ -1,6 +1,7 @@
 import { OsApplication } from '../hooks/useApplicationManager'
 import { CalculatorApp } from '../app-components/CalculatorApp'
 import { NotesApp } from '../app-components/NotesApp'
+import { BrowserApp } from '../app-components/BrowserApp'
 
 export const availableApps: OsApplication[] = [
   {
@@ -23,4 +24,14 @@ export const availableApps: OsApplication[] = [
     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',
+  },
 ]