cosmetic changes

web/src/App.tsx

@@ -102,7 +102,8 @@ function Stat() {
   const availableCount = useStoreState((state) => state.stats.availableCount);
   const {t} = useTranslation();
 
-  const uniqueness = ((n) => {
+  const uniqueness = availableCount / totalCount;
+  const uniquenessText = ((n) => {
     if (n > 0.7 && n <= 1.0) {
       return t('uniqueness.high');
     } else if (n > 0.4 && n <= 0.7) {
@@ -110,9 +111,13 @@ function Stat() {
     } else {
       return t('uniqueness.low');
     }
-  })(availableCount / totalCount);
+  })(uniqueness);
 
-  return <UniquenessIndicator>{uniqueness}</UniquenessIndicator>;
+  return (
+    <UniquenessIndicator>
+      {uniquenessText} ({uniqueness.toFixed(2)})
+    </UniquenessIndicator>
+  );
 }
 
 const GlobalStyle = createGlobalStyle`

web/src/components/cards/index.tsx

@@ -36,22 +36,22 @@ const Index: React.FC<{query: string}> = ({query}) => {
       <Cards>
         <DomainCard query={query} />
         <GithubCard query={query} />
-        <GitLabCard query={query} />
+        <TwitterCard query={query} />
         <NpmCard query={query} />
+        <HomebrewCard query={query} />
+        <GitLabCard query={query} />
         <PypiCard query={query} />
         <CratesioCard query={query} />
         <RubyGemsCard query={query} />
-        <OcamlCard query={query} />
-        <HomebrewCard query={query} />
         <LinuxCard query={query} />
-        <TwitterCard query={query} />
-        <InstagramCard query={query} />
-        <SpectrumCard query={query} />
-        <SlackCard query={query} />
-        <HerokuCard query={query} />
+        <OcamlCard query={query} />
         <NowCard query={query} />
+        <HerokuCard query={query} />
         <NetlifyCard query={query} />
         <JsOrgCard query={query} />
+        <SlackCard query={query} />
+        <InstagramCard query={query} />
+        <SpectrumCard query={query} />
         <S3Card query={query} />
       </Cards>
       <Cards>

web/src/components/cards/providers/Domains.tsx

@@ -23,12 +23,12 @@ const DomainCard: React.FC<{query: string}> = ({query}) => {
     `${lowerCase}.com`,
     `${lowerCase}app.com`,
     `${lowerCase}.app`,
+    `${lowerCase}.dev`,
+    `${lowerCase}.org`,
     `${lowerCase}.io`,
     ...domainHackSuggestions,
   ];
   const moreNames = [
-    `${lowerCase}.dev`,
-    `${lowerCase}.org`,
     `${lowerCase}.sh`,
     `${lowerCase}.tools`,
     `${lowerCase}.design`,

web/src/components/cards/providers/GitHubRepository.tsx

@@ -8,13 +8,8 @@ const GithubCard: React.FC<{query: string}> = ({query}) => {
   const {t} = useTranslation();
   const lowerCase = query.toLowerCase();
 
-  const names = [query, `${lowerCase}-dev`];
-  const moreNames = [
-    `${lowerCase}hq`,
-    `${lowerCase}-team`,
-    `${lowerCase}-org`,
-    `${lowerCase}js`,
-  ];
+  const names = [query, `${lowerCase}-dev`, `${lowerCase}-team`];
+  const moreNames = [`${lowerCase}hq`, `${lowerCase}-org`, `${lowerCase}js`];
 
   return (
     <Card title={t('providers.github')}>

web/src/components/cards/providers/Npm.tsx

@@ -8,8 +8,8 @@ const NpmCard: React.FC<{query: string}> = ({query}) => {
   const {t} = useTranslation();
   const lowerCase = query.toLowerCase();
 
-  const names = [lowerCase];
-  const moreNames = [`${lowerCase}-js`];
+  const names = [lowerCase, `${lowerCase}-js`];
+  const moreNames = [`${lowerCase}js`];
 
   return (
     <Card title={t('providers.npm')}>