From 721932993e7da5ad4b5326ada12ead99f2a69d91 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 17 Apr 2026 03:22:07 +0000
Subject: [PATCH] feat: add String Length counter tool

Agent-Logs-Url: https://github.com/slhmy/dev-tools-web/sessions/c317bcf4-c139-46bf-9249-1b2e5dceb737

Co-authored-by: slhmy <31381093+slhmy@users.noreply.github.com>
---
 src/App.tsx                    |  2 ++
 src/components/app-sidebar.tsx |  4 +++
 src/pages/string-length.tsx    | 65 ++++++++++++++++++++++++++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 src/pages/string-length.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 75bd97b..b22a470 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import { Base64Page } from "@/pages/base64"
 import { GistPage } from "@/pages/gist"
 import { HomePage } from "@/pages/home"
 import { QRCodePage } from "@/pages/qrcode"
+import { StringLengthPage } from "@/pages/string-length"
 import { TimestampPage } from "@/pages/timestamp"
 
 export function App() {
@@ -30,6 +31,7 @@ export function App() {
                 <Route path="/timestamp" element={<TimestampPage />} />
                 <Route path="/gist" element={<GistPage />} />
                 <Route path="/qrcode" element={<QRCodePage />} />
+                <Route path="/string-length" element={<StringLengthPage />} />
               </Routes>
             </main>
           </SidebarInset>
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
index 62bfa2c..bffc0d4 100644
--- a/src/components/app-sidebar.tsx
+++ b/src/components/app-sidebar.tsx
@@ -32,6 +32,10 @@ const navItems = [
     title: "Image",
     items: [{ title: "QR Code", url: "/qrcode" }],
   },
+  {
+    title: "String",
+    items: [{ title: "String Length", url: "/string-length" }],
+  },
 ]
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
diff --git a/src/pages/string-length.tsx b/src/pages/string-length.tsx
new file mode 100644
index 0000000..b6b37e7
--- /dev/null
+++ b/src/pages/string-length.tsx
@@ -0,0 +1,65 @@
+import { useState } from "react"
+
+import { Textarea } from "@/components/ui/textarea"
+
+function countBytes(str: string): number {
+  return new TextEncoder().encode(str).length
+}
+
+function countWords(str: string): number {
+  const trimmed = str.trim()
+  return trimmed === "" ? 0 : trimmed.split(/\s+/).length
+}
+
+function countLines(str: string): number {
+  return str === "" ? 0 : str.split("\n").length
+}
+
+export function StringLengthPage() {
+  const [input, setInput] = useState("")
+
+  const charCount = input.length
+  const charNoSpaceCount = input.replace(/\s/g, "").length
+  const byteCount = countBytes(input)
+  const wordCount = countWords(input)
+  const lineCount = countLines(input)
+
+  const stats: { label: string; value: number }[] = [
+    { label: "Characters", value: charCount },
+    { label: "Characters (no spaces)", value: charNoSpaceCount },
+    { label: "Bytes (UTF-8)", value: byteCount },
+    { label: "Words", value: wordCount },
+    { label: "Lines", value: lineCount },
+  ]
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <div>
+        <h1 className="text-2xl font-semibold">String Length</h1>
+        <p className="text-muted-foreground">
+          Count characters, bytes, words, and lines in a string.
+        </p>
+      </div>
+      <div className="flex flex-col gap-3">
+        <label className="text-sm font-medium">Input</label>
+        <Textarea
+          rows={8}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Type or paste text here..."
+        />
+      </div>
+      <div className="flex flex-wrap gap-3">
+        {stats.map(({ label, value }) => (
+          <div
+            key={label}
+            className="flex min-w-36 flex-col gap-1 rounded-lg border bg-muted px-4 py-3"
+          >
+            <span className="text-xs text-muted-foreground">{label}</span>
+            <span className="font-mono text-2xl font-semibold">{value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}