Merge branch 'master' of https://github.com/evansloan/collectionlog.net

evansloan · Apr 10, 2024 · b858d9c · b858d9c
2 parents a98a761 + fd9a2da
commit b858d9c
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 27 deletions.
diff --git a/components/collection-log/collection-log-items.tsx b/components/collection-log/collection-log-items.tsx
@@ -4,17 +4,17 @@ import Item from '@/components/item';
 import { OpenView } from '@/lib/hooks';
 import { cn } from '@/lib/utils';
 
-interface CollectionLogItemsProps {
+interface CollectionLogItemsProps extends React.InputHTMLAttributes<HTMLDivElement> {
   activeOpenView: OpenView;
   showQuantity: boolean;
-  className?: string;
 }
 
-const CollectionLogItems = ({
+const CollectionLogItems = React.forwardRef<HTMLDivElement, CollectionLogItemsProps>(({
   activeOpenView,
   showQuantity,
   className,
-}: CollectionLogItemsProps) => {
+  onScroll,
+}, ref) => {
   const {
     page: {
       name: pageName,
@@ -35,7 +35,7 @@ const CollectionLogItems = ({
     <div
       className={cn(
         'col-span-4 flex h-full flex-col overflow-hidden md:col-span-3',
-        className
+        className,
       )}
     >
       <div className='border-b border-b-lighter px-2 text-rs-orange shadow-log '>
@@ -52,7 +52,11 @@ const CollectionLogItems = ({
           </p>
         ))}
       </div>
-      <div className='scroll-log grid flex-1 grid-cols-2 content-start gap-y-4 overflow-y-auto px-2 py-3 shadow-log sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6'>
+      <div
+        className='scroll-log grid flex-1 grid-cols-2 content-start gap-y-4 overflow-y-auto px-2 py-3 shadow-log sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6'
+        onScroll={onScroll}
+        ref={ref}
+      >
         {items.map((item, i) => (
           <Item
             key={`${item.name}-log-${i}`}
@@ -66,6 +70,7 @@ const CollectionLogItems = ({
       </div>
     </div>
   );
-};
+});
+CollectionLogItems.displayName = 'CollectionLogItems';
 
 export default CollectionLogItems;
diff --git a/components/compare/compare-content.tsx b/components/compare/compare-content.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import React, { RefObject, useEffect, useRef, useState } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 import {
@@ -12,6 +12,7 @@ import {
 import { UserTypeahead } from '@/components/typeahead';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   CollectionLogFull,
@@ -44,6 +45,9 @@ const CompareContent = ({ data1, data2, startPage }: CompareContentProps) => {
     sortCollectionLog(collectionLog)
   );
 
+  const container1Ref = useRef<HTMLDivElement>(null);
+  const container2Ref = useRef<HTMLDivElement>(null);
+
   const { tabs: tabs1 } = collectionLog1;
   const { tabs: tabs2 } = collectionLog2;
 
@@ -65,6 +69,8 @@ const CompareContent = ({ data1, data2, startPage }: CompareContentProps) => {
     updateViewByPage: updateViewByPage2,
   } = useCollectionLogView(collectionLog2, startPage);
 
+  const [syncScroll, setSyncScroll] = useState(true);
+
   const onTabClick = (tabName: string) => {
     updateViewByTab1(tabName);
     updateViewByTab2(tabName);
@@ -75,6 +81,24 @@ const CompareContent = ({ data1, data2, startPage }: CompareContentProps) => {
     updateViewByPage2(pageName);
   };
 
+  const onContainerScroll = (
+    containerRef: RefObject<HTMLDivElement>,
+    scrollValue: number
+  ) => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    if (!syncScroll) {
+      return;
+    }
+
+    containerRef.current.scrollTo({
+      top: scrollValue,
+      behavior: 'smooth'
+    });
+  };
+
   useEffect(() => {
     replaceUrl(`/compare/${username1}/${username2}/${activePageName}`);
   }, [activePageName, username1, username2]);
@@ -121,25 +145,34 @@ const CompareContent = ({ data1, data2, startPage }: CompareContentProps) => {
             defaultRankType={settings1.displayRank}
           />
         </CollectionLogProvider>
-        <div className='col-span-2 flex flex-col items-center justify-around border-b-4 xl:flex-row'>
-          <UserTypeahead
-            navigateTo={(username) => `/compare/${username}/${username2}`}
-            usePopover
-          >
-            <Button>
-              <ChevronLeft className='h-4 w-4' />
-              Change user 1
-            </Button>
-          </UserTypeahead>
-          <UserTypeahead
-            navigateTo={(username) => `/compare/${username1}/${username}`}
-            usePopover
-          >
-            <Button>
-              Change user 2
-              <ChevronRight className='h-4 w-4' />
-            </Button>
-          </UserTypeahead>
+        <div className='col-span-2 flex flex-col items-center gap-y-2 border-b-4 py-2'>
+          <div className='flex flex-col gap-x-2 xl:flex-row'>
+            <UserTypeahead
+              navigateTo={(username) => `/compare/${username}/${username2}`}
+              usePopover
+            >
+              <Button>
+                <ChevronLeft className='h-4 w-4' />
+                Change user 1
+              </Button>
+            </UserTypeahead>
+            <UserTypeahead
+              navigateTo={(username) => `/compare/${username1}/${username}`}
+              usePopover
+            >
+              <Button>
+                Change user 2
+                <ChevronRight className='h-4 w-4' />
+              </Button>
+            </UserTypeahead>
+          </div>
+          <div className='flex items-center gap-x-1'>
+            <Checkbox
+              checked={syncScroll}
+              onCheckedChange={() => setSyncScroll(!syncScroll)}
+            />
+            <p>Scroll items simultaneously</p>
+          </div>
         </div>
         <CollectionLogProvider collectionLog={collectionLog2}>
           <CollectionLogHeader
@@ -172,6 +205,10 @@ const CompareContent = ({ data1, data2, startPage }: CompareContentProps) => {
                 className='col-span-3'
                 activeOpenView={openView1}
                 showQuantity={settings1.showQuantity}
+                onScroll={(e) =>
+                  onContainerScroll(container2Ref, e.currentTarget.scrollTop)
+                }
+                ref={container1Ref}
               />
               <CollectionLogPageList
                 className='col-span-8 border-x text-center md:col-span-2'
@@ -184,6 +221,10 @@ const CompareContent = ({ data1, data2, startPage }: CompareContentProps) => {
                 className='col-span-3'
                 activeOpenView={openView2}
                 showQuantity={settings2.showQuantity}
+                onScroll={(e) =>
+                  onContainerScroll(container1Ref, e.currentTarget.scrollTop)
+                }
+                ref={container2Ref}
               />
             </TabsContent>
           ))}

diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Check className='h-4 w-4' />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@next/third-parties": "^14.1.1",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",