feat(console): integrate sorting into spaces list

Author: alikhere

packages/console/src/app/page.tsx

@@ -10,6 +10,8 @@ import { SpacesList } from '@/components/SpacesList'
 import { UpgradePrompt } from '@/components/UpgradePrompt'
 import { usePrivateSpacesAccess } from '@/hooks/usePrivateSpacesAccess'
 import { useFilteredSpaces } from '@/hooks/useFilteredSpaces'
+import { useSpaceSort } from '@/hooks/useSpaceSort'
+import { SpaceSortDropdown } from '@/components/SpaceSortDropdown'
 import { NoticeBanner } from '@/components/NoticeBanner'
 import { noticeConfig } from '@/config/notice'
 
@@ -25,7 +27,8 @@ export function SpacePage() {
   const [activeTab, setActiveTab] = useState<'public' | 'private'>('public')
   const [{ spaces }] = useW3()
   const { canAccessPrivateSpaces, planLoading, shouldShowPrivateSpacesTab } = usePrivateSpacesAccess()
-  const { publicSpaces, privateSpaces, hasHiddenPrivateSpaces } = useFilteredSpaces()
+  const { sortOption, setSortOption } = useSpaceSort()
+  const { publicSpaces, privateSpaces, hasHiddenPrivateSpaces } = useFilteredSpaces(sortOption)
 
   if (spaces.length === 0) {
     return <div></div>
@@ -58,6 +61,9 @@ export function SpacePage() {
         showPrivateTab={shouldShowPrivateSpacesTab}
         privateTabLocked={!canAccessPrivateSpaces}
       />
+      <div className="mb-4">
+        <SpaceSortDropdown sortOption={sortOption} onSortChange={setSortOption} />
+      </div>
       {activeTab === 'public' && (
         <SpacesList spaces={publicSpaces} type="public" />
       )}

packages/console/src/components/SpacesTabNavigation.tsx

@@ -26,7 +26,7 @@ export function SpacesTabNavigation({
   }
 
   return (
-    <div className="flex border-b border-gray-200 mb-6">
+    <div className="flex border-b border-gray-200">
       <button
         onClick={() => onTabChange('public')}
         className={`flex items-center gap-2 px-4 py-2 border-b-2 transition-colors ${

packages/console/src/hooks/useFilteredSpaces.ts

@@ -1,7 +1,8 @@
 import { useW3 } from '@storacha/ui-react'
 import { usePrivateSpacesAccess } from './usePrivateSpacesAccess'
+import { sortSpaces, type SortOption } from './useSpaceSort'
 
-export const useFilteredSpaces = () => {
+export const useFilteredSpaces = (sortOption: SortOption = 'newest') => {
   const [{ spaces }] = useW3()
   const { canAccessPrivateSpaces } = usePrivateSpacesAccess()
   const allPublicSpaces = spaces.filter(s => s.access.type === 'public')
@@ -10,9 +11,14 @@ export const useFilteredSpaces = () => {
   // but they're still in the backend and will reappear if user upgrades to paid plan
   const visiblePrivateSpaces = canAccessPrivateSpaces ? allPrivateSpaces : []
   const hiddenPrivateSpaces = canAccessPrivateSpaces ? [] : allPrivateSpaces
+  
+  // Apply sorting to filtered spaces
+  const sortedPublicSpaces = sortSpaces(allPublicSpaces, sortOption)
+  const sortedPrivateSpaces = sortSpaces(visiblePrivateSpaces, sortOption)
+  
   return {
-    publicSpaces: allPublicSpaces,
-    privateSpaces: visiblePrivateSpaces,
+    publicSpaces: sortedPublicSpaces,
+    privateSpaces: sortedPrivateSpaces,
     hiddenPrivateSpaces, // For debugging/admin purposes
     hasHiddenPrivateSpaces: hiddenPrivateSpaces.length > 0
   }