From d8c864aec9028eec452eaa64b19d58c4956d2561 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Tue, 19 Nov 2024 17:42:54 +0100
Subject: [PATCH] Add classnames library and start using it

---
 package-lock.json                          |  6 ++++++
 package.json                               |  1 +
 src/Components/AppShell/NavBar.tsx         |  2 +-
 src/Components/AppShell/SidebarSubmenu.tsx | 12 +++++++-----
 src/Components/Templates/TagView.tsx       |  7 +++++--
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 74187848..5b6c8f8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@tanstack/react-query": "^5.17.8",
         "@types/offscreencanvas": "^2019.7.1",
         "axios": "^1.6.5",
+        "classnames": "^2.5.1",
         "date-fns": "^3.3.1",
         "leaflet": "^1.9.4",
         "leaflet.locatecontrol": "^0.79.0",
@@ -1270,6 +1271,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
diff --git a/package.json b/package.json
index 825bc7b7..9d1ed68c 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@tanstack/react-query": "^5.17.8",
     "@types/offscreencanvas": "^2019.7.1",
     "axios": "^1.6.5",
+    "classnames": "^2.5.1",
     "date-fns": "^3.3.1",
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx
index 1ea55767..e4024e71 100644
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@@ -96,7 +96,7 @@ export default function NavBar({ appName, userType }: { appName: string; userTyp
           </button>
           <div className='tw-flex-1 tw-mr-2'>
             <div
-              className={'tw-flex-1 tw-truncate tw-grid tw-grid-flow-col'}
+              className='tw-flex-1 tw-truncate tw-grid tw-grid-flow-col'
               style={{ maxWidth: nameWidth + 60 }}
             >
               <Link
diff --git a/src/Components/AppShell/SidebarSubmenu.tsx b/src/Components/AppShell/SidebarSubmenu.tsx
index ffb57872..2330db01 100644
--- a/src/Components/AppShell/SidebarSubmenu.tsx
+++ b/src/Components/AppShell/SidebarSubmenu.tsx
@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon'
+import classNames from 'classnames'
 import { useEffect, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
@@ -42,15 +43,16 @@ function SidebarSubmenu({
           {name}{' '}
         </span>
         <ChevronDownIcon
-          className={
-            'w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all  ' +
-            (isExpanded ? 'rotate-180' : '')
-          }
+          className={classNames('w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all', {
+            'rotate-180': isExpanded,
+          })}
         />
       </div>
 
       {/** Submenu list */}
-      <div className={' w-full data-[te-collapse-show]:!hidden ' + (isExpanded ? '' : 'hidden')}>
+      <div
+        className={classNames('w-full data-[te-collapse-show]:!hidden', { hidden: !isExpanded })}
+      >
         <ul className={'menu menu-compact'}>
           {submenu.map((m, k) => {
             return (
diff --git a/src/Components/Templates/TagView.tsx b/src/Components/Templates/TagView.tsx
index 13c184a5..2bf824ea 100644
--- a/src/Components/Templates/TagView.tsx
+++ b/src/Components/Templates/TagView.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
+import classNames from 'classnames'
 
 import { Tag } from '#src/types'
 import { decodeTag } from '#utils/FormatTags'
@@ -20,7 +20,10 @@ export const TagView = ({
     <div
       key={tag.name}
       onClick={onClick}
-      className={`tw-flex tw-items-center tw-flex-row tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight && 'tw-border-4 tw-border-base-200 tw-shadow-lg'}`}
+      className={classNames(
+        'tw-flex tw-items-center tw-flex-row tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit',
+        { 'tw-border-4 tw-border-base-200 tw-shadow-lg': heighlight },
+      )}
       style={{ backgroundColor: tag.color ? tag.color : '#666' }}
     >
       <b>{decodeTag(tag.name)}</b>