gladvn 0.2.33 → 0.2.34

package/src/blocks/settings.tsx

@@ -1,9 +1,17 @@
+import { InfoIcon, TrashIcon } from "lucide-react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/micro/accordion";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "../components/micro/alert-dialog";
 import { Button } from "../components/micro/button";
 import { Input } from "../components/micro/input";
 import { Label } from "../components/micro/label";
+import { RadioGroup, RadioGroupItem } from "../components/micro/radio-group";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/micro/select";
 import { Separator } from "../components/micro/separator";
-import { Switch } from "../components/micro/switch";
+import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "../components/micro/slider";
+import { Switch, SwitchThumb } from "../components/micro/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/micro/tabs";
+import { Textarea } from "../components/micro/textarea";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/micro/tooltip";
 
 export default function SettingsBlock() {
   return (
@@ -15,90 +23,211 @@ export default function SettingsBlock() {
         </p>
       </div>
       <Separator className="my-6" />
-      
-      <div className="flex flex-col md:flex-row gap-8">
+
+      <Tabs orientation="vertical" defaultValue="profile" className="flex flex-col md:flex-row gap-8">
         <aside className="w-full md:w-64 shrink-0">
-          <nav className="flex md:flex-col gap-2 overflow-x-auto pb-4 md:pb-0">
-            <Button variant="soft" color="primary" className="justify-start whitespace-nowrap">Profile</Button>
-            <Button variant="ghost" className="justify-start whitespace-nowrap text-muted-foreground">Account</Button>
-            <Button variant="ghost" className="justify-start whitespace-nowrap text-muted-foreground">Appearance</Button>
-            <Button variant="ghost" className="justify-start whitespace-nowrap text-muted-foreground">Notifications</Button>
-            <Button variant="ghost" className="justify-start whitespace-nowrap text-muted-foreground">Display</Button>
-          </nav>
+          <TabsList className="flex md:flex-col justify-start h-auto bg-transparent p-0 gap-2 w-full">
+            <TabsTrigger value="profile" className="w-full justify-start">Profile</TabsTrigger>
+            <TabsTrigger value="appearance" className="w-full justify-start">Appearance</TabsTrigger>
+            <TabsTrigger value="notifications" className="w-full justify-start">Notifications</TabsTrigger>
+            <TabsTrigger value="advanced" className="w-full justify-start">Advanced</TabsTrigger>
+          </TabsList>
         </aside>
 
-        <div className="flex-1 space-y-6">
-          <div className="space-y-4">
-            <h3 className="text-xl font-medium">Profile</h3>
-            <p className="text-sm text-muted-foreground">
-              This is how others will see you on the site.
-            </p>
-          </div>
-          <Separator />
-          
-          <div className="space-y-8">
-            <div className="space-y-2">
-              <Label htmlFor="username">Username</Label>
-              <Input id="username" placeholder="gladvn" defaultValue="johndoe" />
-              <p className="text-[13px] text-muted-foreground">
-                This is your public display name. It can be your real name or a pseudonym.
-              </p>
+        <div className="flex-1">
+          {/* PROFILE TAB */}
+          <TabsContent value="profile" className="mt-0">
+            <div className="space-y-4">
+              <h3 className="text-xl font-medium">Profile</h3>
+              <p className="text-sm text-muted-foreground">This is how others will see you on the site.</p>
             </div>
+            <Separator className="my-6" />
+
+            <div className="flex flex-col gap-8">
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="username">Username</Label>
+                <Input id="username" placeholder="gladvn" defaultValue="johndoe" />
+                <p className="text-[13px] text-muted-foreground">
+                  This is your public display name. It can be your real name or a pseudonym.
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Select defaultValue="m@example.com">
+                  <SelectTrigger id="email">
+                    <SelectValue placeholder="Select a verified email to display" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="m@example.com">m@example.com</SelectItem>
+                    <SelectItem value="m@google.com">m@google.com</SelectItem>
+                    <SelectItem value="m@support.com">m@support.com</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-[13px] text-muted-foreground">
+                  You can manage verified email addresses in your email settings.
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="bio">Bio</Label>
+                <Textarea
+                  id="bio"
+                  placeholder="Tell us a little bit about yourself"
+                  defaultValue="I own a computer."
+                  className="min-h-[100px]"
+                />
+                <p className="text-[13px] text-muted-foreground">
+                  You can @mention other users and organizations to link to them.
+                </p>
+              </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Select defaultValue="m@example.com">
-                <SelectTrigger id="email">
-                  <SelectValue placeholder="Select a verified email to display" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="m@example.com">m@example.com</SelectItem>
-                  <SelectItem value="m@google.com">m@google.com</SelectItem>
-                  <SelectItem value="m@support.com">m@support.com</SelectItem>
-                </SelectContent>
-              </Select>
-              <p className="text-[13px] text-muted-foreground">
-                You can manage verified email addresses in your email settings.
-              </p>
+              <Button className="w-fit">Update profile</Button>
             </div>
+          </TabsContent>
 
-            <div className="space-y-2">
-              <Label>Bio</Label>
-              <textarea 
-                className="flex w-full min-h-[100px] rounded-lg border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 resize-y"
-                placeholder="Tell us a little bit about yourself"
-                defaultValue="I own a computer."
-              />
-              <p className="text-[13px] text-muted-foreground">
-                You can @mention other users and organizations to link to them.
-              </p>
+          {/* APPEARANCE TAB */}
+          <TabsContent value="appearance" className="mt-0">
+            <div className="space-y-4">
+              <h3 className="text-xl font-medium">Appearance</h3>
+              <p className="text-sm text-muted-foreground">Customize the look and feel of the application.</p>
             </div>
-            
-            <div className="space-y-4 pt-4">
+            <Separator className="my-6" />
+
+            <div className="flex flex-col gap-8">
+              <div className="flex flex-col gap-4">
+                <Label>Theme Preference</Label>
+                <RadioGroup defaultValue="light" className="flex flex-col gap-3">
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="light" id="theme-light" />
+                    <Label htmlFor="theme-light" className="font-normal cursor-pointer">Light Theme</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="dark" id="theme-dark" />
+                    <Label htmlFor="theme-dark" className="font-normal cursor-pointer">Dark Theme</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="system" id="theme-system" />
+                    <Label htmlFor="theme-system" className="font-normal cursor-pointer">System Default</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center gap-2">
+                  <Label>Interface Scale</Label>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger render={<InfoIcon className="size-4 text-muted-foreground" />} />
+                      <TooltipContent>Adjusts the overall size of UI elements</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+                <div className="py-2 px-1">
+                  <Slider defaultValue={50}>
+                    <SliderControl>
+                      <SliderTrack>
+                        <SliderIndicator />
+                      </SliderTrack>
+                      <SliderThumb />
+                    </SliderControl>
+                  </Slider>
+                </div>
+                <p className="text-[13px] text-muted-foreground text-right">Medium (100%)</p>
+              </div>
+
+              <Button className="w-fit">Save preferences</Button>
+            </div>
+          </TabsContent>
+
+          {/* NOTIFICATIONS TAB */}
+          <TabsContent value="notifications" className="mt-0">
+            <div className="space-y-4">
+              <h3 className="text-xl font-medium">Notifications</h3>
+              <p className="text-sm text-muted-foreground">Configure how you receive alerts.</p>
+            </div>
+            <Separator className="my-6" />
+
+            <div className="flex flex-col gap-4">
               <div className="flex items-center justify-between rounded-xl border border-border p-4">
-                <div className="space-y-0.5">
-                  <Label className="text-base">Marketing emails</Label>
-                  <p className="text-[13px] text-muted-foreground">
-                    Receive emails about new products, features, and more.
-                  </p>
+                <div className="flex flex-col gap-0.5">
+                  <Label htmlFor="marketing-emails" className="text-base cursor-pointer">Marketing emails</Label>
+                  <p className="text-[13px] text-muted-foreground">Receive emails about new products, features, and more.</p>
                 </div>
-                <Switch />
+                <Switch id="marketing-emails">
+                  <SwitchThumb />
+                </Switch>
               </div>
               <div className="flex items-center justify-between rounded-xl border border-border p-4">
-                <div className="space-y-0.5">
-                  <Label className="text-base">Security emails</Label>
-                  <p className="text-[13px] text-muted-foreground">
-                    Receive emails about your account activity and security.
-                  </p>
+                <div className="flex flex-col gap-0.5">
+                  <Label htmlFor="security-emails" className="text-base cursor-pointer">Security emails</Label>
+                  <p className="text-[13px] text-muted-foreground">Receive emails about your account activity and security.</p>
                 </div>
-                <Switch defaultChecked />
+                <Switch id="security-emails" defaultChecked>
+                  <SwitchThumb />
+                </Switch>
               </div>
             </div>
+          </TabsContent>
+
+          {/* ADVANCED TAB */}
+          <TabsContent value="advanced" className="mt-0">
+            <div className="space-y-4">
+              <h3 className="text-xl font-medium text-destructive">Advanced</h3>
+              <p className="text-sm text-muted-foreground">Danger zone and developer settings.</p>
+            </div>
+            <Separator className="my-6" />
+
+            <Accordion className="w-full">
+              <AccordionItem value="dev-mode">
+                <AccordionTrigger>Developer Mode</AccordionTrigger>
+                <AccordionContent>
+                  Enable advanced debugging features and API access tokens in your dashboard.
+                  <div className="mt-4">
+                    <Button variant="outline" size="sm">Generate Token</Button>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="data-export">
+                <AccordionTrigger>Export Data</AccordionTrigger>
+                <AccordionContent>
+                  Download a complete archive of all your personal data, posts, and settings in JSON format.
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+
+            <div className="mt-12 p-6 border border-destructive/20 bg-destructive/5 rounded-xl flex flex-col gap-4 items-start">
+              <div className="space-y-1">
+                <h4 className="font-semibold text-destructive">Delete Account</h4>
+                <p className="text-sm text-muted-foreground">Permanently delete your account and all associated data. This action cannot be undone.</p>
+              </div>
 
-            <Button>Update profile</Button>
-          </div>
+              <AlertDialog>
+                <AlertDialogTrigger
+                  render={
+                    <Button color="destructive">
+                      <TrashIcon className="size-4 mr-2" /> Delete Account
+                    </Button>
+                  }
+                />
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This action cannot be undone. This will permanently delete your
+                      account and remove your data from our servers.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction color="destructive">Yes, delete account</AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          </TabsContent>
         </div>
-      </div>
+      </Tabs>
     </div>
   );
 }

package/src/components/macro/field-preset.tsx

@@ -41,23 +41,20 @@ const FieldPreset = React.forwardRef<
     ref,
   ) => {
     return (
-      <div className={className} ref={ref}>
-        <div className="@container/field size-full">
-          <Field
-            className="size-full"
-            error={!!errorMessage}
-            size={size}
-            {...fieldProps}
-          >
-            {label && <FieldLabel htmlFor={htmlFor}>{label}</FieldLabel>}
-            <FieldContent>{children}</FieldContent>
-            {description && <FieldDescription>{description}</FieldDescription>}
-            {showError && errorMessage && (
-              <FieldError>{errorMessage}</FieldError>
-            )}
-          </Field>
-        </div>
-      </div>
+      <Field
+        ref={ref}
+        className={className}
+        error={!!errorMessage}
+        size={size}
+        {...fieldProps}
+      >
+        {label && <FieldLabel htmlFor={htmlFor}>{label}</FieldLabel>}
+        <FieldContent>{children}</FieldContent>
+        {description && <FieldDescription>{description}</FieldDescription>}
+        {showError && errorMessage && (
+          <FieldError>{errorMessage}</FieldError>
+        )}
+      </Field>
     );
   },
 );

package/src/components/macro/input-preset.tsx

@@ -4,7 +4,7 @@ import React, { useState } from "react";
 
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 
-import { Input, InputProps } from "../../components/micro/input";
+import { Input, type InputProps } from "../../components/micro/input";
 import {
   InputGroup,
   InputGroupAddon,

package/src/components/macro/textarea-preset.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import { Textarea, TextareaProps } from "../../components/micro/textarea";
+import { Textarea, type TextareaProps } from "../../components/micro/textarea";
 import { FieldPreset } from "./field-preset";
 
 export type TextareaPresetProps = Omit<TextareaProps, "className"> & {