add: skin viewer, refatoring to api

src/renderer/App.tsx

@@ -14,6 +14,8 @@ import { Box } from '@mui/material';
 import MinecraftBackground from './components/MinecraftBackground';
 import { Notifier } from './components/Notifier';
 import { VersionsExplorer } from './pages/VersionsExplorer';
+import Profile from './pages/Profile';
+import Shop from './pages/Shop';
 
 const AuthCheck = ({ children }: { children: ReactNode }) => {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
@@ -120,7 +122,7 @@ const App = () => {
         }}
       >
         <MinecraftBackground />
-        <TopBar onRegister={handleRegister} username={username} />
+        <TopBar onRegister={handleRegister} username={username || ''} />
         <Notifier />
         <Routes>
           <Route path="/login" element={<Login />} />
@@ -140,6 +142,22 @@ const App = () => {
               </AuthCheck>
             }
           />
+          <Route
+            path="/profile"
+            element={
+              <AuthCheck>
+                <Profile />
+              </AuthCheck>
+            }
+          />
+          <Route
+            path="/shop"
+            element={
+              <AuthCheck>
+                <Shop />
+              </AuthCheck>
+            }
+          />
         </Routes>
       </Box>
     </Router>