feat: remove text and other information from user entries on mobile (#72)

* work

* fix

* upd

* in library

app/(app)/_components/loggedIn.tsx

···
 import AddLog from '@/components/addLog';
 import { Sidebar, SidebarFooter } from '@/components/sidebar';
 import { Button } from '@/components/ui/button';
-import { User } from '@prisma/client';
-import { Bug, MessageCircle, Plus, Send, Sparkles, Wand2 } from 'lucide-react';
 import { ReactNode } from 'react';
 import { Toaster } from 'sonner';
 import { SidebarButtons } from '../_components/sidebar';
 import { useAppStore } from '../state';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { Label } from '@/components/ui/label';
-import Link from 'next/link';
-import { Toggle } from '@/components/ui/toggle';
 import { Feedback } from './feedback';
+import { Plus } from 'lucide-react';
 
 export const LoggedIn = ({
   children,

app/(app)/community/feed/page.tsx

···
 import { EntryRedirect } from '../../_components/EntryIslandContext';
 import { Badge } from '@/components/ui/badge';
 import { Loader2 } from 'lucide-react';
+import InLibrary from '@/components/inLibrary';
 
 const Page = () => {
   const feed = api.community.getFeed.useInfiniteQuery(
···
                     backgroundImage: entry.entry.posterPath,
                     releaseDate: entry.entry.releaseDate,
                     category: entry.entry.category,
-                    topRight: entry.hasUserEntry && (
-                      <Badge variant={'secondary'}>In Library</Badge>
-                    ),
+                    topRight: entry.hasUserEntry && <InLibrary />,
                     className: 'max-w-[164px]',
                   }}
                 />

app/(app)/dashboard/page.tsx

···
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { UserEntryCardObject } from '@/components/userEntryCard';
 import { api } from '@/trpc/react';
-import { Entry, UserEntry, UserList } from '@prisma/client';
-import { useQuery } from '@tanstack/react-query';
+import { Entry, UserList } from '@prisma/client';
 import { Loader2 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
···
 import { FilterView, shouldBeFiltered } from './_components/FilterView';
 import { ExtendedUserEntry, useDashboardStore } from './state';
 import { useDebounceValue } from 'usehooks-ts';
-import { inferRouterOutputs } from '@trpc/server';
-import { entriesRouter } from '@/server/api/routers/entries';
 import { cn } from '@/lib/utils';
 
 const Page = () => {
   const { data, isPending: dataIsPending } = api.dashboard.get.useQuery();
 
   if (dataIsPending) {
-    return <Loader2 className="size-4 animate-spin" />;
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="size-4 animate-spin" />
+      </div>
+    );
   }
 
   if (!data) {
···
       >
         <FilterView className="flex pb-4 lg:hidden" />
         <div
-          className="grid h-fit w-fit max-w-[1024px] gap-3"
+          className="grid h-fit w-fit max-w-[1024px] gap-2"
           style={{
             gridTemplateColumns: `repeat(${Math.max(3, Math.floor(Math.min(userEntriesWidth, 1024) / 148))}, minmax(0, 1fr))`,
           }}

app/(app)/users/[username]/_components/showcase.tsx

···
       <StyleHeader>{title}</StyleHeader>
       {userEntries.length > 0 && (
         <>
-          <div className="hidden grid-cols-4 gap-3 sm:grid">
+          <div className="hidden grid-cols-4 gap-2 sm:grid">
             {userEntries.slice(0, 4).map((userEntry, idx) => (
               <EntryRedirect
                 key={userEntry.entry.id}
···
               </EntryRedirect>
             ))}
           </div>
-          <div className="grid grid-cols-3 gap-3 sm:hidden">
+          <div className="grid grid-cols-3 gap-2 sm:hidden">
             {userEntries.slice(0, 3).map((userEntry, idx) => (
               <EntryRedirect
                 key={userEntry.entry.id}

components/addLog.tsx

···
 'use client';
 
-import { Book, Film, Loader2, Tv } from 'lucide-react';
+import { Book, Film, Library, Loader2, Tv } from 'lucide-react';
 import { Dispatch, Fragment, ReactNode, SetStateAction, useState } from 'react';
 import {
   Dialog,
···
 import { Badge } from './ui/badge';
 import ModifyUserEntry from './modifyUserEntry';
 import ContainedModifyUserEntry from './containedModifyUserEntry';
+import InLibrary from './inLibrary';
 
 const AddLog = ({
   children,
···
         )}
 
       <div className="no-scrollbar max-h-[calc(100dvh-100px)] overflow-y-scroll lg:max-h-[calc(100dvh-220px)]">
-        <div className="grid grid-cols-3 gap-3 lg:grid-cols-4">
+        <div className="grid grid-cols-3 gap-2 lg:grid-cols-4">
           {queryResults &&
             queryResults
               .slice(0, isDesktop ? 8 : 6)
···
                         addAction(entry.id);
                       }
                     }}
-                    topRight={
-                      entry.userEntries.length > 0 && (
-                        <Badge variant={'secondary'}>In Library</Badge>
-                      )
-                    }
+                    topRight={entry.userEntries.length > 0 && <InLibrary />}
                   />
                 )
               )}
···
                 </div>
               </div>
             )}
-            <div className="grid grid-cols-3 gap-4 lg:grid-cols-4">
+            <div className="grid grid-cols-3 gap-2 lg:grid-cols-4">
               {externalQueryResults
                 // .slice(
                 //   0,

components/header.tsx

···
 import { cn } from '../lib/utils';
 import AddLog from './addLog';
 import { Button } from './ui/button';
-import { Dialog, DialogContent, DialogTitle } from './ui/dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
 import { Drawer, DrawerContent, DrawerTrigger } from './ui/drawer';
 import { Feedback } from '@/app/(app)/_components/feedback';
 import { IslandDialog } from './islands/islands';
···
             </Button>
           </DrawerTrigger>
           <DrawerContent>
+            <DialogHeader className="sr-only">
+              <DialogTitle>Burger Menu</DialogTitle>
+            </DialogHeader>
             <div className="flex flex-col gap-2 p-4">{sidebarContent}</div>
             <div className="flex flex-col gap-2 p-4">
               <div className="text-sm font-normal text-base-400">

components/inLibrary.tsx

···
+import React from 'react';
+import { Badge } from './ui/badge';
+import { Library } from 'lucide-react';
+
+const InLibrary = () => {
+  return (
+    <Badge
+      variant={'secondary'}
+      className="flex size-[22px] justify-center px-0.5 text-xs md:size-fit md:px-2.5"
+    >
+      <span className="hidden md:inline">In Library</span>
+      <span className="inline md:hidden">
+        <Library className="size-3" />
+      </span>
+    </Badge>
+  );
+};
+
+export default InLibrary;

components/layouts/header.tsx

···
   className?: string;
 }) => {
   return (
-    <div
-      className={cn(
-        `grid min-h-screen grid-rows-[max-content,1fr] gap-4`,
-        className
-      )}
-    >
+    <div className={cn(`flex min-h-screen flex-col gap-4`, className)}>
       {children}
     </div>
   );

components/userEntryCard.tsx

···
 import { cn } from '@/lib/utils';
 import { Category } from '@prisma/client';
 import { Book, Film, Star, Tv } from 'lucide-react';
-import { HTMLProps, ReactElement, ReactNode } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 import SmallRating from './smallRating';
 import { getUserTitleFromEntry } from '@/server/api/routers/dashboard_';
 import { Badge } from './ui/badge';
···
   hoverCard?: ReactNode;
   topRight?: ReactNode;
 } & HTMLProps<HTMLDivElement>) => {
+  // return <img src={backgroundImage} className="aspect-[2/3] w-full"></img>;
+
   return (
     <div
       className={cn(
-        'group relative aspect-[2/3] w-full cursor-pointer overflow-clip rounded-lg bg-cover shadow-md shadow-base-300',
+        'group relative z-50 aspect-[2/3] cursor-pointer overflow-clip rounded-lg bg-cover shadow-sm shadow-base-400 transition-all duration-200 hover:-translate-y-[4px] hover:scale-[101%] hover:shadow-md active:brightness-[0.8]',
         className
       )}
-      style={{ backgroundImage: `url(${backgroundImage})` }}
       {...props}
     >
+      <img src={backgroundImage} className="absolute top-0 h-full w-full" />
       <div className="absolute top-0 flex h-[20%] w-full flex-col justify-end rounded-bl-lg rounded-br-lg bg-opacity-50 bg-gradient-to-b from-base-900 to-transparent"></div>
       <div className="absolute top-0 p-2">
         {(() => {
           switch (category) {
             case 'Book':
-              return <Book className="size-5 stroke-white" />;
+              return (
+                <Badge className="flex gap-1 border border-amber-300 bg-amber-700/50 px-1 text-xs text-amber-300">
+                  <Book className="size-3 stroke-amber-300" />
+                  Book
+                </Badge>
+              );
             case 'Movie':
-              return <Film className="size-5 stroke-white" />;
+              return (
+                <Badge className="flex gap-1 border border-blue-300 bg-blue-700/50 px-1 text-xs text-blue-300">
+                  <Book className="size-3 stroke-blue-300" />
+                  Movie
+                </Badge>
+              );
             case 'Series':
-              return <Tv className="size-5 stroke-white" />;
+              return (
+                <Badge className="flex gap-1 border border-green-300 bg-green-700/50 px-1 text-xs text-green-300">
+                  <Book className="size-3 stroke-green-300" />
+                  Tv
+                </Badge>
+              );
           }
         })()}
       </div>
···
           {hoverCard}
         </div>
       )}
-      <div className="absolute -top-1 right-0 p-2">{topRight}</div>
+      <div className="absolute right-0 top-0 flex p-2">{topRight}</div>
 
       <div className="select-none text-transparent">{entryTitle}</div>
-      <div className="absolute top-[40%] flex h-[60%] w-full flex-col justify-end rounded-bl-lg rounded-br-lg bg-gradient-to-t from-base-900 to-transparent object-cover p-2">
+      <div className="absolute top-[40%] hidden h-[60%] w-full flex-col justify-end rounded-bl-lg rounded-br-lg bg-gradient-to-t from-base-900 to-transparent object-cover p-2 opacity-0 transition-all duration-200 group-hover:opacity-100 md:flex">
         <div className="text-left text-sm font-semibold text-white sm:text-base">
           {entryTitle}
         </div>