diff --git a/package.json b/package.json
index 39288d0..aa3ec70 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
"remesh-logger": "^4.1.0",
"remesh-react": "^4.1.2",
"rxjs": "^7.8.1",
- "sonner": "^1.6.1",
+ "sonner": "^1.7.0",
"tailwind-merge": "^2.5.4",
"trystero": "^0.20.0",
"type-fest": "^4.26.1",
@@ -104,7 +104,7 @@
"@types/eslint": "^9.6.1",
"@types/eslint__js": "^8.42.3",
"@types/eslint-plugin-tailwindcss": "^3.17.0",
- "@types/node": "^22.8.6",
+ "@types/node": "^22.8.7",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@typescript-eslint/parser": "^8.12.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9ebfe2b..6ddfd3f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,8 +135,8 @@ importers:
specifier: ^7.8.1
version: 7.8.1
sonner:
- specifier: ^1.6.1
- version: 1.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: ^1.7.0
+ version: 1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
tailwind-merge:
specifier: ^2.5.4
version: 2.5.4
@@ -155,7 +155,7 @@ importers:
devDependencies:
'@commitlint/cli':
specifier: ^19.5.0
- version: 19.5.0(@types/node@22.8.6)(typescript@5.6.3)
+ version: 19.5.0(@types/node@22.8.7)(typescript@5.6.3)
'@commitlint/config-conventional':
specifier: ^19.5.0
version: 19.5.0
@@ -184,8 +184,8 @@ importers:
specifier: ^8.42.3
version: 8.42.3
'@types/node':
- specifier: ^22.8.6
- version: 22.8.6
+ specifier: ^22.8.7
+ version: 22.8.7
'@types/react':
specifier: ^18.3.12
version: 18.3.12
@@ -197,7 +197,7 @@ importers:
version: 8.12.2(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3)
'@vitejs/plugin-react':
specifier: ^4.3.3
- version: 4.3.3(vite@5.4.10(@types/node@22.8.6))
+ version: 4.3.3(vite@5.4.10(@types/node@22.8.7))
autoprefixer:
specifier: ^10.4.20
version: 10.4.20(postcss@8.4.47)
@@ -260,13 +260,13 @@ importers:
version: 8.12.2(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3)
vite-plugin-svgr:
specifier: ^4.3.0
- version: 4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6))
+ version: 4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.7))
webext-bridge:
specifier: ^6.0.1
version: 6.0.1
wxt:
specifier: ^0.19.13
- version: 0.19.13(@types/node@22.8.6)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4)
+ version: 0.19.13(@types/node@22.8.7)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4)
packages:
@@ -2002,8 +2002,8 @@ packages:
'@types/murmurhash3js-revisited@3.0.3':
resolution: {integrity: sha512-QvlqvYtGBYIDeO8dFdY4djkRubcrc+yTJtBc7n8VZPlJDUS/00A+PssbvERM8f9bYRmcaSEHPZgZojeQj7kzAA==}
- '@types/node@22.8.6':
- resolution: {integrity: sha512-tosuJYKrIqjQIlVCM4PEGxOmyg3FCPa/fViuJChnGeEIhjA46oy8FMVoF9su1/v8PNs2a8Q0iFNyOx0uOF91nw==}
+ '@types/node@22.8.7':
+ resolution: {integrity: sha512-LidcG+2UeYIWcMuMUpBKOnryBWG/rnmOHQR5apjn8myTQcx3rinFRn7DcIFhMnS0PPFSC6OafdIKEad0lj6U0Q==}
'@types/normalize-package-data@2.4.4':
resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -5844,8 +5844,8 @@ packages:
resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
engines: {node: '>=10.0.0'}
- sonner@1.6.1:
- resolution: {integrity: sha512-0iD+eDJHyJitl069BC6wVDykQD56FMKk4TD6XkcCcikcDYaGsFKlSU0mZQXYWKPpFof3jlV/u4vGZc2KCqz8OQ==}
+ sonner@1.7.0:
+ resolution: {integrity: sha512-W6dH7m5MujEPyug3lpI2l3TC3Pp1+LTgK0Efg+IHDrBbtEjyCmCHHo6yfNBOsf1tFZ6zf+jceWwB38baC8yO9g==}
peerDependencies:
react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
@@ -6935,11 +6935,11 @@ snapshots:
'@colors/colors@1.5.0':
optional: true
- '@commitlint/cli@19.5.0(@types/node@22.8.6)(typescript@5.6.3)':
+ '@commitlint/cli@19.5.0(@types/node@22.8.7)(typescript@5.6.3)':
dependencies:
'@commitlint/format': 19.5.0
'@commitlint/lint': 19.5.0
- '@commitlint/load': 19.5.0(@types/node@22.8.6)(typescript@5.6.3)
+ '@commitlint/load': 19.5.0(@types/node@22.8.7)(typescript@5.6.3)
'@commitlint/read': 19.5.0
'@commitlint/types': 19.5.0
tinyexec: 0.3.0
@@ -6986,7 +6986,7 @@ snapshots:
'@commitlint/rules': 19.5.0
'@commitlint/types': 19.5.0
- '@commitlint/load@19.5.0(@types/node@22.8.6)(typescript@5.6.3)':
+ '@commitlint/load@19.5.0(@types/node@22.8.7)(typescript@5.6.3)':
dependencies:
'@commitlint/config-validator': 19.5.0
'@commitlint/execute-rule': 19.5.0
@@ -6994,7 +6994,7 @@ snapshots:
'@commitlint/types': 19.5.0
chalk: 5.3.0
cosmiconfig: 9.0.0(typescript@5.6.3)
- cosmiconfig-typescript-loader: 5.0.0(@types/node@22.8.6)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3)
+ cosmiconfig-typescript-loader: 5.0.0(@types/node@22.8.7)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3)
lodash.isplainobject: 4.0.6
lodash.merge: 4.6.2
lodash.uniq: 4.5.0
@@ -7622,7 +7622,7 @@ snapshots:
'@grpc/grpc-js@1.9.15':
dependencies:
'@grpc/proto-loader': 0.7.13
- '@types/node': 22.8.6
+ '@types/node': 22.8.7
'@grpc/proto-loader@0.7.13':
dependencies:
@@ -8840,7 +8840,7 @@ snapshots:
'@types/conventional-commits-parser@5.0.0':
dependencies:
- '@types/node': 22.8.6
+ '@types/node': 22.8.7
'@types/debug@4.1.12':
dependencies:
@@ -8848,7 +8848,7 @@ snapshots:
'@types/dns-packet@5.6.5':
dependencies:
- '@types/node': 22.8.6
+ '@types/node': 22.8.7
'@types/eslint-plugin-tailwindcss@3.17.0':
dependencies:
@@ -8899,7 +8899,7 @@ snapshots:
'@types/murmurhash3js-revisited@3.0.3': {}
- '@types/node@22.8.6':
+ '@types/node@22.8.7':
dependencies:
undici-types: 6.19.8
@@ -8920,7 +8920,7 @@ snapshots:
'@types/readable-stream@4.0.15':
dependencies:
- '@types/node': 22.8.6
+ '@types/node': 22.8.7
safe-buffer: 5.1.2
'@types/semver@7.5.8': {}
@@ -8935,11 +8935,11 @@ snapshots:
'@types/ws@8.5.12':
dependencies:
- '@types/node': 22.8.6
+ '@types/node': 22.8.7
'@types/yauzl@2.10.3':
dependencies:
- '@types/node': 22.8.6
+ '@types/node': 22.8.7
optional: true
'@typescript-eslint/eslint-plugin@8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3)':
@@ -9075,14 +9075,14 @@ snapshots:
'@ungap/structured-clone@1.2.0': {}
- '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.8.6))':
+ '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.8.7))':
dependencies:
'@babel/core': 7.25.2
'@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.25.2)
'@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.25.2)
'@types/babel__core': 7.20.5
react-refresh: 0.14.2
- vite: 5.4.10(@types/node@22.8.6)
+ vite: 5.4.10(@types/node@22.8.7)
transitivePeerDependencies:
- supports-color
@@ -9612,7 +9612,7 @@ snapshots:
chrome-launcher@1.1.0:
dependencies:
- '@types/node': 22.8.6
+ '@types/node': 22.8.7
escape-string-regexp: 4.0.0
is-wsl: 2.2.0
lighthouse-logger: 2.0.1
@@ -9804,9 +9804,9 @@ snapshots:
core-util-is@1.0.3: {}
- cosmiconfig-typescript-loader@5.0.0(@types/node@22.8.6)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3):
+ cosmiconfig-typescript-loader@5.0.0(@types/node@22.8.7)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3):
dependencies:
- '@types/node': 22.8.6
+ '@types/node': 22.8.7
cosmiconfig: 9.0.0(typescript@5.6.3)
jiti: 1.21.6
typescript: 5.6.3
@@ -12760,7 +12760,7 @@ snapshots:
'@protobufjs/path': 1.1.2
'@protobufjs/pool': 1.1.0
'@protobufjs/utf8': 1.1.0
- '@types/node': 22.8.6
+ '@types/node': 22.8.7
long: 5.2.3
protons-runtime@5.5.0:
@@ -13346,7 +13346,7 @@ snapshots:
transitivePeerDependencies:
- supports-color
- sonner@1.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+ sonner@1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
@@ -14035,12 +14035,12 @@ snapshots:
'@types/unist': 3.0.3
vfile-message: 4.0.2
- vite-node@2.1.3(@types/node@22.8.6):
+ vite-node@2.1.3(@types/node@22.8.7):
dependencies:
cac: 6.7.14
debug: 4.3.7
pathe: 1.1.2
- vite: 5.4.10(@types/node@22.8.6)
+ vite: 5.4.10(@types/node@22.8.7)
transitivePeerDependencies:
- '@types/node'
- less
@@ -14052,24 +14052,24 @@ snapshots:
- supports-color
- terser
- vite-plugin-svgr@4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)):
+ vite-plugin-svgr@4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.7)):
dependencies:
'@rollup/pluginutils': 5.1.3(rollup@4.21.3)
'@svgr/core': 8.1.0(typescript@5.6.3)
'@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.6.3))
- vite: 5.4.10(@types/node@22.8.6)
+ vite: 5.4.10(@types/node@22.8.7)
transitivePeerDependencies:
- rollup
- supports-color
- typescript
- vite@5.4.10(@types/node@22.8.6):
+ vite@5.4.10(@types/node@22.8.7):
dependencies:
esbuild: 0.21.5
postcss: 8.4.47
rollup: 4.21.3
optionalDependencies:
- '@types/node': 22.8.6
+ '@types/node': 22.8.7
fsevents: 2.3.3
watchpack@2.4.1:
@@ -14254,7 +14254,7 @@ snapshots:
bufferutil: 4.0.8
utf-8-validate: 6.0.4
- wxt@0.19.13(@types/node@22.8.6)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4):
+ wxt@0.19.13(@types/node@22.8.7)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4):
dependencies:
'@aklinker1/rollup-plugin-visualizer': 5.12.0(rollup@4.21.3)
'@types/chrome': 0.0.269
@@ -14297,8 +14297,8 @@ snapshots:
publish-browser-extension: 2.2.2
scule: 1.3.0
unimport: 3.13.1(rollup@4.21.3)
- vite: 5.4.10(@types/node@22.8.6)
- vite-node: 2.1.3(@types/node@22.8.6)
+ vite: 5.4.10(@types/node@22.8.7)
+ vite-node: 2.1.3(@types/node@22.8.7)
web-ext-run: 0.2.1(bufferutil@4.0.8)(utf-8-validate@6.0.4)
webextension-polyfill: 0.12.0
transitivePeerDependencies:
diff --git a/src/app/content/index.tsx b/src/app/content/index.tsx
index 20a2d77..153f9c6 100644
--- a/src/app/content/index.tsx
+++ b/src/app/content/index.tsx
@@ -14,7 +14,9 @@ import { ToastImpl } from '@/domain/impls/Toast'
// import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
import { PeerRoomImpl } from '@/domain/impls/PeerRoom2'
import '@/assets/styles/tailwind.css'
+// Remove import after merging: https://github.com/emilkowalski/sonner/pull/508
import '@/assets/styles/sonner.css'
+import '@/assets/styles/overlay.css'
import NotificationDomain from '@/domain/Notification'
import { createElement } from '@/utils'
@@ -56,13 +58,13 @@ export default defineContentScript({
container.append(app)
const root = createRoot(app)
root.render(
- //
-
-
-
-
-
- //
+
+
+
+
+
+
+
)
return root
},
diff --git a/src/app/content/views/AppButton/index.tsx b/src/app/content/views/AppButton/index.tsx
index b3ba407..0d463c2 100644
--- a/src/app/content/views/AppButton/index.tsx
+++ b/src/app/content/views/AppButton/index.tsx
@@ -18,7 +18,7 @@ import LogoIcon6 from '@/assets/images/logo-6.svg'
import AppStatusDomain from '@/domain/AppStatus'
import { getDay } from 'date-fns'
import { messenger } from '@/messenger'
-import useDarg from '@/hooks/useDarg'
+import useDraggable from '@/hooks/useDraggable'
import useWindowResize from '@/hooks/useWindowResize'
export interface AppButtonProps {
@@ -45,7 +45,7 @@ const AppButton: FC = ({ className }) => {
x,
y,
setRef: appButtonRef
- } = useDarg({
+ } = useDraggable({
initX: appPosition.x,
initY: appPosition.y,
minX: 50,
diff --git a/src/app/options/App.tsx b/src/app/options/App.tsx
index 7256647..87d6036 100644
--- a/src/app/options/App.tsx
+++ b/src/app/options/App.tsx
@@ -16,7 +16,7 @@ function App() {
-
+
diff --git a/src/assets/styles/overlay.css b/src/assets/styles/overlay.css
new file mode 100644
index 0000000..e87bf00
--- /dev/null
+++ b/src/assets/styles/overlay.css
@@ -0,0 +1,17 @@
+section[aria-live='polite'] {
+ display: contents;
+}
+
+:where([data-sonner-toaster]) {
+ max-width: 300px;
+ position: absolute;
+ display: flex;
+ justify-content: center;
+}
+
+:where([data-sonner-toast][data-styled='true']) {
+ max-width: 300px;
+ padding: 6px 12px;
+ border-radius: 9999px;
+ width: fit-content;
+}
diff --git a/src/assets/styles/sonner.css b/src/assets/styles/sonner.css
index e8696b3..1be4594 100644
--- a/src/assets/styles/sonner.css
+++ b/src/assets/styles/sonner.css
@@ -61,6 +61,17 @@
list-style: none;
outline: none;
z-index: 999999999;
+ transition: transform 400ms ease;
+}
+
+:where([data-sonner-toaster][data-lifted='true']) {
+ transform: translateY(-10px);
+}
+
+@media (hover: none) and (pointer: coarse) {
+ :where([data-sonner-toaster][data-lifted='true']) {
+ transform: none;
+ }
}
:where([data-sonner-toaster][data-x-position='right']) {
@@ -234,7 +245,6 @@
justify-content: center;
align-items: center;
padding: 0;
- background: var(--gray1);
color: var(--gray12);
border: 1px solid var(--gray4);
transform: var(--toast-close-button-transform);
@@ -247,6 +257,10 @@
border-color 200ms;
}
+[data-sonner-toast] [data-close-button] {
+ background: var(--gray1);
+}
+
:where([data-sonner-toast]) :where([data-close-button]):focus-visible {
box-shadow:
0px 4px 12px rgba(0, 0, 0, 0.1),
@@ -359,6 +373,10 @@
transition: none;
}
+[data-sonner-toast][data-swiped='true'] {
+ user-select: none;
+}
+
[data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'],
[data-sonner-toast][data-swipe-out='true'][data-y-position='top'] {
animation: swipe-out 200ms ease-out forwards;
@@ -662,26 +680,7 @@
transform 200ms;
}
-section:has([data-sonner-toaster]) {
- display: contents;
-}
-
.sonner-loader[data-visible='false'] {
opacity: 0;
transform: scale(0.8) translate(-50%, -50%);
}
-
-/* Custom styles */
-:where([data-sonner-toaster]) {
- max-width: 300px;
- position: absolute;
- display: flex;
- justify-content: center;
-}
-
-:where([data-sonner-toast][data-styled='true']) {
- max-width: 300px;
- padding: 6px 12px;
- border-radius: 9999px;
- width: fit-content;
-}
diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index e253907..b955284 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -73,6 +73,7 @@
* {
@apply border-border;
}
+
:host,
:root {
@apply !bg-background !text-foreground !text-base !visible;
diff --git a/src/domain/Room.ts b/src/domain/Room.ts
index 6a57d53..5a17d97 100644
--- a/src/domain/Room.ts
+++ b/src/domain/Room.ts
@@ -506,7 +506,7 @@ const RoomDomain = Remesh.domain({
impl: ({ get }) => {
const onLeaveRoom$ = fromEventPattern(peerRoom.onLeaveRoom).pipe(
map((peerId) => {
- console.log('onLeaveRoom', peerId, get(SelfUserQuery()).peerId)
+ // console.log('onLeaveRoom', peerId)
const user = get(UserListQuery()).find((user) => user.peerId === peerId)
if (user) {
@@ -550,8 +550,6 @@ const RoomDomain = Remesh.domain({
impl: ({ get }) => {
const beforeUnload$ = fromEvent(window, 'beforeunload').pipe(
map(() => {
- console.log('beforeunload')
-
return get(JoinStatusModule.query.IsFinishedQuery()) ? LeaveRoomCommand() : null
})
)
diff --git a/src/hooks/useDarg.ts b/src/hooks/useDraggable.ts
similarity index 97%
rename from src/hooks/useDarg.ts
rename to src/hooks/useDraggable.ts
index eba7a14..6c12161 100644
--- a/src/hooks/useDarg.ts
+++ b/src/hooks/useDraggable.ts
@@ -10,7 +10,7 @@ export interface DargOptions {
minY: number
}
-const useDarg = (options: DargOptions) => {
+const useDraggable = (options: DargOptions) => {
const { initX, initY, maxX = 0, minX = 0, maxY = 0, minY = 0 } = options
const mousePosition = useRef({ x: 0, y: 0 })
@@ -91,4 +91,4 @@ const useDarg = (options: DargOptions) => {
return { setRef, ...position }
}
-export default useDarg
+export default useDraggable