v0.17.0 — Mobile menu (#3) + Suggestions readability & header lightbulb (#2)

Addresses Gitea suggestions #3 and #2.

#3 Mobile: the sidebar was desktop-only (hidden md:flex), leaving phones with no
nav at all. Added a slide-out drawer (hamburger in the top bar, md:hidden) that
reuses the nav. Lifted navItems/settingsItems into src/components/layout/nav-items.ts
so the sidebar and mobile drawer share one source + active-state logic. No HTTPS
needed (pure responsive UI).

#2 Suggestions: the @otm/account-panel SuggestionsPanel hardcodes light neutral-*
text that assumes a white backdrop, so it washed out on the app theme — now
rendered on a white card for contrast in light/dark. Added a lightbulb button in
the header that jumps to Suggestions (like FMB).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/(dashboard)/suggestions/page.tsx

@@ -9,5 +9,11 @@ export const dynamic = "force-dynamic";
 export default async function SuggestionsPage() {
   const session = await getSession();
   if (!session) redirect("/login");
-  return <SuggestionsPanel />;
+  // The panel uses light-gray (neutral-*) text that assumes a white backdrop, so
+  // render it on a white card for readable contrast in light or dark theme.
+  return (
+    <div className="rounded-lg border bg-white text-neutral-900 p-4 md:p-6 shadow-sm">
+      <SuggestionsPanel />
+    </div>
+  );
 }

src/components/layout/mobile-nav.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Menu, X, Leaf } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { navItems, settingsItems, isNavActive } from "./nav-items";
+
+export function MobileNav() {
+  const [open, setOpen] = useState(false);
+  const path = usePathname();
+
+  useEffect(() => { setOpen(false); }, [path]); // close on navigation
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "";
+    return () => { document.body.style.overflow = ""; };
+  }, [open]);
+
+  const linkClass = (active: boolean, inactive: string) =>
+    cn(
+      "flex items-center gap-2.5 px-3 py-2.5 rounded-md text-sm transition-colors",
+      active
+        ? "bg-[hsl(var(--canopy-accent))] text-[hsl(var(--canopy-accent-foreground))]"
+        : inactive,
+    );
+  const MAIN_INACTIVE = "hover:bg-[hsl(var(--canopy-accent))] text-[hsl(var(--canopy-foreground))]/80";
+  const SETTINGS_INACTIVE = "hover:bg-[hsl(var(--canopy-accent))] text-[hsl(var(--canopy-foreground))]/60";
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="md:hidden p-1 -ml-1 text-foreground"
+        aria-label="Open menu"
+      >
+        <Menu className="h-6 w-6" />
+      </button>
+
+      {open && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          <div className="absolute inset-0 bg-black/50" onClick={() => setOpen(false)} />
+          <aside className="absolute left-0 top-0 bottom-0 w-64 bg-[hsl(var(--canopy))] text-[hsl(var(--canopy-foreground))] flex flex-col shadow-xl">
+            <div className="flex items-center justify-between px-4 py-4 border-b border-[hsl(var(--canopy-border))]">
+              <div className="flex items-center gap-2.5">
+                <div className="h-7 w-7 rounded-full bg-[hsl(var(--leaf))] flex items-center justify-center">
+                  <Leaf className="h-4 w-4 text-white" />
+                </div>
+                <span className="font-display text-lg font-semibold">Moon Base</span>
+              </div>
+              <button onClick={() => setOpen(false)} aria-label="Close menu" className="p-1">
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <nav className="flex-1 overflow-y-auto px-2 py-3 space-y-0.5">
+              {navItems.map(({ label, href, icon: Icon }) => (
+                <Link key={href} href={href} onClick={() => setOpen(false)} className={linkClass(isNavActive(path, href, navItems), MAIN_INACTIVE)}>
+                  <Icon className="h-4 w-4 shrink-0" />{label}
+                </Link>
+              ))}
+            </nav>
+
+            <div className="px-2 py-2 border-t border-[hsl(var(--canopy-border))] space-y-0.5">
+              {settingsItems.map(({ label, href, icon: Icon }) => (
+                <Link key={href} href={href} onClick={() => setOpen(false)} className={linkClass(path.startsWith(href), SETTINGS_INACTIVE)}>
+                  <Icon className="h-4 w-4 shrink-0" />{label}
+                </Link>
+              ))}
+            </div>
+          </aside>
+        </div>
+      )}
+    </>
+  );
+}

src/components/layout/nav-items.ts

@@ -0,0 +1,34 @@
+import {
+  LayoutDashboard, Leaf, BookOpen, Package, PawPrint, MapPin, Bell,
+  Lightbulb, KeyRound, HardDrive, RefreshCw, type LucideIcon,
+} from "lucide-react";
+
+export type NavItem = { label: string; href: string; icon: LucideIcon };
+
+export const navItems: NavItem[] = [
+  { label: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
+  { label: "Garden", href: "/garden", icon: Leaf },
+  { label: "Plant types", href: "/garden/types", icon: BookOpen },
+  { label: "Inventory", href: "/inventory", icon: Package },
+  { label: "Animals", href: "/animals", icon: PawPrint },
+  { label: "Locations", href: "/locations", icon: MapPin },
+  { label: "Reminders", href: "/tasks", icon: Bell },
+];
+
+export const settingsItems: NavItem[] = [
+  { label: "Suggestions", href: "/suggestions", icon: Lightbulb },
+  { label: "API tokens", href: "/settings/tokens", icon: KeyRound },
+  { label: "Backup & Restore", href: "/settings/backup", icon: HardDrive },
+  { label: "Updates", href: "/settings/updates", icon: RefreshCw },
+];
+
+// Active on exact match or a sub-path, unless a more specific item (e.g.
+// /garden/types) already claims the current path.
+export function isNavActive(path: string, href: string, all: NavItem[]): boolean {
+  if (path === href) return true;
+  if (href === "/dashboard") return false;
+  if (!path.startsWith(href + "/")) return false;
+  return !all.some(
+    (o) => o.href.length > href.length && (path === o.href || path.startsWith(o.href + "/")),
+  );
+}

src/components/layout/sidebar.tsx

@@ -2,28 +2,9 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Leaf, Home, Wrench, LayoutDashboard, Bell, HardDrive, Lightbulb, RefreshCw, BookOpen, KeyRound, Package, PawPrint, MapPin } from "lucide-react";
+import { Leaf } from "lucide-react";
 import { cn } from "@/lib/utils";
-
-const navItems = [
-  { label: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
-  { label: "Garden", href: "/garden", icon: Leaf },
-  { label: "Plant types", href: "/garden/types", icon: BookOpen },
-  { label: "Inventory", href: "/inventory", icon: Package },
-  { label: "Animals", href: "/animals", icon: PawPrint },
-  { label: "Locations", href: "/locations", icon: MapPin },
-  { label: "Reminders", href: "/tasks", icon: Bell },
-  // Home maintenance and Equipment come in future releases
-  // { label: "Home", href: "/home", icon: Home },
-  // { label: "Equipment", href: "/equipment", icon: Wrench },
-];
-
-const settingsItems = [
-  { label: "Suggestions", href: "/suggestions", icon: Lightbulb },
-  { label: "API tokens", href: "/settings/tokens", icon: KeyRound },
-  { label: "Backup & Restore", href: "/settings/backup", icon: HardDrive },
-  { label: "Updates", href: "/settings/updates", icon: RefreshCw },
-];
+import { navItems, settingsItems, isNavActive } from "./nav-items";
 
 export function Sidebar() {
   const path = usePathname();
@@ -39,14 +20,7 @@ export function Sidebar() {
 
       <nav className="flex-1 px-2 py-3 space-y-0.5">
         {navItems.map(({ label, href, icon: Icon }) => {
-          // Active on exact match or a sub-path, unless a more specific nav item
-          // (e.g. /garden/types) already claims the current path.
-          const moreSpecific = navItems.some(
-            (o) => o.href.length > href.length && (path === o.href || path.startsWith(o.href + "/"))
-          );
-          const active =
-            path === href ||
-            (href !== "/dashboard" && path.startsWith(href + "/") && !moreSpecific);
+          const active = isNavActive(path, href, navItems);
           return (
             <Link
               key={href}

src/components/layout/topnav.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import Link from "next/link";
 import { signOut } from "next-auth/react";
-import { LogOut, User } from "lucide-react";
+import { LogOut, Lightbulb } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -10,6 +11,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { MobileNav } from "@/components/layout/mobile-nav";
 import { initials } from "@/lib/utils";
 
 interface TopNavProps {
@@ -19,32 +21,40 @@ interface TopNavProps {
 export function TopNav({ user }: TopNavProps) {
   return (
     <header className="h-14 border-b flex items-center justify-between px-4 md:px-6 shrink-0 bg-background">
-      <div className="flex items-center gap-2 md:hidden">
-        <span className="font-display font-semibold">Moon Base</span>
+      <div className="flex items-center gap-2">
+        <MobileNav />
+        <span className="font-display font-semibold md:hidden">Moon Base</span>
       </div>
 
-      <div className="hidden md:block" />
+      <div className="flex items-center gap-1">
+        <Link
+          href="/suggestions"
+          aria-label="Suggestions & feedback"
+          title="Suggestions & feedback"
+          className="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+        >
+          <Lightbulb className="h-5 w-5" />
+        </Link>
 
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="gap-2">
-            <div className="h-6 w-6 rounded-full bg-[hsl(var(--leaf))] flex items-center justify-center text-white text-[10px] font-bold">
-              {initials(user.name)}
-            </div>
-            <span className="text-sm hidden sm:inline">{user.name}</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <div className="px-2 py-1.5 text-xs text-muted-foreground">
-            {user.email}
-          </div>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
-            <LogOut className="h-4 w-4 mr-2" />
-            Sign out
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="gap-2">
+              <div className="h-6 w-6 rounded-full bg-[hsl(var(--leaf))] flex items-center justify-center text-white text-[10px] font-bold">
+                {initials(user.name)}
+              </div>
+              <span className="text-sm hidden sm:inline">{user.name}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <div className="px-2 py-1.5 text-xs text-muted-foreground">{user.email}</div>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
+              <LogOut className="h-4 w-4 mr-2" />
+              Sign out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
     </header>
   );
 }

src/lib/changelog.ts

@@ -8,6 +8,14 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.17.0",
+    date: "2026-06-16",
+    changes: [
+      "Mobile now works — there's a menu button (top-left) that slides out the full navigation, so you can get around on your phone.",
+      "Added a lightbulb button in the top bar that jumps straight to Suggestions, and made the Suggestions page readable (it was washed-out gray on the app's background).",
+    ],
+  },
   {
     version: "0.16.1",
     date: "2026-06-16",

src/lib/version.ts

@@ -1,2 +1,2 @@
 // Bump on every user-visible release. Changelog entries live in `src/lib/changelog.ts`.
-export const APP_VERSION = "0.16.1";
+export const APP_VERSION = "0.17.0";