chore: update ESLint and Prettier configurations, remove Stylelint, and enhance Tailwind CSS integration

.eslintrc.cjs

@@ -1,19 +1,31 @@
 module.exports = {
+  parser: '@typescript-eslint/parser',
   extends: [
     'plugin:@next/next/recommended',
+    'plugin:@typescript-eslint/recommended',
     'plugin:jest/recommended',
     'plugin:prettier/recommended',
     'plugin:@tanstack/eslint-plugin-query/recommended',
     'plugin:react-hooks/recommended',
   ],
-  plugins: ['testing-library', 'jest'],
+  plugins: ['@typescript-eslint', 'testing-library', 'jest'],
+  env: {
+    browser: true,
+    node: true,
+    es2022: true,
+  },
   overrides: [
     {
       files: ['**/?(*.)+(spec|test).[jt]s?(x)'],
       extends: ['plugin:testing-library/react'],
     },
   ],
   parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
     project: './tsconfig.json',
   },
   rules: {

.prettierrc.cjs

@@ -1,10 +1,11 @@
 /** @type {import('prettier').Options} */
 module.exports = {
-  ...baseConfig,
   semi: false,
   singleQuote: true,
   trailingComma: 'all',
   arrowParens: 'avoid',
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
   plugins: ['prettier-plugin-tailwindcss'],
-  tailwindConfig: './tailwind.config.cjs',
 }

LICENCE

@@ -1 +1 @@
-Copyright (c) 2024 Alexander Shenshin, Leonid Shirokov
+Copyright (c) 2025 Alexander Shenshin, Leonid Shirokov

README.md

@@ -2,16 +2,10 @@
 
 ## Antique Barometers Collection
 
-This repository includes the source code for a website dedicated to showcasing the private collection of antique barometers, assembled by Leo Shirokov.  
+This repository includes the source code for a website dedicated to showcasing the private collection of antique barometers, assembled by Leo Shirokov.
 The site is built using TypeScript and the Next.js framework and is hosted on Vercel at [barometers.info](https://www.barometers.info/).
 
 ## Project Contributors
 
 - **Collection Owner, Text and Concept** — Leo Shirokov
-- **Development and Implementation, "Design"** — Alexander Shenshin
-
-  Clear image cache
-
-  ```shell
-  rm -rf /var/cache/nginx/imgcache/*
-  ```
+- **Development and Implementation, Design** — Alexander Shenshin

app/about/page.tsx

@@ -23,7 +23,7 @@ export default function About() {
           height={125}
           sizes="(max-width: 768px) 100vw, 50vw"
           src="/shared/leo-shirokov.png"
-          className="float-left h-[300px] w-full object-contain xs:w-fit sm:h-[400px]"
+          className="xs:w-fit float-left h-[300px] w-full object-contain sm:h-[400px]"
         />
         I am a collector and restorer of antique barometers, a member of the Society for the History
         of Technology (SHOT), European Society for Environmental History (ESEH) and the
@@ -35,7 +35,7 @@ export default function About() {
         has also inspired me to write <span className={bookTitleStyles}>Barometer Odyssey*</span>, a
         book that explores the evolution of barometers over time.
       </p>
-      <div className="mb-3 flex justify-center gap-2 py-3 xs:justify-start">
+      <div className="xs:justify-start mb-3 flex justify-center gap-2 py-3">
         <Button variant="outline" asChild>
           <a
             href="https://www.ozon.ru/product/barometr-odisseya-1918748239/?at=mqtkyRVAEhMBgPkoc8x4EGrHK39QKWiopqMgXhv53xWD&keywords=%D0%B1%D0%B0%D1%80%D0%BE%D0%BC%D0%B5%D1%82%D1%80+%D0%BE%D0%B4%D0%B8%D1%81%D1%81%D0%B5%D1%8F"
@@ -80,7 +80,7 @@ export default function About() {
         always happy to answer any questions you may have about the barometers or their history.
       </p>
       <Separator className="my-4" />
-      <div className="flex flex-col flex-nowrap items-center gap-4 pt-2 xs:flex-row">
+      <div className="xs:flex-row flex flex-col flex-nowrap items-center gap-4 pt-2">
         <p className={paragraphStyles}>
           <span className={bookTitleStyles}>*Barometer Odyssey</span> immerses the reader in the
           world of one of the most fascinating scientific instruments. This book explores centuries
@@ -96,7 +96,7 @@ export default function About() {
           height={160}
           sizes="(max-width: 576px) 70vw, 160px"
           src="/shared/about-circle.png"
-          className="mb-4 w-[70%] xs:w-auto"
+          className="xs:w-auto mb-4 w-[70%]"
         />
       </div>
       <Separator className="my-4" />

app/admin/add-barometer/add-manufacturer.tsx

@@ -371,7 +371,7 @@ const IconUpload = ({ onFileChange }: IconUploadProps) => {
           <Button
             variant="destructive"
             size="icon"
-            className="absolute -right-2 -top-2 h-6 w-6 rounded-full"
+            className="absolute -top-2 -right-2 h-6 w-6 rounded-full"
             onClick={() => handleFileSelect(null)}
             aria-label="Remove icon"
           >

app/admin/add-barometer/file-upload.tsx

@@ -102,7 +102,7 @@ export function FileUpload({ name }: FileUploadProps) {
                       type="button"
                       variant="destructive"
                       size="icon"
-                      className="absolute -right-2 -top-2 h-6 w-6 rounded-full"
+                      className="absolute -top-2 -right-2 h-6 w-6 rounded-full"
                       onClick={() => handleDeleteFile(i)}
                     >
                       <X className="h-3 w-3" />

app/admin/page.tsx

@@ -8,14 +8,14 @@ export default function Admin() {
       <div className="space-y-4">
         <Link
           href={FrontRoutes.AddBarometer}
-          className="flex w-fit items-center gap-2 text-foreground transition-colors hover:text-primary"
+          className="text-foreground hover:text-primary flex w-fit items-center gap-2 transition-colors"
         >
           <Plus className="h-4 w-4" />
           Add new barometer
         </Link>
         <Link
           href={FrontRoutes.Reports}
-          className="flex w-fit items-center gap-2 text-foreground transition-colors hover:text-primary"
+          className="text-foreground hover:text-primary flex w-fit items-center gap-2 transition-colors"
         >
           <AlertTriangle className="h-4 w-4" />
           View Inaccuracy Reports

app/admin/reports/page.tsx

@@ -31,7 +31,7 @@ export default function ReportList() {
       cell: info => (
         <Link
           href={FrontRoutes.Barometer + info.row.original.barometer.slug}
-          className="text-sm text-foreground hover:text-primary hover:underline"
+          className="text-foreground hover:text-primary text-sm hover:underline"
         >
           {info.getValue()}
         </Link>
@@ -45,7 +45,7 @@ export default function ReportList() {
       cell: info => (
         <a
           href={`mailto:${info.getValue()}`}
-          className="text-sm text-foreground hover:text-primary hover:underline"
+          className="text-foreground hover:text-primary text-sm hover:underline"
         >
           {info.getValue()}
         </a>

app/brands/[slug]/page.tsx

@@ -58,7 +58,7 @@ export default async function Manufacturer({ params: { slug } }: Props) {
   const fullName = `${manufacturer.firstName ?? ''} ${manufacturer.name}`
   return (
     <>
-      <div className="mb-4 mt-6">
+      <div className="mt-6 mb-4">
         <h2>{fullName}</h2>
         <Connections label="Successor" brands={manufacturer.successors} />
         <Connections label="Predecessor" brands={manufacturer.predecessors} />

app/brands/page.tsx

@@ -66,7 +66,7 @@ const BrandsOfCountry = ({
 }) => {
   const width = 32
   return (
-    <div className="mb-5 mr-4">
+    <div className="mr-4 mb-5">
       <h3 className="mb-3 px-5 text-xl font-semibold">{country.name}</h3>
       <Separator className="mx-2 mb-5" />
 
@@ -116,7 +116,7 @@ export default async function Manufacturers() {
         list of barometer makers, along with detailed descriptions and iconic works by each master
         from the collection, representing the finest traditions of craftsmanship.
       </p>
-      <Card className="p-4 shadow-md xs:p-4">
+      <Card className="xs:p-4 p-4 shadow-md">
         <div className="grid grid-cols-1 sm:grid-cols-[1fr_auto_1fr] sm:gap-x-6">
           <div>
             {firstColumn.map(country => (

app/collection/categories/[...category]/sort.tsx

@@ -28,7 +28,7 @@ export default function Sort({ sortBy, className }: SortProps) {
 
   return (
     <div className={cn('space-y-1', className)}>
-      <label className="text-xs font-medium text-muted-foreground">Sort by</label>
+      <label className="text-muted-foreground text-xs font-medium">Sort by</label>
       <Select value={sortBy} onValueChange={handleSortChange}>
         <SelectTrigger className="w-full text-xs capitalize">
           <SelectValue placeholder="Sort by" />

app/collection/items/[slug]/components/condition.tsx

@@ -16,9 +16,9 @@ export function Condition({ condition }: ConditionProps) {
           <Button
             variant="ghost"
             size="icon"
-            className="absolute -right-4 top-0 h-4 w-4 p-0 hover:bg-transparent"
+            className="absolute top-0 -right-4 h-4 w-4 p-0 hover:bg-transparent"
           >
-            <Info className="h-4 w-4 text-muted-foreground" />
+            <Info className="text-muted-foreground h-4 w-4" />
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-48 p-2">

app/collection/items/[slug]/components/edit-fields/estimated-price-edit.tsx

@@ -120,7 +120,7 @@ export function EstimatedPriceEdit({
                     <FormLabel>Estimated Price</FormLabel>
                     <FormControl>
                       <div className="relative">
-                        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+                        <span className="text-muted-foreground absolute top-1/2 left-3 -translate-y-1/2">
                           €
                         </span>
                         <Input {...field} className="pl-8" placeholder="0.00" autoFocus />

app/collection/items/[slug]/components/edit-fields/images-edit.tsx

@@ -78,7 +78,7 @@ function SortableImage({
     >
       <button
         type="button"
-        className="absolute right-1 top-1 z-10 inline-flex h-5 w-5 items-center justify-center rounded-full bg-white text-muted-foreground shadow"
+        className="text-muted-foreground absolute top-1 right-1 z-10 inline-flex h-5 w-5 items-center justify-center rounded-full bg-white shadow-sm"
         aria-label="Remove image"
         onClick={() => handleDelete(image)}
       >
@@ -246,7 +246,7 @@ export function ImagesEdit({ barometer, size, className, ...props }: ImagesEditP
         <Button
           variant="ghost"
           aria-label="Edit images"
-          className={cn('absolute right-20 top-0 z-10 h-fit w-fit p-1', className)}
+          className={cn('absolute top-0 right-20 z-10 h-fit w-fit p-1', className)}
           {...props}
         >
           <Edit className="text-destructive" size={Number(size) || 18} />
@@ -257,7 +257,7 @@ export function ImagesEdit({ barometer, size, className, ...props }: ImagesEditP
           <form onSubmit={form.handleSubmit(update)} noValidate>
             <div className="relative">
               {isUploading && (
-                <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80">
+                <div className="bg-background/80 absolute inset-0 z-50 flex items-center justify-center">
                   <Loader2 className="h-8 w-8 animate-spin" />
                 </div>
               )}

app/collection/items/[slug]/components/edit-fields/manufacturer-edit.tsx

@@ -243,13 +243,13 @@ export function ManufacturerEdit({
         </DialogTrigger>
         <DialogContent>
           {isLoading ? (
-            <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/60">
-              <div className="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
+            <div className="bg-background/60 absolute inset-0 z-50 flex items-center justify-center">
+              <div className="border-muted-foreground h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
             </div>
           ) : null}
           <Form {...form}>
             <form className="flex flex-col gap-4" onSubmit={form.handleSubmit(update)} noValidate>
-              <DialogHeader className="mb-2 mt-6">
+              <DialogHeader className="mt-6 mb-2">
                 <div className="flex items-center justify-between">
                   <DialogTitle>Edit Manufacturer</DialogTitle>
                   <Button
@@ -448,7 +448,7 @@ function CountriesMultiSelect({
             : `${selected.length} selected`}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0">
         <Command>
           <CommandInput placeholder="Search country..." />
           <CommandList className="max-h-[200px]">
@@ -511,7 +511,7 @@ function SuccessorsMultiSelect({
           {selected.length === 0 ? 'Select brands' : `${selected.length} selected`}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0">
         <Command>
           <CommandInput placeholder="Search brand..." />
           <CommandList className="max-h-[200px]">

app/collection/items/[slug]/components/edit-fields/manufacturer-image-edit.tsx

@@ -45,7 +45,7 @@ function SortableImage({
     >
       <button
         type="button"
-        className="absolute right-1 top-1 z-10 inline-flex h-5 w-5 items-center justify-center rounded-full bg-white text-muted-foreground shadow"
+        className="text-muted-foreground absolute top-1 right-1 z-10 inline-flex h-5 w-5 items-center justify-center rounded-full bg-white shadow-sm"
         aria-label="Remove image"
         onClick={() => handleDelete(image)}
       >

app/collection/items/[slug]/components/inaccuracy-report.tsx

@@ -95,7 +95,7 @@ export function InaccuracyReport({ barometer, ...props }: Props) {
             onClick={() => setIsOpened(true)}
             aria-label={`Open report inaccuracy dialog for ${barometer.name}`}
           >
-            <span className="text-sm font-normal uppercase tracking-wider">Report inaccuracy</span>
+            <span className="text-sm font-normal tracking-wider uppercase">Report inaccuracy</span>
           </Button>
         </TooltipTrigger>
         <TooltipContent>
@@ -154,7 +154,7 @@ export function InaccuracyReport({ barometer, ...props }: Props) {
               {errors.description && (
                 <p className="text-xs text-red-500">{errors.description.message}</p>
               )}
-              <p id="description-help" className="text-xs text-muted-foreground">
+              <p id="description-help" className="text-muted-foreground text-xs">
                 {descriptionValue.length > 0 && descriptionValue.length <= maxFeedbackLen
                   ? `${symbolsLeft} symbol${symbolsLeft === 1 ? '' : 's'} remaining`
                   : descriptionValue.length > maxFeedbackLen

app/collection/items/[slug]/components/property-card/property-card.tsx

@@ -29,16 +29,16 @@ function PropertyCardCore({
     <Card
       className={cn(
         className,
-        'flex h-full min-h-20 flex-row flex-nowrap justify-center gap-0 overflow-hidden bg-secondary py-0',
-        'bg-gradient-to-b from-card-gradient-from to-card-gradient-to',
+        'bg-secondary flex h-full min-h-20 flex-row flex-nowrap justify-center gap-0 overflow-hidden py-0',
+        'from-card-gradient-from to-card-gradient-to bg-linear-to-b',
       )}
       {...props}
     >
-      <div className="m-2 flex shrink-0 items-center justify-center rounded-md bg-card px-2">
+      <div className="bg-card m-2 flex shrink-0 items-center justify-center rounded-md px-2">
         <Icon width={35} height={35} aria-label={title} strokeWidth={1.2} />
       </div>
       <div className="flex grow flex-col justify-center gap-2 py-2">
-        <h4 className="text-lg leading-none tracking-normal text-muted-foreground">{title}</h4>
+        <h4 className="text-muted-foreground text-lg leading-none tracking-normal">{title}</h4>
         {typeof children === 'object' ? (
           children
         ) : (

app/collection/items/[slug]/components/swiper-styles.css

@@ -1,3 +1,5 @@
+@reference "../../../../globals.css";
+
 /* This file contains the styles necessary for Swiper Pagination */
 .swiper {
   width: 100%;
@@ -25,7 +27,7 @@
 }
 
 .swiper-pagination-bullet {
-  @apply h-5 w-5 translate-y-[150%] bg-input text-xs leading-normal opacity-100 shadow-[0_0_1px_.5px_hsl(var(--muted-foreground))];
+  @apply bg-input h-5 w-5 translate-y-[150%] text-xs leading-normal opacity-100 shadow-[0_0_1px_.5px_hsl(var(--muted-foreground))];
 }
 
 .swiper-pagination-bullet-active {

app/components/barometer-card/barometer-card-icon.tsx

@@ -26,7 +26,7 @@ export function BarometerCardWithIcon({
   return (
     <div className={cn('relative h-full', className)} {...props}>
       <Link href={categoryLink ?? barometerLink}>
-        <CategoryIcon category={categoryName} className="absolute right-2 top-2 z-[1]" />
+        <CategoryIcon category={categoryName} className="absolute top-2 right-2 z-1" />
       </Link>
       <BarometerCard
         manufacturer={manufacturer}