A self hosted solution for privately rating and reviewing different sorts of media
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

* work

* fix

* upd

* in library

authored by

Willem Dinkelspiel and committed by
GitHub
230dc8b5 5f36d389

+66 -49
+1 -15
app/(app)/_components/loggedIn.tsx
··· 2 2 import AddLog from '@/components/addLog'; 3 3 import { Sidebar, SidebarFooter } from '@/components/sidebar'; 4 4 import { Button } from '@/components/ui/button'; 5 - import { User } from '@prisma/client'; 6 - import { Bug, MessageCircle, Plus, Send, Sparkles, Wand2 } from 'lucide-react'; 7 5 import { ReactNode } from 'react'; 8 6 import { Toaster } from 'sonner'; 9 7 import { SidebarButtons } from '../_components/sidebar'; 10 8 import { useAppStore } from '../state'; 11 - import { 12 - Dialog, 13 - DialogContent, 14 - DialogFooter, 15 - DialogHeader, 16 - DialogTitle, 17 - DialogTrigger, 18 - } from '@/components/ui/dialog'; 19 - import { Input } from '@/components/ui/input'; 20 - import { Textarea } from '@/components/ui/textarea'; 21 - import { Label } from '@/components/ui/label'; 22 - import Link from 'next/link'; 23 - import { Toggle } from '@/components/ui/toggle'; 24 9 import { Feedback } from './feedback'; 10 + import { Plus } from 'lucide-react'; 25 11 26 12 export const LoggedIn = ({ 27 13 children,
+2 -3
app/(app)/community/feed/page.tsx
··· 13 13 import { EntryRedirect } from '../../_components/EntryIslandContext'; 14 14 import { Badge } from '@/components/ui/badge'; 15 15 import { Loader2 } from 'lucide-react'; 16 + import InLibrary from '@/components/inLibrary'; 16 17 17 18 const Page = () => { 18 19 const feed = api.community.getFeed.useInfiniteQuery( ··· 116 117 backgroundImage: entry.entry.posterPath, 117 118 releaseDate: entry.entry.releaseDate, 118 119 category: entry.entry.category, 119 - topRight: entry.hasUserEntry && ( 120 - <Badge variant={'secondary'}>In Library</Badge> 121 - ), 120 + topRight: entry.hasUserEntry && <InLibrary />, 122 121 className: 'max-w-[164px]', 123 122 }} 124 123 />
+7 -6
app/(app)/dashboard/page.tsx
··· 6 6 import { Dialog, DialogContent } from '@/components/ui/dialog'; 7 7 import { UserEntryCardObject } from '@/components/userEntryCard'; 8 8 import { api } from '@/trpc/react'; 9 - import { Entry, UserEntry, UserList } from '@prisma/client'; 10 - import { useQuery } from '@tanstack/react-query'; 9 + import { Entry, UserList } from '@prisma/client'; 11 10 import { Loader2 } from 'lucide-react'; 12 11 import { useEffect, useRef, useState } from 'react'; 13 12 import { toast } from 'sonner'; ··· 15 14 import { FilterView, shouldBeFiltered } from './_components/FilterView'; 16 15 import { ExtendedUserEntry, useDashboardStore } from './state'; 17 16 import { useDebounceValue } from 'usehooks-ts'; 18 - import { inferRouterOutputs } from '@trpc/server'; 19 - import { entriesRouter } from '@/server/api/routers/entries'; 20 17 import { cn } from '@/lib/utils'; 21 18 22 19 const Page = () => { 23 20 const { data, isPending: dataIsPending } = api.dashboard.get.useQuery(); 24 21 25 22 if (dataIsPending) { 26 - return <Loader2 className="size-4 animate-spin" />; 23 + return ( 24 + <div className="flex h-full items-center justify-center"> 25 + <Loader2 className="size-4 animate-spin" /> 26 + </div> 27 + ); 27 28 } 28 29 29 30 if (!data) { ··· 133 134 > 134 135 <FilterView className="flex pb-4 lg:hidden" /> 135 136 <div 136 - className="grid h-fit w-fit max-w-[1024px] gap-3" 137 + className="grid h-fit w-fit max-w-[1024px] gap-2" 137 138 style={{ 138 139 gridTemplateColumns: `repeat(${Math.max(3, Math.floor(Math.min(userEntriesWidth, 1024) / 148))}, minmax(0, 1fr))`, 139 140 }}
+2 -2
app/(app)/users/[username]/_components/showcase.tsx
··· 28 28 <StyleHeader>{title}</StyleHeader> 29 29 {userEntries.length > 0 && ( 30 30 <> 31 - <div className="hidden grid-cols-4 gap-3 sm:grid"> 31 + <div className="hidden grid-cols-4 gap-2 sm:grid"> 32 32 {userEntries.slice(0, 4).map((userEntry, idx) => ( 33 33 <EntryRedirect 34 34 key={userEntry.entry.id} ··· 51 51 </EntryRedirect> 52 52 ))} 53 53 </div> 54 - <div className="grid grid-cols-3 gap-3 sm:hidden"> 54 + <div className="grid grid-cols-3 gap-2 sm:hidden"> 55 55 {userEntries.slice(0, 3).map((userEntry, idx) => ( 56 56 <EntryRedirect 57 57 key={userEntry.entry.id}
+5 -8
components/addLog.tsx
··· 1 1 'use client'; 2 2 3 - import { Book, Film, Loader2, Tv } from 'lucide-react'; 3 + import { Book, Film, Library, Loader2, Tv } from 'lucide-react'; 4 4 import { Dispatch, Fragment, ReactNode, SetStateAction, useState } from 'react'; 5 5 import { 6 6 Dialog, ··· 27 27 import { Badge } from './ui/badge'; 28 28 import ModifyUserEntry from './modifyUserEntry'; 29 29 import ContainedModifyUserEntry from './containedModifyUserEntry'; 30 + import InLibrary from './inLibrary'; 30 31 31 32 const AddLog = ({ 32 33 children, ··· 334 335 )} 335 336 336 337 <div className="no-scrollbar max-h-[calc(100dvh-100px)] overflow-y-scroll lg:max-h-[calc(100dvh-220px)]"> 337 - <div className="grid grid-cols-3 gap-3 lg:grid-cols-4"> 338 + <div className="grid grid-cols-3 gap-2 lg:grid-cols-4"> 338 339 {queryResults && 339 340 queryResults 340 341 .slice(0, isDesktop ? 8 : 6) ··· 367 368 addAction(entry.id); 368 369 } 369 370 }} 370 - topRight={ 371 - entry.userEntries.length > 0 && ( 372 - <Badge variant={'secondary'}>In Library</Badge> 373 - ) 374 - } 371 + topRight={entry.userEntries.length > 0 && <InLibrary />} 375 372 /> 376 373 ) 377 374 )} ··· 406 403 </div> 407 404 </div> 408 405 )} 409 - <div className="grid grid-cols-3 gap-4 lg:grid-cols-4"> 406 + <div className="grid grid-cols-3 gap-2 lg:grid-cols-4"> 410 407 {externalQueryResults 411 408 // .slice( 412 409 // 0,
+4 -1
components/header.tsx
··· 22 22 import { cn } from '../lib/utils'; 23 23 import AddLog from './addLog'; 24 24 import { Button } from './ui/button'; 25 - import { Dialog, DialogContent, DialogTitle } from './ui/dialog'; 25 + import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'; 26 26 import { Drawer, DrawerContent, DrawerTrigger } from './ui/drawer'; 27 27 import { Feedback } from '@/app/(app)/_components/feedback'; 28 28 import { IslandDialog } from './islands/islands'; ··· 136 136 </Button> 137 137 </DrawerTrigger> 138 138 <DrawerContent> 139 + <DialogHeader className="sr-only"> 140 + <DialogTitle>Burger Menu</DialogTitle> 141 + </DialogHeader> 139 142 <div className="flex flex-col gap-2 p-4">{sidebarContent}</div> 140 143 <div className="flex flex-col gap-2 p-4"> 141 144 <div className="text-sm font-normal text-base-400">
+19
components/inLibrary.tsx
··· 1 + import React from 'react'; 2 + import { Badge } from './ui/badge'; 3 + import { Library } from 'lucide-react'; 4 + 5 + const InLibrary = () => { 6 + return ( 7 + <Badge 8 + variant={'secondary'} 9 + className="flex size-[22px] justify-center px-0.5 text-xs md:size-fit md:px-2.5" 10 + > 11 + <span className="hidden md:inline">In Library</span> 12 + <span className="inline md:hidden"> 13 + <Library className="size-3" /> 14 + </span> 15 + </Badge> 16 + ); 17 + }; 18 + 19 + export default InLibrary;
+1 -6
components/layouts/header.tsx
··· 9 9 className?: string; 10 10 }) => { 11 11 return ( 12 - <div 13 - className={cn( 14 - `grid min-h-screen grid-rows-[max-content,1fr] gap-4`, 15 - className 16 - )} 17 - > 12 + <div className={cn(`flex min-h-screen flex-col gap-4`, className)}> 18 13 {children} 19 14 </div> 20 15 );
+25 -8
components/userEntryCard.tsx
··· 2 2 import { cn } from '@/lib/utils'; 3 3 import { Category } from '@prisma/client'; 4 4 import { Book, Film, Star, Tv } from 'lucide-react'; 5 - import { HTMLProps, ReactElement, ReactNode } from 'react'; 5 + import { HTMLProps, ReactNode } from 'react'; 6 6 import SmallRating from './smallRating'; 7 7 import { getUserTitleFromEntry } from '@/server/api/routers/dashboard_'; 8 8 import { Badge } from './ui/badge'; ··· 28 28 hoverCard?: ReactNode; 29 29 topRight?: ReactNode; 30 30 } & HTMLProps<HTMLDivElement>) => { 31 + // return <img src={backgroundImage} className="aspect-[2/3] w-full"></img>; 32 + 31 33 return ( 32 34 <div 33 35 className={cn( 34 - 'group relative aspect-[2/3] w-full cursor-pointer overflow-clip rounded-lg bg-cover shadow-md shadow-base-300', 36 + '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]', 35 37 className 36 38 )} 37 - style={{ backgroundImage: `url(${backgroundImage})` }} 38 39 {...props} 39 40 > 41 + <img src={backgroundImage} className="absolute top-0 h-full w-full" /> 40 42 <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> 41 43 <div className="absolute top-0 p-2"> 42 44 {(() => { 43 45 switch (category) { 44 46 case 'Book': 45 - return <Book className="size-5 stroke-white" />; 47 + return ( 48 + <Badge className="flex gap-1 border border-amber-300 bg-amber-700/50 px-1 text-xs text-amber-300"> 49 + <Book className="size-3 stroke-amber-300" /> 50 + Book 51 + </Badge> 52 + ); 46 53 case 'Movie': 47 - return <Film className="size-5 stroke-white" />; 54 + return ( 55 + <Badge className="flex gap-1 border border-blue-300 bg-blue-700/50 px-1 text-xs text-blue-300"> 56 + <Book className="size-3 stroke-blue-300" /> 57 + Movie 58 + </Badge> 59 + ); 48 60 case 'Series': 49 - return <Tv className="size-5 stroke-white" />; 61 + return ( 62 + <Badge className="flex gap-1 border border-green-300 bg-green-700/50 px-1 text-xs text-green-300"> 63 + <Book className="size-3 stroke-green-300" /> 64 + Tv 65 + </Badge> 66 + ); 50 67 } 51 68 })()} 52 69 </div> ··· 55 72 {hoverCard} 56 73 </div> 57 74 )} 58 - <div className="absolute -top-1 right-0 p-2">{topRight}</div> 75 + <div className="absolute right-0 top-0 flex p-2">{topRight}</div> 59 76 60 77 <div className="select-none text-transparent">{entryTitle}</div> 61 - <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"> 78 + <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"> 62 79 <div className="text-left text-sm font-semibold text-white sm:text-base"> 63 80 {entryTitle} 64 81 </div>