From 6f8acc3fc301e6955453386e75c253e4e2c7eb61 Mon Sep 17 00:00:00 2001 From: Miguel Rivas Perez Date: Tue, 29 Oct 2024 16:49:05 -0700 Subject: [PATCH 1/7] ui: scaffold navigation bar --- src/renderer/src/App.tsx | 2 ++ .../src/feature/navigation/NavigationBar.tsx | 15 +++++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 src/renderer/src/feature/navigation/NavigationBar.tsx diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 8195a7e..3ad4a03 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -3,6 +3,7 @@ import './assets/styles.css' import AddressBar from './components/AddressBar' import useWindowsDimensions from './hooks/useWindowsDimensions' import Splash from './components/Splash' +import NavigationBar from './feature/navigation/NavigationBar' function App(): JSX.Element { const [url, setUrl] = useState('') @@ -11,6 +12,7 @@ function App(): JSX.Element { return ( <> + {url ? ( { + return ( +
+
+ + +
+ + +
+ ) +} + +export default NavigationBar From d0e82b637544647cd049769fe3d8e9d02f04610c Mon Sep 17 00:00:00 2001 From: Miguel Rivas Perez Date: Tue, 29 Oct 2024 16:49:18 -0700 Subject: [PATCH 2/7] chore: add icon assets --- .../src/feature/navigation/assets/go-next.svg | 150 ++++++++++++++++++ .../feature/navigation/assets/go-previous.svg | 150 ++++++++++++++++++ 2 files changed, 300 insertions(+) create mode 100644 src/renderer/src/feature/navigation/assets/go-next.svg create mode 100644 src/renderer/src/feature/navigation/assets/go-previous.svg diff --git a/src/renderer/src/feature/navigation/assets/go-next.svg b/src/renderer/src/feature/navigation/assets/go-next.svg new file mode 100644 index 0000000..9a065f2 --- /dev/null +++ b/src/renderer/src/feature/navigation/assets/go-next.svg @@ -0,0 +1,150 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/renderer/src/feature/navigation/assets/go-previous.svg b/src/renderer/src/feature/navigation/assets/go-previous.svg new file mode 100644 index 0000000..e4f831b --- /dev/null +++ b/src/renderer/src/feature/navigation/assets/go-previous.svg @@ -0,0 +1,150 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From ed0327bb57766060c72d70813d78a4ccb522ee71 Mon Sep 17 00:00:00 2001 From: Miguel Rivas Perez Date: Tue, 29 Oct 2024 17:16:13 -0700 Subject: [PATCH 3/7] ui: prototype navigation bar --- src/renderer/index.html | 1 + src/renderer/src/components/AddressBar.tsx | 24 ++++++++++--------- .../src/feature/navigation/NavigationBar.tsx | 17 ++++++++----- 3 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/renderer/index.html b/src/renderer/index.html index c38d404..74bcd68 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -9,6 +9,7 @@ content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" /> + diff --git a/src/renderer/src/components/AddressBar.tsx b/src/renderer/src/components/AddressBar.tsx index addcc76..c748d20 100644 --- a/src/renderer/src/components/AddressBar.tsx +++ b/src/renderer/src/components/AddressBar.tsx @@ -6,17 +6,19 @@ const AddressBar = ({ setUrl: React.Dispatch> }): JSX.Element => { return ( - +
+

Address

+ setUrl(e.target.value)} + /> +
) } diff --git a/src/renderer/src/feature/navigation/NavigationBar.tsx b/src/renderer/src/feature/navigation/NavigationBar.tsx index 74d8613..06a7011 100644 --- a/src/renderer/src/feature/navigation/NavigationBar.tsx +++ b/src/renderer/src/feature/navigation/NavigationBar.tsx @@ -1,13 +1,18 @@ +import goBack from './assets/go-previous.svg' +import goForward from './assets/go-next.svg' const NavigationBar = (): JSX.Element => { return ( -
-
- - +
+
+ +
- -
) } From ea179b98f2b5b5f46a7d6683678393168cc84a36 Mon Sep 17 00:00:00 2001 From: Miguel Rivas Perez Date: Tue, 29 Oct 2024 17:28:08 -0700 Subject: [PATCH 4/7] ui: title bar --- src/renderer/src/App.tsx | 2 ++ src/renderer/src/components/AddressBar.tsx | 9 +++------ src/renderer/src/components/TitleBar.tsx | 9 +++++++++ src/renderer/src/feature/navigation/NavigationBar.tsx | 7 +++++-- 4 files changed, 19 insertions(+), 8 deletions(-) create mode 100644 src/renderer/src/components/TitleBar.tsx diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 3ad4a03..7da61ce 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -4,6 +4,7 @@ import AddressBar from './components/AddressBar' import useWindowsDimensions from './hooks/useWindowsDimensions' import Splash from './components/Splash' import NavigationBar from './feature/navigation/NavigationBar' +import TitleBar from './components/TitleBar' function App(): JSX.Element { const [url, setUrl] = useState('') @@ -12,6 +13,7 @@ function App(): JSX.Element { return ( <> + {url ? ( diff --git a/src/renderer/src/components/AddressBar.tsx b/src/renderer/src/components/AddressBar.tsx index c748d20..1fcc01f 100644 --- a/src/renderer/src/components/AddressBar.tsx +++ b/src/renderer/src/components/AddressBar.tsx @@ -6,14 +6,11 @@ const AddressBar = ({ setUrl: React.Dispatch> }): JSX.Element => { return ( -
-

Address

+
+

Address

setUrl(e.target.value)} diff --git a/src/renderer/src/components/TitleBar.tsx b/src/renderer/src/components/TitleBar.tsx new file mode 100644 index 0000000..f56212a --- /dev/null +++ b/src/renderer/src/components/TitleBar.tsx @@ -0,0 +1,9 @@ +const TitleBar = (): JSX.Element => { + return ( +
+ TitleBar +
+ ) +} + +export default TitleBar diff --git a/src/renderer/src/feature/navigation/NavigationBar.tsx b/src/renderer/src/feature/navigation/NavigationBar.tsx index 06a7011..027c13d 100644 --- a/src/renderer/src/feature/navigation/NavigationBar.tsx +++ b/src/renderer/src/feature/navigation/NavigationBar.tsx @@ -3,11 +3,14 @@ import goForward from './assets/go-next.svg' const NavigationBar = (): JSX.Element => { return ( -
+
@@ -16,6 +16,10 @@ const NavigationBar = (): JSX.Element => {
+ +
) } diff --git a/src/renderer/src/feature/navigation/assets/recent.svg b/src/renderer/src/feature/navigation/assets/recent.svg new file mode 100644 index 0000000..45a0b5a --- /dev/null +++ b/src/renderer/src/feature/navigation/assets/recent.svg @@ -0,0 +1,259 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + From 8297bdb378646efa481e2371f2536b0511cc7a15 Mon Sep 17 00:00:00 2001 From: Miguel Rivas Perez Date: Fri, 1 Nov 2024 11:36:56 -0700 Subject: [PATCH 6/7] feat: url updates when user navigates --- src/renderer/src/App.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 7da61ce..a260584 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import './assets/styles.css' import AddressBar from './components/AddressBar' import useWindowsDimensions from './hooks/useWindowsDimensions' @@ -11,6 +11,23 @@ function App(): JSX.Element { const windowDimensions = useWindowsDimensions() const webviewRef = useRef(null) + useEffect(() => { + if (webviewRef.current) { + webviewRef.current.addEventListener('did-navigate', (event) => { + console.log(event) + // TODO resolve + // @ts-expect-error url is any type + setUrl(event.url) + }) + } + + return () => { + if (webviewRef.current) { + webviewRef.current.removeEventListener('did-navigate', () => {}) + } + } + }, []) + return ( <> From 4064423309de4e6720c207854de217dc8bcce170 Mon Sep 17 00:00:00 2001 From: Miguel Rivas Perez Date: Fri, 1 Nov 2024 11:56:15 -0700 Subject: [PATCH 7/7] feat: use can navigate back and forth --- src/renderer/src/App.tsx | 16 +++++++++------ src/renderer/src/components/TitleBar.tsx | 4 ++-- .../src/feature/navigation/NavigationBar.tsx | 20 ++++++++++++++----- 3 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index a260584..506f4c8 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -5,20 +5,24 @@ import useWindowsDimensions from './hooks/useWindowsDimensions' import Splash from './components/Splash' import NavigationBar from './feature/navigation/NavigationBar' import TitleBar from './components/TitleBar' +import { WebviewTag } from 'electron' function App(): JSX.Element { const [url, setUrl] = useState('') const windowDimensions = useWindowsDimensions() - const webviewRef = useRef(null) - + const webviewRef = useRef(null) + const [pageTitle, setPageTitle] = useState('') useEffect(() => { if (webviewRef.current) { webviewRef.current.addEventListener('did-navigate', (event) => { console.log(event) - // TODO resolve - // @ts-expect-error url is any type setUrl(event.url) }) + + // Get the title from the webview + webviewRef.current.executeJavaScript(`document.title;`, (title) => { + setPageTitle(title) + }) } return () => { @@ -30,8 +34,8 @@ function App(): JSX.Element { return ( <> - - + + {url ? ( { +const TitleBar = ({ pageTitle }: { pageTitle: string }): JSX.Element => { return (
- TitleBar + {pageTitle}
) } diff --git a/src/renderer/src/feature/navigation/NavigationBar.tsx b/src/renderer/src/feature/navigation/NavigationBar.tsx index 42a0496..7255825 100644 --- a/src/renderer/src/feature/navigation/NavigationBar.tsx +++ b/src/renderer/src/feature/navigation/NavigationBar.tsx @@ -1,20 +1,30 @@ import goBack from './assets/go-previous.svg' import goForward from './assets/go-next.svg' import history from './assets/recent.svg' -const NavigationBar = (): JSX.Element => { +const NavigationBar = ({ + webViewRef +}: { + webViewRef: React.RefObject +}): JSX.Element => { + const handleGoBack = (): void => webViewRef.current?.goBack() + + const handleGoForward = (): void => webViewRef.current?.goForward() + return (
- - + {webViewRef.current && webViewRef.current.canGoForward() && ( + + )}