feat: Adding dark mode, cleaning the UI a small bit, adding a link to the API documentation, and linting the code. (#2182)

# What does this PR do?

This PR adds a few enhancements:
- Dark mode 
- A dark mode icon
- Adds a link to the API documentation
- Adds prettier and a linter to the code 
- Aligning the default text
- Linted the code 

## Before:
![Screenshot 2025-05-15 at 3 57
15 PM](https://github.com/user-attachments/assets/996db083-4a4f-4683-a2b4-e7c09de96135)

## After (dark mode):
![Screenshot 2025-05-15 at 3 57
50 PM](https://github.com/user-attachments/assets/9d45d26b-2449-4a5f-813e-29e07e94b793)

[//]: # (If resolving an issue, uncomment and update the line below)
[//]: # (Closes #[issue-number])

## Test Plan
[Describe the tests you ran to verify your changes with result
summaries. *Provide clear instructions so the plan can be easily
re-executed.*]

[//]: # (## Documentation)


Related to https://github.com/meta-llama/llama-stack/issues/2085

---------

Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>

llama_stack/ui/components/app-sidebar.tsx

@@ -1,5 +1,5 @@
-import { MessageSquareText, MessagesSquare } from "lucide-react"
-import Link from "next/link"
+import { MessageSquareText, MessagesSquare, MoveUpRight } from "lucide-react";
+import Link from "next/link";
 
 import {
   Sidebar,
@@ -11,8 +11,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarHeader,
-} from "@/components/ui/sidebar"
-
+} from "@/components/ui/sidebar";
 
 const logItems = [
   {
@@ -25,7 +24,12 @@ const logItems = [
     url: "/logs/responses",
     icon: MessagesSquare,
   },
-]
+  {
+    title: "Documentation",
+    url: "https://llama-stack.readthedocs.io/en/latest/references/api_reference/index.html",
+    icon: MoveUpRight,
+  },
+];
 
 export function AppSidebar() {
   return (
@@ -53,5 +57,5 @@ export function AppSidebar() {
         </SidebarGroup>
       </SidebarContent>
     </Sidebar>
-  )
+  );
 }