Move modals and rename classes to match file names (#1367)

## Launch Checklist

I've created a folder for modals and moved them all inside.
I removed the icons which were small files with no real benefit and
moved the icons to where they were used.
I fixed an issue with the close button position in modal.
I've added missing translation to "Links" in debug modal.

Before: 

<img width="610" height="81" alt="image"
src="https://github.com/user-attachments/assets/dd7520f6-9634-4ff1-a83d-99ceae7c9144"
/>

After:
<img width="610" height="81" alt="image"
src="https://github.com/user-attachments/assets/fe3a2ccf-6c09-42ab-bf6f-dd30d3c68e13"
/>


 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [ ] Add an entry to `CHANGELOG.md` under the `## main` section.

src/components/FieldSpec.tsx

@@ -0,0 +1,43 @@
+import Block from './Block'
+import InputSpec, { InputSpecProps } from './InputSpec'
+import Fieldset from './Fieldset'
+
+
+const typeMap = {
+  color: () => Block,
+  enum: ({fieldSpec}: any) => (Object.keys(fieldSpec.values).length <= 3 ? Fieldset : Block),
+  boolean: () => Block,
+  array: () => Fieldset,
+  resolvedImage: () => Block,
+  number: () => Block,
+  string: () => Block,
+  formatted: () => Block,
+  padding: () => Block,
+};
+
+export type FieldSpecProps = InputSpecProps & {
+  name?: string
+};
+
+const FieldSpec: React.FC<FieldSpecProps> = (props) => {
+  const fieldType = props.fieldSpec?.type;
+
+  const typeBlockFn = typeMap[fieldType!];
+
+  let TypeBlock;
+  if (typeBlockFn) {
+    TypeBlock = typeBlockFn(props);
+  }
+  else {
+    console.warn("No such type for '%s'", fieldType);
+    TypeBlock = Block;
+  }
+
+  return (
+    <TypeBlock label={props.label} action={props.action} fieldSpec={props.fieldSpec}>
+      <InputSpec {...props} />
+    </TypeBlock>
+  );
+};
+
+export default FieldSpec;