feat: remixify

.eslintignore

@@ -3,3 +3,4 @@
 node_modules
 dist
 public
+build

.eslintrc.js

@@ -1,6 +1,3 @@
-/**
- * @type {import('eslint').Linter.Config}
- */
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
@@ -36,10 +33,19 @@ module.exports = {
     },
     {
       files: ['./apps/web/**/*'],
-      extends: ['next/core-web-vitals'],
+      plugins: ['react'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended'
+      ],
+      settings: {
+        react: {
+          version: 'detect'
+        }
+      },
       rules: {
-        'react/no-children-prop': ['warn', { allowFunctions: true }],
-        '@next/next/no-img-element': 'off'
+        'react/prop-types': 'off'
       }
     }
   ]

apps/web/.gitignore

@@ -2,20 +2,7 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
 
-# testing
-/coverage
-
-# database
-/prisma/db.sqlite
-/prisma/db.sqlite-journal
-
-# next.js
-/.next/
-/out/
-next-env.d.ts
 
 # production
 /build
@@ -35,8 +22,4 @@ yarn-error.log*
 .env
 .env*.local
 
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
+public/entry.worker.js

apps/web/src/components/avatar-crop.tsx → apps/web/app/components/avatar-crop.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import ReactCrop, {
   centerCrop,
   makeAspectCrop,
@@ -92,7 +90,6 @@ export default function AvatarCrop({
         aspect={1}
         ruleOfThirds={true}
         circularCrop={true}>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={imageSrc}
           className="origin-center transition-transform duration-100 ease-linear will-change-transform"

apps/web/src/components/avatar-plus.tsx → apps/web/app/components/avatar-plus.tsx

@@ -1,4 +1,3 @@
-'use client';
 import {
   HoverCard,
   HoverCardContent,

apps/web/src/components/avatar.tsx → apps/web/app/components/avatar.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   AddressBook,
   At,
@@ -9,8 +7,8 @@ import {
   UsersThree
 } from '@phosphor-icons/react';
 import { Tooltip, TooltipContent, TooltipTrigger } from './shadcn-ui/tooltip';
-import { cn, generateAvatarUrl, getInitials } from '@/src/lib/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { cn, generateAvatarUrl, getInitials } from '@/lib/utils';
 import { type TypeId, inferTypeId } from '@u22n/utils/typeid';
 import * as AvatarPrimitives from './shadcn-ui/avatar';
 import * as React from 'react';

apps/web/src/components/copy-button.tsx → apps/web/app/components/copy-button.tsx

@@ -1,6 +1,4 @@
-'use client';
-
-import { Button, type ButtonProps } from '@/src/components/shadcn-ui/button';
+import { Button, type ButtonProps } from '@/components/shadcn-ui/button';
 import { type ElementRef, forwardRef, useState } from 'react';
 import { Check, Copy } from '@phosphor-icons/react';
 import { cn, copyToClipboard } from '../lib/utils';

apps/web/src/components/editor/index.tsx → apps/web/app/components/editor/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   EditorRoot,
   EditorCommand,
@@ -22,10 +20,10 @@ import {
   TextButtons
 } from './selectors';
 import { handleCommandNavigation } from '@u22n/tiptap/extensions/slash-command';
-import { useInlineUploader } from '@/src/hooks/use-inline-uploader';
 import { slashCommand, suggestionItems } from './slash-commands';
+import { useInlineUploader } from '@/hooks/use-inline-uploader';
 import { createExtensionSet } from '@u22n/tiptap/extensions';
-import { useIsMobile } from '@/src/hooks/use-is-mobile';
+import { useIsMobile } from '@/hooks/use-is-mobile';
 import { forwardRef, memo, useState } from 'react';
 
 const tipTapExtensions = createExtensionSet({

apps/web/src/components/editor/selectors.tsx → apps/web/app/components/editor/selectors.tsx

@@ -15,19 +15,19 @@ import {
   type Icon,
   Trash
 } from '@phosphor-icons/react';
-import {
-  PopoverContent,
-  Popover,
-  PopoverTrigger
-} from '@/src/components/shadcn-ui/popover';
 import {
   type EditorInstance,
   EditorBubbleItem,
   useEditor
 } from '@u22n/tiptap/components';
+import {
+  PopoverContent,
+  Popover,
+  PopoverTrigger
+} from '@/components/shadcn-ui/popover';
 import { Button } from '../shadcn-ui/button';
 import { useEffect, useRef } from 'react';
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
 
 export const TextButtons = () => {

apps/web/src/components/editor/slash-commands.tsx → apps/web/app/components/editor/slash-commands.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   TextAlignLeft,
   TextHOne,

apps/web/src/components/modifier-class-provider.tsx → apps/web/app/components/modifier-class-provider.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useRef, useState } from 'react';
 
 const genState = (e: KeyboardEvent | null) => {

apps/web/src/components/password-input.tsx → apps/web/app/components/password-input.tsx

@@ -1,8 +1,6 @@
-'use client';
-
-import { Input, type InputProps } from '@/src/components/shadcn-ui/input';
+import { Input, type InputProps } from '@/components/shadcn-ui/input';
 import { type ElementRef, forwardRef, useState } from 'react';
-import { Button } from '@/src/components/shadcn-ui/button';
+import { Button } from '@/components/shadcn-ui/button';
 import { Eye, EyeSlash } from '@phosphor-icons/react';
 import { cn } from '../lib/utils';
 

apps/web/src/components/posthog-page-view.tsx → apps/web/app/components/posthog-page-view.tsx

@@ -1,12 +1,10 @@
-'use client';
-
-import { usePathname, useSearchParams } from 'next/navigation';
+import { useSearchParams, useLocation } from '@remix-run/react';
 import { usePostHog } from 'posthog-js/react';
 import { useEffect } from 'react';
 
-export default function PostHogPageView(): null {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
+export function PostHogPageView() {
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
   const posthog = usePostHog();
   useEffect(() => {
     // Track pageviews

apps/web/app/components/pwa-manager.tsx

@@ -0,0 +1,39 @@
+import { useNetworkConnectivity, usePWAManager } from '@remix-pwa/client';
+import { sendSkipWaitingMessage } from '@remix-pwa/sw';
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+
+export function PWAManager() {
+  const { updateAvailable, swUpdate } = usePWAManager();
+
+  useEffect(() => {
+    if (updateAvailable) {
+      toast.info('Update available!', {
+        id: 'update-available',
+        duration: Infinity,
+        description: 'There is a new version of UnInbox available.',
+        action: {
+          label: 'Update',
+          onClick: () => {
+            if (swUpdate.newWorker) sendSkipWaitingMessage(swUpdate.newWorker);
+            window.location.reload();
+          }
+        }
+      });
+    }
+  }, [swUpdate.newWorker, updateAvailable]);
+
+  useNetworkConnectivity({
+    onOffline: () => {
+      toast.warning(
+        'Looks like you are offline. Please check your internet connection.',
+        { id: 'offline-warning', duration: Infinity }
+      );
+    },
+    onOnline: () => {
+      toast.dismiss('offline-warning');
+    }
+  });
+
+  return null;
+}

apps/web/src/components/shadcn-ui/accordion.tsx → apps/web/app/components/shadcn-ui/accordion.tsx

@@ -2,7 +2,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { CaretDown } from '@phosphor-icons/react';
 import * as React from 'react';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 const Accordion = AccordionPrimitive.Root;
 

apps/web/src/components/shadcn-ui/alert-dialog.tsx → apps/web/app/components/shadcn-ui/alert-dialog.tsx

@@ -1,8 +1,8 @@
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as React from 'react';
 
-import { buttonVariants } from '@/src/components/shadcn-ui/button';
-import { cn } from '@/src/lib/utils';
+import { buttonVariants } from '@/components/shadcn-ui/button';
+import { cn } from '@/lib/utils';
 
 const AlertDialog = AlertDialogPrimitive.Root;
 

apps/web/src/components/shadcn-ui/alert.tsx → apps/web/app/components/shadcn-ui/alert.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { X } from '@phosphor-icons/react';
-import { cn } from '@/src/lib/utils';
 import { Button } from './button';
+import { cn } from '@/lib/utils';
 import * as React from 'react';
 
 const alertVariants = cva(

apps/web/src/components/shadcn-ui/avatar.tsx → apps/web/app/components/shadcn-ui/avatar.tsx

@@ -1,7 +1,7 @@
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as React from 'react';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 //! This component has been modified
 

apps/web/src/components/shadcn-ui/badge.tsx → apps/web/app/components/shadcn-ui/badge.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import type * as React from 'react';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',

apps/web/src/components/shadcn-ui/breadcrumb.tsx → apps/web/app/components/shadcn-ui/breadcrumb.tsx

@@ -2,7 +2,7 @@ import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
 
 import { CaretRight, DotsThree } from '@phosphor-icons/react';
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,

apps/web/src/components/shadcn-ui/button.tsx → apps/web/app/components/shadcn-ui/button.tsx

@@ -3,7 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
 
 import { SpinnerGap } from '@phosphor-icons/react';
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 //! This component has been modified from the original version in the shadcn-ui package
 

apps/web/src/components/shadcn-ui/card.tsx → apps/web/app/components/shadcn-ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,

apps/web/src/components/shadcn-ui/checkbox.tsx → apps/web/app/components/shadcn-ui/checkbox.tsx

@@ -2,7 +2,7 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Check } from '@phosphor-icons/react';
 import * as React from 'react';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

apps/web/src/components/shadcn-ui/command.tsx → apps/web/app/components/shadcn-ui/command.tsx

@@ -1,8 +1,8 @@
-import { Dialog, DialogContent } from '@/src/components/shadcn-ui/dialog';
+import { Dialog, DialogContent } from '@/components/shadcn-ui/dialog';
 import { type DialogProps } from '@radix-ui/react-dialog';
 import { MagnifyingGlass } from '@phosphor-icons/react';
 import { Command as CommandPrimitive } from 'cmdk';
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 import * as React from 'react';
 
 const Command = React.forwardRef<
@@ -40,6 +40,7 @@ const CommandInput = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     className="flex items-center border-b px-3"
+    // eslint-disable-next-line react/no-unknown-property
     cmdk-input-wrapper="">
     <MagnifyingGlass className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input

apps/web/src/components/shadcn-ui/context-menu.tsx → apps/web/app/components/shadcn-ui/context-menu.tsx

@@ -1,9 +1,8 @@
-'use client';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as React from 'react';
 
 import { CaretRight, Check, Dot } from '@phosphor-icons/react';
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 const ContextMenu = ContextMenuPrimitive.Root;
 

apps/web/src/components/shadcn-ui/dialog.tsx → apps/web/app/components/shadcn-ui/dialog.tsx

@@ -2,7 +2,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from '@phosphor-icons/react';
 import * as React from 'react';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 const Dialog = DialogPrimitive.Root;
 

apps/web/src/components/shadcn-ui/drawer.tsx → apps/web/app/components/shadcn-ui/drawer.tsx

@@ -1,7 +1,7 @@
 import { Drawer as DrawerPrimitive } from 'vaul';
 import * as React from 'react';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 //! This component has been modified
 //! styling added for Right direction #L53

apps/web/src/components/shadcn-ui/dropdown-menu.tsx → apps/web/app/components/shadcn-ui/dropdown-menu.tsx

@@ -2,7 +2,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, CaretRight, Circle } from '@phosphor-icons/react';
 import * as React from 'react';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

apps/web/src/components/shadcn-ui/form.tsx → apps/web/app/components/shadcn-ui/form.tsx

@@ -10,8 +10,8 @@ import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
 
-import { Label } from '@/src/components/shadcn-ui/label';
-import { cn } from '@/src/lib/utils';
+import { Label } from '@/components/shadcn-ui/label';
+import { cn } from '@/lib/utils';
 
 const Form = FormProvider;
 

apps/web/src/components/shadcn-ui/hover-card.tsx → apps/web/app/components/shadcn-ui/hover-card.tsx

@@ -1,7 +1,7 @@
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import * as React from 'react';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@/lib/utils';
 
 const HoverCard = HoverCardPrimitive.Root;