add recent vods and clips to home page

frontend/src/components/Sidebar.tsx

@@ -75,9 +75,14 @@ const Sidebar = ({ className }: props) => {
                                     alt={"Profile Picture"}
                                 />
 
-                                <label className={"font-body text-text-strong text-sm"}>
-                                    {user.name}
-                                </label>
+                                <div className={"flex flex-col"}>
+                                    <p className={"font-body text-text-strong text-sm"}>
+                                        {user.name}
+                                    </p>
+                                    <p className={"text-[0.625rem] font-body text-muted wrap-break-word"}>
+                                        Signed in with Google
+                                    </p>
+                                </div>
 
                                 <button
                                     className={"font-body text-muted text-xs hover:bg-hover p-1 pt-1.5 rounded"}

frontend/src/components/buttons/DarkButton.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const DarkButton: React.FC<Props> = ({ className = "", ...props }) => {
+    return (
+        <button
+            className={`bg-accent text-on-dark font-body rounded-lg hover:bg-accent-hover transition-colors duration-150 h-10 px-4 ${className}`}
+            {...props}
+        />
+    );
+};
+
+export default DarkButton;

frontend/src/components/video/VideoCard.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { formatTime, stringToDate, dateToTimeAgo } from "../../utils/utils.ts";
 import { Link } from "react-router-dom";
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { isThumbnailAvailable } from "../../utils/api/client.ts";
 import { MoreVertical, Pencil, Trash2 } from "lucide-react";