clean up & update dependencies

package.json

@@ -29,11 +29,11 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
     "react-markdown": "^8.0.7",
-    "react-virtuoso": "^4.3.5",
+    "react-virtuoso": "^4.3.6",
     "remark-gfm": "^3.0.1",
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",
-    "slate-react": "^0.94.0",
+    "slate-react": "^0.94.2",
     "swr": "^2.1.5",
     "tailwind-merge": "^1.12.0",
     "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql",
@@ -41,15 +41,15 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
-    "@tauri-apps/cli": "^1.3.0",
+    "@tauri-apps/cli": "^1.3.1",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/node": "^18.16.5",
+    "@types/node": "^18.16.9",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@types/youtube-player": "^5.5.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.5",
-    "@vitejs/plugin-react-swc": "^3.3.0",
+    "@vitejs/plugin-react-swc": "^3.3.1",
     "autoprefixer": "^10.4.14",
     "cross-env": "^7.0.3",
     "csstype": "^3.1.2",

src/app/channel/components/createModal.tsx

@@ -106,7 +106,7 @@ export default function ChannelCreateModal() {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
           </Transition.Child>
           <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
             <Transition.Child
@@ -202,7 +202,7 @@ export default function ChannelCreateModal() {
                       <div>
                         <button
                           disabled
-                          className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-zinc-900 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2"
+                          className="relative inline-flex h-6 w-11 flex-shrink-0  rounded-full border-2 border-transparent bg-zinc-900 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2"
                           role="switch"
                           aria-checked="false"
                         >

src/app/channel/components/messages/hideButton.tsx

@@ -77,7 +77,7 @@ export default function MessageHideButton({ id }: { id: string }) {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
           </Transition.Child>
           <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
             <Transition.Child

src/app/channel/components/messages/muteButton.tsx

@@ -76,7 +76,7 @@ export default function MessageMuteButton({ pubkey }: { pubkey: string }) {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
           </Transition.Child>
           <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
             <Transition.Child

src/app/channel/components/updateModal.tsx

@@ -99,7 +99,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
           </Transition.Child>
           <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
             <Transition.Child
@@ -195,7 +195,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
                       <div>
                         <button
                           disabled
-                          className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-zinc-900 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2"
+                          className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-zinc-900 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2"
                           role="switch"
                           aria-checked="false"
                         >

src/app/note/components/mentions/user.tsx

@@ -5,7 +5,5 @@ export function MentionUser(props: { children: any[] }) {
   const pubkey = props.children[0];
   const { user } = useProfile(pubkey);
 
-  return (
+  return <span className="text-fuchsia-500">@{user?.name || user?.display_name || shortenKey(pubkey)}</span>;
-    <span className="cursor-pointer text-fuchsia-500">@{user?.name || user?.display_name || shortenKey(pubkey)}</span>
-  );
 }

src/app/note/components/metadata/reply.tsx

@@ -73,7 +73,7 @@ export default function NoteReply({ id, replies }: { id: string; replies: number
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
           </Transition.Child>
           <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
             <Transition.Child

src/app/today/components/views/createModal.tsx

@@ -38,7 +38,7 @@ export function CreateViewModal() {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
           </Transition.Child>
           <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
             <Transition.Child

src/renderer/index.css

@@ -9,6 +9,14 @@
   }
 }
 
+a {
+  @apply cursor-default;
+}
+
+button {
+  @apply cursor-default focus:outline-none;
+}
+
 /* For Webkit-based browsers (Chrome, Safari and Opera) */
 .scrollbar-hide::-webkit-scrollbar {
   display: none;

src/shared/avatarUploader.tsx

@@ -51,7 +51,7 @@ export function AvatarUploader({ valueState }: { valueState: any }) {
     <button
       onClick={() => openFileDialog()}
       type="button"
-      className="inline-flex h-6 cursor-pointer items-center justify-center rounded bg-zinc-900 px-3 text-xs font-medium text-zinc-200 ring-1 ring-zinc-800 hover:bg-zinc-700"
+      className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-xs font-medium text-zinc-200 ring-1 ring-zinc-800 hover:bg-zinc-700"
     >
       {loading ? (
         <svg

src/shared/composer/imageUploader.tsx

@@ -100,7 +100,7 @@ export function ImageUploader() {
       type="button"
       autoFocus={false}
       onClick={() => openFileDialog()}
-      className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-zinc-800"
+      className="inline-flex h-8 w-8 items-center justify-center rounded hover:bg-zinc-800"
     >
       {loading ? (
         <svg

src/shared/composer/modal.tsx

@@ -50,7 +50,7 @@ export function ComposerModal() {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
           </Transition.Child>
           <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
             <Transition.Child
@@ -76,7 +76,7 @@ export function ComposerModal() {
                   </div>
                   <div
                     onClick={closeModal}
-                    className="inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded hover:bg-zinc-800"
+                    className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
                   >
                     <CancelIcon width={16} height={16} className="text-zinc-500" />
                   </div>

src/shared/form/imagePicker.tsx

@@ -74,7 +74,7 @@ export function ImagePicker({ type }: { type: string }) {
   return (
     <button
       onClick={() => openFileDialog()}
-      className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700"
+      className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-700"
     >
       {loading ? (
         <svg

src/shared/multiAccounts.tsx

@@ -23,7 +23,7 @@ export default function MultiAccounts() {
         <div className="flex flex-col gap-2">
           <>
             {!activeAccount ? (
-              <div className="group relative flex h-10 w-10 shrink animate-pulse cursor-pointer items-center justify-center rounded-lg bg-zinc-900"></div>
+              <div className="group relative flex h-10 w-10 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900"></div>
             ) : (
               <ActiveAccount user={activeAccount} />
             )}
@@ -31,7 +31,7 @@ export default function MultiAccounts() {
           <div>
             <button
               type="button"
-              className="group relative flex h-10 w-10 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
+              className="group relative flex h-10 w-10 shrink items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
             >
               <BellIcon width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
             </button>
@@ -41,7 +41,7 @@ export default function MultiAccounts() {
         <div className="flex flex-col gap-3">
           <>
             {!accounts ? (
-              <div className="group relative flex h-10 w-10 shrink animate-pulse cursor-pointer items-center justify-center rounded-lg bg-zinc-900"></div>
+              <div className="group relative flex h-10 w-10 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900"></div>
             ) : (
               accounts.map((account: { is_active: number; pubkey: string }) => (
                 <InactiveAccount key={account.pubkey} user={account} />
@@ -50,7 +50,7 @@ export default function MultiAccounts() {
           </>
           <button
             type="button"
-            className="group relative flex h-10 w-10 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-transparent hover:border-zinc-600"
+            className="group relative flex h-10 w-10 shrink items-center justify-center rounded-lg border-2 border-dashed border-transparent hover:border-zinc-600"
           >
             <PlusIcon width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
           </button>

src/shared/navigation.tsx

@@ -61,7 +61,7 @@ export default function Navigation() {
       <Disclosure defaultOpen={true}>
         {({ open }) => (
           <div className="flex flex-col gap-0.5 px-1.5">
-            <Disclosure.Button className="flex cursor-pointer items-center gap-1 px-2.5">
+            <Disclosure.Button className="flex items-center gap-1 px-2.5">
               <div
                 className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
                   open ? '' : 'rotate-180'
@@ -81,7 +81,7 @@ export default function Navigation() {
       <Disclosure defaultOpen={true}>
         {({ open }) => (
           <div className="flex flex-col gap-0.5 px-1.5">
-            <Disclosure.Button className="flex cursor-pointer items-center gap-1 px-2.5">
+            <Disclosure.Button className="flex items-center gap-1 px-2.5">
               <div
                 className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
                   open ? '' : 'rotate-180'

tailwind.config.js

@@ -17,14 +17,6 @@ module.exports = {
           inset 0px 0px 0px 1px var(--tw-shadow-color),
           inset 0px 1px 0px var(--tw-shadow-color)
         `,
-        modal: `
-          0 -2px 6px hsl(0deg 0% 100% / 17%),
-          0 5px 18px rgb(0 0 0 / 40%),
-          0 4px 40px 8px rgb(0 0 0 / 40%),
-          0 1px 4px -1px rgb(0 0 0 / 30%),
-          inset 0 0 0 0.3px hsl(0deg 0% 100% / 30%),
-          0 0 0 0.5px hsl(0deg 0% 100% / 40%);
-        `,
         popover: `0px 0px 7px rgba(0,0,0,0.52)`,
         inner: `
           0 2px 2px rgb(4 4 7 / 45%),
@@ -43,43 +35,10 @@ module.exports = {
           rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset
         `,
       },
-      backgroundColor: {
-        'near-black': '#07070d',
-        'white/2.5': 'hsla(0,0%,100%,.025)',
-      },
       backgroundImage: {
-        'gradient-conic': 'conic-gradient(var(--tw-gradient-stops))',
         fade: 'linear-gradient(120deg, #000, transparent 30%, transparent 70%, #000)',
       },
       keyframes: {
-        disco: {
-          '0%': { transform: 'translateY(-50%) rotate(0deg)' },
-          '100%': { transform: 'translateY(-50%) rotate(360deg)' },
-        },
-        overlayShow: {
-          from: { opacity: 0 },
-          to: { opacity: 1 },
-        },
-        contentShow: {
-          from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
-          to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
-        },
-        slideDownAndFade: {
-          from: { opacity: 0, transform: 'translateY(-2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideLeftAndFade: {
-          from: { opacity: 0, transform: 'translateX(2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-        slideUpAndFade: {
-          from: { opacity: 0, transform: 'translateY(2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideRightAndFade: {
-          from: { opacity: 0, transform: 'translateX(2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
         moveBg: {
           '0%': { backgroundPosition: '50px' },
           '20%': { backgroundPosition: '150px' },
@@ -90,13 +49,6 @@ module.exports = {
         },
       },
       animation: {
-        disco: 'disco 1.5s linear infinite',
-        overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
         moveBg: 'moveBg 3s ease-in-out infinite alternate running forwards',
       },
     },