chore: star link.

src/app.js

@@ -1,11 +1,8 @@
-import s from './app.module.scss';
-
 import { ipcRenderer } from 'electron';
 import _find from 'lodash/find';
 
 import React, { useReducer, useMemo, useRef, useEffect } from 'react';
 import { HashRouter as Router, Switch, Route } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
 
 import { Client as Styletron } from 'styletron-engine-atomic';
 import { Provider as StyletronProvider } from 'styletron-react';
@@ -15,6 +12,7 @@ import AppContext from 'src/share/context';
 import appReducer, { initialState, init } from 'src/share/reducer';
 import config from 'src/native/config';
 
+import Footer from 'src/components/footer';
 import Toolbar from 'src/components/toolbar';
 import Home from 'src/modules/home';
 import Import from 'src/modules/import';
@@ -41,7 +39,6 @@ const findUserChampion = (cellId, actions = []) => {
 };
 
 const App = () => {
-  const [t] = useTranslation();
   const [store, dispatch] = useReducer(appReducer, initialState, init);
   const contextValue = useMemo(() => ({ store, dispatch }), [store, dispatch]);
 
@@ -118,9 +115,7 @@ const App = () => {
               <Route path={`/settings`} component={Settings} />
             </Switch>
           </Router>
-          <div className={s.appVer}>
-            {t('app version')}: {process.env.APP_VERSION}
-          </div>
+          <Footer />
         </BaseProvider>
       </StyletronProvider>
     </AppContext.Provider>

src/app.module.scss

@@ -85,13 +85,3 @@
     }
   }
 }
-
-.app-ver {
-  position: fixed;
-  bottom: 2vh;
-  left: 50%;
-  transform: translateX(-50%);
-  color: #b5b4b4;
-  font-size: 1.6ex;
-  font-family: SF Mono, Consolas, sans-serif;
-}

src/components/footer/index.js

@@ -0,0 +1,30 @@
+import s from './style.module.scss';
+
+import { shell } from 'electron';
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Star } from 'react-feather';
+import { useStyletron } from 'baseui';
+import { StatefulTooltip } from 'baseui/tooltip';
+
+export default function Footer() {
+  const [t] = useTranslation();
+  const [, theme] = useStyletron();
+
+  const star = (ev) => {
+    ev.preventDefault();
+    shell.openItem(`https://github.com/cangzhang/champ-r`);
+  };
+
+  return (
+    <div className={s.footer}>
+      {t('app version')}: {process.env.APP_VERSION}
+      <StatefulTooltip accessibilityType={'tooltip'} content={t(`star it`)}>
+        <a className={s.star} href='#champ-r' onClick={star}>
+          <Star size={16} color={theme.colors.warning} />
+        </a>
+      </StatefulTooltip>
+    </div>
+  );
+}

src/components/footer/style.module.scss

@@ -0,0 +1,22 @@
+.footer {
+  display: flex;
+  align-items: center;
+
+  position: fixed;
+  bottom: 2vh;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #b5b4b4;
+  font-size: 1.6ex;
+  font-family: SF Mono, Consolas, sans-serif;
+
+  .star {
+    display: flex;
+    margin-left: 1ex;
+    cursor: pointer;
+
+    svg {
+      fill: #ffc043;
+    }
+  }
+}

src/modules/i18n/en-us.js

@@ -26,5 +26,6 @@ export default {
     'pick count': `Pick count`,
     'win ratio': `Win ratio`,
     'apply perk': `Apply`,
+    'star it': `Star it!`,
   },
 };

src/modules/i18n/zh-cn.js

@@ -26,5 +26,6 @@ export default {
     'pick count': `选用场次`,
     'win ratio': `胜率`,
     'apply perk': `应用符文页`,
+    'star it': `给 ChampR 🌟`,
   },
 };