[RTY-260028]: fix qr outside the app and add 404 page for non-defined urls

Author: Ravindrayadav04

.gitignore

@@ -59,3 +59,6 @@ poetry.lock
 *.tmp
 *.temp
 *.bak
+
+
+assets/images/qr/*

app/main.py

@@ -2,14 +2,18 @@
 from contextlib import asynccontextmanager
 from pathlib import Path
 import logging
-import traceback
 import asyncio
 
 from fastapi import FastAPI, Request
-from fastapi.responses import JSONResponse
+
+# from fastapi.responses import JSONResponse
 from fastapi.staticfiles import StaticFiles
 from starlette.middleware.sessions import SessionMiddleware
 
+# from fastapi.exceptions import RequestValidationError
+# from starlette.exceptions import HTTPException as StarletteHTTPException
+from fastapi.templating import Jinja2Templates
+
 from app.routes import ui_router
 from app.utils import db
 from app.utils.cache import cleanup_expired
@@ -90,22 +94,36 @@ async def lifespan(app: FastAPI):
 
 app = FastAPI(title="TinyURL", lifespan=lifespan)
 app.add_middleware(SessionMiddleware, secret_key=SESSION_SECRET)
+templates = Jinja2Templates(directory="app/templates")
 
 BASE_DIR = Path(__file__).resolve().parent
 STATIC_DIR = BASE_DIR / "static"
 
 app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
 
+# QR codes are now served from /qr, which maps to assets/images/qr in the project root
+PROJECT_ROOT = BASE_DIR.parent
+QR_DIR = PROJECT_ROOT / "assets" / "images" / "qr"
+app.mount("/qr", StaticFiles(directory=QR_DIR), name="qr")
 
 # -----------------------------
 # Global error handler
 # -----------------------------
-@app.exception_handler(Exception)
-async def global_exception_handler(request: Request, exc: Exception):
-    traceback.print_exc()
-    return JSONResponse(
-        status_code=500,
-        content={"success": False, "error": "INTERNAL_SERVER_ERROR"},
+# app.exception_handler(Exception)
+# sync def global_exception_handler(request: Request, exc: Exception):
+#    traceback.print_exc()
+#    return JSONResponse(
+#        status_code=500,
+#        content={"success": False, "error": "INTERNAL_SERVER_ERROR"},
+#    )
+
+
+@app.exception_handler(404)
+async def custom_404_handler(request: Request, exc):
+    return templates.TemplateResponse(
+        "404.html",
+        {"request": request},
+        status_code=404,
     )
 
 

app/routes.py

@@ -22,6 +22,7 @@
 from fastapi.templating import Jinja2Templates
 from pydantic import BaseModel, Field
 
+
 from app import __version__
 from app.utils import db
 from app.utils.cache import (
@@ -68,10 +69,11 @@ async def index(request: Request):
     if qr_enabled and new_short_url and short_code:
         qr_data = new_short_url if qr_type == "short" else original_url
         qr_filename = f"{short_code}.png"
-        qr_dir = BASE_DIR / "static" / "qr"
+        PROJECT_ROOT = BASE_DIR.parent  # go from app/ → project root
+        qr_dir = PROJECT_ROOT / "assets" / "images" / "qr"
         qr_dir.mkdir(parents=True, exist_ok=True)
         generate_qr_with_logo(qr_data, str(qr_dir / qr_filename))
-        qr_image = f"/static/qr/{qr_filename}"
+        qr_image = f"/qr/{qr_filename}"
 
     recent_urls = db.get_recent_urls(MAX_RECENT_URLS) or get_recent_from_cache(
         MAX_RECENT_URLS
@@ -139,6 +141,7 @@ async def create_short_url(
 
 
 @ui_router.get("/recent", response_class=HTMLResponse)
+@ui_router.get("/history", response_class=HTMLResponse)
 async def recent_urls(request: Request):
     recent_urls_list = db.get_recent_urls(MAX_RECENT_URLS) or get_recent_from_cache(
         MAX_RECENT_URLS
@@ -223,7 +226,8 @@ def redirect_short_ui(short_code: str, background_tasks: BackgroundTasks):
                 set_cache_pair(short_code, original_url)
                 return RedirectResponse(original_url)
 
-    return PlainTextResponse("Invalid short URL", status_code=404)
+    # return PlainTextResponse("Invalid short URL", status_code=404)
+    raise HTTPException(status_code=404, detail="Page not found")
 
 
 @ui_router.delete("/recent/{short_code}")

app/static/css/tiny.css

@@ -67,6 +67,14 @@ body.light-theme {
   z-index: 1000;
 }
 
+body.light-theme .app-header {
+  background: #ffffff;
+  /* solid background */
+  border-bottom: 1px solid #e5e7eb;
+  /* clear separation */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+}
+
 .header-left,
 .header-right {
   display: flex;
@@ -129,6 +137,26 @@ body.dark-theme .app-header {
   background: #111827;
 }
 
+.nav-link {
+  position: relative;
+}
+
+.nav-link::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -4px;
+  width: 0;
+  height: 2px;
+  background: var(--text-primary);
+  transition: width 0.3s;
+}
+
+.nav-link.active::after {
+  width: 100%;
+}
+
+
 .dark-theme .nav-link.active::after {
   background: #f8fafc;
 }
@@ -355,32 +383,40 @@ body.dark-theme .app-header {
   font-weight: 700;
 }
 
-
+/* ===============================
+   MODERN GLASS RECENT TABLE
+================================= */
+/* PAGE CONTAINER */
 .recent-page-container {
-  max-width: 1100px;
-  margin: 30px auto;
-  padding: 28px;
-  background: var(--card);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: 20px;
-  box-shadow: var(--card-shadow);
-  color: var(--text-color);
-  transition: background 0.3s ease, border 0.3s ease;
+  width: 100%;
+  max-width: 1200px;
+  /* controls table width */
+  margin: 0 auto;
+  /* centers */
+  padding: 0 24px;
+  /* space left & right */
+  box-sizing: border-box;
 }
 
+/* Wrapper */
 .recent-table-wrapper {
-  margin-top: 20px;
   width: 100%;
+  /*margin-top: 20px;
+  margin-bottom: 20px;*/
   overflow-x: auto;
 }
 
+/* ===============================
+   TABLE BASE
+================================= */
+
 .recent-table {
   width: 100%;
   border-collapse: collapse;
   border-radius: 12px;
   overflow: hidden;
   table-layout: fixed;
+  min-width: 800px;
 }
 
 /* Header */
@@ -389,32 +425,84 @@ body.dark-theme .app-header {
 }
 
 .recent-table th {
-  padding: 8px 14px;
+  padding: 10px 14px;
   text-align: left;
   font-size: 13px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--muted);
   border-bottom: 1px solid var(--glass-border);
+  white-space: nowrap;
 }
 
 /* Body cells */
 .recent-table td {
-  vertical-align: middle;
   padding: 14px;
   font-size: 14px;
   color: var(--text-primary);
   border-bottom: 1px solid var(--glass-border);
+  vertical-align: middle;
   transition: 0.25s ease;
+  white-space: nowrap;
 }
 
 /* Row hover */
 .recent-table tbody tr:hover {
   background: rgba(255, 255, 255, 0.05);
 }
 
-/* Short link */
+/* ===============================
+   COLUMN WIDTH CONTROL
+================================= */
+
+/* # column */
+.recent-table th:nth-child(1),
+.recent-table td:nth-child(1) {
+  width: 45px;
+  text-align: center;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+/* Short URL */
+.recent-table th:nth-child(2),
+.recent-table td:nth-child(2) {
+  width: 170px;
+}
+
+/* Original URL (main space owner) */
+.recent-table th:nth-child(3),
+.recent-table td:nth-child(3) {
+  width: 45%;
+  min-width: 0;
+}
+
+/* Created */
+.recent-table th:nth-child(4),
+.recent-table td:nth-child(4) {
+  width: 170px;
+}
+
+/* Visits */
+.recent-table th:nth-child(5),
+.recent-table td:nth-child(5) {
+  width: 80px;
+  text-align: center;
+  font-weight: 700;
+  color: var(--accent-2);
+}
+
+/* Actions */
+.recent-table th:nth-child(6),
+.recent-table td:nth-child(6) {
+  width: 120px;
+}
+
+/* ===============================
+   LINKS
+================================= */
+
 .short-code a {
   color: var(--accent);
   font-weight: 700;
@@ -426,22 +514,17 @@ body.dark-theme .app-header {
   text-decoration: underline;
 }
 
-/*.original-url,
-.original-url a {
-  white-space: normal;
-  word-break: break-word;
-  overflow-wrap: break-word;
-}*/
-
+/* Original URL truncate */
 .original-url {
-  max-width: 100%;
+  word-break: break-all;
 }
 
 .original-url a {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--text-secondary);
 }
 
 .original-url a:hover {
@@ -455,23 +538,14 @@ body.dark-theme .app-header {
   white-space: nowrap;
 }
 
-/* Visit count highlight */
-.recent-table td:nth-child(5) {
-  font-weight: 700;
-  color: var(--accent-2);
-}
+/* ===============================
+   ACTION BUTTONS
+================================= */
 
-/* Dark mode adjustments */
-.dark-theme .recent-table th,
-.dark-theme .recent-table td {
-  color: #e5e7eb;
-  border-bottom: 1px solid var(--glass-border);
-}
-
-/* Action buttons */
 .action-col {
   display: flex;
   gap: 10px;
+  justify-content: flex-start;
 }
 
 .action-btn {
@@ -496,11 +570,36 @@ body.dark-theme .app-header {
   color: #fff;
 }
 
-.recent-table-wrapper {
-  margin-bottom: 20px;
+/* ===============================
+   DARK MODE
+================================= */
+
+.dark-theme .recent-table th,
+.dark-theme .recent-table td {
+  color: #e5e7eb;
+  border-bottom: 1px solid var(--glass-border);
 }
 
+/* Tablet */
+@media (max-width: 1024px) {
+  .recent-page-container {
+    padding: 0 18px;
+  }
+}
 
+/* Mobile */
+@media (max-width: 768px) {
+  .recent-page-container {
+    padding: 0 12px;
+  }
+}
+
+/* Small phones */
+@media (max-width: 480px) {
+  .recent-page-container {
+    padding: 0 8px;
+  }
+}
 
 /* Footer */
 footer.big-footer {