added a publish button if you don't have pubs yet

app/(home-pages)/home/Actions/CreateNewButton.tsx

···
   return (
     <Menu
       asChild
+      side="right"
+      align="start"
       trigger={
         <ActionButton
           id="new-leaflet-button"

app/(home-pages)/home/HomeLayout.tsx

···
 "use client";
 
-import { getHomeDocs, HomeDoc } from "./storage";
+import { getHomeDocs } from "./storage";
 import useSWR from "swr";
 import {
   Fact,
···
 import type { Attribute } from "src/replicache/attributes";
 import { callRPC } from "app/api/rpc/client";
 import { StaticLeafletDataContext } from "components/PageSWRDataProvider";
-import { HomeSmall } from "components/Icons/HomeSmall";
 import {
   HomeDashboardControls,
   DashboardLayout,
···
 } from "components/PageLayouts/DashboardLayout";
 import { Actions } from "./Actions/Actions";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
-import { Json } from "supabase/database.types";
 import { useTemplateState } from "./Actions/CreateNewButton";
-import { CreateNewLeafletButton } from "./Actions/CreateNewButton";
-import { ActionButton } from "components/ActionBar/ActionButton";
-import { AddTiny } from "components/Icons/AddTiny";
-import {
-  get_leaflet_data,
-  GetLeafletDataReturnType,
-} from "app/api/rpc/[command]/get_leaflet_data";
-import { useEffect, useRef, useState } from "react";
-import { Input } from "components/Input";
+import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data";
+import { useState } from "react";
 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
-import {
-  ButtonPrimary,
-  ButtonSecondary,
-  ButtonTertiary,
-} from "components/Buttons";
-import { AddSmall } from "components/Icons/AddSmall";
-import { PublishIllustration } from "app/[leaflet_id]/publish/PublishIllustration/PublishIllustration";
-import { PubListEmptyIllo } from "components/ActionBar/Publications";
-import { theme } from "tailwind.config";
-import Link from "next/link";
-import { DiscoverIllo } from "./HomeEmpty/DiscoverIllo";
-import { WelcomeToLeafletIllo } from "./HomeEmpty/WelcomeToLeafletIllo";
 import {
   DiscoverBanner,
   HomeEmptyState,

app/globals.css

···
     --accent-2: 255, 255, 255;
     --accent-contrast: 0, 0, 225;
     --accent-1-is-contrast: "true";
+    --accent-light: color-mix(
+      in oklab,
+      rgb(var(--accent-contrast)),
+      rgb(var(--bg-page)) 85%
+    );
 
     --highlight-1: 255, 177, 177;
     --highlight-2: 253, 245, 203;

app/login/LoginForm.tsx

···
 import { useSmoker, useToaster } from "components/Toast";
 import React, { useState } from "react";
 import { mutate } from "swr";
+import { BlueskyTiny } from "components/Icons/BlueskyTiny";
 
 export default function LoginForm(props: {
   noEmail?: boolean;
···
 export function BlueskyLogin(props: {
   redirectRoute?: string;
   action?: ActionAfterSignIn;
+  compact?: boolean;
 }) {
   const [signingWithHandle, setSigningWithHandle] = useState(false);
   const [handle, setHandle] = useState("");
···
         />
       )}
       {signingWithHandle ? (
-        <div className="w-full flex flex-col gap-2">
+        <div className="w-full flex gap-1">
           <Input
             type="text"
             name="handle"
···
             onChange={(e) => setHandle(e.target.value)}
             required
           />
-          <ButtonPrimary type="submit" fullWidth className="py-2">
-            <BlueskySmall />
-            Sign In
-          </ButtonPrimary>
+          <ButtonPrimary type="submit">Sign In</ButtonPrimary>
         </div>
       ) : (
-        <div className="flex flex-col">
-          <ButtonPrimary fullWidth className="py-2">
-            <BlueskySmall />
-            Log In/Sign Up with Bluesky
+        <div className="flex flex-col justify-center">
+          <ButtonPrimary
+            fullWidth={!props.compact}
+            compact={props.compact}
+            className={`${props.compact ? "mx-auto text-sm" : "py-2"}`}
+          >
+            {props.compact ? <BlueskyTiny /> : <BlueskySmall />}
+            {props.compact ? "Link" : "Log In/Sign Up with"} Bluesky
           </ButtonPrimary>
           <button
             type="button"
-            className="text-sm text-accent-contrast place-self-center mt-[6px]"
+            className={`${props.compact ? "text-xs" : "text-sm"} text-accent-contrast place-self-center mt-[6px]`}
             onClick={() => setSigningWithHandle(true)}
           >
-            or use an ATProto handle
+            use an ATProto handle
           </button>
         </div>
       )}

components/ActionBar/Navigation.tsx

···
       <HomeButton current={props.currentPage === "home"} />
       <ReaderButton
         current={props.currentPage === "reader"}
-        subs={identity?.publication_subscriptions?.length !== 0}
+        subs={
+          identity?.publication_subscriptions?.length !== 0 &&
+          identity?.publication_subscriptions?.length !== undefined
+        }
       />
       <DiscoverButton current={props.currentPage === "discover"} />
 

components/ActionBar/Publications.tsx

···
 import { ActionButton } from "./ActionButton";
 import { SpeedyLink } from "components/SpeedyLink";
 import { PublishSmall } from "components/Icons/PublishSmall";
+import { Popover } from "components/Popover";
+import { BlueskyLogin } from "app/login/LoginForm";
+import { ButtonPrimary } from "components/Buttons";
+import { useIsMobile } from "src/hooks/isMobile";
+import { useState } from "react";
 
 export const PublicationButtons = (props: {
   currentPubUri: string | undefined;
···
 
   // don't show pub list button if not logged in or no pub list
   // we show a "start a pub" banner instead
-  if (!identity || !identity.atp_did) return <PubListEmpty />;
+  if (!identity || !identity.atp_did || identity.publications.length === 0)
+    return <PubListEmpty />;
   return (
     <div className="pubListWrapper w-full  flex flex-col gap-1 sm:bg-transparent sm:border-0">
       {identity.publications?.map((d) => {
-        // console.log("thisURI : " + d.uri);
-        // console.log("currentURI : " + props.currentPubUri);
-
         return (
           <PublicationOption
             {...d}
···
 };
 
 const PubListEmpty = () => {
-  return (
-    <SpeedyLink href={`lish/createPub`} className=" hover:no-underline!">
+  let { identity } = useIdentityData();
+  let isMobile = useIsMobile();
+
+  let [state, setState] = useState<"default" | "info">("default");
+  if (isMobile && state == "default")
+    return (
       <ActionButton
         label="Publish"
         icon={<PublishSmall />}
         nav
-        subtext="Blog on ATProto!"
+        subtext="Start a blog on ATProto!"
+        onClick={() => {
+          setState("info");
+        }}
       />
-    </SpeedyLink>
+    );
+
+  if (isMobile && state === "info") return <PublishPopoverContent />;
+  else
+    return (
+      <Popover
+        side="right"
+        align="start"
+        className="p-1! max-w-56"
+        trigger={
+          <ActionButton
+            label="Publish"
+            icon={<PublishSmall />}
+            nav
+            subtext="Start a blog on ATProto!"
+          />
+        }
+      >
+        <PublishPopoverContent />
+      </Popover>
+    );
+};
+
+const PublishPopoverContent = () => {
+  let { identity } = useIdentityData();
+
+  return (
+    <div className="bg-[var(--accent-light)] w-full rounded-md flex flex-col  text-center justify-center p-2 pb-4 text-sm">
+      <div className="mx-auto pt-2 scale-90">
+        <PubListEmptyIllo />
+      </div>
+      <div className="pt-1 font-bold">Publish on AT Proto</div>
+      {identity && identity.atp_did ? (
+        //  has ATProto account and no pubs
+        <>
+          <div className="pb-2 text-secondary text-xs">
+            Start a new publication <br />
+            on AT Proto
+          </div>
+          <SpeedyLink href={`lish/createPub`} className=" hover:no-underline!">
+            <ButtonPrimary className="text-sm mx-auto" compact>
+              Start a Publication!
+            </ButtonPrimary>
+          </SpeedyLink>
+        </>
+      ) : (
+        // no ATProto account and no pubs
+        <>
+          <div className="pb-2 text-secondary text-xs">
+            Link a Bluesky account to start a new publication on AT Proto
+          </div>
+
+          <BlueskyLogin compact />
+        </>
+      )}
+    </div>
   );
 };
 

components/LoginButton.tsx

···
   return (
     <Popover
       asChild
+      align="start"
+      side="right"
       trigger={
         <ActionButton secondary icon={<AccountSmall />} label="Sign In" />
       }