Refactor DashboardCollectionList: Simplify search input layout and improve tag selection logic for better user experience.

admin-ui/src/components/Sidebar.tsx

@@ -6,7 +6,7 @@ import { usePathname } from "next/navigation";
 import { Icon } from "@iconify/react";
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
-import { fetchCollections, fetchContentList } from "@/lib/api";
+import { fetchCollections, fetchContentList, getApiKey, setApiKey } from "@/lib/api";
 import { LocaleSwitcher } from "./LocaleSwitcher";
 
 const navLinkClass =
@@ -22,6 +22,11 @@ export function Sidebar({ locale, mobileOpen = false, onClose }: SidebarProps) {
   const t = useTranslations("Sidebar");
   const pathname = usePathname();
   const [search, setSearch] = useState("");
+  const [, setLogoutVersion] = useState(0);
+  const apiKey = getApiKey();
+  const hasEnvKey = typeof window !== "undefined" && !!process.env.NEXT_PUBLIC_RUSTYCMS_API_KEY;
+  const hasStoredKey =
+    typeof window !== "undefined" && !!sessionStorage.getItem("rustycms_admin_api_key");
   const { data, isLoading, error } = useQuery({
     queryKey: ["collections"],
     queryFn: fetchCollections,
@@ -205,6 +210,31 @@ export function Sidebar({ locale, mobileOpen = false, onClose }: SidebarProps) {
           })}
         </div>
       </nav>
+      <div className="mt-2 border-t border-accent-200/50 pt-2">
+        {hasStoredKey ? (
+          <button
+            type="button"
+            onClick={() => {
+              setApiKey(null);
+              setLogoutVersion((v) => v + 1);
+              onClose?.();
+            }}
+            className={`${navLinkClass} w-full text-left text-gray-700 hover:bg-accent-100/80 hover:text-gray-900`}
+          >
+            <Icon icon="mdi:logout" className="size-4" aria-hidden />
+            {t("logout")}
+          </button>
+        ) : !hasEnvKey ? (
+          <Link
+            href="/login"
+            onClick={onClose}
+            className={`${navLinkClass} w-full text-left text-gray-700 no-underline hover:bg-accent-100/80 hover:text-gray-900 ${pathname === "/login" ? "bg-accent-200/70 font-medium text-gray-900" : ""}`}
+          >
+            <Icon icon="mdi:login" className="size-4" aria-hidden />
+            {t("login")}
+          </Link>
+        ) : null}
+      </div>
       <LocaleSwitcher locale={locale} />
     </aside>
   );