feat: ui remake with tailwind

.gitignore

@@ -47,4 +47,5 @@ package-lock.json
 /db
 /data
 /Bruno
-/tsconfig.tsbuildinfo
+/tsconfig.tsbuildinfo
+/src/public/style.css

Dockerfile

@@ -22,14 +22,14 @@ RUN cargo install resvg
 
 # copy node_modules from temp directory
 # then copy all (non-ignored) project files into the image
-# FROM base AS prerelease
-# COPY --from=install /temp/dev/node_modules node_modules
-# COPY . .
+FROM base AS prerelease
+COPY --from=install /temp/dev/node_modules node_modules
+COPY . .
 
 # # [optional] tests & build
-# ENV NODE_ENV=production
+ENV NODE_ENV=production
 # RUN bun test
-# RUN bun run build
+RUN bun run build
 
 # copy production dependencies and source code into final image
 FROM base AS release
@@ -56,6 +56,7 @@ RUN apk --no-cache add  \
 
 COPY --from=install /temp/prod/node_modules node_modules
 COPY --from=builder /root/.cargo/bin/resvg /usr/local/bin/resvg
+COPY --from=prerelease /app/src/public/style.css /app/src/public/
 # COPY --from=prerelease /app/src/index.tsx /app/src/
 # COPY --from=prerelease /app/package.json .
 COPY . .

biome.json

@@ -10,9 +10,14 @@
     "attributePosition": "auto"
   },
   "files": {
-    "ignore": ["**/node_modules/**", "**/pico.lime.min.css"]
+    "ignore": [
+      "**/node_modules/**",
+      "**/pico.lime.min.css"
+    ]
+  },
+  "organizeImports": {
+    "enabled": true
   },
-  "organizeImports": { "enabled": true },
   "linter": {
     "enabled": true,
     "rules": {
@@ -25,7 +30,11 @@
         "useLiteralKeys": "error",
         "useOptionalChain": "error"
       },
-      "correctness": { "noPrecisionLoss": "error", "noUnusedVariables": "off" },
+      "correctness": {
+        "noPrecisionLoss": "error",
+        "noUnusedVariables": "off",
+        "useJsxKeyInIterable": "off"
+      },
       "style": {
         "noInferrableTypes": "error",
         "noNamespace": "error",
@@ -45,6 +54,9 @@
         "noUnsafeDeclarationMerging": "error",
         "useAwait": "error",
         "useNamespaceKeyword": "error"
+      },
+      "nursery": {
+        "useSortedClasses": "error"
       }
     }
   },
@@ -60,4 +72,4 @@
       "attributePosition": "auto"
     }
   }
-}
+}

package.json

@@ -5,7 +5,7 @@
     "dev": "bun run --watch src/index.tsx",
     "hot": "bun run --hot src/index.tsx",
     "format": "biome format --write ./src",
-    "css": "cpy 'node_modules/@picocss/pico/css/pico.lime.min.css' 'src/public/' --flat",
+    "build": "postcss  ./src/main.css -o ./src/public/style.css",
     "lint": "run-p 'lint:*'",
     "lint:tsc": "tsc --noEmit",
     "lint:knip": "knip",
@@ -36,7 +36,8 @@
     "@types/node": "^22.5.4",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
     "@typescript-eslint/parser": "^8.4.0",
-    "cpy-cli": "^5.0.0",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
     "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-deprecation": "^3.0.0",
@@ -47,7 +48,12 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "knip": "^5.29.2",
     "npm-run-all2": "^6.2.2",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-lightningcss": "^1.0.1",
     "prettier": "^3.3.3",
+    "tailwind-scrollbar": "^3.1.0",
+    "tailwindcss": "^3.4.12",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.4.0"
   },

postcss.config.cjs

@@ -0,0 +1,9 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    // eslint-disable-next-line no-undef
+    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
+  }
+}

src/components/base.tsx

@@ -7,7 +7,6 @@ export const BaseHtml = ({
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title safe>{title}</title>
-      <link rel="stylesheet" href="/pico.lime.min.css" />
       <link rel="stylesheet" href="/style.css" />
       <link
         rel="apple-touch-icon"
@@ -28,6 +27,6 @@ export const BaseHtml = ({
       />
       <link rel="manifest" href="/site.webmanifest" />
     </head>
-    <body>{children}</body>
+    <body class="w-full bg-gray-900 text-gray-200">{children}</body>
   </html>
 );

src/components/header.tsx

@@ -5,44 +5,53 @@ export const Header = ({
   let rightNav: JSX.Element;
   if (loggedIn) {
     rightNav = (
-      <ul>
+      <ul class="flex gap-4 ">
         <li>
-          <a href="/history">History</a>
+          <a
+            class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
+            href="/history">
+            History
+          </a>
         </li>
         <li>
-          <a href="/logoff">Logout</a>
+          <a
+            class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
+            href="/logoff">
+            Logout
+          </a>
         </li>
       </ul>
     );
   } else {
     rightNav = (
-      <ul>
+      <ul class="flex gap-4">
         <li>
-          <a href="/login">Login</a>
+          <a
+            class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
+            href="/login">
+            Login
+          </a>
         </li>
-        {accountRegistration && (
+        {accountRegistration ? (
           <li>
-            <a href="/register">Register</a>
+            <a
+              class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
+              href="/register">
+              Register
+            </a>
           </li>
-        )}
+        ) : null}
       </ul>
     );
   }
 
   return (
-    <header class="container">
-      <nav>
+    <header class="w-full p-4">
+      <nav class="mx-auto flex max-w-4xl justify-between rounded bg-gray-900 p-4">
         <ul>
           <li>
             <strong>
-              <a
-                href="/"
-                style={{
-                  textDecoration: "none",
-                  color: "inherit",
-                }}>
-                ConvertX
-              </a>
+              <a href="/">ConvertX</a>
             </strong>
           </li>
         </ul>

src/helpers/tailwind.ts

@@ -0,0 +1,17 @@
+import tw from "tailwindcss";
+import postcss from "postcss";
+
+export const generateTailwind = async () => {
+  const result = await Bun.file("./src/main.css")
+    .text()
+    .then((sourceText) => {
+      const config = "./tailwind.config.js";
+
+      return postcss([tw(config)]).process(sourceText, {
+        from: "./src/main.css",
+        to: "./public/style.css",
+      });
+    });
+
+  return result;
+};