+
+ )
+}
+
+export default App
diff --git a/src/renderers/picker/components/molecules/app-button.tsx b/src/renderers/picker/components/molecules/app-button.tsx
new file mode 100644
index 00000000..6d6043e5
--- /dev/null
+++ b/src/renderers/picker/components/molecules/app-button.tsx
@@ -0,0 +1,56 @@
+import clsx from 'clsx'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+
+import { clickedApp } from '../../../../shared/state/actions'
+import type { InstalledApp } from '../../../../shared/state/hooks'
+import { useSelector } from '../../../../shared/state/hooks'
+
+interface Props {
+ app: InstalledApp
+ children?: React.ReactNode
+ className?: string
+}
+
+export const AppButton = React.forwardRef(
+ (
+ { children, app, className }: Props,
+ ref: React.ForwardedRef
+
+
+ {favApp && (
+
+
+ )}
+
+
+
+ {normalApps.map((app, index) => {
+ const key = app.id + index
+ return (
+
+
+ )
+ })}
+
+ - Thank you for downloading Browserosaurus. Please consider buying me a - coffee. + Thank you for downloading Browserosaurus. Please consider supporting + my open source projects.
Thank you{' '}
diff --git a/src/renderers/tiles/components/organisms/url-bar.test.tsx b/src/renderers/picker/components/organisms/url-bar.test.tsx
similarity index 100%
rename from src/renderers/tiles/components/organisms/url-bar.test.tsx
rename to src/renderers/picker/components/organisms/url-bar.test.tsx
diff --git a/src/renderers/picker/components/organisms/url-bar.tsx b/src/renderers/picker/components/organisms/url-bar.tsx
new file mode 100644
index 00000000..8c388308
--- /dev/null
+++ b/src/renderers/picker/components/organisms/url-bar.tsx
@@ -0,0 +1,68 @@
+import clsx from 'clsx'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import Url from 'url'
+
+import { CARROT_URL } from '../../../../config/CONSTANTS'
+import { clickedUrlBar } from '../../../../shared/state/actions'
+import { useSelector } from '../../../../shared/state/hooks'
+
+interface Props {
+ className?: string
+}
+
+const UrlBar: React.FC dispatch(clickedUrlBar())}
+ onKeyDown={() => false}
+ role="button"
+ tabIndex={-1}
+ title="Click to copy (⌘ + C)"
+ >
+
+ )
+}
+
+export default UrlBar
diff --git a/src/renderers/tiles/index.html b/src/renderers/picker/index.html
similarity index 100%
rename from src/renderers/tiles/index.html
rename to src/renderers/picker/index.html
diff --git a/src/renderers/tiles/index.tsx b/src/renderers/picker/index.tsx
similarity index 100%
rename from src/renderers/tiles/index.tsx
rename to src/renderers/picker/index.tsx
diff --git a/src/renderers/picker/refs.ts b/src/renderers/picker/refs.ts
new file mode 100644
index 00000000..78891b73
--- /dev/null
+++ b/src/renderers/picker/refs.ts
@@ -0,0 +1,3 @@
+import { createRef } from 'react'
+
+export const favAppRef = createRef
+ {url === CARROT_URL && (
+
+
+
+ ☕️
+ {' '}
+ Choose a browser to open URL:
+
+ )}
+ {parsedUrl.protocol}
+ {parsedUrl.slashes && '//'}
+
+ {parsedUrl.host || Browserosaurus}
+
+
+ {parsedUrl.pathname}
+ {parsedUrl.search}
+ {parsedUrl.hash}
+
+ {
Browserosaurus Preferences
-
-
-
+
+ {installedApps.map(({ id, name, hotkey }, index) => (
+
+ {(draggableProvided, draggableSnapshop) => (
+
+ ))}
+ {droppableProvided.placeholder}
+
+ )}
+
+
+ )}
+
+
+
+ {index === 0 ? (
+
+
+ 
+ {name}
+
+
+ {
+ dispatch(
+ changedHotkey({
+ appId: id,
+ value: event.currentTarget.value,
+ }),
+ )
+ }}
+ onFocus={(event) => {
+ event.target.select()
+ }}
+ placeholder="Key"
+ type="text"
+ value={hotkey || ''}
+ />
+
+
-
- Tile
- Favourite
- Visibility
- Hotkey
-
- {installedApps.map(({ id, name, isVisible, isFav, hotkey }, index) => {
- const isOdd = index % 2 !== 0
- return (
-
-
-
- )
- })}
-
-
- {name}
-
-
-
-
-
-
-
-
- {
- dispatch(
- changedHotkey({
- appId: id,
- value: event.currentTarget.value,
- }),
- )
- }}
- onFocus={(event) => {
- event.target.select()
- }}
- placeholder="Key"
- type="text"
- value={hotkey || ''}
- />
-
-
-
- )
-}
-
-export default App
diff --git a/src/renderers/tiles/components/molecules/tile.tsx b/src/renderers/tiles/components/molecules/tile.tsx
deleted file mode 100644
index 64cc13c0..00000000
--- a/src/renderers/tiles/components/molecules/tile.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import clsx from 'clsx'
-import React from 'react'
-import { useDispatch } from 'react-redux'
-
-import { clickedTile } from '../../../../shared/state/actions'
-import type { InstalledApp } from '../../../../shared/state/hooks'
-import { useSelector } from '../../../../shared/state/hooks'
-import { StarIcon } from '../../../shared/components/atoms/icons'
-import AppLogo from '../atoms/app-logo'
-import Kbd from '../atoms/kbd'
-
-interface Props {
- app: InstalledApp
-}
-
-const Tile: React.FC
-
-
- )
-}
-
-export default Tile
diff --git a/src/renderers/tiles/components/organisms/tiles.test.tsx b/src/renderers/tiles/components/organisms/tiles.test.tsx
deleted file mode 100644
index c97315d7..00000000
--- a/src/renderers/tiles/components/organisms/tiles.test.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import '../../../shared/preload'
-
-import { act, fireEvent, render, screen, within } from '@testing-library/react'
-import electron from 'electron'
-import React from 'react'
-
-import {
- clickedTile,
- pressedAppKey,
- syncAppIds,
- syncStorage,
- urlOpened,
-} from '../../../../shared/state/actions'
-import { Channel } from '../../../../shared/state/channels'
-import Wrapper from '../_bootstrap'
-
-test('tiles', () => {
- render(
-
- )
-}
-
-export default Tiles
diff --git a/src/renderers/tiles/components/organisms/url-bar.tsx b/src/renderers/tiles/components/organisms/url-bar.tsx
deleted file mode 100644
index 2184a71c..00000000
--- a/src/renderers/tiles/components/organisms/url-bar.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import clsx from 'clsx'
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import Url from 'url'
-
-import { CARROT_URL } from '../../../../config/CONSTANTS'
-import {
- clickedCopyButton,
- clickedUpdateAvailableButton,
- clickedUrlBackspaceButton,
-} from '../../../../shared/state/actions'
-import { useSelector } from '../../../../shared/state/hooks'
-import Button from '../../../shared/components/atoms/button'
-import {
- BackspaceIcon,
- ClipboardCopyIcon,
-} from '../../../shared/components/atoms/icons'
-
-interface Props {
- className?: string
-}
-
-const UrlBar: React.FC
- {/* Favourite is first */}
- {favTile &&
-
-
- )
-}
-
-export default UrlBar
diff --git a/src/renderers/tiles/store.ts b/src/renderers/tiles/store.ts
deleted file mode 100644
index bc41c8d1..00000000
--- a/src/renderers/tiles/store.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { AnyAction } from '@reduxjs/toolkit'
-
-import { Channel } from '../../shared/state/channels'
-import createStore from '../../shared/state/create-store'
-import { customWindow } from '../shared/custom.window'
-import { busMiddleware } from '../shared/state/middleware.bus'
-
-const store = createStore([busMiddleware(Channel.TILES)])
-
-export default store
-
-/**
- * Listen for all actions from main
- */
-customWindow.electron.receive(Channel.MAIN, (action: AnyAction) => {
- store.dispatch(action)
-})
diff --git a/src/shared/state/actions.ts b/src/shared/state/actions.ts
index bec15941..de13e7ac 100644
--- a/src/shared/state/actions.ts
+++ b/src/shared/state/actions.ts
@@ -8,7 +8,7 @@ import type { Data, PrefsTab } from './reducer.data'
import type { Storage } from './reducer.storage'
const MAIN = Channel.MAIN
-const TILES = Channel.TILES
+const PICKER = Channel.PICKER
const PREFS = Channel.PREFS
// -----------------------------------------------------------------------------
@@ -18,8 +18,10 @@ const PREFS = Channel.PREFS
const appReady = cA(`${MAIN}/appReady`)
const urlOpened = cA
-
-
-
- {url === CARROT_URL && (
-
-
-
- ☕️
- {' '}
- Choose a browser to open URL:
-
- )}
- {parsedUrl.protocol}
- {parsedUrl.slashes && '//'}
-
- {parsedUrl.host || (
- Browserosaurus
- )}
-
-
- {parsedUrl.pathname}
- {parsedUrl.search}
- {parsedUrl.hash}
-
-
-
-
-
-
-
-
-
-
-