UI updates & feedback giving

src/app/(feed)/feed/SidebarCategories.tsx

@@ -67,6 +67,7 @@ export function SidebarCategories() {
     useCheckFilteredFeedItemsForCategory();
 
   const setFeedFilter = useSetAtom(feedFilterAtom);
+  const setDateFilter = useSetAtom(dateFilterAtom);
   const [categoryFilter, setCategoryFilter] = useAtom(categoryFilterAtom);
 
   const { contentCategories } = useContentCategories();
@@ -92,7 +93,10 @@ export function SidebarCategories() {
         <SidebarMenuItem>
           <SidebarMenuButton
             variant={categoryFilter === -1 ? "outline" : "default"}
-            onClick={() => updateCategoryFilter(-1)}
+            onClick={() => {
+              updateCategoryFilter(-1);
+              setDateFilter(1);
+            }}
           >
             {!hasAnyItems && (
               <CircleSmall size={16} className="text-sidebar-accent" />

src/app/(feed)/feed/SidebarFeeds.tsx

@@ -65,6 +65,7 @@ function useCheckFilteredFeedItemsForFeed() {
 export function SidebarFeeds() {
   const { feeds } = useFeeds();
 
+  const setDateFilter = useSetAtom(dateFilterAtom);
   const [feedFilter, setFeedFilter] = useAtom(feedFilterAtom);
 
   const checkFilteredFeedItemsForFeed = useCheckFilteredFeedItemsForFeed();
@@ -90,7 +91,10 @@ export function SidebarFeeds() {
         <SidebarMenuItem>
           <SidebarMenuButton
             variant={feedFilter === -1 ? "outline" : "default"}
-            onClick={() => setFeedFilter(-1)}
+            onClick={() => {
+              setFeedFilter(-1);
+              setDateFilter(1);
+            }}
           >
             {!hasAnyItems && (
               <CircleSmall size={16} className="text-sidebar-accent" />
@@ -108,7 +112,10 @@ export function SidebarFeeds() {
             <SidebarMenuItem key={feed.id}>
               <SidebarMenuButton
                 variant={feed.id === feedFilter ? "outline" : "default"}
-                onClick={() => setFeedFilter(feed.id)}
+                onClick={() => {
+                  setFeedFilter(feed.id);
+                  setDateFilter(30);
+                }}
               >
                 {!feed.hasEntries && (
                   <CircleSmall size={16} className="text-sidebar-accent" />

src/app/(feed)/feed/UserManagementButton.tsx

@@ -11,6 +11,11 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
+import {
+  ResponsiveDropdown,
+  ResponsiveDropdownLabel,
+  ResponsiveDropdownMenuItem,
+} from "~/components/ui/responsive-dropdown";
 import {
   SidebarMenu,
   SidebarMenuButton,
@@ -33,8 +38,9 @@ export function UserManagementNavItem() {
   return (
     <SidebarMenu>
       <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
+        <ResponsiveDropdown
+          side="right"
+          trigger={
             <SidebarMenuButton
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
@@ -53,48 +59,42 @@ export function UserManagementNavItem() {
               )}
               <EllipsisVerticalIcon className="ml-auto size-4" />
             </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg p-4"
-            side={isMobile ? "bottom" : "right"}
-            align="end"
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex flex-col items-center justify-center pb-4">
-                <h2 className="text-sm font-semibold">
-                  {data?.user.name || "Serial User"}
-                </h2>
-                <p className="text-muted-foreground text-xs">
-                  {data?.user.email}
-                </p>
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuItem asChild>
-              <Button
-                className="w-full"
-                onClick={async () => {
-                  await signOut({
-                    fetchOptions: {
-                      onRequest: () => {
-                        setIsSigningOut(true);
-                      },
-                      onSuccess: async () => {
-                        router.push(AUTH_SIGNED_OUT_URL);
-                      },
+          }
+        >
+          <ResponsiveDropdownLabel className="p-0 font-normal">
+            <div className="flex flex-col items-center justify-center pb-4">
+              <h2 className="text-sm font-semibold">
+                {data?.user.name || "Serial User"}
+              </h2>
+              <p className="text-muted-foreground text-xs">
+                {data?.user.email}
+              </p>
+            </div>
+          </ResponsiveDropdownLabel>
+          <ResponsiveDropdownMenuItem asChild>
+            <Button
+              className="w-full"
+              onClick={async () => {
+                await signOut({
+                  fetchOptions: {
+                    onRequest: () => {
+                      setIsSigningOut(true);
+                    },
+                    onSuccess: async () => {
+                      router.push(AUTH_SIGNED_OUT_URL);
                     },
-                  });
-                }}
-              >
-                {isSigningOut ? (
-                  <Loader2Icon className="animate-spin" size={16} />
-                ) : (
-                  "Sign Out"
-                )}
-              </Button>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+                  },
+                });
+              }}
+            >
+              {isSigningOut ? (
+                <Loader2Icon className="animate-spin" size={16} />
+              ) : (
+                "Sign Out"
+              )}
+            </Button>
+          </ResponsiveDropdownMenuItem>
+        </ResponsiveDropdown>
       </SidebarMenuItem>
     </SidebarMenu>
   );

src/app/(feed)/feed/edit/FeedCategoryCombobox.tsx

@@ -1,13 +1,12 @@
 "use client";
 
+import { ListFilterPlusIcon } from "lucide-react";
 import * as React from "react";
-import { Check, ChevronsUpDown, ListFilterPlusIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils";
+import { useState } from "react";
 import { Button } from "~/components/ui/button";
 import {
   Command,
-  CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
@@ -17,7 +16,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "~/components/ui/popover";
-import { useState } from "react";
 
 type FeedCategoryComboboxProps<T extends string> = {
   options:

src/app/(feed)/feed/import/opml/OPMLSubscriptionImport.tsx

@@ -6,6 +6,7 @@ import { type SubscriptionImportMethodProps } from "../types";
 import { parseOPMLSubscriptionInput } from "./parseOPMLSubscriptionInput";
 
 export function OPMLSubscriptionImport({
+  importedChannels,
   setImportedChannels,
 }: SubscriptionImportMethodProps) {
   const [inputElement, setInputElement] = useState<HTMLInputElement | null>(
@@ -44,7 +45,7 @@ export function OPMLSubscriptionImport({
             multiple={false}
             onChange={onSelectFiles}
           ></input>
-          {!!inputElement?.files?.length && (
+          {!!importedChannels && inputElement && (
             <Button
               className="w-full"
               variant="outline"

src/app/(feed)/feed/import/page.tsx

@@ -9,7 +9,10 @@ import { Checkbox } from "~/components/ui/checkbox";
 import { Label } from "~/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
 import { useFeeds } from "~/lib/data/feeds";
-import { type SubscriptionImportMethod, type SubscriptionImportChannel } from "./types";
+import {
+  type SubscriptionImportMethod,
+  type SubscriptionImportChannel,
+} from "./types";
 import { YouTubeSubscriptionImport } from "./youtube/YouTubeSubscriptionImport";
 import { OPMLSubscriptionImport } from "./opml/OPMLSubscriptionImport";
 import FeedLoading from "~/app/loading";
@@ -76,10 +79,16 @@ export default function EditFeedsPage() {
         </fieldset>
       )}
       {importMethod === "subscriptions" && (
-        <YouTubeSubscriptionImport setImportedChannels={setImportedChannels} />
+        <YouTubeSubscriptionImport
+          importedChannels={importedChannels}
+          setImportedChannels={setImportedChannels}
+        />
       )}
       {importMethod === "opml" && (
-        <OPMLSubscriptionImport setImportedChannels={setImportedChannels} />
+        <OPMLSubscriptionImport
+          importedChannels={importedChannels}
+          setImportedChannels={setImportedChannels}
+        />
       )}
       {!!importedChannels && (
         <>
@@ -180,10 +189,12 @@ export default function EditFeedsPage() {
                 className="w-full"
                 size="lg"
                 onClick={() => {
+                  const channelsToImport = importedChannels.filter(
+                    (channel) => channel.shouldImport,
+                  );
+
                   void createFeedsFromSubscriptionImportMutation({
-                    channels: importedChannels.filter(
-                      (channel) => channel.shouldImport,
-                    ),
+                    channels: channelsToImport,
                   });
                 }}
                 disabled={isPending || channelImportCount === 0}

src/app/(feed)/feed/import/types.ts

@@ -15,5 +15,6 @@ export type SubscriptionImportChannel = {
 };
 
 export type SubscriptionImportMethodProps = {
+  importedChannels: SubscriptionImportChannel[] | null;
   setImportedChannels: (channels: SubscriptionImportChannel[] | null) => void;
 };

src/app/(feed)/feed/import/youtube/YouTubeSubscriptionImport.tsx

@@ -7,6 +7,7 @@ import { parseYouTubeSubscriptionInput } from "./parseYouTubeSubscriptionInput";
 import { YouTubeSubscriptionImportCarousel } from "./YouTubeSubscriptionImportCarousel";
 
 export function YouTubeSubscriptionImport({
+  importedChannels,
   setImportedChannels,
 }: SubscriptionImportMethodProps) {
   const [inputElement, setInputElement] = useState<HTMLInputElement | null>(
@@ -45,7 +46,7 @@ export function YouTubeSubscriptionImport({
             multiple={false}
             onChange={onSelectFiles}
           ></input>
-          {!!inputElement?.files?.length && (
+          {!!importedChannels && inputElement && (
             <Button
               className="w-full"
               variant="outline"
@@ -60,7 +61,7 @@ export function YouTubeSubscriptionImport({
           )}
         </div>
       </fieldset>
-      {!inputElement?.files?.length && (
+      {!importedChannels && (
         <div className="mt-16">
           <h3 className="mb-4 font-semibold">
             How do I find my &quot;subscriptions.csv&quot; file?

src/components/AddFeedDialog.tsx

@@ -128,7 +128,7 @@ export function AddFeedDialog() {
               }}
             >
               <ImportIcon size={16} />
-              <span className="hidden pl-1.5 md:block">Bulk Import</span>
+              <span className="pl-1.5">Bulk Import</span>
             </Button>
           </Link>
         </div>

src/components/CustomVideoPlayer/index.tsx

@@ -2,16 +2,11 @@
 "use client";
 
 import clsx from "clsx";
-import {
-  FullscreenIcon,
-  PlayIcon,
-  MaximizeIcon,
-  MinimizeIcon,
-  PlusIcon,
-  MinusIcon,
-} from "lucide-react";
+import { MaximizeIcon, MinimizeIcon, PlayIcon } from "lucide-react";
 import YouTube from "react-youtube";
+import { useFlagState } from "~/lib/hooks/useFlagState";
 import { transformSecondsToFormattedTime } from "~/lib/transformSecondsToFormattedTime";
+import { ButtonWithShortcut } from "../ButtonWithShortcut";
 import { useKeyboard } from "../KeyboardProvider";
 import { Button } from "../ui/button";
 import { Slider } from "../ui/slider";
@@ -22,8 +17,6 @@ import {
 } from "./CustomVideoPlayerProvider";
 import { YOUTUBE_PLAYBACK_SPEEDS, YOUTUBE_PLAYER_STATES } from "./constants";
 import { useVideoShortcuts } from "./useYouTubeVideoShortcuts";
-import { ButtonWithShortcut } from "../ButtonWithShortcut";
-import { useFlagState } from "~/lib/hooks/useFlagState";
 
 interface IResponsiveVideoProps {
   videoID?: string;
@@ -161,12 +154,13 @@ function CustomVideoPlayerContent(props: IResponsiveVideoProps) {
                       {videoProgress >= videoDuration - 5 ? "Live" : "Go Live"}
                     </Button>
                   )}
-                  {videoType === "video" && (
-                    <div className="w-max font-mono text-sm font-bold">
-                      {transformSecondsToFormattedTime(videoProgress)} /{" "}
-                      {transformSecondsToFormattedTime(videoDuration)}
-                    </div>
-                  )}
+                  {videoType === "video" ||
+                    (videoType === "live" && videoProgress < videoDuration && (
+                      <div className="w-max font-mono text-sm font-bold">
+                        {transformSecondsToFormattedTime(videoProgress)} /{" "}
+                        {transformSecondsToFormattedTime(videoDuration)}
+                      </div>
+                    ))}
                 </div>
                 <div className="flex items-center gap-2">
                   <ButtonWithShortcut

src/components/LeftSidebarBottomNav.tsx

@@ -9,7 +9,15 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "~/components/ui/sidebar";
-import { NotebookIcon, PaletteIcon } from "lucide-react";
+import {
+  CircleHelpIcon,
+  HelpingHandIcon,
+  LifeBuoyIcon,
+  LightbulbIcon,
+  MailIcon,
+  NotebookIcon,
+  PaletteIcon,
+} from "lucide-react";
 import Link from "next/link";
 import { ColorThemeDropdownSidebar } from "./color-theme/ColorThemePopoverButton";
 
@@ -34,6 +42,30 @@ export function LeftSidebarBottomNav() {
               </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild>
+              <Link
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://github.com/hfellerhoff/serial/issues/new?template=bug-report.md"
+              >
+                <LifeBuoyIcon />
+                <span>Report Issue</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild>
+              <Link
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://github.com/hfellerhoff/serial/issues/new?template=feature_request.md"
+              >
+                <LightbulbIcon />
+                <span>Share Idea</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
         </SidebarMenu>
       </SidebarGroupContent>
     </SidebarGroup>