Less Comments - Answer Overflow

Glad we’re talking about the same thing, my suggestion is for you to find a window manager that suits you best. For Mac the most common are from raycast, rectangle, yabai, aerospace and amethyst (last time I checked)

19 replies

TTCTheo's Typesafe Cult

•Created by Daniel Gutiérrez on 3/7/2025 in #questions

How does Theo hide the Mac's Menu Bar without occupying screen space?

19 replies

TTCTheo's Typesafe Cult

•Created by Daniel Gutiérrez on 3/7/2025 in #questions

How does Theo hide the Mac's Menu Bar without occupying screen space?

Fwiw, I currently use aerospace as I used DWM/i3 on linux for window management, I have a similar spacing to Theo with a gap of 10px https://github.com/nikitabobko/AeroSpace

19 replies

TTCTheo's Typesafe Cult

•Created by Daniel Gutiérrez on 3/7/2025 in #questions

How does Theo hide the Mac's Menu Bar without occupying screen space?

Yes, we agree on that. What I’m trying to say is the “preserved” space you see, is probably just a setting on the window manager to prevent them from growing a certain size, or have some padding around the sides.

19 replies

TTCTheo's Typesafe Cult

•Created by Daniel Gutiérrez on 3/7/2025 in #questions

How does Theo hide the Mac's Menu Bar without occupying screen space?

From what I saw in the clip, the menu bar appears on top of Arc, so that’s just the default behavior from setting “Automatically hide and show the menu bar” to always in the control center. However, if you are talking about the apps windows resizing, he mentioned rectangle, which is a (basic) window manager for Mac https://rectangleapp.com/

19 replies

TTCTheo's Typesafe Cult

•Created by Less on 9/2/2023 in #questions

Context on middleware always undefined

Not really, I ended up not using the middleware and checking for the session data with the public procedure.

6 replies

TTCTheo's Typesafe Cult

•Created by Less on 9/2/2023 in #questions

Context on middleware always undefined

Also, changing the check for if (typeof ctx === "undefined") { will throw the UNAUTHORIZED error.

6 replies

TTCTheo's Typesafe Cult

•Created by Less on 9/2/2023 in #questions

Context on middleware always undefined

If I comment the check for a session, I can confirm it is passed down correctly to my mutation which uses the protectedProcedure.

6 replies

TTCTheo's Typesafe Cult

•Created by Lumberjack on 9/1/2023 in #questions

shadcn Form

But in my opinion, it would be much easier to just have one form, and change only the inputs of the form on each step. That way, the form will have the data when the user hits cancel, shouldn't require any extra code.

9 replies

TTCTheo's Typesafe Cult

•Created by Lumberjack on 9/1/2023 in #questions

shadcn Form

you're handling with multiple forms, you must be using multiple uses of useForm, in that case, if you're removing the entire form between each step, you can save that form data using local storage and on hit cancel, you get that data from local storage and set to the form.

9 replies

TTCTheo's Typesafe Cult

•Created by 'tonyyprints' on 8/31/2023 in #questions

Discord not signing in

Did you create an app on discord and add the right id and secret to the .env file?

9 replies

TTCTheo's Typesafe Cult

•Created by Lumberjack on 9/1/2023 in #questions

shadcn Form

If I understand what you're trying to achieve, you want a multi step form, there are multiple ways of doing it, by changing routes within a layout, using only one form provider and rendering each step according to some state. This is a simple example generated by chatgpt

import { useState } from 'react';
import { useForm } from 'react-hook-form';

const MultiStepForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState({});

  const onSubmit = (data) => {
    // You can handle form submission here, e.g., send data to the server
    console.log('Form Data:', data);
  };

  const nextStep = () => {
    setCurrentStep(currentStep + 1);
  };

  const prevStep = () => {
    setCurrentStep(currentStep - 1);
  };

  const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <div>
            <label htmlFor="Nom">Nom</label>
            <input
              {...register('Nom')}
              type="text"
              id="Nom"
              placeholder="John"
              className={` ${
                errors.Nom && "border-err placeholder:text-destructives"
              } text-md py-5 placeholder:opacity-40 rounded-sm border-[3px]`}
            />
          </div>
        );

      // Add more cases for other form steps

      default:
        return null;
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>Step {currentStep}</h2>
      {renderStep()}

      <div>
        {currentStep > 1 && (
          <button type="button" onClick={prevStep}>
            Previous
          </button>
        )}
        {currentStep < totalSteps && (
          <button type="button" onClick={nextStep}>
            Next
          </button>
        )}
        {currentStep === totalSteps && (
          <button type="submit">Submit</button>
        )}
      </div>
    </form>
  );
};

export default MultiStepForm;

import { useState } from 'react';
import { useForm } from 'react-hook-form';

const MultiStepForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState({});

  const onSubmit = (data) => {
    // You can handle form submission here, e.g., send data to the server
    console.log('Form Data:', data);
  };

  const nextStep = () => {
    setCurrentStep(currentStep + 1);
  };

  const prevStep = () => {
    setCurrentStep(currentStep - 1);
  };

  const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <div>
            <label htmlFor="Nom">Nom</label>
            <input
              {...register('Nom')}
              type="text"
              id="Nom"
              placeholder="John"
              className={` ${
                errors.Nom && "border-err placeholder:text-destructives"
              } text-md py-5 placeholder:opacity-40 rounded-sm border-[3px]`}
            />
          </div>
        );

      // Add more cases for other form steps

      default:
        return null;
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>Step {currentStep}</h2>
      {renderStep()}

      <div>
        {currentStep > 1 && (
          <button type="button" onClick={prevStep}>
            Previous
          </button>
        )}
        {currentStep < totalSteps && (
          <button type="button" onClick={nextStep}>
            Next
          </button>
        )}
        {currentStep === totalSteps && (
          <button type="submit">Submit</button>
        )}
      </div>
    </form>
  );
};

export default MultiStepForm;

9 replies

TTCTheo's Typesafe Cult

•Created by Ayush Goyal on 9/1/2023 in #questions

React query Refetching on page change

what you're probably looking for is query invalidation https://tanstack.com/query/v4/docs/react/guides/query-invalidation you can also use the refetchOnMount: "always" so it will force a refetch on mount even if data is not stale (not marked as invalid)

3 replies

TTCTheo's Typesafe Cult

•Created by Omar-7ioo on 9/1/2023 in #questions

Zod overrides react-hook-form validation

And as you mentioned you can make it required based on api response, you can use a discriminated union to make things required depending on some data from the api https://zod.dev/?id=discriminated-unions

8 replies

TTCTheo's Typesafe Cult

•Created by Omar-7ioo on 9/1/2023 in #questions

Zod overrides react-hook-form validation

Zod is your validation, so if you want things to be required, they have to be done on the schema. Or at least you can create a required version of that schema by calling .required();

const requiredTrendyolFormScheme = trendyolFormScheme.required();

const requiredTrendyolFormScheme = trendyolFormScheme.required();

https://zod.dev/?id=required

8 replies

TtRPC

•Created by johste on 8/30/2023 in #❓-help

Need help identifying the generic client side type of procedures

I'm not sure what you're trying to do, but if you're trying to get the type for subscribe, you can use the inferRouterInputs

/**
 * Inference helper for inputs.
 *
 * @example type HelloInput = RouterInputs['example']['hello']
 */
export type RouterInputs = inferRouterInputs<AppRouter>;

/**
 * Inference helper for outputs.
 *
 * @example type HelloOutput = RouterOutputs['example']['hello']
 */
export type RouterOutputs = inferRouterOutputs<AppRouter>;

/**
 * Inference helper for inputs.
 *
 * @example type HelloInput = RouterInputs['example']['hello']
 */
export type RouterInputs = inferRouterInputs<AppRouter>;

/**
 * Inference helper for outputs.
 *
 * @example type HelloOutput = RouterOutputs['example']['hello']
 */
export type RouterOutputs = inferRouterOutputs<AppRouter>;

3 replies

Gaming

Programming