Refactor StructureView and Overview components for improved readability; remove unused sorting logic and adjust layout styles

src/dashboardWebView/components/Contents/Overview.tsx

@@ -146,10 +146,10 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
           />
           {settings && settings?.contentFolders?.length > 0 ? (
             <p className={`text-xl font-medium`}>{localize(LocalizationKey.dashboardContentsOverviewNoMarkdown)}</p>
-            
+
           ) : (
             <p className={`text-lg font-medium`}>{localize(LocalizationKey.dashboardContentsOverviewNoFolders)}</p>
-            
+
           )}
         </div>
       </div>
@@ -202,7 +202,7 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
             <h1 className='text-xl flex space-x-2 items-center mb-4'>
               <PinIcon className={`-rotate-45`} />
               <span>{localize(LocalizationKey.dashboardContentsOverviewPinned)}</span>
-              
+
             </h1>
             <List>
               {pinnedPages.map((page, idx) => (

src/dashboardWebView/components/Contents/StructureView.tsx

@@ -20,7 +20,6 @@ interface FolderNode {
 export const StructureView: React.FunctionComponent<IStructureViewProps> = ({
   pages
 }: React.PropsWithChildren<IStructureViewProps>) => {
-
   const folderTree = useMemo(() => {
     const root: FolderNode = {
       name: '',
@@ -125,15 +124,6 @@ export const StructureView: React.FunctionComponent<IStructureViewProps> = ({
       }
     }
 
-    // Sort folders and pages
-    const sortNode = (node: FolderNode) => {
-      node.children.sort((a, b) => a.name.localeCompare(b.name));
-      node.pages.sort((a, b) => a.title.localeCompare(b.title));
-      node.children.forEach(sortNode);
-    };
-
-    sortNode(root);
-
     return root;
   }, [pages]);
 
@@ -150,13 +140,13 @@ export const StructureView: React.FunctionComponent<IStructureViewProps> = ({
     if (isRoot) {
       // For root node, render children and pages directly
       return (
-        <div>
+        <div className='space-y-4'>
           {/* Root level folders */}
           {node.children.map(child => renderFolderNode(child, depth + 1))}
 
           {/* Root level pages */}
           {node.pages.length > 0 && (
-            <div className="mb-6">
+            <div>
               <h3 className="text-lg font-medium mb-3 text-[var(--vscode-editor-foreground)]">
                 Root Files
               </h3>

src/dashboardWebView/components/Header/Pagination.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import usePagination from '../../hooks/usePagination';
-import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
+import { MediaTotalSelector, PageAtom, SettingsAtom, ViewSelector } from '../../state';
 import { PaginationButton } from './PaginationButton';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DashboardViewType } from '../../models';
 
 export interface IPaginationProps {
   totalPages?: number;
@@ -17,6 +18,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
   const [page, setPage] = useRecoilState(PageAtom);
   const totalMedia = useRecoilValue(MediaTotalSelector);
   const settings = useRecoilValue(SettingsAtom);
+  const view = useRecoilValue(ViewSelector);
   const { pageSetNr, totalPagesNr } = usePagination(
     settings?.dashboardState.contents.pagination,
     totalPages,
@@ -33,17 +35,17 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
       if (i >= 0 && i <= totalPagesNr) {
         buttons.push(
           <button
-          key={i}
-          disabled={i === page}
-          onClick={() => {
-            setPage(i);
-          }}
-          className={`max-h-8 rounded ${page === i
-            ? `px-2 bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]`
-            : `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}`}
-        >
-          {i + 1}
-        </button>
+            key={i}
+            disabled={i === page}
+            onClick={() => {
+              setPage(i);
+            }}
+            className={`max-h-8 rounded ${page === i
+              ? `px-2 bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]`
+              : `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}`}
+          >
+            {i + 1}
+          </button>
         );
       }
     }
@@ -58,6 +60,10 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
     setPage(0);
   }, []);
 
+  if (view === DashboardViewType.Structure) {
+    return null;
+  }
+
   return (
     <div className="flex justify-between items-center sm:justify-end space-x-2 text-sm">
       <PaginationButton