Skip to content
Merged

Beta #109

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 32 additions & 11 deletions artifacts/personal-tool-console/index.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,42 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<title>Personal Tool Console</title>
<meta name="description" content="Personal Tool Console — built on Replit. Update this description to reflect the app." />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1"
/>
<title>Toolbox — Tools for text, code, media & math</title>
<meta
name="description"
content="300+ browser-based utilities: text manipulators, code formatters, image & social tools, CSS generators, converters and more. No uploads, no sign-up."
/>
<meta name="robots" content="index, follow" />
<meta property="og:title" content="Personal Tool Console" />
<meta property="og:description" content="Personal Tool Console — built on Replit. Update this description to reflect the app." />
<meta
property="og:title"
content="Toolbox — Tools for text, code, media & math"
/>
<meta
property="og:description"
content="300+ browser-based utilities: text manipulators, code formatters, image & social tools, CSS generators, converters and more. No uploads, no sign-up."
/>
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Personal Tool Console" />
<meta name="twitter:description" content="Personal Tool Console — built on Replit. Update this description to reflect the app." />
<meta
name="twitter:title"
content="Toolbox — Tools for text, code, media & math"
/>
<meta
name="twitter:description"
content="300+ browser-based utilities: text manipulators, code formatters, image & social tools, CSS generators, converters and more. No uploads, no sign-up."
/>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="root"></div>
Expand Down
35 changes: 32 additions & 3 deletions artifacts/personal-tool-console/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,45 @@ import { Switch, Route, Router as WouterRouter } from "wouter";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import { AppShell } from "@/components/layout/app-shell";
import Catalog from "@/pages/catalog";
import Console from "@/pages/console";
import ToolPage from "@/pages/tool-page";
import NotFound from "@/pages/not-found";
import Home from "@/pages/home";

const queryClient = new QueryClient();

function Router() {
return (
<Switch>
<Route path="/" component={Home} />
<Route component={NotFound} />
<Route path="/">
{() => (
<AppShell>
<Catalog />
</AppShell>
)}
</Route>
<Route path="/console">
{() => (
<AppShell>
<Console />
</AppShell>
)}
</Route>
<Route path="/tools/:slug">
{({ slug }) => (
<AppShell key={slug}>
<ToolPage />
</AppShell>
)}
</Route>
<Route>
{() => (
<AppShell>
<NotFound />
</AppShell>
)}
</Route>
</Switch>
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { ReactNode } from "react";
import { SiteHeader } from "@/components/layout/site-header";
import { SiteFooter } from "@/components/layout/site-footer";

export function AppShell({ children }: { children: ReactNode }) {
return (
<div className="flex min-h-screen flex-col bg-background text-foreground">
<SiteHeader />
<main className="flex-1">{children}</main>
<SiteFooter />
</div>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import { useEffect, useMemo, useState } from "react";
import { useLocation } from "wouter";
import { Search, TerminalSquare } from "lucide-react";
import {
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
} from "@/components/ui/command";
import { Kbd } from "@/components/ui/kbd";
import { searchTools, getRecentTools } from "@/lib/tool-registry";
import type { ToolDefinition } from "@/lib/tool-registry";

export function CommandPalette() {
const [open, setOpen] = useState(false);
const [value, setValue] = useState("");
const [, navigate] = useLocation();

useEffect(() => {
const onKey = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❌ New issue: Complex Conditional
CommandPalette.onKey has 1 complex conditionals with 2 branches, threshold = 2

Suppress

e.preventDefault();
setOpen((o) => !o);
}
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, []);

const results = useMemo(
() => (value.trim() ? searchTools(value, 10) : []),
[value],
);
const recents = useMemo(
() => (value.trim() ? [] : getRecentTools().slice(0, 5)),
[value, open],
);

const run = (url: string) => {
setOpen(false);
setValue("");
const base = import.meta.env.BASE_URL.replace(/\/$/, "");
navigate(base + url);
Comment on lines +39 to +40

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: WouterRouter already applies BASE_URL, so prefixing it again sends navigation to a doubled base path on subpath deployments. [api mismatch]

Assessment: 🟠 Major · 🔁 Occurrence: Sometimes

Use CodeAnt Skill Fix in Cursor Fix in VSCode Claude

Prompt for AI Agent 🤖
This is a comment left during a code review.

**Path:** artifacts/personal-tool-console/src/components/layout/command-palette.tsx
**Line:** 39:40
**Comment:**
	*Api Mismatch: `WouterRouter` already applies `BASE_URL`, so prefixing it again sends navigation to a doubled base path on subpath deployments.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
👍 | 👎

Comment on lines +45 to +46

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wouter's <WouterRouter base="..."> in App.tsx already manages the base path for navigate(). Prepending base manually will cause double-prefixing (e.g. /subpath/subpath/tools/...) when the app is hosted on a base URL subpath.

Suggested change
const base = import.meta.env.BASE_URL.replace(/\/$/, "");
navigate(base + url);
navigate(url);

};

const ToolRow = ({ tool }: { tool: ToolDefinition }) => {

Check warning on line 49 in artifacts/personal-tool-console/src/components/layout/command-palette.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Move this component definition out of the parent component and pass data as props.

See more on https://sonarcloud.io/project/issues?id=LCSOGthb_Tools&issues=AaBUHNV13f23caWm9hjG&open=AaBUHNV13f23caWm9hjG&pullRequest=109
const Icon = tool.icon;
return (
<CommandItem
value={`${tool.name} ${tool.slug} ${tool.keywords.join(" ")}`}
onSelect={() => run(`/tools/${tool.slug}`)}
>
<Icon className="mr-2 h-4 w-4" />
<span className="flex-1 truncate">{tool.name}</span>
{tool.status === "coming-soon" && (
<span className="text-[10px] uppercase tracking-wide text-muted-foreground/70">
Soon
</span>
)}
</CommandItem>
);
};

return (
<>
<div className="hidden items-center gap-2 md:flex">
<button
type="button"
onClick={() => setOpen(true)}
className="inline-flex items-center gap-2 rounded-lg border border-border bg-card/60 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
>
<Search className="h-3.5 w-3.5" />
<span className="hidden lg:inline">Search tools…</span>
<Kbd>⌘K</Kbd>
</button>
<button
type="button"
onClick={() => run("/console")}
className="inline-flex items-center gap-2 rounded-lg border border-border bg-card/60 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
aria-label="Open command console"
>
<TerminalSquare className="h-3.5 w-3.5" />
</button>
</div>

<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput
placeholder="Search tools, categories…"
value={value}
onValueChange={setValue}
/>
<CommandList>
<CommandEmpty>No tools found for “{value}”.</CommandEmpty>
{value.trim() ? (
<CommandGroup heading="Tools">
{results.map((tool) => (
<ToolRow key={tool.slug} tool={tool} />
))}
</CommandGroup>
) : (
<>
<CommandItem onSelect={() => run("/console")}>
<TerminalSquare className="mr-2 h-4 w-4" />
<span className="flex-1">Open command console</span>
</CommandItem>
{recents.length > 0 && (
<>
<CommandSeparator />
<CommandGroup heading="Recent">
{recents.map((tool) => (
<ToolRow key={tool.slug} tool={tool} />
))}
</CommandGroup>
</>
)}
</>
)}
</CommandList>
</CommandDialog>
</>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Link } from "wouter";
import { Wrench } from "lucide-react";
import { SITE_NAME } from "@/hooks/use-page-title";

export function SiteFooter() {
return (
<footer className="border-t border-border">
<div className="mx-auto max-w-7xl px-4 py-8 lg:px-8">
<div className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-center">
<div className="flex items-center gap-2 text-sm font-semibold tracking-tight">
<span className="grid h-7 w-7 place-items-center rounded-lg bg-primary text-primary-foreground">
<Wrench className="h-4 w-4" />
</span>
<span>{SITE_NAME}</span>
</div>
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
<Link href="/" className="transition-colors hover:text-foreground">
Catalog
</Link>
<Link
href="/console"
className="transition-colors hover:text-foreground"
>
Command console
</Link>
<span className="text-muted-foreground/60">
Tools run locally in your browser — nothing is uploaded.
</span>
Comment on lines +23 to +25

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: The privacy statement is false: the speed test posts payloads to /api/upload-test, and other tools send entered domains and URLs to external services. [docstring mismatch]

Assessment: 🟠 Major · 🔁 Occurrence: Sometimes

Use CodeAnt Skill Fix in Cursor Fix in VSCode Claude

Prompt for AI Agent 🤖
This is a comment left during a code review.

**Path:** artifacts/personal-tool-console/src/components/layout/site-footer.tsx
**Line:** 23:25
**Comment:**
	*Docstring Mismatch: The privacy statement is false: the speed test posts payloads to `/api/upload-test`, and other tools send entered domains and URLs to external services.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
👍 | 👎

</div>
</div>
<p className="mt-6 text-xs text-muted-foreground/50">
© {new Date().getFullYear()} {SITE_NAME}.
</p>
</div>
</footer>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { Link, useLocation } from "wouter";
import { Wrench } from "lucide-react";
import { CommandPalette } from "@/components/layout/command-palette";
import { SITE_NAME } from "@/hooks/use-page-title";
import { cn } from "@/lib/utils";

const NAV = [
{ href: "/", label: "Catalog" },
{ href: "/console", label: "Console" },
];

export function SiteHeader() {
const [path] = useLocation();
return (
<header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-xl">
<div className="mx-auto flex h-14 max-w-7xl items-center justify-between gap-4 px-4 lg:px-8">
<Link
href="/"
className="flex items-center gap-2 text-sm font-semibold tracking-tight"
>
<span className="grid h-7 w-7 place-items-center rounded-lg bg-primary text-primary-foreground">
<Wrench className="h-4 w-4" />
</span>
<span>{SITE_NAME}</span>
</Link>
<nav className="flex items-center gap-1 text-sm">
{NAV.map((item) => {
const active = path === item.href;
return (
<Link
key={item.href}
href={item.href}
className={cn(
"rounded-lg px-3 py-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
active && "bg-accent text-accent-foreground",
)}
>
{item.label}
</Link>
);
})}
</nav>
<CommandPalette />
</div>
</header>
);
}
Loading
Loading