marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-20 14:39:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: groupBy tools autocomplete

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-07-07 14:18:47 +01:00
parent ec360478cc
commit daec8df499
4 changed files with 82 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
.idea/workspace.xml generated
View File

@@ -4,12 +4,11 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: tsc">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: add array key">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/result/ResultFooter.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ResultFooter.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/result/ToolMultiFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolMultiFileResult.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/string.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/string.ts" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -23,7 +22,7 @@
<option name="PUSH_AUTO_UPDATE" value="true" />
<option name="RECENT_BRANCH_BY_REPOSITORY">
<map>
<entry key="$PROJECT_DIR$" value="fork/C043/main" />
<entry key="$PROJECT_DIR$" value="fork/y1hao/dark" />
</map>
</option>
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -197,6 +196,20 @@
"number": 150
},
"lastSeen": 1751850367300
},
{
"id": {
"id": "PR_kwDOMJIfts6dv21R",
"number": 162
},
"lastSeen": 1751893739514
},
{
"id": {
"id": "PR_kwDOMJIfts6dwQJi",
"number": 163
},
"lastSeen": 1751893861615
}
]
}]]></component>
@@ -255,7 +268,7 @@
"Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
"Vitest.replaceText function.executor": "Run",
"Vitest.timeBetweenDates.executor": "Run",
"git-widget-placeholder": "#150 on fork/omenmn/pdftopng",
"git-widget-placeholder": "#163 on fork/y1hao/grouping",
"ignore.virus.scanning.warn.message": "true",
"kotlin-language-version-configured": "true",
"last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src/pages/tools/json",
@@ -495,22 +508,8 @@
<workItem from="1748282636141" duration="478000" />
<workItem from="1749047510481" duration="879000" />
<workItem from="1751846528195" duration="4358000" />
</task>
<task id="LOCAL-00157" summary="refactor: use ToolContent">
<option name="closed" value="true" />
<created>1741543593426</created>
<option name="number" value="00157" />
<option name="presentableId" value="LOCAL-00157" />
<option name="project" value="LOCAL" />
<updated>1741543593427</updated>
</task>
<task id="LOCAL-00158" summary="fix: prettify json">
<option name="closed" value="true" />
<created>1741543732607</created>
<option name="number" value="00158" />
<option name="presentableId" value="LOCAL-00158" />
<option name="project" value="LOCAL" />
<updated>1741543732607</updated>
<workItem from="1751852868038" duration="680000" />
<workItem from="1751893034799" duration="1192000" />
</task>
<task id="LOCAL-00159" summary="refactor: sum">
<option name="closed" value="true" />
@@ -888,7 +887,23 @@
<option name="project" value="LOCAL" />
<updated>1751850152784</updated>
</task>
<option name="localTasksCounter" value="206" />
<task id="LOCAL-00206" summary="chore: remove .codebuddy">
<option name="closed" value="true" />
<created>1751852942341</created>
<option name="number" value="00206" />
<option name="presentableId" value="LOCAL-00206" />
<option name="project" value="LOCAL" />
<updated>1751852942341</updated>
</task>
<task id="LOCAL-00207" summary="chore: add array key">
<option name="closed" value="true" />
<created>1751893722720</created>
<option name="number" value="00207" />
<option name="presentableId" value="LOCAL-00207" />
<option name="project" value="LOCAL" />
<updated>1751893722720</updated>
</task>
<option name="localTasksCounter" value="208" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -935,8 +950,6 @@
<option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
<option name="CHECK_NEW_TODO" value="false" />
<option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
<MESSAGE value="fix: stars button width for 1k+ " />
<MESSAGE value="feat: compress pdf" />
<MESSAGE value="refactor: compress pdf" />
<MESSAGE value="refactor: lib" />
<MESSAGE value="fix: path" />
@@ -960,7 +973,9 @@
<MESSAGE value="chore: use scrollY" />
<MESSAGE value="chore: remove flip x and y" />
<MESSAGE value="fix: tsc" />
<option name="LAST_COMMIT_MESSAGE" value="fix: tsc" />
<MESSAGE value="chore: remove .codebuddy" />
<MESSAGE value="chore: add array key" />
<option name="LAST_COMMIT_MESSAGE" value="chore: add array key" />
</component>
<component name="VgoProject">
<integration-enabled>false</integration-enabled>

34
src/components/Hero.tsx
View File

@@ -1,4 +1,13 @@
import { Autocomplete, Box, Stack, TextField, useTheme } from '@mui/material';
import {
Autocomplete,
Box,
darken,
lighten,
Stack,
styled,
TextField,
useTheme
} from '@mui/material';
import Typography from '@mui/material/Typography';
import SearchIcon from '@mui/icons-material/Search';
import Grid from '@mui/material/Grid';
@@ -8,7 +17,22 @@ import { filterTools, tools } from '@tools/index';
import { useNavigate } from 'react-router-dom';
import _ from 'lodash';
import { Icon } from '@iconify/react';
import { getToolCategoryTitle } from '@utils/string';
const GroupHeader = styled('div')(({ theme }) => ({
position: 'sticky',
top: '-8px',
padding: '4px 10px',
color: theme.palette.primary.main,
backgroundColor: lighten(theme.palette.primary.light, 0.85),
...theme.applyStyles('dark', {
backgroundColor: darken(theme.palette.primary.main, 0.8)
})
}));
const GroupItems = styled('ul')({
padding: 0
});
const exampleTools: { label: string; url: string }[] = [
{
label: 'Create a transparent image',
@@ -65,6 +89,14 @@ export default function Hero() {
autoHighlight
options={filteredTools}
groupBy={(option) => option.type}
renderGroup={(params) => {
return (
<li key={params.key}>
<GroupHeader>{getToolCategoryTitle(params.group)}</GroupHeader>
<GroupItems>{params.children}</GroupItems>
</li>
);
}}
inputValue={inputValue}
getOptionLabel={(option) => option.name}
renderInput={(params) => (

6
src/pages/tools-by-category/index.tsx
View File

@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { filterTools, getToolsByCategory } from '../../tools';
import Hero from 'components/Hero';
import { capitalizeFirstLetter } from '@utils/string';
import { capitalizeFirstLetter, getToolCategoryTitle } from '@utils/string';
import { Icon } from '@iconify/react';
import { categoriesColors } from 'config/uiConfig';
import React, { useEffect } from 'react';
@@ -21,9 +21,7 @@ export default function ToolsByCategory() {
const mainContentRef = React.useRef<HTMLDivElement>(null);
const { categoryName } = useParams();
const [searchTerm, setSearchTerm] = React.useState<string>('');
const rawTitle = getToolsByCategory().find(
(category) => category.type === categoryName
)!.rawTitle;
const rawTitle = getToolCategoryTitle(categoryName as string);
useEffect(() => {
if (mainContentRef.current) {

5
src/utils/string.ts
View File

@@ -1,4 +1,5 @@
import { UpdateField } from '@components/options/ToolOptions';
import { getToolsByCategory } from '@tools/index';
// Here starting the shared values for string manipulation.
@@ -105,3 +106,7 @@ export function itemCounter(
}
return dict;
}
export const getToolCategoryTitle = (categoryName: string): string =>
getToolsByCategory().find((category) => category.type === categoryName)!
.rawTitle;