Merge branch 'preview'

src/components/dataDisplay/gallery/Gallery.tsx

@@ -43,7 +43,7 @@ export default function Gallery(props: Props) {
           break;
       }
     },
-    [handleBackward, handleForward]
+    [handleBackward, handleForward],
   );
 
   useEffect(() => {

src/components/dataDisplay/postEmbed/ExternalEmbed.tsx

@@ -29,7 +29,7 @@ export default function ExternalEmbed(props: Props) {
                   width={900}
                   height={500}
                   priority
-                  className="border-b-skin-base rounded-t-lg border-b aspect-auto max-h-96 object-cover group-hover:brightness-95"
+                  className="border-b-skin-base rounded-t-lg border-b aspect-video max-h-96 object-cover group-hover:brightness-95"
                 />
               )}
               <div className="flex flex-col p-3">

src/components/feedback/altTag/AltTag.tsx

@@ -3,7 +3,6 @@ import { useState } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { CgClose } from "react-icons/cg";
 import { useClipboard } from "use-clipboard-copy";
-import toast from "react-hot-toast";
 import { BiSolidCopy } from "react-icons/bi";
 
 interface Props {
@@ -13,12 +12,7 @@ interface Props {
 export default function AltTag(props: Props) {
   const { text } = props;
   const [showAlt, setShowAlt] = useState(false);
-  const clipboard = useClipboard({ copiedTimeout: 3500 });
-
-  const handleCopyAltText = () => {
-    clipboard.copy(text);
-    toast.success("Alt text copied to clipboard", { id: "Copy alt text" });
-  };
+  const { copy, copied } = useClipboard({ copiedTimeout: 3500 });
 
   const handleShowAlt = () => {
     setShowAlt(!showAlt);
@@ -62,19 +56,20 @@ export default function AltTag(props: Props) {
                   <CgClose className="text-xl" />
                 </Button>
               </Dialog.Close>
-              <div className="text-skin-inverted bg-skin-overlay-muted z-50 max-h-[calc(100svh-10rem)] max-w-xl cursor-text overflow-auto rounded-xl p-4">
-                <div className="mb-4 flex flex-wrap justify-between gap-3">
-                  <Dialog.Title className="text-xl font-semibold text-white">
+              <div className="text-skin-inverted bg-skin-base border border-skin-base z-50 max-h-[calc(100svh-10rem)] max-w-xl cursor-text overflow-auto rounded-xl p-4">
+                <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-3 mb-4 bg-skin-tertiary p-2 rounded-lg">
+                  <Dialog.Title className="text-xl font-semibold text-skin-base">
                     Alternative text
                   </Dialog.Title>
                   <Button
-                    onClick={handleCopyAltText}
-                    className="bg-skin-inverted hover:bg-skin-inverted/90 rounded-lg p-2"
+                    onClick={() => copy(text)}
+                    className="bg-skin-base text-skin-base px-3 py-1.5 rounded-lg border border-skin-base"
                   >
                     <BiSolidCopy />
+                    {copied ? "Copied" : "Copy"}
                   </Button>
                 </div>
-                <Dialog.Description className="mt-2 text-white">
+                <Dialog.Description className="mt-2 text-skin-base">
                   {text}
                 </Dialog.Description>
               </div>

src/components/inputs/editor/BottomEditorBar.tsx

@@ -77,7 +77,7 @@ export default function BottomEditorBar(props: Props) {
       <div className="mb-2">
         <ThreadGatePicker onUpdate={onUpdateThreadGate} selected={threadGate} />
       </div>
-      <div className="border-skin-base border-t pb-2">
+      <div className="border-skin-base border-t">
         <div className="flex flex-wrap justify-between gap-5 mt-3">
           <div className="flex gap-3">
             <EmojiPicker onEmojiSelect={editor.commands.insertContent} />

src/lib/hooks/bsky/feed/usePublishPost.tsx

@@ -74,8 +74,8 @@ export default function usePublishPost(props: Props) {
       if (languages.length > 0) {
         lang = languages;
       } else {
-        const detectedLanguage = await detectLanguage(richText.text);
-        lang = detectedLanguage ?? [];
+        const detectedLanguage = detectLanguage(richText.text);
+        lang = detectedLanguage ? [detectedLanguage] : [];
       }
 
       let selfLabels: ComAtprotoLabelDefs.SelfLabels | undefined;

src/lib/utils/text.ts

@@ -1,7 +1,8 @@
 import { JSONContent } from "@tiptap/react";
 import { ThreadgateSetting } from "../../../types/feed";
 import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
-import { AppBskyFeedPost, Facet, UnicodeString } from "@atproto/api";
+import { AppBskyFeedPost } from "@atproto/api";
+import { detect } from "tinyld";
 
 export function getHandle(mention: string) {
   return mention.slice(1);
@@ -86,24 +87,18 @@ export function jsonToText(json: JSONContent) {
   return text;
 }
 
-export async function detectLanguage(text: string) {
+export function detectLanguage(text: string) {
   if (text === "") return;
-  const res = await fetch(`/api/language-detection`, {
-    method: "post",
-    body: JSON.stringify({
-      text: text,
-    }),
-  });
+  const language = detect(text);
 
-  const detectedLanguage: string = await res.json();
-  return [detectedLanguage.trim()];
+  return language;
 }
 
 // TODO: add language prefs to localStorage to use for lang
 // the default is English for now
 export function getTranslateLink(text: string, lang: string = "en"): string {
   return `https://translate.google.com/?sl=auto&tl=${lang}&text=${encodeURIComponent(
-    text
+    text,
   )}`;
 }
 
@@ -124,4 +119,4 @@ export const replyIncludes = (reply: PostView["record"], term: string) => {
   const text = AppBskyFeedPost.isRecord(reply) && reply.text;
   if (!text || !text.toLowerCase().includes(term.toLowerCase())) return false;
   return true;
-};
+};