fix: use serve temporarily to regenerate dist based on user's .env

fix: typo in Dockerfile
fix: workaround npm multi-platform build bug
2026-01-21 00:50:28 +01:00 · 2026-01-20 22:19:43 +01:00 · 2026-01-20 22:14:03 +01:00 · 2026-01-19 17:22:31 +01:00 · 2026-01-09 22:40:43 +01:00 · 2026-01-09 22:29:17 +01:00
6 changed files with 224 additions and 144 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,2 +1,3 @@
 .env
 kittyurl-frontend/node_modules
+kittyurl-frontend/dist
--- a/.gitea/workflows/01_docker.yaml
+++ b/.gitea/workflows/01_docker.yaml
@@ -17,12 +17,6 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@v4

-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker BuildX
-        uses: docker/setup-buildx-action@v3
-
      - name: Login to registry
        uses: docker/login-action@v2
        with:
@@ -30,28 +24,22 @@ jobs:
          username: ${{ secrets.REGISTRY_USER }}
          password: ${{ secrets.REGISTRY_PASSWORD }}

-      - name: Set outputs
-        id: vars
+      - name: Build Docker image
        env:
-          BRANCH_NAME: ${{ github.ref_name }}
+          REF_NAME: ${{ github.ref_name }}
        run: |
-          #echo branch_name="$BRANCH_NAME" | tee -a $GITHUB_OUTPUT
-          #echo short_hash=$(git rev-parse --short HEAD) | tee -a $GITHUB_OUTPUT
-          echo current_tag=$GITHUB_REF_NAME | tee -a $GITHUB_OUTPUT
+          # Build the image with the commit hash tag
+          docker build --build-arg BUILD_IDENTIFIER=${REF_NAME} -t gitea.7o7.cx/kittyteam/kittyfe:master-${REF_NAME} .

-      - name: Build and push
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          platforms: |
-            linux/amd64
-            linux/arm64
-          pull: true
-          push: true
-          # Change when working on a different branch!
-          tags: |
-            gitea.7o7.cx/kittyteam/kittyfe:${{ steps.vars.outputs.current_tag }}
-            gitea.7o7.cx/kittyteam/kittyfe:latest
+          # Tag the same image as "latest"
+          docker tag gitea.7o7.cx/kittyteam/kittyfe:master-${REF_NAME} gitea.7o7.cx/kittyteam/kittyfe:latest
+
+      - name: Push Docker images
+        env:
+          REF_NAME: ${{ github.ref_name }}
+        run: |
+          docker push gitea.7o7.cx/kittyteam/kittyfe:master-${REF_NAME}
+          docker push gitea.7o7.cx/kittyteam/kittyfe:latest

      - name: Log out from registry
        if: always()
--- a/14
+++ b/14
@@ -1,11 +1,16 @@
-# Credit: https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
+# Credit:
+# https://www.digitalocean.com/community/tutorials/how-to-build-a-node-js-application-with-docker
 # https://stackoverflow.com/a/56941391
+#
+# Includes workaround for:
+# https://github.com/expo/expo/issues/33340
+# https://github.com/npm/cli/issues/4828

 FROM node:24-trixie-slim AS builder

 WORKDIR /app
 COPY ./kittyurl-frontend/package*.json ./
-RUN npm ci && npm cache clean --force
+RUN npm ci && npm i --force && npm cache clean --force
 COPY ./kittyurl-frontend/. ./
 RUN npm run build

@@ -19,4 +24,7 @@ USER nodejs

 EXPOSE 6568

-CMD ["npm", "run", "preview", "--", "--host", "0.0.0.0", "--port", "6568"]
+# Since we don't know user's .env ahead of time, kittyFE needs to
+# rebuild itself every launch so that the changes in .env get reflected.
+# This is not ideal and we're looking into possible ways to improve this.
+CMD ["npm", "run", "serve", "--", "--host", "0.0.0.0", "--port", "6568"]
--- a/kittyurl-frontend/package-lock.json
+++ b/kittyurl-frontend/package-lock.json
@@ -29,6 +29,7 @@
        "eslint-plugin-react-hooks": "^7.0.1",
        "eslint-plugin-react-refresh": "^0.4.24",
        "globals": "^16.5.0",
+        "lightningcss": "^1.30.2",
        "postcss": "^8.5.6",
        "tailwindcss": "^4.1.18",
        "typescript": "~5.9.3",
@@ -67,7 +68,6 @@
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@@ -1610,7 +1610,6 @@
      "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "undici-types": "~7.16.0"
      }
@@ -1621,7 +1620,6 @@
      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "csstype": "^3.2.2"
      }
@@ -1681,7 +1679,6 @@
      "integrity": "sha512-hM5faZwg7aVNa819m/5r7D0h0c9yC4DUlWAOvHAtISdFTc8xB86VmX5Xqabrama3wIPJ/q9RbGS1worb6JfnMg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.50.1",
        "@typescript-eslint/types": "8.50.1",
@@ -1933,7 +1930,6 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -2093,7 +2089,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -2442,7 +2437,6 @@
      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -3598,7 +3592,6 @@
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -3625,7 +3618,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -3673,7 +3665,6 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -3683,7 +3674,6 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -3702,9 +3692,9 @@
      }
    },
    "node_modules/react-router": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz",
-      "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
      "license": "MIT",
      "dependencies": {
        "cookie": "^1.0.1",
@@ -3724,12 +3714,12 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz",
-      "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
+      "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
      "license": "MIT",
      "dependencies": {
-        "react-router": "7.11.0"
+        "react-router": "7.12.0"
      },
      "engines": {
        "node": ">=20.0.0"
@@ -3937,7 +3927,6 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -4023,7 +4012,6 @@
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.27.0",
        "fdir": "^6.5.0",
@@ -4145,7 +4133,6 @@
      "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
--- a/kittyurl-frontend/package.json
+++ b/kittyurl-frontend/package.json
@@ -32,6 +32,7 @@
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
+    "lightningcss": "^1.30.2",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.18",
    "typescript": "~5.9.3",
--- a/kittyurl-frontend/src/components/Generator.tsx
+++ b/kittyurl-frontend/src/components/Generator.tsx
@@ -1,19 +1,25 @@
 import React, { useState, useEffect } from 'react';
 import {
    PawPrint, Heart, Sparkles, Cat, Hash,
-    Globe, BookOpen, Shield, Calendar,
-    Settings2, AlertCircle, X, Save, RefreshCw, Copy, Check, ExternalLink, User as UserIcon
+    Globe, BookOpen, Shield, Clock,
+    Settings2, AlertCircle, X, Save, RefreshCw, Copy, Check, ExternalLink,
+    User as UserIcon, Calendar, Hourglass
 } from 'lucide-react';

-// Pobieramy adres API
 const API_BASE = import.meta.env.VITE_API_TARGET;
-
-// Nazwa klucza w localStorage
 const TOKEN_KEY = 'jwt_token';

 type CaseType = 'upper' | 'lower' | 'mixed';

-// 1. Definicja propsów, które przychodzą z App.tsx
+// Mnożniki czasu w milisekundach
+const TIME_MULTIPLIERS: Record<string, number> = {
+    minutes: 60 * 1000,
+    hours: 60 * 60 * 1000,
+    days: 24 * 60 * 60 * 1000,
+    weeks: 7 * 24 * 60 * 60 * 1000,
+    months: 30 * 24 * 60 * 60 * 1000, // Przybliżenie
+};
+
 interface GeneratorProps {
    url: string;
    setUrl: (url: string) => void;
@@ -27,7 +33,6 @@ interface GeneratorSettings {
    withSubdomain: boolean;
 }

-// Usunęliśmy 'remoteUrl' stąd, bo teraz przychodzi z propsów (url)
 interface LinkFormData {
    uri: string;
    subdomain: string;
@@ -40,7 +45,7 @@ interface LinkPayload {
    uri: string;
    subdomain?: string;
    privacy: boolean;
-    expiryDate: number;
+    expiryDate?: number;
    userId?: string;
 }

@@ -50,16 +55,14 @@ interface User {
    email?: string;
 }

-// 2. Dodajemy propsy do argumentów funkcji
 export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => {
    const [user, setUser] = useState<User | null>(null);

-    // Stan formularza (bez remoteUrl, bo to jest teraz w 'url')
    const [formData, setFormData] = useState<LinkFormData>({
        uri: '',
        subdomain: '',
        privacy: true,
-        expiryDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+        expiryDate: ''
    });

    const [genSettings, setGenSettings] = useState<GeneratorSettings>({
@@ -69,12 +72,22 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
        withSubdomain: false
    });

+    // --- NOWE STANY DLA CZASU TRWANIA ---
+    const [expiryMode, setExpiryMode] = useState<'date' | 'duration'>('date');
+    const [durationValue, setDurationValue] = useState<string>(''); // Pusty string na start
+    const [durationUnit, setDurationUnit] = useState<string>('minutes');
+
    const [loading, setLoading] = useState(false);
    const [generatingUri, setGeneratingUri] = useState(false);
    const [errorMsg, setErrorMsg] = useState<string | null>(null);
    const [result, setResult] = useState<string | null>(null);
    const [copied, setCopied] = useState(false);

+    const baseDomain = API_BASE.replace('api.', '').replace(/^https?:\/\//, '').split('/')[0];
+    const displayPrefix = genSettings.withSubdomain && formData.subdomain
+        ? `${formData.subdomain}.${baseDomain}`
+        : baseDomain;
+
    const getAuthHeaders = () => {
        const token = localStorage.getItem(TOKEN_KEY);
        return {
@@ -83,17 +96,14 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
        };
    };

-    // Sprawdzenie sesji użytkownika
    useEffect(() => {
        const checkUser = async () => {
            const token = localStorage.getItem(TOKEN_KEY);
            if (!token) return;
-
            try {
                const res = await fetch(`${API_BASE}/api/v1/user/account`, {
                    headers: getAuthHeaders()
                });
-
                if (res.ok) {
                    const data = await res.json();
                    setUser({
@@ -101,10 +111,6 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
                        username: data.username || data.name || data.email || "User",
                        email: data.email
                    });
-                } else {
-                    console.log("Session expired. Logging out.");
-                    localStorage.removeItem(TOKEN_KEY);
-                    setUser(null);
                }
            } catch {
                console.log("API unreachable");
@@ -113,35 +119,51 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
        checkUser();
    }, []);

+    // --- NOWY EFEKT: Przeliczanie czasu trwania na datę ---
+    // Uruchamia się automatycznie, gdy zmienisz liczbę, jednostkę lub tryb
+    useEffect(() => {
+        if (expiryMode === 'duration') {
+            const val = parseInt(durationValue);
+            if (!durationValue || isNaN(val) || val <= 0) {
+                // Jeśli pole jest puste lub 0, czyścimy datę wygaśnięcia
+                setFormData(prev => ({ ...prev, expiryDate: '' }));
+                return;
+            }
+
+            const multiplier = TIME_MULTIPLIERS[durationUnit] || TIME_MULTIPLIERS.minutes;
+            const msToAdd = val * multiplier;
+
+            const futureDate = new Date(Date.now() + msToAdd);
+
+            // Formatowanie do datetime-local z uwzględnieniem strefy czasowej
+            const offset = futureDate.getTimezoneOffset() * 60000;
+            const localISOTime = new Date(futureDate.getTime() - offset).toISOString().slice(0, 16);
+
+            setFormData(prev => ({ ...prev, expiryDate: localISOTime }));
+        }
+    }, [durationValue, durationUnit, expiryMode]);
+
    const handleGenerateUri = async (type: 'random' | 'wordlist') => {
        setGeneratingUri(true);
        setErrorMsg(null);
        try {
            let endpoint = '';
            const params = new URLSearchParams();
-
            params.append('withSubdomain', genSettings.withSubdomain.toString());

            if (type === 'random') {
                endpoint = '/api/v1/link/short';
                params.append('length', genSettings.length.toString());
                params.append('alphanum', genSettings.alphanum.toString());
-
-                if (genSettings.case !== 'mixed') {
-                    params.append('case', genSettings.case);
-                }
+                if (genSettings.case !== 'mixed') params.append('case', genSettings.case);
            } else {
                endpoint = '/api/v1/link/fromWordlist';
            }

            const response = await fetch(`${API_BASE}${endpoint}?${params.toString()}`);
            const data = await response.json();
-
            if (!response.ok) throw new Error(data.error || 'Generation failed');
-
-            const generatedUri = data.uri || data.shortUrl || data.link || "";
-            setFormData(prev => ({ ...prev, uri: generatedUri }));
-
+            setFormData(prev => ({ ...prev, uri: data.uri || data.shortUrl || "" }));
        } catch (err: unknown) {
            if (err instanceof Error) setErrorMsg(err.message);
        } finally {
@@ -150,7 +172,6 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
    };

    const handleSubmitToDb = async () => {
-        // Używamy propsa 'url' zamiast formData.remoteUrl
        if (!url) {
            setErrorMsg("Meow! I need a destination URL first! 🐾");
            return;
@@ -166,17 +187,21 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })

        try {
            const payload: LinkPayload = {
-                remoteUrl: url, // <-- Tutaj wstawiamy wartość z propsa
+                remoteUrl: url,
                uri: formData.uri,
-                subdomain: formData.subdomain || undefined,
                privacy: formData.privacy,
-                expiryDate: new Date(formData.expiryDate).getTime()
            };

-            if (user && user.id) {
-                payload.userId = user.id;
+            if (genSettings.withSubdomain && formData.subdomain) {
+                payload.subdomain = formData.subdomain;
            }

+            if (formData.expiryDate) {
+                payload.expiryDate = new Date(formData.expiryDate).getTime();
+            }
+
+            if (user?.id) payload.userId = user.id;
+
            const response = await fetch(`${API_BASE}/api/v1/link/new`, {
                method: 'POST',
                headers: getAuthHeaders(),
@@ -184,20 +209,19 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
            });

            const data = await response.json();
+            if (!response.ok) throw new Error(data.error || `Error ${response.status}`);

-            if (!response.ok) {
-                throw new Error(data.error || `Database error ${response.status}`);
+            let finalLink = data.url;
+            if (!finalLink) {
+                const protocol = API_BASE.startsWith('https') ? 'https://' : 'http://';
+                finalLink = `${protocol}${displayPrefix}/${formData.uri}`;
            }

-            const finalLink = data.url || `${API_BASE.replace('api.', '')}/${formData.uri}`;
            setResult(finalLink);
-
-            // Wywołujemy callback z App.tsx (np. żeby pokazać powiadomienie)
            onGenerate();
-
        } catch (err: unknown) {
            if (err instanceof Error) setErrorMsg(err.message);
-            else setErrorMsg("Something went wrong saving to DB!");
+            else setErrorMsg("Something went wrong!");
        } finally {
            setLoading(false);
        }
@@ -210,14 +234,13 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
    };

    return (
-        <div className="max-w-[800px] mx-auto pt-10 px-4 flex flex-col items-center pb-20">
+        <div className="max-w-[800px] mx-auto pt-10 px-4 flex flex-col items-center pb-20 font-sans">
            {/* Header */}
            <header className="text-center mb-8 relative w-full flex flex-col items-center">
                <div className={`mb-4 px-4 py-2 rounded-full text-xs font-bold flex items-center gap-2 transition-colors ${user ? 'bg-pink-100 text-pink-600' : 'bg-gray-100 text-gray-400'}`}>
                    <UserIcon size={14} />
                    {user ? `Logged in as ${user.username}` : 'Guest Mode (Anonymous)'}
                </div>
-
                <h1 className="text-4xl sm:text-6xl font-black text-pink-500 mb-2 tracking-tighter flex items-center justify-center gap-2">
                    KittyURL <PawPrint className="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" />
                </h1>
@@ -230,7 +253,7 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
                    <div className="bg-red-50 border-2 border-red-200 p-4 rounded-2xl flex items-center gap-3 text-red-600 shadow-lg">
                        <AlertCircle size={20} />
                        <span className="font-bold text-sm flex-1">{errorMsg}</span>
-                        <button onClick={() => setErrorMsg(null)}><X size={20} className="hover:scale-110 transition-transform" /></button>
+                        <button onClick={() => setErrorMsg(null)}><X size={20} /></button>
                    </div>
                </div>
            )}
@@ -258,7 +281,6 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
                </div>
            )}

-            {/* Main Form */}
            <div className="w-full bg-white rounded-[2.5rem] shadow-2xl shadow-pink-200/50 p-6 sm:p-8 border-4 border-white">

                {/* 1. Destination URL */}
@@ -271,8 +293,8 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
                            type="url"
                            placeholder="https://very-long-link.com/..."
                            className="w-full p-4 bg-pink-50/30 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-pink-600 font-medium pr-12"
-                            value={url} // Używamy propsa
-                            onChange={(e) => setUrl(e.target.value)} // Używamy propsa
+                            value={url}
+                            onChange={(e) => setUrl(e.target.value)}
                        />
                        <Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 group-focus-within:text-pink-400 transition-colors" />
                    </div>
@@ -283,7 +305,6 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
                    <label className="flex items-center gap-2 text-[11px] font-black uppercase tracking-widest text-pink-400 mb-3 ml-1">
                        <Sparkles size={12} /> 2. Generate Short Code (URI)
                    </label>
-
                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4">
                        <div className="bg-white p-2 rounded-xl border border-pink-100">
                            <label className="text-[9px] font-bold text-gray-400 uppercase block mb-1">Length</label>
@@ -292,43 +313,34 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
                        </div>
                        <div className="bg-white p-2 rounded-xl border border-pink-100">
                            <label className="text-[9px] font-bold text-gray-400 uppercase block mb-1">Case</label>
-                            <select
-                                className="w-full font-bold text-pink-500 outline-none text-sm bg-transparent"
-                                value={genSettings.case}
-                                onChange={e => setGenSettings({ ...genSettings, case: e.target.value as CaseType })}
-                            >
+                            <select className="w-full font-bold text-pink-500 outline-none text-sm bg-transparent"
+                                value={genSettings.case} onChange={e => setGenSettings({ ...genSettings, case: e.target.value as CaseType })}>
                                <option value="mixed">Mixed</option>
                                <option value="lower">Lower</option>
                                <option value="upper">Upper</option>
                            </select>
                        </div>
-                        <button
-                            onClick={() => handleGenerateUri('random')}
-                            disabled={generatingUri}
-                            className="col-span-2 sm:col-span-1 bg-white hover:bg-pink-100 border-2 border-pink-200 text-pink-500 rounded-xl font-bold text-xs flex flex-col items-center justify-center gap-1 transition-all active:scale-95 py-2"
-                        >
-                            <Hash size={16} />
-                            {generatingUri ? '...' : 'Random'}
+                        <button onClick={() => handleGenerateUri('random')} className="col-span-2 sm:col-span-1 bg-white hover:bg-pink-100 border-2 border-pink-200 text-pink-500 rounded-xl font-bold text-xs py-2 transition-all active:scale-95 flex flex-col items-center justify-center gap-1">
+                            <Hash size={16} /> {generatingUri ? '...' : 'Random'}
                        </button>
-                        <button
-                            onClick={() => handleGenerateUri('wordlist')}
-                            disabled={generatingUri}
-                            className="col-span-2 sm:col-span-1 bg-white hover:bg-pink-100 border-2 border-pink-200 text-pink-500 rounded-xl font-bold text-xs flex flex-col items-center justify-center gap-1 transition-all active:scale-95 py-2"
-                        >
-                            <BookOpen size={16} />
-                            {generatingUri ? '...' : 'Sentence'}
+                        <button onClick={() => handleGenerateUri('wordlist')} className="col-span-2 sm:col-span-1 bg-white hover:bg-pink-100 border-2 border-pink-200 text-pink-500 rounded-xl font-bold text-xs py-2 transition-all active:scale-95 flex flex-col items-center justify-center gap-1">
+                            <BookOpen size={16} /> {generatingUri ? '...' : 'Sentence'}
                        </button>
                    </div>

-                    <div className="relative">
+                    <div className="relative flex items-center">
+                        <div className="absolute left-4 flex items-center pointer-events-none z-10">
+                            <span className="text-pink-300 font-bold text-sm sm:text-lg">{displayPrefix}</span>
+                            <span className="text-pink-400 font-black text-lg mx-1">/</span>
+                        </div>
                        <input
                            type="text"
                            placeholder="my-custom-uri"
-                            className="w-full p-4 pl-12 bg-white border-2 border-pink-200 rounded-2xl outline-none focus:border-pink-500 transition-all text-pink-600 font-black text-lg shadow-inner"
+                            style={{ paddingLeft: `${displayPrefix.length * 9.5 + 40}px` }}
+                            className="w-full p-4 bg-white border-2 border-pink-200 rounded-2xl outline-none focus:border-pink-500 transition-all text-pink-600 font-black text-lg shadow-inner"
                            value={formData.uri}
                            onChange={(e) => setFormData({ ...formData, uri: e.target.value })}
                        />
-                        <div className="absolute left-4 top-1/2 -translate-y-1/2 text-pink-300 font-bold select-none">/</div>
                        {formData.uri && (
                            <div className="absolute right-4 top-1/2 -translate-y-1/2">
                                <Check size={18} className="text-green-500" />
@@ -338,35 +350,121 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
                </div>

                {/* 3. Database Settings */}
-                <div className="mb-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    <div className="bg-gray-50 p-4 rounded-2xl border border-gray-100">
-                        <label className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400 mb-2"><Calendar size={14} /> Expiry Date</label>
-                        <input type="date" className="w-full bg-white border border-gray-200 rounded-lg px-3 py-2 text-xs font-bold text-gray-600 outline-none focus:border-pink-400"
-                            value={formData.expiryDate}
-                            onChange={e => setFormData({ ...formData, expiryDate: e.target.value })} />
+                <div className="mb-8 flex flex-col gap-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+
+                        {/* ZMODYFIKOWANA SEKCJA: Expiry Date / Custom Duration */}
+                        <div className="bg-gray-50 p-4 rounded-2xl border border-gray-100 flex flex-col">
+                            <div className="flex items-center justify-between mb-2">
+                                <label className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400">
+                                    <Clock size={14} /> Expiry Time
+                                </label>
+                                {/* Przełącznik trybu */}
+                                <div className="flex bg-gray-200 rounded-lg p-0.5">
+                                    <button
+                                        onClick={() => setExpiryMode('date')}
+                                        className={`p-1.5 rounded-md transition-all ${expiryMode === 'date' ? 'bg-white text-pink-500 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
+                                    >
+                                        <Calendar size={14} />
+                                    </button>
+                                    <button
+                                        onClick={() => setExpiryMode('duration')}
+                                        className={`p-1.5 rounded-md transition-all ${expiryMode === 'duration' ? 'bg-white text-pink-500 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
+                                    >
+                                        <Hourglass size={14} />
+                                    </button>
+                                </div>
+                            </div>
+
+                            {expiryMode === 'date' ? (
+                                <>
+                                    <input
+                                        type="datetime-local"
+                                        className="w-full bg-white border border-gray-200 rounded-lg px-3 py-3 text-xs font-bold text-gray-600 outline-none focus:border-pink-400 mb-1"
+                                        value={formData.expiryDate}
+                                        onChange={e => setFormData({ ...formData, expiryDate: e.target.value })}
+                                    />
+                                    <p className="text-[8px] text-gray-400 uppercase pl-1">Pick specific date</p>
+                                </>
+                            ) : (
+                                <>
+                                    {/* NOWE: Custom Duration Inputs dla Mobile */}
+                                    <div className="flex gap-2 mb-1">
+                                        <input
+                                            type="number"
+                                            inputMode="numeric"
+                                            pattern="[0-9]*"
+                                            placeholder="45"
+                                            min="1"
+                                            className="w-1/2 bg-white border border-gray-200 rounded-lg px-3 py-3 text-sm font-bold text-pink-500 outline-none focus:border-pink-400 placeholder:text-gray-300 text-center"
+                                            value={durationValue}
+                                            onChange={(e) => setDurationValue(e.target.value)}
+                                        />
+                                        <select
+                                            className="w-1/2 bg-white border border-gray-200 rounded-lg px-2 py-3 text-xs font-bold text-gray-600 outline-none focus:border-pink-400"
+                                            value={durationUnit}
+                                            onChange={(e) => setDurationUnit(e.target.value)}
+                                        >
+                                            <option value="minutes">Minutes</option>
+                                            <option value="hours">Hours</option>
+                                            <option value="days">Days</option>
+                                            <option value="weeks">Weeks</option>
+                                            <option value="months">Months</option>
+                                        </select>
+                                    </div>
+                                    <p className="text-[8px] text-gray-400 uppercase truncate pl-1">
+                                        {formData.expiryDate
+                                            ? `Expires: ${new Date(formData.expiryDate).toLocaleString()}`
+                                            : 'Enter duration (e.g. 45 min)'}
+                                    </p>
+                                </>
+                            )}
+                        </div>
+
+                        <label className="flex items-center justify-between bg-gray-50 p-4 rounded-2xl border border-gray-100 cursor-pointer hover:bg-pink-50 transition-colors">
+                            <span className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400"><Shield size={14} /> Private Link</span>
+                            <input type="checkbox" className="accent-pink-500 w-5 h-5" checked={formData.privacy}
+                                onChange={e => setFormData({ ...formData, privacy: e.target.checked })} />
+                        </label>
                    </div>

-                    <label className="flex items-center justify-between bg-gray-50 p-4 rounded-2xl border border-gray-100 cursor-pointer hover:bg-pink-50 transition-colors">
-                        <span className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400"><Shield size={14} /> Private Link</span>
-                        <input type="checkbox" className="accent-pink-500 w-5 h-5" checked={formData.privacy}
-                            onChange={e => setFormData({ ...formData, privacy: e.target.checked })} />
-                    </label>
+                    {/* Subdomain Support Box */}
+                    <div className="bg-gray-50 p-4 rounded-2xl border border-gray-100">
+                        <label className="flex items-center justify-between cursor-pointer mb-2">
+                            <span className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400"><Globe size={14} /> Subdomain Support</span>
+                            <input
+                                type="checkbox"
+                                className="accent-pink-500 w-5 h-5"
+                                checked={genSettings.withSubdomain}
+                                onChange={e => {
+                                    setGenSettings({ ...genSettings, withSubdomain: e.target.checked });
+                                    if (!e.target.checked) setFormData(prev => ({ ...prev, subdomain: '' }));
+                                }}
+                            />
+                        </label>

-                    <label className="flex items-center justify-between bg-gray-50 p-4 rounded-2xl border border-gray-100 cursor-pointer hover:bg-pink-50 transition-colors sm:col-span-2">
-                        <span className="flex items-center gap-2 text-[10px] font-black uppercase text-gray-400"><Globe size={14} /> Subdomain Support</span>
-                        <input type="checkbox" className="accent-pink-500 w-5 h-5" checked={genSettings.withSubdomain}
-                            onChange={e => {
-                                setGenSettings({ ...genSettings, withSubdomain: e.target.checked });
-                                setFormData({ ...formData, subdomain: e.target.checked ? 'true' : '' });
-                            }} />
-                    </label>
+                        {genSettings.withSubdomain && (
+                            <div className="animate-in slide-in-from-top-2 duration-300 mt-3">
+                                <div className="relative">
+                                    <input
+                                        type="text"
+                                        placeholder="your-subdomain"
+                                        className="w-full p-3 bg-white border-2 border-pink-100 rounded-xl outline-none focus:border-pink-400 text-sm font-bold text-pink-600 pr-20"
+                                        value={formData.subdomain}
+                                        onChange={(e) => setFormData({ ...formData, subdomain: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') })}
+                                    />
+                                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-black text-pink-200">.{baseDomain}</span>
+                                </div>
+                            </div>
+                        )}
+                    </div>
                </div>

                {/* 4. Submit Button */}
                <button
                    onClick={handleSubmitToDb}
                    disabled={loading}
-                    className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-5 rounded-[1.8rem] transition-all shadow-xl shadow-pink-200 active:scale-[0.98] text-xl flex items-center justify-center gap-3 disabled:opacity-50 disabled:grayscale"
+                    className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-5 rounded-[1.8rem] transition-all shadow-xl shadow-pink-200 active:scale-[0.98] text-xl flex items-center justify-center gap-3 disabled:opacity-50"
                >
                    {loading ? (
                        <>Saving... <RefreshCw className="animate-spin" /></>
@@ -374,14 +472,11 @@ export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate })
                        <>Save to Database <Save className="w-6 h-6" /></>
                    )}
                </button>
-
            </div>

            <footer className="mt-12 text-center opacity-40">
                <Cat className="mx-auto text-pink-300 mb-2 w-10 h-10" />
-                <p className="text-pink-300 font-black text-[10px] uppercase tracking-[0.2em]">
-                    KittyURL Generator v2.0
-                </p>
+                <p className="text-pink-300 font-black text-[10px] uppercase tracking-[0.2em]">KittyURL Generator v2.2</p>
            </footer>
        </div>
    );
Author	SHA1	Message	Date
sherl	447ea1c761	fix: use serve temporarily to regenerate dist based on user's .env All checks were successful Build and push Docker image / build (push) Successful in 33s Details Release new version / release (push) Successful in 27s Details Update changelog / changelog (push) Successful in 25s Details	2026-01-21 00:50:28 +01:00
sherl	89b332f620	fix: typo in Dockerfile All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-20 22:19:43 +01:00
sherl	f2948eeebe	fix: workaround npm multi-platform build bug Some checks failed Build and push Docker image / build (push) Failing after 1m26s Details Update changelog / changelog (push) Has been cancelled Details Release new version / release (push) Has been cancelled Details rolls back build CI/CD to ARM64-only	2026-01-20 22:14:03 +01:00
Pc	0afbdaf7f8	feat: duration time based expiry date for links All checks were successful Update changelog / changelog (push) Successful in 27s Details	2026-01-19 17:22:31 +01:00
Pc	efc2861ab4	fix: subdomain support, expiry date fix All checks were successful Update changelog / changelog (push) Successful in 26s Details	2026-01-09 22:40:43 +01:00
sherl	18e7baa73c	fix: introduce workaround for cross-platform docker image building Some checks failed Build and push Docker image / build (push) Failing after 3m59s Details Release new version / release (push) Successful in 28s Details Update changelog / changelog (push) Successful in 26s Details	2026-01-09 22:29:17 +01:00