refactor(desktop): enhance UI components and form layouts

- Updated DropZone component to include a cursor button style for better user interaction.
- Refactored DiscoverForm to improve layout and styling, including the addition of a SegmentGroup for target selection.
- Enhanced form styling across various components for a more cohesive appearance, including rounded borders and shadow effects.
- Improved accessibility and visual hierarchy in user forms and import forms.

Signed-off-by: Innei <[email protected]>

Author: Innei

apps/desktop/src/renderer/src/components/ui/drop-zone.tsx

@@ -59,7 +59,7 @@ export const DropZone = ({
 
   return (
     <label
-      className={`center flex h-[100px] w-full rounded-md border border-dashed ${
+      className={`center cursor-button flex h-[100px] w-full rounded-md border border-dashed ${
         isDragging ? "border-blue-500 bg-blue-100" : ""
       }`}
       htmlFor="upload-file"

apps/desktop/src/renderer/src/modules/discover/form.tsx

@@ -1,4 +1,3 @@
-import { Spring } from "@follow/components/constants/spring.js"
 import { useMobile } from "@follow/components/hooks/useMobile.js"
 import { Button } from "@follow/components/ui/button/index.js"
 import { Card, CardContent, CardFooter, CardHeader } from "@follow/components/ui/card/index.jsx"
@@ -12,14 +11,14 @@ import {
   FormMessage,
 } from "@follow/components/ui/form/index.jsx"
 import { Input } from "@follow/components/ui/input/index.js"
+import { SegmentGroup, SegmentItem } from "@follow/components/ui/segment/index.js"
 import { ResponsiveSelect } from "@follow/components/ui/select/responsive.js"
 import { getBackgroundGradient } from "@follow/utils/color"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { repository } from "@pkg"
 import { useMutation } from "@tanstack/react-query"
 import { produce } from "immer"
 import { atom, useAtomValue, useStore } from "jotai"
-import { m } from "motion/react"
 import type { ChangeEvent, FC } from "react"
 import { memo, useCallback, useState } from "react"
 import { useForm } from "react-hook-form"
@@ -232,99 +231,89 @@ export function DiscoverForm({ type = "search" }: { type?: string }) {
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="w-full max-w-[540px] space-y-8"
+          className="w-full max-w-[540px]"
           data-testid="discover-form"
         >
-          <FormField
-            control={form.control}
-            name="keyword"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="flex items-center gap-4">
-                  {t(info[type]?.label!)}
-                  {info[type]?.labelSuffix}
-                </FormLabel>
-                <FormControl>
-                  <Input autoFocus {...field} onChange={handleKeywordChange} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          {type === "search" && (
+          <div className="border-border bg-material-ultra-thin rounded-lg border p-5 shadow-sm">
             <FormField
               control={form.control}
-              name="target"
+              name="keyword"
               render={({ field }) => (
-                <FormItem className="!mt-4 flex items-center justify-between">
-                  <FormLabel>{t("discover.target.label")}</FormLabel>
+                <FormItem className="mb-4">
+                  <FormLabel className="text-text text-headline mb-2 flex items-center gap-2 pl-2 font-bold">
+                    {t(info[type]?.label!)}
+                    {info[type]?.labelSuffix}
+                  </FormLabel>
                   <FormControl>
-                    <div className="flex gap-4 text-sm">
-                      {isMobile ? (
-                        <ResponsiveSelect
-                          size="sm"
-                          value={field.value}
-                          onValueChange={handleTargetChange}
-                          items={[
-                            { label: t("discover.target.feeds"), value: "feeds" },
-                            { label: t("discover.target.lists"), value: "lists" },
-                          ]}
-                        />
-                      ) : (
-                        <div className="relative flex h-7 items-stretch overflow-hidden rounded-lg bg-zinc-100/80 p-0.5 shadow-inner dark:bg-zinc-800/80">
-                          <m.div
-                            className="absolute left-0.5 top-0.5 z-0 h-6 rounded-md bg-white shadow-sm dark:bg-zinc-700"
-                            initial={false}
-                            animate={{
-                              x: field.value === "lists" ? "calc(100% + 2px)" : 0,
-                              width: "calc(50% - 4px)",
-                            }}
-                            transition={Spring.presets.smooth}
-                          />
-                          <button
-                            type="button"
-                            onClick={() => handleTargetChange("feeds")}
-                            className={`relative z-10 min-w-[80px] rounded-md px-4 text-sm font-medium transition-colors duration-200 ${
-                              field.value === "feeds"
-                                ? "text-zinc-900 dark:text-white"
-                                : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
-                            }`}
-                          >
-                            {t("discover.target.feeds")}
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => handleTargetChange("lists")}
-                            className={`relative z-10 min-w-[80px] rounded-md px-4 text-sm font-medium transition-colors duration-200 ${
-                              field.value === "lists"
-                                ? "text-zinc-900 dark:text-white"
-                                : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
-                            }`}
-                          >
-                            {t("discover.target.lists")}
-                          </button>
-                        </div>
-                      )}
-                    </div>
+                    <Input
+                      autoFocus
+                      {...field}
+                      onChange={handleKeywordChange}
+                      placeholder={type === "search" ? "Enter URL or keyword..." : undefined}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
-          )}
-          <div className="center flex" data-testid="discover-form-actions">
-            <Button disabled={!form.formState.isValid} type="submit" isLoading={mutation.isPending}>
-              {info[type]!.showModal ? t("discover.preview") : t("words.search")}
-            </Button>
+            {type === "search" && (
+              <FormField
+                control={form.control}
+                name="target"
+                render={({ field }) => (
+                  <FormItem className="mb-4 pl-2">
+                    <div className="mb-2 flex items-center justify-between">
+                      <FormLabel className="text-text-secondary text-headline font-medium">
+                        {t("discover.target.label")}
+                      </FormLabel>
+                      <FormControl>
+                        <div className="flex">
+                          {isMobile ? (
+                            <ResponsiveSelect
+                              size="sm"
+                              value={field.value}
+                              onValueChange={handleTargetChange}
+                              items={[
+                                { label: t("discover.target.feeds"), value: "feeds" },
+                                { label: t("discover.target.lists"), value: "lists" },
+                              ]}
+                            />
+                          ) : (
+                            <SegmentGroup
+                              className="-mt-2 h-8"
+                              value={field.value}
+                              onValueChanged={handleTargetChange}
+                            >
+                              <SegmentItem value="feeds" label={t("discover.target.feeds")} />
+                              <SegmentItem value="lists" label={t("discover.target.lists")} />
+                            </SegmentGroup>
+                          )}
+                        </div>
+                      </FormControl>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+            <div className="center flex" data-testid="discover-form-actions">
+              <Button
+                disabled={!form.formState.isValid}
+                type="submit"
+                isLoading={mutation.isPending}
+              >
+                {info[type]!.showModal ? t("discover.preview") : t("words.search")}
+              </Button>
+            </div>
           </div>
         </form>
       </Form>
       {mutation.isSuccess && (
         <div className="mt-8 w-full max-w-lg">
-          <div className="mb-4 pl-7 text-sm text-zinc-500">
+          <div className="mb-4 text-sm text-zinc-500">
             {t("discover.search.results", { count: mutation.data?.length || 0 })}
           </div>
-          <div className="space-y-6 text-sm">
+          <div className="space-y-4 text-sm">
             {discoverSearchData?.map((item) => (
               <SearchCard
                 key={item.feed?.id || item.list?.id}

apps/desktop/src/renderer/src/modules/discover/import.tsx

@@ -106,7 +106,10 @@ export function DiscoverImport({ isInit = false }: { isInit?: boolean }) {
   return (
     <>
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-[540px] space-y-8">
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="bg-material-ultra-thin w-full max-w-[540px] space-y-8 rounded-lg border p-5 shadow-sm"
+        >
           <FormField
             control={form.control}
             name="file"
@@ -124,8 +127,8 @@ export function DiscoverImport({ isInit = false }: { isInit?: boolean }) {
                       </Fragment>
                     ) : (
                       <Fragment>
-                        <i className="i-mgc-file-upload-cute-re size-5" />
-                        <span className="ml-2 text-sm opacity-80">
+                        <i className="i-mgc-file-upload-cute-re text-text-tertiary size-10" />
+                        <span className="text-title2 text-text-tertiary ml-2">
                           {t("discover.import.click_to_upload")}
                         </span>
                       </Fragment>

apps/desktop/src/renderer/src/modules/discover/inbox-list-form.tsx

@@ -46,7 +46,7 @@ export function DiscoverInboxList() {
   const preCheck = useCanCreateMoreInboxAndNotify()
 
   return (
-    <div className="mx-auto w-full max-w-[540px]">
+    <div className="bg-material-ultra-thin mx-auto w-full max-w-[540px] rounded-lg border p-5 shadow-sm">
       <div className="mb-4 flex flex-wrap items-center gap-2 text-sm text-zinc-500">
         <span>{t("discover.inbox.description")}</span>
         <a

apps/desktop/src/renderer/src/modules/discover/transform-form.tsx

@@ -68,7 +68,7 @@ export function DiscoverTransform() {
   return (
     <>
       {data?.rsshub!.routes && (
-        <div className="w-full max-w-[540px]">
+        <div className="bg-material-ultra-thin w-full max-w-[540px] rounded-lg border p-5 shadow-sm">
           <DiscoverFeedForm
             routePrefix="rsshub"
             route={data?.rsshub.routes["/transform/html/:url/:routeParams"]!}

apps/desktop/src/renderer/src/modules/discover/user-form.tsx

@@ -28,7 +28,7 @@ export function DiscoverUser() {
   return (
     <>
       {data?.follow!.routes && (
-        <div className="w-full max-w-[540px]">
+        <div className="bg-material-ultra-thin w-full max-w-[540px] rounded-lg border p-5 shadow-sm">
           <DiscoverFeedForm
             routePrefix="follow"
             route={data.follow.routes[Object.keys(data.follow.routes)[0]!]!}

packages/components/src/ui/segment/index.tsx

@@ -1,3 +1,4 @@
+import { Spring } from "@follow/components/constants/spring"
 import { cn } from "@follow/utils/utils"
 import { m } from "motion/react"
 import type { ReactNode } from "react"
@@ -33,7 +34,7 @@ export const SegmentGroup = (props: ComponentType<SegmentGroupProps>) => {
       <div
         role="tablist"
         className={cn(
-          "bg-material-medium text-text-secondary inline-flex h-9 items-center justify-center rounded-lg p-1 outline-none",
+          "bg-fill-secondary text-text-secondary inline-flex h-9 items-center justify-center rounded-lg p-1 outline-none",
           className,
         )}
         tabIndex={0}
@@ -73,6 +74,7 @@ export const SegmentItem: Component<{
       {isActive && (
         <m.span
           layout
+          transition={Spring.presets.smooth}
           layoutId={layoutId}
           className="bg-background absolute inset-0 z-0 rounded-md shadow"
         />