navigation

src/components/layout/Header.tsx

@@ -1,34 +1,23 @@
-import { Button } from '@/components/buttons'
+import { Icon, diamond, search } from '@/components/icons'
-import { Icon, diamond, refresh, search } from '@/components/icons'
 
 interface HeaderProps {
-  onRefresh: () => void
-  refreshDisabled?: boolean
   onSearch: (query: string) => void
   searchQuery: string
 }
 
 /**
  * Application header component
- * Contains the app title, search input, and refresh button
+ * Contains the app title and search input
  */
-const Header = ({ onRefresh, refreshDisabled = false, onSearch, searchQuery }: HeaderProps) => {
+const Header = ({ onSearch, searchQuery }: HeaderProps) => {
   return (
     <header className="app-header">
       <div className="app-title">
         <Icon name={diamond} variant="solid" size="lg" className="app-logo-icon" />
         <h1>CreamLinux</h1>
       </div>
+
       <div className="header-controls">
-        <Button
-          variant="primary"
-          onClick={onRefresh}
-          disabled={refreshDisabled}
-          className="refresh-button"
-          leftIcon={<Icon name={refresh} variant="solid" size="md" />}
-        >
-          Refresh
-        </Button>
         <div className="search-container">
           <input
             type="text"

src/components/layout/Sidebar.tsx

@@ -1,11 +1,11 @@
-import { Icon, layers, linux, proton, settings } from '@/components/icons'
+import { useState, useEffect } from 'react'
+import { getVersion } from '@tauri-apps/api/app'
+import { Icon, layers, linux, proton, settings, diamond } from '@/components/icons'
 import { epic } from '@/components/icons'
-import { Button } from '@/components/buttons'
 
 interface SidebarProps {
   setFilter: (filter: string) => void
   currentFilter: string
-  onSettingsClick: () => void
 }
 
 type FilterItem = {
@@ -15,7 +15,20 @@ type FilterItem = {
   variant?: string
 }
 
-const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) => {
+const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
+  const [version, setVersion] = useState('')
+
+  useEffect(() => {
+    getVersion()
+      .then(setVersion)
+      .catch(() => setVersion(''))
+  }, [])
+
+  const generalFilters: FilterItem[] = [
+    { id: 'overview', label: 'Overview', icon: diamond, variant: 'solid' },
+    { id: 'settings', label: 'Settings', icon: settings, variant: 'solid' },
+  ]
+
   const steamFilters: FilterItem[] = [
     { id: 'all', label: 'All Games', icon: layers, variant: 'solid' },
     { id: 'native', label: 'Native', icon: linux, variant: 'brand' },
@@ -45,6 +58,12 @@ const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) =>
         <h2>Library</h2>
       </div>
 
+      <div className="sidebar-section">
+        <ul className="filter-list">
+          {generalFilters.map(renderFilter)}
+        </ul>
+      </div>
+
       <div className="sidebar-section">
         <span className="sidebar-section-label">Steam</span>
         <ul className="filter-list">
@@ -59,18 +78,22 @@ const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) =>
         </ul>
       </div>
 
-      <Button
+      <div className="sidebar-footer">
-        variant="secondary"
+        <div className="sidebar-footer-info">
-        size="medium"
+          {version && <span className="sidebar-footer-version">v{version}</span>}
-        onClick={onSettingsClick}
+          <span className="sidebar-footer-build">Stable</span>
-        className="settings-button"
+        </div>
-        leftIcon={<Icon name={settings} variant="solid" size="md" className="settings-icon" />}
+        <a
-        fullWidth
+          href="https://github.com/Novattz/creamlinux-installer"
-      >
+          target="_blank"
-        Settings
+          rel="noopener noreferrer"
-      </Button>
+          className="sidebar-footer-link"
+        >
+          GitHub
+        </a>
+      </div>
     </div>
   )
 }
 
-export default Sidebar
+export default Sidebar