From 90b8927f72fee52188413f6d1959bd13f924b9a6 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Sun, 2 Mar 2025 17:28:45 +0000
Subject: [PATCH] style: optimizations

---
 .idea/workspace.xml                    | 141 +++++++++++++------------
 src/components/Navbar/index.tsx        |  69 ++++++++----
 src/components/ToolLayout.tsx          |   3 +-
 src/components/allTools/AllTools.tsx   |   3 +
 src/components/allTools/ToolCard.tsx   |  19 +++-
 src/components/options/ToolOptions.tsx |   3 +-
 6 files changed, 139 insertions(+), 99 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index fef78c1..a31c4e7 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,16 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: remove duplicate lines">
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/duplicate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/duplicate/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/truncate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/truncate/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/wrap/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/wrap/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/create-palindrome/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/create-palindrome/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/extract-substring/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/extract-substring/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/palindrome/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/palindrome/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/randomize-case/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/randomize-case/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/reverse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/reverse/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/uppercase/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/uppercase/meta.ts" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: tsc">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Navbar/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Navbar/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolLayout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolLayout.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/allTools/AllTools.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/AllTools.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -36,8 +33,12 @@
     <option name="RESET_MODE" value="HARD" />
   </component>
   <component name="GitHubPullRequestSearchHistory">{
+  &quot;history&quot;: [
+    {
+      &quot;assignee&quot;: &quot;iib0011&quot;
+    }
+  ],
   &quot;lastFilter&quot;: {
-    &quot;state&quot;: &quot;OPEN&quot;,
     &quot;assignee&quot;: &quot;iib0011&quot;
   }
 }</component>
@@ -65,51 +66,51 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ASKED_ADD_EXTERNAL_FILES": "true",
-    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "Docker.Dockerfile build.executor": "Run",
-    "Docker.Dockerfile.executor": "Run",
-    "Playwright.JoinText Component.executor": "Run",
-    "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "RunOnceActivity.git.unshallow": "true",
-    "Vitest.compute function (1).executor": "Run",
-    "Vitest.compute function.executor": "Run",
-    "Vitest.mergeText.executor": "Run",
-    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
-    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
-    "Vitest.removeDuplicateLines function.executor": "Run",
-    "Vitest.removeDuplicateLines function.newlines option.executor": "Run",
-    "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
-    "git-widget-placeholder": "main",
-    "ignore.virus.scanning.warn.message": "true",
-    "kotlin-language-version-configured": "true",
-    "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/public/assets",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "npm.build.executor": "Run",
-    "npm.dev.executor": "Run",
-    "npm.lint.executor": "Run",
-    "npm.prebuild.executor": "Run",
-    "npm.script:create:tool.executor": "Run",
-    "npm.test.executor": "Run",
-    "npm.test:e2e.executor": "Run",
-    "npm.test:e2e:run.executor": "Run",
-    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier",
-    "project.structure.last.edited": "Problems",
-    "project.structure.proportion": "0.0",
-    "project.structure.side.proportion": "0.2",
-    "settings.editor.selected.configurable": "settings.typescriptcompiler",
-    "ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
+    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;Docker.Dockerfile build.executor&quot;: &quot;Run&quot;,
+    &quot;Docker.Dockerfile.executor&quot;: &quot;Run&quot;,
+    &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
+    &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.removeDuplicateLines function.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.removeDuplicateLines function.newlines option.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor&quot;: &quot;Run&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/public/assets&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;npm.build.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;npm.lint.executor&quot;: &quot;Run&quot;,
+    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
+    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
+    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
+    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
+    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
@@ -135,7 +136,7 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
     </key>
   </component>
-  <component name="RunManager" selected="Vitest.removeDuplicateLines function">
+  <component name="RunManager" selected="npm.dev">
     <configuration name="removeDuplicateLines function" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
@@ -213,10 +214,10 @@
     </list>
     <recent_temporary>
       <list>
+        <item itemvalue="npm.dev" />
         <item itemvalue="Vitest.removeDuplicateLines function" />
         <item itemvalue="Vitest.removeDuplicateLines function.newlines option" />
         <item itemvalue="Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter" />
-        <item itemvalue="npm.dev" />
         <item itemvalue="npm.build" />
       </list>
     </recent_temporary>
@@ -291,15 +292,9 @@
       <workItem from="1740702343843" duration="657000" />
       <workItem from="1740788381920" duration="465000" />
       <workItem from="1740788856134" duration="659000" />
-      <workItem from="1740880919391" duration="3993000" />
-    </task>
-    <task id="LOCAL-00090" summary="fix: misc">
-      <option name="closed" value="true" />
-      <created>1720558690146</created>
-      <option name="number" value="00090" />
-      <option name="presentableId" value="LOCAL-00090" />
-      <option name="project" value="LOCAL" />
-      <updated>1720558690147</updated>
+      <workItem from="1740880919391" duration="4395000" />
+      <workItem from="1740923024259" duration="23000" />
+      <workItem from="1740933006573" duration="3365000" />
     </task>
     <task id="LOCAL-00091" summary="fix: style">
       <option name="closed" value="true" />
@@ -685,7 +680,15 @@
       <option name="project" value="LOCAL" />
       <updated>1740884332735</updated>
     </task>
-    <option name="localTasksCounter" value="139" />
+    <task id="LOCAL-00139" summary="fix: tsc">
+      <option name="closed" value="true" />
+      <created>1740884971377</created>
+      <option name="number" value="00139" />
+      <option name="presentableId" value="LOCAL-00139" />
+      <option name="project" value="LOCAL" />
+      <updated>1740884971378</updated>
+    </task>
+    <option name="localTasksCounter" value="140" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -748,7 +751,6 @@
     <MESSAGE value="fix: docs" />
     <MESSAGE value="feat: funding" />
     <MESSAGE value="feat: ui changes" />
-    <MESSAGE value="fix: tsc" />
     <MESSAGE value="fix: readme" />
     <MESSAGE value="fix: broken links" />
     <MESSAGE value="chore: style buttons" />
@@ -769,7 +771,8 @@
     <MESSAGE value="chore: img" />
     <MESSAGE value="docs: readme" />
     <MESSAGE value="feat: remove duplicate lines" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: remove duplicate lines" />
+    <MESSAGE value="fix: tsc" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: tsc" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 0afaff7..83285a9 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Button from '@mui/material/Button';
@@ -9,12 +9,14 @@ import logo from 'assets/logo.png';
 import {
   Drawer,
   List,
+  ListItem,
   ListItemButton,
   ListItemText,
   Stack
 } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
+import { Icon } from '@iconify/react';
 
 const Navbar: React.FC = () => {
   const navigate = useNavigate();
@@ -28,22 +30,51 @@ const Navbar: React.FC = () => {
     // { label: 'Features', path: '/features' }
     // { label: 'About Us', path: '/about-us' }
   ];
-
+  const buttons: ReactNode[] = [
+    <Icon
+      onClick={() => window.open('https://discord.gg/SDbbn3hT4b', '_blank')}
+      style={{ cursor: 'pointer' }}
+      fontSize={30}
+      icon={'ic:baseline-discord'}
+    />,
+    <iframe
+      src="https://ghbtns.com/github-btn.html?user=iib0011&repo=omni-tools&type=star&count=true&size=large"
+      frameBorder="0"
+      scrolling="0"
+      width="130"
+      height="30"
+      title="GitHub"
+    ></iframe>,
+    <Button
+      onClick={() => {
+        window.open('https://buymeacoffee.com/iib0011', '_blank');
+      }}
+      sx={{ borderRadius: '100px' }}
+      variant={'contained'}
+      startIcon={
+        <Icon
+          style={{ cursor: 'pointer' }}
+          fontSize={25}
+          icon={'mdi:heart-outline'}
+        />
+      }
+    >
+      Buy me a coffee
+    </Button>
+  ];
   const drawerList = (
     <List>
       {navItems.map((navItem) => (
-        <ListItemButton onClick={() => navigate(navItem.path)}>
+        <ListItemButton
+          key={navItem.path}
+          onClick={() => navigate(navItem.path)}
+        >
           <ListItemText primary={navItem.label} />
         </ListItemButton>
       ))}
-      <iframe
-        src="https://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=star&count=true&size=large"
-        frameBorder="0"
-        scrolling="0"
-        width="170"
-        height="30"
-        title="GitHub"
-      ></iframe>
+      {buttons.map((button) => (
+        <ListItem>{button}</ListItem>
+      ))}
     </List>
   );
 
@@ -51,15 +82,14 @@ const Navbar: React.FC = () => {
     <AppBar
       position="static"
       style={{
-        backgroundColor: 'white',
+        backgroundColor: '#F5F5FA',
         color: 'black'
       }}
     >
       <Toolbar
         sx={{
           justifyContent: 'space-between',
-          alignItems: 'center',
-          boxShadow: '0px 2px 2px #C8C9CE'
+          alignItems: 'center'
         }}
       >
         <img
@@ -90,7 +120,7 @@ const Navbar: React.FC = () => {
             </Drawer>
           </>
         ) : (
-          <Stack direction={'row'} spacing={2}>
+          <Stack direction={'row'} spacing={3} alignItems={'center'}>
             {navItems.map((item) => (
               <Button
                 key={item.label}
@@ -111,14 +141,7 @@ const Navbar: React.FC = () => {
                 </Link>
               </Button>
             ))}
-            <iframe
-              src="https://ghbtns.com/github-btn.html?user=iib0011&repo=omni-tools&type=star&count=true&size=large"
-              frameBorder="0"
-              scrolling="0"
-              width="170"
-              height="30"
-              title="GitHub"
-            ></iframe>
+            {buttons}
           </Stack>
         )}
       </Toolbar>
diff --git a/src/components/ToolLayout.tsx b/src/components/ToolLayout.tsx
index 2099737..90569b0 100644
--- a/src/components/ToolLayout.tsx
+++ b/src/components/ToolLayout.tsx
@@ -28,7 +28,8 @@ export default function ToolLayout({
       .map((tool) => ({
         title: tool.name,
         description: tool.shortDescription,
-        link: '/' + tool.path
+        link: '/' + tool.path,
+        icon: tool.icon
       })) ?? [];
 
   return (
diff --git a/src/components/allTools/AllTools.tsx b/src/components/allTools/AllTools.tsx
index b3c701f..06d663b 100644
--- a/src/components/allTools/AllTools.tsx
+++ b/src/components/allTools/AllTools.tsx
@@ -1,10 +1,12 @@
 import { Box, Grid, Stack, Typography } from '@mui/material';
 import ToolCard from './ToolCard';
+import { IconifyIcon } from '@iconify/react';
 
 export interface ToolCardProps {
   title: string;
   description: string;
   link: string;
+  icon: IconifyIcon | string;
 }
 
 interface AllToolsProps {
@@ -26,6 +28,7 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
                 title={card.title}
                 description={card.description}
                 link={card.link}
+                icon={card.icon}
               />
             </Grid>
           ))}
diff --git a/src/components/allTools/ToolCard.tsx b/src/components/allTools/ToolCard.tsx
index 763a5e0..0767e18 100644
--- a/src/components/allTools/ToolCard.tsx
+++ b/src/components/allTools/ToolCard.tsx
@@ -1,9 +1,15 @@
-import { Box, Card, CardContent, Link, Typography } from '@mui/material';
+import { Box, Card, CardContent, Link, Stack, Typography } from '@mui/material';
 import { ToolCardProps } from './AllTools';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { useNavigate } from 'react-router-dom';
+import { Icon } from '@iconify/react';
 
-export default function ToolCard({ title, description, link }: ToolCardProps) {
+export default function ToolCard({
+  title,
+  description,
+  link,
+  icon
+}: ToolCardProps) {
   const navigate = useNavigate();
   return (
     <Card
@@ -28,9 +34,12 @@ export default function ToolCard({ title, description, link }: ToolCardProps) {
             borderColor: '#ffffff70'
           }}
         >
-          <Typography variant="h5" component="h2">
-            {title}
-          </Typography>
+          <Stack direction={'row'} spacing={2} alignItems={'center'}>
+            <Icon icon={icon} fontSize={25} />
+            <Typography variant="h5" component="h2">
+              {title}
+            </Typography>
+          </Stack>
           <Link href={link} underline="none" sx={{ color: '#fff' }}>
             <ChevronRightIcon />
           </Link>
diff --git a/src/components/options/ToolOptions.tsx b/src/components/options/ToolOptions.tsx
index 09cb689..0061562 100644
--- a/src/components/options/ToolOptions.tsx
+++ b/src/components/options/ToolOptions.tsx
@@ -96,7 +96,8 @@ export default function ToolOptions<T extends FormikValues>({
         mb: 2,
         borderRadius: 2,
         padding: 2,
-        backgroundColor: theme.palette.background.default
+        backgroundColor: theme.palette.background.default,
+        boxShadow: '2'
       }}
       mt={2}
     >